@skyscanner/backpack-web 36.4.0 → 36.5.0

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

@@ -21,6 +21,7 @@ export type Props = DefaultProps & {
 };
 type DefaultProps = {
     className?: string | null;
+    isoLabel?: string;
     isBlocked?: boolean;
     isFocused?: boolean;
     isKeyboardFocusable?: boolean;

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

@@ -120,6 +120,7 @@ class BpkCalendarDate extends PureComponent {
       classNames.push(className);
     }
     delete buttonProps.preventKeyboardFocus;
+    delete buttonProps.isoLabel;
     return /*#__PURE__*/_jsx("button", {
       type: "button",
       style: style,

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

@@ -33,12 +33,18 @@ export type Props = DefaultProps & {
      */
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 };
+export type DateProps = {
+    val: Date;
+    customLabel: string | Date;
+    isoLabel: string;
+};
 type State = {
-    calendarMonthWeeks: Date[][];
+    calendarMonthWeeks: DateProps[][];
 };
 declare class BpkCalendarGrid extends Component<Props, State> {
     static defaultProps: DefaultProps;
     constructor(props: Props);
+    componentDidMount(): void;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     render(): import("react/jsx-runtime").JSX.Element;
 }

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

@@ -18,11 +18,11 @@
 
 import { Component } from 'react';
 import { cssModules, isDeviceIos } from "../../bpk-react-utils";
+import deferCallback from "../../bpk-react-utils/src/deferCallback";
 import { addCalendarGridTransition } from "./BpkCalendarGridTransition";
 import BpkCalendarWeek from "./BpkCalendarWeek";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
-import { addMonths, formatIsoDate, getCalendarMonthWeeks, isSameMonth } from "./date-utils";
-import { memoize } from "./utils";
+import { addMonths, getCalendar, getCalendarNoCustomLabel, isSameMonth } from "./date-utils";
 import STYLES from "./BpkCalendarGrid.module.css";
 
 // This should be imported after `./BpkCalendarGrid.module.css`.
@@ -59,17 +59,22 @@ class BpkCalendarGrid extends Component {
   };
   constructor(props) {
     super(props);
-
-    // We cache expensive calculations (and identities) in state
     this.state = {
-      calendarMonthWeeks: getCalendarMonthWeeks(props.month, props.weekStartsOn)
+      // Do not run expensive date formatting in the constructor
+      calendarMonthWeeks: getCalendarNoCustomLabel(props.month, props.weekStartsOn)
     };
   }
+  componentDidMount() {
+    // Defer expensive date formatting until after render to improve INP.
+    deferCallback(() => this.setState({
+      calendarMonthWeeks: getCalendar(this.props.month, this.props.weekStartsOn, this.props.formatDateFull)
+    }));
+  }
   UNSAFE_componentWillReceiveProps(nextProps) {
     // We cache expensive calculations (and identities) in state
     if (!isSameMonth(nextProps.month, this.props.month) || nextProps.weekStartsOn !== this.props.weekStartsOn) {
       this.setState({
-        calendarMonthWeeks: getCalendarMonthWeeks(nextProps.month, nextProps.weekStartsOn)
+        calendarMonthWeeks: getCalendar(nextProps.month, nextProps.weekStartsOn, nextProps.formatDateFull)
       });
     }
   }
@@ -81,7 +86,6 @@ class BpkCalendarGrid extends Component {
       dateModifiers,
       dateProps,
       focusedDate,
-      formatDateFull,
       ignoreOutsideDate,
       isKeyboardFocusable,
       markOutsideDays,
@@ -108,7 +112,6 @@ class BpkCalendarGrid extends Component {
           dates: dates,
           onDateClick: onDateClick,
           onDateKeyDown: onDateKeyDown,
-          formatDateFull: memoize(formatDateFull),
           DateComponent: DateComponent,
           dateModifiers: dateModifiers,
           preventKeyboardFocus: preventKeyboardFocus,
@@ -123,7 +126,7 @@ class BpkCalendarGrid extends Component {
           ignoreOutsideDate: ignoreOutsideDate,
           dateProps: dateProps,
           cellClassName: cellClassName
-        }, formatIsoDate(dates[0])))
+        }, dates[0].isoLabel))
       })
     });
   }

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

@@ -1,11 +1,11 @@
 import type { ElementType } from 'react';
 import { Component } from 'react';
+import type { DateProps } from './BpkCalendarGrid';
 import type { DateModifiers, SelectionConfiguration } from './custom-proptypes';
 export type Props = DefaultProps & {
     DateComponent: ElementType;
     dateModifiers: DateModifiers;
-    dates: Date[];
-    formatDateFull: (date: Date) => Date | string;
+    dates: DateProps[];
     preventKeyboardFocus: boolean;
     markToday: boolean;
     markOutsideDays: boolean;

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

@@ -67,13 +67,12 @@ function getSelectedDate(date, selectionConfiguration) {
  * Gets the correct selection type for the current date
  * @param {Date} date the current date of the calendar
  * @param {Object} selectionConfiguration the current selection configuration
- * @param {Function} formatDateFull function to format dates
  * @param {Date} month the current month of the calendar
  * @param {Number} weekStartsOn index of the first day of the week
  * @param {Boolean} ignoreOutsideDate ignore date outside current month
  * @returns {String} selection type to be passed to the date
  */
-function getSelectionType(date, selectionConfiguration, formatDateFull, month, weekStartsOn, ignoreOutsideDate) {
+function getSelectionType(date, selectionConfiguration, month, weekStartsOn, ignoreOutsideDate) {
   const {
     endDate,
     startDate
@@ -85,7 +84,7 @@ function getSelectionType(date, selectionConfiguration, formatDateFull, month, w
   const sameEndDay = endDate && isSameDay(date, endDate);
   const rangeDates = startDate && endDate;
   const isEmptyCell = !isSameMonth(date, month) && ignoreOutsideDate;
-  if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single && selectionConfiguration.date && (selectionConfiguration.date === formatDateFull(date) || formatDateFull(selectionConfiguration.date) === formatDateFull(date))) {
+  if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single && selectionConfiguration.date && isSameDay(date, selectionConfiguration.date)) {
     return SELECTION_TYPES.single;
   }
   if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range) {
@@ -120,10 +119,10 @@ function getSelectionType(date, selectionConfiguration, formatDateFull, month, w
     }) && !sameStartDay && !sameEndDay) {
       return SELECTION_TYPES.middle;
     }
-    if (startDate && formatDateFull(startDate) === formatDateFull(date)) {
+    if (sameStartDay) {
       return SELECTION_TYPES.start;
     }
-    if (endDate && formatDateFull(endDate) === formatDateFull(date)) {
+    if (sameEndDay) {
       return SELECTION_TYPES.end;
     }
   }
@@ -139,9 +138,9 @@ function getSelectionType(date, selectionConfiguration, formatDateFull, month, w
 const singleDateHandler = (props, nextProps) => {
   const currentSelectConfig = props.selectionConfiguration;
   const nextSelectConfig = nextProps.selectionConfiguration;
-  if ((nextSelectConfig.date && isSameWeek(nextSelectConfig.date, nextProps.dates[0], {
+  if ((nextSelectConfig.date && isSameWeek(nextSelectConfig.date, nextProps.dates[0].val, {
     weekStartsOn: nextProps.weekStartsOn
-  }) || currentSelectConfig.date && isSameWeek(currentSelectConfig.date, props.dates[0], {
+  }) || currentSelectConfig.date && isSameWeek(currentSelectConfig.date, props.dates[0].val, {
     weekStartsOn: props.weekStartsOn
   })) && currentSelectConfig.date !== nextSelectConfig.date) {
     return true;
@@ -190,7 +189,7 @@ class BpkCalendarWeek extends Component {
     cellClassName: null
   };
   shouldComponentUpdate(nextProps) {
-    const shallowProps = ['DateComponent', 'dateModifiers', 'formatDateFull', 'isKeyboardFocusable', 'markOutsideDays', 'markToday', 'onDateClick', 'onDateKeyDown', 'preventKeyboardFocus', 'weekStartsOn', 'dates', 'cellClassName'];
+    const shallowProps = ['DateComponent', 'dateModifiers', 'isKeyboardFocusable', 'markOutsideDays', 'markToday', 'onDateClick', 'onDateKeyDown', 'preventKeyboardFocus', 'weekStartsOn', 'dates', 'cellClassName'];
 
     // If any of the props have changed, component should update.
     if (!shallowEqualProps(this.props, nextProps, shallowProps)) {
@@ -200,9 +199,9 @@ class BpkCalendarWeek extends Component {
     // If focusedDate is changing, and it'll be included as part
     // of either the week we're rendering now or the next week
     // we'll render, component should update.
-    if ((nextProps.focusedDate && isSameWeek(nextProps.focusedDate, nextProps.dates[0], {
+    if ((nextProps.focusedDate && isSameWeek(nextProps.focusedDate, nextProps.dates[0].val, {
       weekStartsOn: nextProps.weekStartsOn
-    }) || this.props.focusedDate && isSameWeek(this.props.focusedDate, this.props.dates[0], {
+    }) || this.props.focusedDate && isSameWeek(this.props.focusedDate, this.props.dates[0].val, {
       weekStartsOn: this.props.weekStartsOn
     })) && this.props.focusedDate !== nextProps.focusedDate) {
       return true;
@@ -246,7 +245,6 @@ class BpkCalendarWeek extends Component {
       dateModifiers,
       dateProps,
       focusedDate,
-      formatDateFull,
       ignoreOutsideDate,
       isKeyboardFocusable,
       markOutsideDays,
@@ -261,7 +259,7 @@ class BpkCalendarWeek extends Component {
       weekStartsOn
     } = this.props;
     if (ignoreOutsideDate) {
-      const daysOutside = this.props.dates.map(date => isSameMonth(date, month));
+      const daysOutside = this.props.dates.map(date => isSameMonth(date.val, month));
       const shouldRender = daysOutside.reduce(or);
       if (!shouldRender) {
         return null;
@@ -270,33 +268,34 @@ class BpkCalendarWeek extends Component {
     return /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-calendar-week'),
       children: this.props.dates.map(date => {
-        const isBlocked = minDate && maxDate ? !isWithinRange(date, {
+        const isBlocked = minDate && maxDate ? !isWithinRange(date.val, {
           start: minDate,
           end: maxDate
         }) : false;
-        const dateSelectionType = getSelectionType(date, selectionConfiguration, formatDateFull, month, weekStartsOn, ignoreOutsideDate);
+        const dateSelectionType = getSelectionType(date.val, selectionConfiguration, month, weekStartsOn, ignoreOutsideDate);
         return /*#__PURE__*/_jsx(DateContainer, {
           className: cellClassName,
-          isEmptyCell: !isSameMonth(date, month) && ignoreOutsideDate,
+          isEmptyCell: !isSameMonth(date.val, month) && ignoreOutsideDate,
           isBlocked: isBlocked,
           selectionType: dateSelectionType,
           children: /*#__PURE__*/_jsx(DateComponent, {
-            date: date,
+            date: date.val,
             modifiers: dateModifiers,
-            "aria-label": formatDateFull(date),
+            "aria-label": date.customLabel,
             onClick: onDateClick,
             onDateKeyDown: onDateKeyDown,
             preventKeyboardFocus: preventKeyboardFocus,
             isKeyboardFocusable: isKeyboardFocusable,
-            isFocused: focusedDate && isSameDay(date, focusedDate),
-            isSelected: getSelectedDate(date, selectionConfiguration),
+            isFocused: focusedDate && isSameDay(date.val, focusedDate),
+            isSelected: getSelectedDate(date.val, selectionConfiguration),
             isBlocked: isBlocked,
-            isOutside: markOutsideDays && !isSameMonth(date, month),
-            isToday: markToday && isToday(date),
+            isOutside: markOutsideDays && !isSameMonth(date.val, month),
+            isToday: markToday && isToday(date.val),
             selectionType: dateSelectionType,
+            isoLabel: date.isoLabel,
             ...dateProps
           })
-        }, date.getDate());
+        }, date.val.getDate());
       })
     });
   }

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

@@ -105,7 +105,7 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
         DateComponent: CalendarDate,
         dateModifiers: dateModifiers,
         daysOfWeek: daysOfWeek,
-        formatDateFull: formatDateFull,
+        formatDateFull: memoize(formatDateFull),
         formatMonth: memoize(formatMonth),
         month: month,
         onDateClick: onDateClick,

package/bpk-component-calendar/src/date-utils.d.ts

@@ -17,9 +17,11 @@ import { lastDayOfMonth } from 'date-fns/lastDayOfMonth';
 import { parseISO } from 'date-fns/parseISO';
 import { startOfDay } from 'date-fns/startOfDay';
 import { startOfMonth } from 'date-fns/startOfMonth';
+import type { DateProps } from './BpkCalendarGrid';
 import type { DaysOfWeek } from './custom-proptypes';
 declare function daysInMonth(year: number, month: number): number;
-declare function getCalendarMonthWeeks(date: Date, weekStartsOn: number): Date[][];
+declare function getCalendarNoCustomLabel(date: Date, weekStartsOn: number): DateProps[][];
+declare function getCalendar(date: Date, weekStartsOn: number, formatDate: (d: Date) => Date | string): DateProps[][];
 declare function getLastDayOfWeekend(daysOfWeek: DaysOfWeek): number;
 declare function getFirstDayOfWeekend(daysOfWeek: DaysOfWeek): number;
 declare const orderDaysOfWeek: (daysOfWeek: DaysOfWeek, weekStartsOn: number) => import("./custom-proptypes").WeekDay[];
@@ -33,4 +35,4 @@ declare const setMonthYear: (date: Date | null, newMonth: number, newYear: numbe
 declare const parseIsoDate: typeof parseISO;
 declare const formatIsoDate: (date: Date) => string;
 declare const formatIsoMonth: (date: Date) => string;
-export { getCalendarMonthWeeks, getFirstDayOfWeekend, getLastDayOfWeekend, getMonthsInRange, getMonthRange, getDay, dateToBoundaries, isWithinRange, isSaturday, isSunday, isToday, isSameDay, isSameWeek, isSameMonth, isBefore, isAfter, differenceInCalendarMonths, addMonths, addDays, orderDaysOfWeek, setMonthYear, startOfMonth, lastDayOfMonth, startOfDay, format, daysInMonth, formatIsoDate, formatIsoMonth, parseIsoDate, endOfMonth, };
+export { getCalendar, getCalendarNoCustomLabel, getFirstDayOfWeekend, getLastDayOfWeekend, getMonthsInRange, getMonthRange, getDay, dateToBoundaries, isWithinRange, isSaturday, isSunday, isToday, isSameDay, isSameWeek, isSameMonth, isBefore, isAfter, differenceInCalendarMonths, addMonths, addDays, orderDaysOfWeek, setMonthYear, startOfMonth, lastDayOfMonth, startOfDay, format, daysInMonth, formatIsoDate, formatIsoMonth, parseIsoDate, endOfMonth, };

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

@@ -84,13 +84,24 @@ function startOfWeek(year, month, day, weekStartsOn) {
   date.setUTCDate(date.getUTCDate() - diff);
   return [date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()];
 }
-function getCalendarMonthWeeks(date, weekStartsOn) {
+function getCalendarNoCustomLabel(date, weekStartsOn) {
+  return getCalendarMonthWeeks(date, weekStartsOn);
+}
+function getCalendar(date, weekStartsOn, formatDate) {
+  return getCalendarMonthWeeks(date, weekStartsOn, formatDate);
+}
+function getCalendarMonthWeeks(date, weekStartsOn, formatDate) {
   let [year, month, day] = startOfWeek(date.getFullYear(), date.getMonth(), 1, weekStartsOn);
   const weeksInMonth = [];
   for (let i = 0; i < 6; i += 1) {
     const currWeek = [];
     for (let j = 0; j < 7; j += 1) {
-      currWeek.push(dateAtStartOfDay(year, month, day));
+      const currDate = dateAtStartOfDay(year, month, day);
+      currWeek.push({
+        val: currDate,
+        isoLabel: formatIsoDate(currDate),
+        customLabel: formatDate ? formatDate(currDate) : ''
+      });
       [year, month, day] = addDay(year, month, day);
     }
     weeksInMonth.push(currWeek);
@@ -170,4 +181,4 @@ const setMonthYear = (date, newMonth, newYear) => {
 const parseIsoDate = parseISO;
 const formatIsoDate = date => format(date, 'yyyy-MM-dd');
 const formatIsoMonth = date => format(date, 'yyyy-MM');
-export { getCalendarMonthWeeks, getFirstDayOfWeekend, getLastDayOfWeekend, getMonthsInRange, getMonthRange, getDay, dateToBoundaries, isWithinRange, isSaturday, isSunday, isToday, isSameDay, isSameWeek, isSameMonth, isBefore, isAfter, differenceInCalendarMonths, addMonths, addDays, orderDaysOfWeek, setMonthYear, startOfMonth, lastDayOfMonth, startOfDay, format, daysInMonth, formatIsoDate, formatIsoMonth, parseIsoDate, endOfMonth };
+export { getCalendar, getCalendarNoCustomLabel, getFirstDayOfWeekend, getLastDayOfWeekend, getMonthsInRange, getMonthRange, getDay, dateToBoundaries, isWithinRange, isSaturday, isSunday, isToday, isSameDay, isSameWeek, isSameMonth, isBefore, isAfter, differenceInCalendarMonths, addMonths, addDays, orderDaysOfWeek, setMonthYear, startOfMonth, lastDayOfMonth, startOfDay, format, daysInMonth, formatIsoDate, formatIsoMonth, parseIsoDate, endOfMonth };

package/bpk-react-utils/index.d.ts

@@ -8,7 +8,7 @@ import isRTL from './src/isRTL';
 import { setNativeValue } from './src/nativeEventHandler';
 import withDefaultProps from './src/withDefaultProps';
 import wrapDisplayName from './src/wrapDisplayName';
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue };
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, };
 declare const _default: {
     Portal: typeof Portal;
     TransitionInitialMount: ({ appearActiveClassName, appearClassName, children, transitionTimeout, }: {

package/bpk-react-utils/src/__mocks__/deferCallback.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Mock deferCallback to immediately invoke the callback. This ensures that
+ * asynchronous state updates triggered by `deferCallback` run before asserting.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
+ * @param {function} callback - callback to execute, value cannot be returned.
+ * You'll typically want to wrap the callback `setState` to update React state.
+ * @returns {void}
+ */
+export default function deferCallback(callback: () => void): void;

package/{bpk-component-carousel/src/utils.test.js → bpk-react-utils/src/__mocks__/deferCallback.js}

@@ -1,7 +1,7 @@
 /*
  * Backpack - Skyscanner's Design System
  *
- * Copyright 2022 Skyscanner Ltd
+ * Copyright 2016 Skyscanner Ltd
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,15 +16,14 @@
  * limitations under the License.
  */
 
-import { renderHook } from '@testing-library/react';
-import { useScrollToInitialImage } from "./utils";
-describe('useScrollToInitialImage', () => {
-  it('should scroll to initial image on mount', () => {
-    const imagesRef = {
-      current: [document.createElement('div'), document.createElement('div')]
-    };
-    const initialImageIndex = 0;
-    renderHook(() => useScrollToInitialImage(initialImageIndex, imagesRef));
-    expect(imagesRef.current[initialImageIndex].scrollIntoView).toHaveBeenCalledTimes(1);
-  });
-});
+/**
+ * Mock deferCallback to immediately invoke the callback. This ensures that
+ * asynchronous state updates triggered by `deferCallback` run before asserting.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
+ * @param {function} callback - callback to execute, value cannot be returned.
+ * You'll typically want to wrap the callback `setState` to update React state.
+ * @returns {void}
+ */
+export default function deferCallback(callback) {
+  callback();
+}

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

@@ -0,0 +1,13 @@
+/**
+ * Defer a task until the browser is idle, or till the next "tick" if the
+ * browser does not support the idle callback API. This is useful for deferring
+ * computationally heavy, non-essential tasks to keep the UI responsive. If the
+ * task has not completed within the timeout, it will be executed regardless.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
+ * @param {function} callback - callback to execute, value cannot be returned.
+ * You'll typically want to wrap the callback `setState` to update React state.
+ * @returns {void}
+ */
+declare const deferCallback: (callback: () => void) => void;
+export default deferCallback;

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

@@ -0,0 +1,39 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Defer a task until the browser is idle, or till the next "tick" if the
+ * browser does not support the idle callback API. This is useful for deferring
+ * computationally heavy, non-essential tasks to keep the UI responsive. If the
+ * task has not completed within the timeout, it will be executed regardless.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
+ * @param {function} callback - callback to execute, value cannot be returned.
+ * You'll typically want to wrap the callback `setState` to update React state.
+ * @returns {void}
+ */
+const deferCallback = callback => {
+  if (window.requestIdleCallback) {
+    window.requestIdleCallback(callback, {
+      timeout: 500
+    });
+  } else {
+    setTimeout(callback, 0);
+  }
+};
+export default deferCallback;

package/package.json

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