@skyscanner/backpack-web 9.2.0-beta.1 → 9.2.0

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

@@ -19,12 +19,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { startOfDay, startOfMonth } from 'date-fns';
-import {
-  AutoSizer,
-  List,
-  CellMeasurer,
-  CellMeasurerCache,
-} from 'react-virtualized';
+import { VariableSizeList as List } from 'react-window';
 
 import { cssModules, deprecated } from '../../bpk-react-utils';
 import {
@@ -34,16 +29,24 @@ import {
 
 import STYLES from './BpkScrollableCalendarGridList.module.scss';
 import BpkScrollableCalendarGrid from './BpkScrollableCalendarGrid';
-import getMonthsArray from './utils';
+import { getMonthsArray, getMonthItemHeights } from './utils';
 
 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;
+// This is the additional height of each grid without any rows.
+const BASE_MONTH_ITEM_HEIGHT = 130;
+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 React.Component {
   constructor(props) {
     super(props);
 
-    this.rowRenderer = this.rowRenderer.bind(this);
-    this.renderList = this.renderList.bind(this);
+    this.outerDiv = null;
 
     const startDate = startOfDay(startOfMonth(this.props.minDate));
     const endDate = startOfDay(startOfMonth(this.props.maxDate));
@@ -52,88 +55,116 @@ class BpkScrollableCalendarGridList extends React.Component {
       startDate,
     );
     const months = getMonthsArray(startDate, monthsCount);
+    const monthItemHeights = getMonthItemHeights(
+      months,
+      props.weekStartsOn,
+      COLUMN_COUNT,
+      ROW_HEIGHT,
+      BASE_MONTH_ITEM_HEIGHT,
+    );
 
-    const cache = new CellMeasurerCache({
-      fixedWidth: true,
-      defaultHeight: 276, // most common height (in px) of BpkScrollableCalendarGrid
-    });
     this.state = {
       months,
-      cache,
+      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') : {};
 
-  rowRenderer({ index, key, parent, style }) {
-    return (
-      <CellMeasurer
-        key={key}
-        cache={this.state.cache}
-        parent={parent}
-        columnIndex={0}
-        rowIndex={index}
-      >
-        <div style={style}>
-          <BpkScrollableCalendarGrid
-            onDateClick={this.props.onDateClick}
-            {...this.props}
-            key={key}
-            month={this.state.months[index]}
-            focusedDate={this.props.focusedDate}
-            preventKeyboardFocus={this.props.preventKeyboardFocus}
-            aria-hidden={index !== 1}
-            className={getClassName('bpk-scrollable-calendar-grid-list__item')}
-          />
-        </div>
-      </CellMeasurer>
-    );
-  }
+  getItemSize = (index) =>
+    this.state.monthItemHeights[index] || ESTIMATED_MONTH_ITEM_HEIGHT;
 
-  renderList(width, height, minDate, focusedDate, selectionConfiguration) {
-    const { date, startDate } = selectionConfiguration || {};
-    const selectedDate = focusedDate || date || startDate;
-    return (
-      <List
-        extraData={this.props}
-        style={this.getHtmlElement().dir === 'rtl' ? { direction: 'rtl' } : {}}
-        width={width}
-        height={height}
-        deferredMeasurementCache={this.state.cache}
-        rowHeight={this.state.cache.rowHeight}
-        rowRenderer={this.rowRenderer}
-        rowCount={this.state.months.length}
-        overscanRowCount={0}
-        scrollToIndex={
-          selectedDate
-            ? DateUtils.differenceInCalendarMonths(selectedDate, minDate)
-            : 0
-        }
+  setComponentHeight = () => {
+    const outerNode = this.outerDiv;
+    if (outerNode) {
+      const newHeight = outerNode.clientHeight;
+      this.setState({ outerHeight: newHeight });
+    } else {
+      this.setState({ outerHeight: ESTIMATED_MONTH_ITEM_HEIGHT });
+    }
+  };
+
+  rowRenderer = ({ index, style }) => (
+    <div style={style}>
+      <BpkScrollableCalendarGrid
+        onDateClick={this.props.onDateClick}
+        {...this.props}
+        month={this.state.months[index]}
+        focusedDate={this.props.focusedDate}
+        preventKeyboardFocus={this.props.preventKeyboardFocus}
+        aria-hidden={index !== 1}
+        className={getClassName('bpk-scrollable-calendar-grid-list__item')}
       />
-    );
-  }
+    </div>
+  );
+
+  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);
+    }
+    return result;
+  };
 
   render() {
     const { focusedDate, minDate, selectionConfiguration } = this.props;
+    const { date, startDate } = selectionConfiguration || {};
+    const selectedDate = focusedDate || date || startDate;
+
     return (
       <div
         className={getClassName(
           'bpk-scrollable-calendar-grid-list',
           this.props.className,
         )}
+        ref={(div) => {
+          this.outerDiv = div;
+        }}
       >
-        <AutoSizer>
-          {({ height, width }) =>
-            this.renderList(
-              width,
-              height,
-              minDate,
-              focusedDate,
-              selectionConfiguration,
-            )
+        <List
+          extraData={this.props}
+          style={
+            this.getHtmlElement().dir === 'rtl' ? { direction: 'rtl' } : {}
           }
-        </AutoSizer>
+          width="100%"
+          height={this.state.outerHeight}
+          estimatedItemSize={ESTIMATED_MONTH_ITEM_HEIGHT}
+          itemSize={this.getItemSize}
+          itemCount={this.state.months.length}
+          rowCount={this.state.months.length}
+          overscanCount={1}
+          initialScrollOffset={this.calculateOffsetInPixels(
+            selectedDate
+              ? DateUtils.differenceInCalendarMonths(selectedDate, minDate)
+              : 0,
+          )}
+        >
+          {this.rowRenderer}
+        </List>
       </div>
     );
   }

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

@@ -27,4 +27,27 @@ const getMonthsArray = (startDate, count) => {
 
   return months;
 };
-export default getMonthsArray;
+
+// Here we calculate the height of each calendar grid item in pixels, as the `react-window` API
+// requires that these are provided so that they can be efficiently rendered.
+const getMonthItemHeights = (
+  months,
+  weekStartsOn,
+  columnCount,
+  rowHeight,
+  baseMonthItemHeight,
+) => {
+  const monthItemHeights = months.map((month) => {
+    const firstDayOffset = (month.getDay() + 7 - weekStartsOn) % 7;
+    const monthLength = DateUtils.daysInMonth(
+      month.getYear(),
+      month.getMonth(),
+    );
+    const calendarGridSpaces = firstDayOffset + monthLength;
+    const rowCount = Math.ceil(calendarGridSpaces / columnCount);
+    return baseMonthItemHeight + rowHeight * rowCount;
+  });
+  return monthItemHeights;
+};
+
+export { getMonthsArray, getMonthItemHeights };

package/bpk-component-section-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-section-list",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Backpack section list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
-    "bpk-component-icon": "^10.0.1",
-    "bpk-component-text": "^8.0.1",
-    "bpk-mixins": "^31.4.0",
+    "@skyscanner/bpk-foundations-web": "^9.0.0",
+    "bpk-component-icon": "^10.0.2",
+    "bpk-component-text": "^8.0.2",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.1"
+    "bpk-storybook-utils": "^2.0.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-select",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "Backpack select component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.1"
+    "bpk-storybook-utils": "^2.0.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-skip-link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-skip-link",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Backpack skip-link component.",
   "main": "index.js",
   "repository": {
@@ -13,7 +13,7 @@
     "react": "^17.0.2"
   },
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.5.8"
   },

package/bpk-component-slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-slider",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Backpack slider component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
-    "bpk-mixins": "^31.4.0",
+    "@skyscanner/bpk-foundations-web": "^9.0.0",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2",
     "react-slider": "^1.3.1"
@@ -24,6 +24,6 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-rtl-toggle": "^4.0.1"
+    "bpk-component-rtl-toggle": "^4.0.2"
   }
 }

package/bpk-component-spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-spinner",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "Backpack spinner components.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-svgs": "^14.3.6",
-    "bpk-mixins": "^31.4.0",
+    "@skyscanner/bpk-svgs": "^14.3.8",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-split-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-split-input",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Backpack split-input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,8 +13,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-input": "^7.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-input": "^7.0.2",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.5.8"
   },

package/bpk-component-star-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-star-rating",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Backpack rating star component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-icon": "^10.0.2",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,7 +23,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-table": "^4.0.1",
-    "bpk-storybook-utils": "^2.0.1"
+    "bpk-component-table": "^4.0.2",
+    "bpk-storybook-utils": "^2.0.2"
   }
 }

package/bpk-component-switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-switch",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Backpack switch component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.5.8"
   },

package/bpk-component-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-table",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Backpack table component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-text",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Backpack text component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-textarea/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-textarea",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Backpack textarea component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-label": "^6.0.1",
-    "bpk-storybook-utils": "^2.0.1"
+    "bpk-component-label": "^6.0.2",
+    "bpk-storybook-utils": "^2.0.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-theme-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-theme-toggle",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Backpack theme toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
-    "bpk-component-label": "^6.0.1",
-    "bpk-component-select": "^6.0.1",
-    "bpk-mixins": "^31.4.0",
+    "@skyscanner/bpk-foundations-web": "^9.0.0",
+    "bpk-component-label": "^6.0.2",
+    "bpk-component-select": "^6.0.2",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-ticket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-ticket",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "Backpack ticket component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -22,7 +22,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.1",
-    "bpk-component-icon": "^10.0.1"
+    "bpk-component-button": "^7.0.2",
+    "bpk-component-icon": "^10.0.2"
   }
 }

package/bpk-component-tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-tooltip",
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "Backpack tooltip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@popperjs/core": "^2.11.5",
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,7 +23,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
-    "bpk-component-text": "^8.0.1"
+    "@skyscanner/bpk-foundations-web": "^9.0.0",
+    "bpk-component-text": "^8.0.2"
   }
 }

package/bpk-scrim-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-scrim-utils",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "Higher order component that adds an overlay behind components and manages scroll states.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0"
   },
   "peerDependencies": {

package/bpk-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-theming",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Backpack theming utlities.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "c2217d61875a1f3aa2bb9ed9583c50e3f1523501",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
+    "@skyscanner/bpk-foundations-web": "^9.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "9.2.0-beta.1",
+  "version": "9.2.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,11 +24,11 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
-    "@skyscanner/bpk-svgs": "^14.3.6",
+    "@skyscanner/bpk-foundations-web": "^9.0.0",
+    "@skyscanner/bpk-svgs": "^14.3.8",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.5.0",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",
@@ -42,7 +42,8 @@
     "react-responsive": "^6.1.2",
     "react-slider": "^1.3.1",
     "react-transition-group": "^2.5.3",
-    "react-virtualized": "^9.22.3"
+    "react-virtualized": "^9.22.3",
+    "react-window": "^1.8.7"
   },
   "peerDependencies": {
     "react": "^17.0.2"