@skyscanner/backpack-web 28.1.0 → 28.1.1

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

@@ -20,7 +20,7 @@
 declare const _default: {
     new (props: Omit<{
         changeMonthLabel?: string | null | undefined;
-        daysOfWeek: import("../../bpk-component-calendar/src/custom-proptypes").DaysOfWeek;
+        daysOfWeek: import("../../bpk-component-calendar").DaysOfWeek;
         formatDateFull: (date: Date) => string | Date;
         formatMonth: (date: Date) => string | Date;
         id: string;
@@ -43,7 +43,7 @@ declare const _default: {
         onDateClick?: ((date: Date) => void) | null | undefined;
         onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
         preventKeyboardFocus?: boolean | undefined;
-        selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+        selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
         gridClassName?: string | null | undefined;
         weekDayKey?: string | undefined;
         navProps?: {} | null | undefined;
@@ -59,18 +59,22 @@ declare const _default: {
             month: Date;
             source: string;
         }) => void) | null | undefined;
-        selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+        selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
         initiallyFocusedDate?: Date | null | undefined;
+        markToday?: boolean | undefined;
+        markOutsideDays?: boolean | undefined;
     }, keyof {
         onDateClick: ((date: Date) => void) | null;
         onDateKeyDown: ((event: KeyboardEvent) => void) | null;
         month: Date;
+        minDate: Date;
+        maxDate: Date;
     }> & {
         [rest: string]: any;
     }): {
         UNSAFE_componentWillReceiveProps(nextProps: Omit<{
             changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("../../bpk-component-calendar/src/custom-proptypes").DaysOfWeek;
+            daysOfWeek: import("../../bpk-component-calendar").DaysOfWeek;
             formatDateFull: (date: Date) => string | Date;
             formatMonth: (date: Date) => string | Date;
             id: string;
@@ -93,7 +97,7 @@ declare const _default: {
             onDateClick?: ((date: Date) => void) | null | undefined;
             onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
             preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             gridClassName?: string | null | undefined;
             weekDayKey?: string | undefined;
             navProps?: {} | null | undefined;
@@ -109,12 +113,16 @@ declare const _default: {
                 month: Date;
                 source: string;
             }) => void) | null | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             initiallyFocusedDate?: Date | null | undefined;
+            markToday?: boolean | undefined;
+            markOutsideDays?: boolean | undefined;
         }, keyof {
             onDateClick: ((date: Date) => void) | null;
             onDateKeyDown: ((event: KeyboardEvent) => void) | null;
             month: Date;
+            minDate: Date;
+            maxDate: Date;
         }> & {
             [rest: string]: any;
         }): void;
@@ -141,7 +149,7 @@ declare const _default: {
             focusedDate: Date;
         }>, props: Readonly<Omit<{
             changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("../../bpk-component-calendar/src/custom-proptypes").DaysOfWeek;
+            daysOfWeek: import("../../bpk-component-calendar").DaysOfWeek;
             formatDateFull: (date: Date) => string | Date;
             formatMonth: (date: Date) => string | Date;
             id: string;
@@ -164,7 +172,7 @@ declare const _default: {
             onDateClick?: ((date: Date) => void) | null | undefined;
             onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
             preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             gridClassName?: string | null | undefined;
             weekDayKey?: string | undefined;
             navProps?: {} | null | undefined;
@@ -180,12 +188,16 @@ declare const _default: {
                 month: Date;
                 source: string;
             }) => void) | null | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             initiallyFocusedDate?: Date | null | undefined;
+            markToday?: boolean | undefined;
+            markOutsideDays?: boolean | undefined;
         }, keyof {
             onDateClick: ((date: Date) => void) | null;
             onDateKeyDown: ((event: KeyboardEvent) => void) | null;
             month: Date;
+            minDate: Date;
+            maxDate: Date;
         }> & {
             [rest: string]: any;
         }>) => {
@@ -201,7 +213,7 @@ declare const _default: {
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<Omit<{
             changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("../../bpk-component-calendar/src/custom-proptypes").DaysOfWeek;
+            daysOfWeek: import("../../bpk-component-calendar").DaysOfWeek;
             formatDateFull: (date: Date) => string | Date;
             formatMonth: (date: Date) => string | Date;
             id: string;
@@ -224,7 +236,7 @@ declare const _default: {
             onDateClick?: ((date: Date) => void) | null | undefined;
             onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
             preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             gridClassName?: string | null | undefined;
             weekDayKey?: string | undefined;
             navProps?: {} | null | undefined;
@@ -240,12 +252,16 @@ declare const _default: {
                 month: Date;
                 source: string;
             }) => void) | null | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             initiallyFocusedDate?: Date | null | undefined;
+            markToday?: boolean | undefined;
+            markOutsideDays?: boolean | undefined;
         }, keyof {
             onDateClick: ((date: Date) => void) | null;
             onDateKeyDown: ((event: KeyboardEvent) => void) | null;
             month: Date;
+            minDate: Date;
+            maxDate: Date;
         }> & {
             [rest: string]: any;
         }> & Readonly<{
@@ -261,7 +277,7 @@ declare const _default: {
         componentDidMount?(): void;
         shouldComponentUpdate?(nextProps: Readonly<Omit<{
             changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("../../bpk-component-calendar/src/custom-proptypes").DaysOfWeek;
+            daysOfWeek: import("../../bpk-component-calendar").DaysOfWeek;
             formatDateFull: (date: Date) => string | Date;
             formatMonth: (date: Date) => string | Date;
             id: string;
@@ -284,7 +300,7 @@ declare const _default: {
             onDateClick?: ((date: Date) => void) | null | undefined;
             onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
             preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             gridClassName?: string | null | undefined;
             weekDayKey?: string | undefined;
             navProps?: {} | null | undefined;
@@ -300,12 +316,16 @@ declare const _default: {
                 month: Date;
                 source: string;
             }) => void) | null | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             initiallyFocusedDate?: Date | null | undefined;
+            markToday?: boolean | undefined;
+            markOutsideDays?: boolean | undefined;
         }, keyof {
             onDateClick: ((date: Date) => void) | null;
             onDateKeyDown: ((event: KeyboardEvent) => void) | null;
             month: Date;
+            minDate: Date;
+            maxDate: Date;
         }> & {
             [rest: string]: any;
         }>, nextState: Readonly<{
@@ -316,7 +336,7 @@ declare const _default: {
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<{
             changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("../../bpk-component-calendar/src/custom-proptypes").DaysOfWeek;
+            daysOfWeek: import("../../bpk-component-calendar").DaysOfWeek;
             formatDateFull: (date: Date) => string | Date;
             formatMonth: (date: Date) => string | Date;
             id: string;
@@ -339,7 +359,7 @@ declare const _default: {
             onDateClick?: ((date: Date) => void) | null | undefined;
             onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
             preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             gridClassName?: string | null | undefined;
             weekDayKey?: string | undefined;
             navProps?: {} | null | undefined;
@@ -355,12 +375,16 @@ declare const _default: {
                 month: Date;
                 source: string;
             }) => void) | null | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             initiallyFocusedDate?: Date | null | undefined;
+            markToday?: boolean | undefined;
+            markOutsideDays?: boolean | undefined;
         }, keyof {
             onDateClick: ((date: Date) => void) | null;
             onDateKeyDown: ((event: KeyboardEvent) => void) | null;
             month: Date;
+            minDate: Date;
+            maxDate: Date;
         }> & {
             [rest: string]: any;
         }>, prevState: Readonly<{
@@ -369,7 +393,7 @@ declare const _default: {
         }>): any;
         componentDidUpdate?(prevProps: Readonly<Omit<{
             changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("../../bpk-component-calendar/src/custom-proptypes").DaysOfWeek;
+            daysOfWeek: import("../../bpk-component-calendar").DaysOfWeek;
             formatDateFull: (date: Date) => string | Date;
             formatMonth: (date: Date) => string | Date;
             id: string;
@@ -392,7 +416,7 @@ declare const _default: {
             onDateClick?: ((date: Date) => void) | null | undefined;
             onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
             preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             gridClassName?: string | null | undefined;
             weekDayKey?: string | undefined;
             navProps?: {} | null | undefined;
@@ -408,12 +432,16 @@ declare const _default: {
                 month: Date;
                 source: string;
             }) => void) | null | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             initiallyFocusedDate?: Date | null | undefined;
+            markToday?: boolean | undefined;
+            markOutsideDays?: boolean | undefined;
         }, keyof {
             onDateClick: ((date: Date) => void) | null;
             onDateKeyDown: ((event: KeyboardEvent) => void) | null;
             month: Date;
+            minDate: Date;
+            maxDate: Date;
         }> & {
             [rest: string]: any;
         }>, prevState: Readonly<{
@@ -424,7 +452,7 @@ declare const _default: {
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<Omit<{
             changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("../../bpk-component-calendar/src/custom-proptypes").DaysOfWeek;
+            daysOfWeek: import("../../bpk-component-calendar").DaysOfWeek;
             formatDateFull: (date: Date) => string | Date;
             formatMonth: (date: Date) => string | Date;
             id: string;
@@ -447,7 +475,7 @@ declare const _default: {
             onDateClick?: ((date: Date) => void) | null | undefined;
             onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
             preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             gridClassName?: string | null | undefined;
             weekDayKey?: string | undefined;
             navProps?: {} | null | undefined;
@@ -463,18 +491,22 @@ declare const _default: {
                 month: Date;
                 source: string;
             }) => void) | null | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             initiallyFocusedDate?: Date | null | undefined;
+            markToday?: boolean | undefined;
+            markOutsideDays?: boolean | undefined;
         }, keyof {
             onDateClick: ((date: Date) => void) | null;
             onDateKeyDown: ((event: KeyboardEvent) => void) | null;
             month: Date;
+            minDate: Date;
+            maxDate: Date;
         }> & {
             [rest: string]: any;
         }>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<Omit<{
             changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("../../bpk-component-calendar/src/custom-proptypes").DaysOfWeek;
+            daysOfWeek: import("../../bpk-component-calendar").DaysOfWeek;
             formatDateFull: (date: Date) => string | Date;
             formatMonth: (date: Date) => string | Date;
             id: string;
@@ -497,7 +529,7 @@ declare const _default: {
             onDateClick?: ((date: Date) => void) | null | undefined;
             onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
             preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             gridClassName?: string | null | undefined;
             weekDayKey?: string | undefined;
             navProps?: {} | null | undefined;
@@ -513,12 +545,16 @@ declare const _default: {
                 month: Date;
                 source: string;
             }) => void) | null | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             initiallyFocusedDate?: Date | null | undefined;
+            markToday?: boolean | undefined;
+            markOutsideDays?: boolean | undefined;
         }, keyof {
             onDateClick: ((date: Date) => void) | null;
             onDateKeyDown: ((event: KeyboardEvent) => void) | null;
             month: Date;
+            minDate: Date;
+            maxDate: Date;
         }> & {
             [rest: string]: any;
         }>, nextState: Readonly<{
@@ -527,7 +563,7 @@ declare const _default: {
         }>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<{
             changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("../../bpk-component-calendar/src/custom-proptypes").DaysOfWeek;
+            daysOfWeek: import("../../bpk-component-calendar").DaysOfWeek;
             formatDateFull: (date: Date) => string | Date;
             formatMonth: (date: Date) => string | Date;
             id: string;
@@ -550,7 +586,7 @@ declare const _default: {
             onDateClick?: ((date: Date) => void) | null | undefined;
             onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
             preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             gridClassName?: string | null | undefined;
             weekDayKey?: string | undefined;
             navProps?: {} | null | undefined;
@@ -566,12 +602,16 @@ declare const _default: {
                 month: Date;
                 source: string;
             }) => void) | null | undefined;
-            selectionConfiguration?: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfiguration | undefined;
+            selectionConfiguration?: import("../../bpk-component-calendar").SelectionConfiguration | undefined;
             initiallyFocusedDate?: Date | null | undefined;
+            markToday?: boolean | undefined;
+            markOutsideDays?: boolean | undefined;
         }, keyof {
             onDateClick: ((date: Date) => void) | null;
             onDateKeyDown: ((event: KeyboardEvent) => void) | null;
             month: Date;
+            minDate: Date;
+            maxDate: Date;
         }> & {
             [rest: string]: any;
         }>, nextState: Readonly<{
@@ -590,6 +630,8 @@ declare const _default: {
             date: null;
         };
         initiallyFocusedDate: null;
+        markToday: boolean;
+        markOutsideDays: boolean;
     };
     contextType?: import("react").Context<any> | undefined;
 };

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

@@ -16,17 +16,12 @@
  * limitations under the License.
  */
 
-import { PureComponent } from 'react';
+/// <reference types="react" />
 import type { BpkCalendarDateProps } from '../../bpk-component-calendar';
 type Props = Partial<BpkCalendarDateProps> & {
     date: Date;
     isOutside?: boolean;
     [rest: string]: any;
 };
-declare class BpkScrollableCalendarDate extends PureComponent<Props> {
-    static defaultProps: {
-        isOutside: boolean;
-    };
-    render(): JSX.Element | null;
-}
+declare const BpkScrollableCalendarDate: ({ isOutside, ...rest }: Props) => JSX.Element | null;
 export default BpkScrollableCalendarDate;

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.js

@@ -16,22 +16,14 @@
  * limitations under the License.
  */
 
-import { PureComponent } from 'react';
 import { BpkCalendarDate } from "../../bpk-component-calendar";
 import { jsx as _jsx } from "react/jsx-runtime";
-class BpkScrollableCalendarDate extends PureComponent {
-  static defaultProps = {
-    isOutside: false
-  };
-  render() {
-    const {
-      isOutside,
-      ...rest
-    } = this.props;
-    // Returning null when isOutside is true ensures only focused month displays in grid
-    return !isOutside ? /*#__PURE__*/_jsx(BpkCalendarDate, {
-      ...rest
-    }) : null;
-  }
-}
+const BpkScrollableCalendarDate = ({
+  isOutside = false,
+  ...rest
+}) =>
+// Returning null when isOutside is true ensures only focused month displays in grid
+!isOutside ? /*#__PURE__*/_jsx(BpkCalendarDate, {
+  ...rest
+}) : null;
 export default BpkScrollableCalendarDate;

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

@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Component } from 'react';
 import type { ElementType } from 'react';
-import type { BpkCalendarGridProps } from '../../bpk-component-calendar';
+import type { BpkCalendarGridProps, SelectionConfiguration } from '../../bpk-component-calendar';
 type Props = Partial<BpkCalendarGridProps> & {
     minDate: Date;
     maxDate: Date;
@@ -28,29 +27,8 @@ type Props = Partial<BpkCalendarGridProps> & {
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     formatMonth: (date: Date) => Date | string;
     focusedDate?: Date | null;
+    selectionConfiguration?: SelectionConfiguration;
+    className?: string | null;
 };
-type State = {
-    months: Date[];
-    monthItemHeights: number[];
-    outerHeight: number;
-};
-declare class BpkScrollableCalendarGridList extends Component<Props, State> {
-    outerDiv: HTMLDivElement | null;
-    static defaultProps: {
-        className: null;
-        focusedDate: null;
-    };
-    constructor(props: Props);
-    componentDidMount: () => void;
-    componentWillUnmount: () => void;
-    getHtmlElement: () => {} | null;
-    getItemSize: (index: number) => number;
-    setComponentHeight: () => void;
-    rowRenderer: ({ index, style }: {
-        index: number;
-        style: {};
-    }) => JSX.Element;
-    calculateOffsetInPixels: (numberOfMonths: number) => number;
-    render(): JSX.Element;
-}
+declare const BpkScrollableCalendarGridList: (props: Props) => JSX.Element;
 export default BpkScrollableCalendarGridList;

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -16,10 +16,10 @@
  * limitations under the License.
  */
 
-import { Component } from 'react';
+import { useRef, useState, useMemo, useEffect } from 'react';
 import { startOfDay, startOfMonth } from 'date-fns';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { VariableSizeList as List } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import { cssModules } from "../../bpk-react-utils";
 import { CALENDAR_SELECTION_TYPE, DateUtils } from "../../bpk-component-calendar";
 import STYLES from "./BpkScrollableCalendarGridList.module.css";
@@ -28,120 +28,101 @@ import { getMonthsArray, getMonthItemHeights } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 
-// The `react-window` API requires the height in pixels to be specified.
-// These constants are here to facilitate calculating the height.
-const ROW_HEIGHT = 44;
+// These constants are here to facilitate calculating the height
+// Row and month item heights are defined in rem to support text scaling
+const ROW_HEIGHT = 2.75;
 // This is the additional height of each grid without any rows.
-const BASE_MONTH_ITEM_HEIGHT = 130;
+const BASE_MONTH_ITEM_HEIGHT = 8.125;
 const COLUMN_COUNT = 7;
-// Most calendar grids have 5 rows:
-const ESTIMATED_MONTH_ITEM_HEIGHT = BASE_MONTH_ITEM_HEIGHT + 5 * ROW_HEIGHT;
-class BpkScrollableCalendarGridList extends Component {
-  static defaultProps = {
-    // Disabling as the rule doesn't work when types are defined in a different file
-    /* eslint-disable react/default-props-match-prop-types */
-    className: null,
-    focusedDate: null
-  };
-  constructor(props) {
-    super(props);
-    this.outerDiv = null;
-    const startDate = startOfDay(startOfMonth(this.props.minDate));
-    const endDate = startOfDay(startOfMonth(this.props.maxDate));
-    const monthsCount = DateUtils.differenceInCalendarMonths(endDate, startDate);
-    const months = getMonthsArray(startDate, monthsCount);
-    const monthItemHeights = getMonthItemHeights(months, props.weekStartsOn, COLUMN_COUNT, ROW_HEIGHT, BASE_MONTH_ITEM_HEIGHT);
-    this.state = {
-      months,
-      monthItemHeights,
-      outerHeight: ESTIMATED_MONTH_ITEM_HEIGHT
-    };
-  }
-  componentDidMount() {
-    this.setComponentHeight();
-    if (typeof document !== 'undefined') {
-      window.addEventListener('resize', this.setComponentHeight);
-      document.addEventListener('orientationchange', this.setComponentHeight);
-      document.addEventListener('fullscreenchange', this.setComponentHeight);
-    }
-  }
-  componentWillUnmount() {
-    if (typeof document !== 'undefined') {
-      window.removeEventListener('resize', this.setComponentHeight);
-      document.removeEventListener('orientationchange', this.setComponentHeight);
-      document.removeEventListener('fullscreenchange', this.setComponentHeight);
-    }
-  }
-  getHtmlElement = () => typeof document !== 'undefined' ? document.querySelector('html') : {};
-  getItemSize = index => this.state.monthItemHeights[index] || ESTIMATED_MONTH_ITEM_HEIGHT;
-  setComponentHeight = () => {
-    const outerNode = this.outerDiv;
-    if (outerNode) {
-      if (outerNode.clientHeight > 0) {
-        const newHeight = outerNode.clientHeight;
-        this.setState({
-          outerHeight: newHeight
-        });
-      }
-    } else {
-      this.setState({
-        outerHeight: ESTIMATED_MONTH_ITEM_HEIGHT
-      });
+// Most browsers have by default 16px root font size
+const DEFAULT_ROOT_FONT_SIZE = 16;
+// Most calendar grids have 5 rows. Calculate height in px as this is what react-window expects.
+const ESTIMATED_MONTH_ITEM_HEIGHT = (BASE_MONTH_ITEM_HEIGHT + 5 * ROW_HEIGHT) * DEFAULT_ROOT_FONT_SIZE;
+// Minimum month item width (useful for server-side rendering. This value will be overridden with an accurate width after mounting)
+const ESTIMATED_MONTH_ITEM_WIDTH = BASE_MONTH_ITEM_HEIGHT * 7 * DEFAULT_ROOT_FONT_SIZE;
+const BpkScrollableCalendarGridList = props => {
+  const {
+    className = null,
+    focusedDate = null,
+    minDate,
+    selectionConfiguration,
+    ...rest
+  } = props;
+  const listRef = useRef(null);
+  const startDate = startOfDay(startOfMonth(minDate));
+  const endDate = startOfDay(startOfMonth(rest.maxDate));
+  const monthsCount = DateUtils.differenceInCalendarMonths(endDate, startDate);
+  const getInitialRootFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize) || DEFAULT_ROOT_FONT_SIZE;
+
+  // The `react-window` API requires the height in pixels to be specified
+  // To be able to scale text size, we use rem and then we get the root font size so that we can calculate the final value in px
+  const [rootFontSize, setRootFontSize] = useState(getInitialRootFontSize);
+  const months = useMemo(() => getMonthsArray(startDate, monthsCount), [minDate, monthsCount]);
+  const monthItemHeights = useMemo(() => getMonthItemHeights(months, rest.weekStartsOn, COLUMN_COUNT, ROW_HEIGHT * rootFontSize, BASE_MONTH_ITEM_HEIGHT * rootFontSize), [rootFontSize, months, rest.weekStartsOn]);
+  useEffect(() => {
+    // this is required by the react-window library in order to re-render the list whenever an item's size changes
+    if (listRef.current) {
+      listRef.current.resetAfterIndex(0);
     }
-  };
-  rowRenderer = ({
+  }, [monthItemHeights]);
+  const getHtmlElement = () => typeof document !== 'undefined' ? document.querySelector('html') : {};
+  const getItemSize = index => monthItemHeights[index] || ESTIMATED_MONTH_ITEM_HEIGHT;
+  const rowRenderer = ({
     index,
     style
   }) => /*#__PURE__*/_jsx("div", {
     style: style,
     children: /*#__PURE__*/_jsx(BpkScrollableCalendarGrid, {
-      onDateClick: this.props.onDateClick,
-      ...this.props,
-      month: this.state.months[index],
-      focusedDate: this.props.focusedDate,
-      preventKeyboardFocus: this.props.preventKeyboardFocus,
+      onDateClick: rest.onDateClick,
+      ...rest,
+      minDate: minDate,
+      selectionConfiguration: selectionConfiguration,
+      month: months[index],
+      focusedDate: focusedDate,
+      preventKeyboardFocus: rest.preventKeyboardFocus,
       "aria-hidden": index !== 1,
       className: getClassName('bpk-scrollable-calendar-grid-list__item')
     })
   });
-  calculateOffsetInPixels = numberOfMonths => {
+  const calculateOffsetInPixels = numberOfMonths => {
     // The `react-window` API requires the scroll offset to be provided in pixels.
     // Here we use the pre-calculated item heights to find the correct pixel offset
     let result = 0;
     for (let i = 0; i < numberOfMonths; i += 1) {
-      result += this.getItemSize(i);
+      result += getItemSize(i);
     }
     return result;
   };
-  render() {
-    const {
-      focusedDate,
-      minDate,
-      selectionConfiguration
-    } = this.props;
-    const date = selectionConfiguration?.type === CALENDAR_SELECTION_TYPE.single ? selectionConfiguration?.date : selectionConfiguration?.startDate;
-    const selectedDate = focusedDate || date;
-    return /*#__PURE__*/_jsx("div", {
-      className: getClassName('bpk-scrollable-calendar-grid-list', this.props.className),
-      ref: div => {
-        this.outerDiv = div;
-      },
-      children: /*#__PURE__*/_jsx(List, {
-        extraData: this.props,
-        style: this.getHtmlElement().dir === 'rtl' ? {
+  const onResize = () => {
+    const newRootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || DEFAULT_ROOT_FONT_SIZE;
+    setRootFontSize(newRootFontSize);
+  };
+  const date = selectionConfiguration?.type === CALENDAR_SELECTION_TYPE.single ? selectionConfiguration?.date : selectionConfiguration?.startDate;
+  const selectedDate = focusedDate || date;
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-scrollable-calendar-grid-list', className),
+    children: /*#__PURE__*/_jsx(AutoSizer, {
+      onResize: onResize,
+      defaultHeight: ESTIMATED_MONTH_ITEM_HEIGHT,
+      defaultWidth: ESTIMATED_MONTH_ITEM_WIDTH,
+      children: ({
+        height,
+        width
+      }) => /*#__PURE__*/_jsx(List, {
+        style: getHtmlElement().dir === 'rtl' ? {
           direction: 'rtl'
         } : {},
-        width: "100%",
-        height: this.state.outerHeight,
+        width: width,
+        height: height,
         estimatedItemSize: ESTIMATED_MONTH_ITEM_HEIGHT,
-        itemSize: this.getItemSize,
-        itemCount: this.state.months.length,
-        rowCount: this.state.months.length,
+        itemSize: getItemSize,
+        itemCount: months.length,
         overscanCount: 1,
-        initialScrollOffset: this.calculateOffsetInPixels(selectedDate ? DateUtils.differenceInCalendarMonths(selectedDate, minDate) : 0),
-        children: this.rowRenderer
+        initialScrollOffset: calculateOffsetInPixels(selectedDate ? DateUtils.differenceInCalendarMonths(selectedDate, minDate) : 0),
+        ref: listRef,
+        children: rowRenderer
       })
-    });
-  }
-}
+    })
+  });
+};
 export default BpkScrollableCalendarGridList;

package/package.json

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