@skyscanner/backpack-web 42.27.3 → 43.0.0

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

@@ -26,6 +26,13 @@ import composeCalendar from "./composeCalendar";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
 import { addDays, addMonths, dateToBoundaries, isAfter, isSameMonth, isSameDay, lastDayOfMonth, setMonthYear, startOfDay, startOfMonth } from "./date-utils";
 import { jsx as _jsx } from "react/jsx-runtime";
+export const DEFAULT_MARK_TODAY = true;
+export const DEFAULT_MAX_DATE = addMonths(new Date(), 12);
+export const DEFAULT_MIN_DATE = new Date();
+const DEFAULT_SELECTION_CONFIGURATION = {
+  type: CALENDAR_SELECTION_TYPE.single,
+  date: null
+};
 /**
  * Updates the current focused date
  * @param {Object} prevProps previous input properties
@@ -33,8 +40,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @returns {Boolean} if the selected date has changed
  */
 const focusedDateHasChanged = (prevProps, currentProps) => {
-  const prevSelectConfig = prevProps.selectionConfiguration;
-  const currentSelectConfig = currentProps.selectionConfiguration;
+  const prevSelectConfig = prevProps.selectionConfiguration ?? DEFAULT_SELECTION_CONFIGURATION;
+  const currentSelectConfig = currentProps.selectionConfiguration ?? DEFAULT_SELECTION_CONFIGURATION;
   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) {
@@ -88,37 +95,31 @@ const getRawSelectedDate = selectionConfig => {
 };
 const withCalendarState = Calendar => {
   class BpkCalendarContainer extends Component {
-    static defaultProps = {
-      fixedWidth: true,
-      maxDate: addMonths(new Date(), 12),
-      minDate: new Date(),
-      onDateSelect: null,
-      onMonthChange: null,
-      selectionConfiguration: {
-        type: CALENDAR_SELECTION_TYPE.single,
-        date: null
-      },
-      initiallyFocusedDate: null,
-      markToday: true,
-      markOutsideDays: true
-    };
     constructor(props) {
       super(props);
-      const minDate = startOfDay(this.props.minDate);
-      const maxDate = startOfDay(this.props.maxDate);
-      const rawSelectedDate = getRawSelectedDate(this.props.selectionConfiguration);
       const {
-        initiallyFocusedDate
+        initiallyFocusedDate = null,
+        maxDate: maxDateProp = DEFAULT_MAX_DATE,
+        minDate: minDateProp = DEFAULT_MIN_DATE,
+        selectionConfiguration = DEFAULT_SELECTION_CONFIGURATION
       } = this.props;
+      const minDate = startOfDay(minDateProp);
+      const maxDate = startOfDay(maxDateProp);
+      const rawSelectedDate = getRawSelectedDate(selectionConfiguration);
       this.state = {
         preventKeyboardFocus: true,
         focusedDate: determineFocusedDate(rawSelectedDate[0], initiallyFocusedDate, minDate, maxDate)
       };
     }
     componentDidUpdate(prevProps) {
-      const rawNextSelectedDate = getRawSelectedDate(this.props.selectionConfiguration);
-      const minDate = startOfDay(this.props.minDate);
-      const maxDate = startOfDay(this.props.maxDate);
+      const {
+        maxDate: maxDateProp = DEFAULT_MAX_DATE,
+        minDate: minDateProp = DEFAULT_MIN_DATE,
+        selectionConfiguration = DEFAULT_SELECTION_CONFIGURATION
+      } = this.props;
+      const rawNextSelectedDate = getRawSelectedDate(selectionConfiguration);
+      const minDate = startOfDay(minDateProp);
+      const maxDate = startOfDay(maxDateProp);
       if (focusedDateHasChanged(prevProps, this.props)) {
         this.setState({
           focusedDate: dateToBoundaries(rawNextSelectedDate[0], minDate, maxDate)
@@ -130,9 +131,11 @@ const withCalendarState = Calendar => {
       source
     }) => {
       const {
-        onMonthChange
+        maxDate = DEFAULT_MAX_DATE,
+        minDate = DEFAULT_MIN_DATE,
+        onMonthChange = null
       } = this.props;
-      const focusedDate = dateToBoundaries(date, startOfDay(this.props.minDate), startOfDay(this.props.maxDate));
+      const focusedDate = dateToBoundaries(date, startOfDay(minDate), startOfDay(maxDate));
       const didMonthChange = !isSameMonth(this.state.focusedDate, focusedDate);
       this.setState({
         preventKeyboardFocus: false,
@@ -148,15 +151,17 @@ const withCalendarState = Calendar => {
     };
     handleDateSelect = date => {
       const {
-        onDateSelect,
-        selectionConfiguration
+        maxDate = DEFAULT_MAX_DATE,
+        minDate = DEFAULT_MIN_DATE,
+        onDateSelect = null,
+        selectionConfiguration = DEFAULT_SELECTION_CONFIGURATION
       } = this.props;
       const keyboardFocusState = {
         preventKeyboardFocus: false
       };
       if (onDateSelect) {
-        const newDate = dateToBoundaries(date, startOfDay(this.props.minDate), startOfDay(this.props.maxDate));
-        if (selectionConfiguration && selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && (isAfter(newDate, selectionConfiguration.startDate) || isSameDay(newDate, selectionConfiguration.startDate))) {
+        const newDate = dateToBoundaries(date, startOfDay(minDate), startOfDay(maxDate));
+        if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && (isAfter(newDate, selectionConfiguration.startDate) || isSameDay(newDate, selectionConfiguration.startDate))) {
           onDateSelect(selectionConfiguration.startDate, newDate);
         } else {
           onDateSelect(newDate);
@@ -240,11 +245,15 @@ const withCalendarState = Calendar => {
     };
     render() {
       const {
-        maxDate,
-        minDate,
-        onDateSelect,
-        onMonthChange,
-        selectionConfiguration,
+        fixedWidth = true,
+        initiallyFocusedDate = null,
+        markOutsideDays = true,
+        markToday = DEFAULT_MARK_TODAY,
+        maxDate = DEFAULT_MAX_DATE,
+        minDate = DEFAULT_MIN_DATE,
+        onDateSelect = null,
+        onMonthChange = null,
+        selectionConfiguration = DEFAULT_SELECTION_CONFIGURATION,
         ...calendarProps
       } = this.props;
       const sanitisedMinDate = startOfDay(minDate);
@@ -258,6 +267,10 @@ const withCalendarState = Calendar => {
         onDateKeyDown: this.handleDateKeyDown,
         preventKeyboardFocus: this.state.preventKeyboardFocus,
         focusedDate: sanitisedFocusedDate,
+        fixedWidth: fixedWidth,
+        initiallyFocusedDate: initiallyFocusedDate,
+        markOutsideDays: markOutsideDays,
+        markToday: markToday,
         ...calendarProps,
         minDate: sanitisedMinDate,
         maxDate: sanitisedMaxDate,

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

@@ -43,7 +43,6 @@ type DefaultProps = {
     style?: {};
 };
 declare class BpkCalendarDate extends PureComponent<Props> {
-    static defaultProps: DefaultProps;
     componentDidMount(): void;
     componentDidUpdate(prevProps: Props): void;
     button: HTMLButtonElement | null;

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

@@ -36,24 +36,16 @@ export const ROW_TYPES = {
   both: 'both'
 };
 const navigatedByMonthNudger = () => document?.activeElement?.id && document.activeElement.id.indexOf('month_nudger') !== -1;
+const EMPTY_MODIFIERS = {};
+const EMPTY_STYLE = {};
+const noopKeyDown = () => {};
 class BpkCalendarDate extends PureComponent {
-  static defaultProps = {
-    className: null,
-    isBlocked: false,
-    isFocused: false,
-    isKeyboardFocusable: true,
-    isOutside: false,
-    isSelected: false,
-    isToday: false,
-    modifiers: {},
-    onClick: null,
-    onDateKeyDown: () => {},
-    preventKeyboardFocus: true,
-    selectionType: SELECTION_TYPES.none,
-    style: {}
-  };
   componentDidMount() {
-    if (!this.props.preventKeyboardFocus && this.props.isFocused) {
+    const {
+      isFocused = false,
+      preventKeyboardFocus = true
+    } = this.props;
+    if (!preventKeyboardFocus && isFocused) {
       // If we got here by clicking the nudger, don't focus this date
       if (!navigatedByMonthNudger()) {
         // Giving focus after instantiation
@@ -62,37 +54,45 @@ class BpkCalendarDate extends PureComponent {
     }
   }
   componentDidUpdate(prevProps) {
-    if (!this.props.isKeyboardFocusable || this.props.preventKeyboardFocus || navigatedByMonthNudger()) {
+    const {
+      isFocused = false,
+      isKeyboardFocusable = true,
+      preventKeyboardFocus = true
+    } = this.props;
+    const {
+      isFocused: prevIsFocused = false,
+      isKeyboardFocusable: prevIsKeyboardFocusable = true
+    } = prevProps;
+    if (!isKeyboardFocusable || preventKeyboardFocus || navigatedByMonthNudger()) {
       return;
     }
 
     // Giving focus after keyboard navigation
-    if (!prevProps.isFocused && this.props.isFocused && this.props.isKeyboardFocusable) {
+    if (!prevIsFocused && isFocused && isKeyboardFocusable) {
       this.button?.focus();
       return;
     }
 
     // Giving focus after changing months with transition
-    if (this.props.isFocused && !prevProps.isKeyboardFocusable && this.props.isKeyboardFocusable) {
+    if (isFocused && !prevIsKeyboardFocusable && isKeyboardFocusable) {
       this.button?.focus();
     }
   }
   button = null;
   render() {
     const {
-      className,
+      className = null,
       date,
-      isBlocked,
-      isFocused,
-      isKeyboardFocusable,
-      isOutside,
-      isSelected,
-      isToday,
-      modifiers,
-      onClick,
-      onDateKeyDown,
-      selectionType,
-      style,
+      isBlocked = false,
+      isFocused = false,
+      isKeyboardFocusable = true,
+      isOutside = false,
+      isSelected = false,
+      modifiers = EMPTY_MODIFIERS,
+      onClick = null,
+      onDateKeyDown = noopKeyDown,
+      selectionType = SELECTION_TYPES.none,
+      style = EMPTY_STYLE,
       ...buttonProps
     } = this.props;
     const classNames = [getClassName('bpk-calendar-date')];
@@ -121,6 +121,7 @@ class BpkCalendarDate extends PureComponent {
     }
     delete buttonProps.preventKeyboardFocus;
     delete buttonProps.isoLabel;
+    delete buttonProps.isToday;
     return /*#__PURE__*/_jsx("button", {
       type: "button",
       style: style,

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

@@ -5,26 +5,26 @@ type DefaultProps = {
     className?: string | null;
     dateModifiers?: DateModifiers;
     focusedDate?: Date | null;
-    cellClassName: string | null;
-    isKeyboardFocusable: boolean;
-    markOutsideDays: boolean;
-    markToday: boolean;
-    maxDate: Date;
-    minDate: Date;
-    onDateClick: () => void;
-    onDateKeyDown: () => void;
+    cellClassName?: string | null;
+    isKeyboardFocusable?: boolean;
+    markOutsideDays?: boolean;
+    markToday?: boolean;
+    maxDate?: Date;
+    minDate?: Date;
+    onDateClick?: () => void;
+    onDateKeyDown?: () => void;
     /**
      * A function to format a human-readable month, for example: "January 2018":
      * If you just need to quickly prototype, use the following from [`date-fns`](https://date-fns.org/docs/format#usage)
      */
-    formatMonth: (month: Date) => string;
-    preventKeyboardFocus: boolean;
+    formatMonth?: (month: Date) => string;
+    preventKeyboardFocus?: boolean;
     /**
      * An object to indicate which configuration of the calendar is being used. Choices are `single` date selection or `range` date selection.
      */
-    selectionConfiguration: SelectionConfiguration;
-    ignoreOutsideDate: boolean;
-    dateProps: {};
+    selectionConfiguration?: SelectionConfiguration;
+    ignoreOutsideDate?: boolean;
+    dateProps?: {};
 };
 export type Props = DefaultProps & {
     DateComponent: ElementType;
@@ -47,7 +47,6 @@ type State = {
     calendarMonthWeeks: DateProps[][];
 };
 declare class BpkCalendarGrid extends Component<Props, State> {
-    static defaultProps: DefaultProps;
     constructor(props: Props);
     componentDidMount(): void;
     componentDidUpdate(prevProps: Props): void;

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

@@ -32,31 +32,22 @@ import STYLES from "./BpkCalendarGrid.module.css";
 // class is applyed it should override the calendar style.
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+const EMPTY_DATE_MODIFIERS = {};
+const EMPTY_DATE_PROPS = {};
+const DEFAULT_MAX_DATE = addMonths(new Date(), 12);
+const DEFAULT_MIN_DATE = new Date();
+const DEFAULT_SELECTION_CONFIGURATION = {
+  type: CALENDAR_SELECTION_TYPE.single,
+  date: null
+};
+const noopDateClick = () => {};
+const noopDateKeyDown = () => {};
+const defaultFormatMonth = month => format(month, 'MMMM yyyy');
+
 /*
   BpkCalendarGrid - the grid representing a whole month
 */
 class BpkCalendarGrid extends Component {
-  static defaultProps = {
-    className: null,
-    dateModifiers: {},
-    focusedDate: null,
-    isKeyboardFocusable: true,
-    markOutsideDays: true,
-    markToday: true,
-    maxDate: addMonths(new Date(), 12),
-    minDate: new Date(),
-    onDateClick: () => {},
-    onDateKeyDown: () => {},
-    formatMonth: month => format(month, 'MMMM yyyy'),
-    preventKeyboardFocus: false,
-    selectionConfiguration: {
-      type: CALENDAR_SELECTION_TYPE.single,
-      date: null
-    },
-    ignoreOutsideDate: false,
-    dateProps: {},
-    cellClassName: null
-  };
   constructor(props) {
     super(props);
     this.state = {
@@ -80,23 +71,23 @@ class BpkCalendarGrid extends Component {
   render() {
     const {
       DateComponent,
-      cellClassName,
-      className,
-      dateModifiers,
-      dateProps,
-      focusedDate,
-      formatMonth,
-      ignoreOutsideDate,
-      isKeyboardFocusable,
-      markOutsideDays,
-      markToday,
-      maxDate,
-      minDate,
+      cellClassName = null,
+      className = null,
+      dateModifiers = EMPTY_DATE_MODIFIERS,
+      dateProps = EMPTY_DATE_PROPS,
+      focusedDate = null,
+      formatMonth = defaultFormatMonth,
+      ignoreOutsideDate = false,
+      isKeyboardFocusable = true,
+      markOutsideDays = true,
+      markToday = true,
+      maxDate = DEFAULT_MAX_DATE,
+      minDate = DEFAULT_MIN_DATE,
       month,
-      onDateClick,
-      onDateKeyDown,
-      preventKeyboardFocus,
-      selectionConfiguration,
+      onDateClick = noopDateClick,
+      onDateKeyDown = noopDateKeyDown,
+      preventKeyboardFocus = false,
+      selectionConfiguration = DEFAULT_SELECTION_CONFIGURATION,
       weekStartsOn
     } = this.props;
     const {

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

@@ -18,10 +18,6 @@ type DefaultProps = {
     weekDayKey?: WeekDayKey;
 };
 declare class BpkCalendarGridHeader extends PureComponent<Props> {
-    static defaultProps: {
-        className: null;
-        weekDayKey: string;
-    };
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export default BpkCalendarGridHeader;

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

@@ -40,14 +40,10 @@ const WeekDayComponent = ({
   })
 });
 class BpkCalendarGridHeader extends PureComponent {
-  static defaultProps = {
-    className: null,
-    weekDayKey: 'nameAbbr'
-  };
   render() {
     const {
-      className,
-      weekDayKey,
+      className = null,
+      weekDayKey = 'nameAbbr',
       weekStartsOn
     } = this.props;
     const daysOfWeek = orderDaysOfWeek(this.props.daysOfWeek, weekStartsOn);

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

@@ -17,11 +17,6 @@ type State = {
 };
 declare class BpkCalendarGridTransition extends Component<Props, State> {
     isTransitionEndSupported: boolean;
-    static defaultProps: {
-        className: null;
-        month: Date;
-        focusedDate: null;
-    };
     constructor(props: Props);
     componentDidUpdate(prevProps: Props): void;
     onMonthTransitionEnd(): void;

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

@@ -30,11 +30,6 @@ const transitionValues = {
 };
 const getFocusedDateForMonth = (month, currentFocusedDate, minDate, maxDate) => dateToBoundaries(setMonthYear(currentFocusedDate, month.getMonth(), month.getFullYear()), startOfDay(minDate), startOfDay(maxDate));
 class BpkCalendarGridTransition extends Component {
-  static defaultProps = {
-    className: null,
-    month: new Date(),
-    focusedDate: null
-  };
   constructor(props) {
     super(props);
     const {

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

@@ -26,7 +26,6 @@ type DefaultProps = {
     selectionConfiguration?: SelectionConfiguration;
 };
 declare class BpkCalendarWeek extends Component<Props> {
-    static defaultProps: DefaultProps;
     shouldComponentUpdate(nextProps: Props): boolean;
     render(): import("react/jsx-runtime").JSX.Element | null;
 }

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

@@ -136,8 +136,8 @@ function getSelectionType(date, selectionConfiguration, month, weekStartsOn, ign
  * @returns {Boolean} based on if the date has changed
  */
 const singleDateHandler = (props, nextProps) => {
-  const currentSelectConfig = props.selectionConfiguration;
-  const nextSelectConfig = nextProps.selectionConfiguration;
+  const currentSelectConfig = props.selectionConfiguration ?? DEFAULT_SELECTION_CONFIGURATION;
+  const nextSelectConfig = nextProps.selectionConfiguration ?? DEFAULT_SELECTION_CONFIGURATION;
   if ((nextSelectConfig.date && isSameWeek(nextSelectConfig.date, nextProps.dates[0].val, {
     weekStartsOn: nextProps.weekStartsOn
   }) || currentSelectConfig.date && isSameWeek(currentSelectConfig.date, props.dates[0].val, {
@@ -158,11 +158,11 @@ const rangeDateHandler = (props, nextProps) => {
   const {
     endDate,
     startDate
-  } = props.selectionConfiguration;
+  } = props.selectionConfiguration ?? DEFAULT_SELECTION_CONFIGURATION;
   const {
     endDate: nextEndDate,
     startDate: nextStartDate
-  } = nextProps.selectionConfiguration;
+  } = nextProps.selectionConfiguration ?? DEFAULT_SELECTION_CONFIGURATION;
   const startDateChanged = startDate && nextStartDate && !isSameDay(startDate, nextStartDate);
   const endDateChanged = endDate && nextEndDate && !isSameDay(endDate, nextEndDate);
   if (startDateChanged || endDateChanged) {
@@ -170,24 +170,16 @@ const rangeDateHandler = (props, nextProps) => {
   }
   return false;
 };
+const DEFAULT_SELECTION_CONFIGURATION = {
+  type: CALENDAR_SELECTION_TYPE.single,
+  date: null
+};
+const noop = () => {};
+
 /*
   BpkCalendarWeek - table row containing a week full of DateContainer components
 */
 class BpkCalendarWeek extends Component {
-  static defaultProps = {
-    dateProps: {},
-    focusedDate: null,
-    ignoreOutsideDate: false,
-    maxDate: null,
-    minDate: null,
-    onDateClick: () => {},
-    onDateKeyDown: () => {},
-    selectionConfiguration: {
-      type: CALENDAR_SELECTION_TYPE.single,
-      date: null
-    },
-    cellClassName: null
-  };
   shouldComponentUpdate(nextProps) {
     const shallowProps = ['DateComponent', 'dateModifiers', 'isKeyboardFocusable', 'markOutsideDays', 'markToday', 'onDateClick', 'onDateKeyDown', 'preventKeyboardFocus', 'weekStartsOn', 'dates', 'cellClassName'];
 
@@ -241,21 +233,21 @@ class BpkCalendarWeek extends Component {
   render() {
     const {
       DateComponent,
-      cellClassName,
+      cellClassName = null,
       dateModifiers,
-      dateProps,
-      focusedDate,
-      ignoreOutsideDate,
+      dateProps = {},
+      focusedDate = null,
+      ignoreOutsideDate = false,
       isKeyboardFocusable,
       markOutsideDays,
       markToday,
-      maxDate,
-      minDate,
+      maxDate = null,
+      minDate = null,
       month,
-      onDateClick,
-      onDateKeyDown,
+      onDateClick = noop,
+      onDateKeyDown = noop,
       preventKeyboardFocus,
-      selectionConfiguration,
+      selectionConfiguration = DEFAULT_SELECTION_CONFIGURATION,
       weekStartsOn
     } = this.props;
     if (ignoreOutsideDate) {

package/bpk-component-calendar/src/custom-proptypes.d.ts

@@ -25,4 +25,4 @@ export type DaysOfWeek = WeekDay[];
 export type DateModifiers = {
     [key: string]: Function;
 };
-export type ReactComponent = string | ((props: any) => ReactElement);
+export type ReactComponent = string | ((props: any) => ReactElement<any>);

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

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

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

@@ -30,7 +30,6 @@ const BpkCardListCarousel = props => {
     carouselLabel = (initiallyShownCards, childrenLength) => `Entering Carousel with ${initiallyShownCards} slides shown at a time, ${childrenLength} slides in total. Please use Pagination below with the Previous and Next buttons to navigate, or the slide dot buttons at the end to jump to slides.`,
     children,
     currentIndex,
-    initialPageIndex,
     initiallyShownCards,
     isMobile = false,
     layout,
@@ -59,8 +58,7 @@ const BpkCardListCarousel = props => {
     cardRefs,
     visibilityList,
     container: root,
-    enabled: !isMobile,
-    initialPageIndex
+    enabled: !isMobile
   });
 
   // Similar to Virtual Scrolling to improve performance

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

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

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

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