@skyscanner/backpack-web 36.13.0 → 36.13.1

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

@@ -13,6 +13,11 @@ type DefaultProps = {
     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;
     /**
      * An object to indicate which configuration of the calendar is being used. Choices are `single` date selection or `range` date selection.

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

@@ -21,7 +21,7 @@ import { cssModules, isDeviceIos } from "../../bpk-react-utils";
 import { addCalendarGridTransition } from "./BpkCalendarGridTransition";
 import BpkCalendarWeek from "./BpkCalendarWeek";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
-import { addMonths, getCalendar, getCalendarNoCustomLabel, isSameMonth } from "./date-utils";
+import { addMonths, getCalendar, getCalendarNoCustomLabel, isSameMonth, format } from "./date-utils";
 import STYLES from "./BpkCalendarGrid.module.css";
 
 // This should be imported after `./BpkCalendarGrid.module.css`.
@@ -47,6 +47,7 @@ class BpkCalendarGrid extends Component {
     minDate: new Date(),
     onDateClick: () => {},
     onDateKeyDown: () => {},
+    formatMonth: month => format(month, 'MMMM yyyy'),
     preventKeyboardFocus: false,
     selectionConfiguration: {
       type: CALENDAR_SELECTION_TYPE.single,
@@ -84,6 +85,7 @@ class BpkCalendarGrid extends Component {
       dateModifiers,
       dateProps,
       focusedDate,
+      formatMonth,
       ignoreOutsideDate,
       isKeyboardFocusable,
       markOutsideDays,
@@ -105,6 +107,7 @@ class BpkCalendarGrid extends Component {
       className: classNames,
       "aria-hidden": !isKeyboardFocusable,
       role: "grid",
+      "aria-label": formatMonth(month),
       children: /*#__PURE__*/_jsx("div", {
         role: "rowgroup",
         children: calendarMonthWeeks.map(dates => /*#__PURE__*/_jsx(BpkCalendarWeek, {

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode, ElementType, CSSProperties } from 'react';
 import { Component } from 'react';
+import type { DebouncedFunc } from 'lodash';
 declare const computeScrollBarAwareHeight: (scrollerEl: HTMLElement | null, innerEl: HTMLElement | null) => string | null;
 declare const computeScrollIndicatorClassName: (scrollerEl: HTMLElement | null, leadingIndicatorClassName?: string, trailingIndicatorClassName?: string) => string[] | null;
 type Props = {
@@ -18,11 +19,12 @@ type State = {
     scrollIndicatorClassName: string | null;
 };
 declare class BpkMobileScrollContainer extends Component<Props, State> {
+    debouncedResize: DebouncedFunc<() => void>;
     static defaultProps: Partial<Props>;
     constructor(props: Props);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    onWindowResize: import("lodash").DebouncedFunc<() => void>;
+    onWindowResize: () => void;
     setScrollIndicatorClassName: () => void;
     setScrollBarAwareHeight: () => void;
     innerEl: HTMLElement | null;

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -62,21 +62,22 @@ class BpkMobileScrollContainer extends Component {
       computedHeight: 'auto',
       scrollIndicatorClassName: null
     };
+    this.debouncedResize = debounce(this.onWindowResize, 100);
   }
   componentDidMount() {
     requestAnimationFrame(() => {
       this.setScrollBarAwareHeight();
       this.setScrollIndicatorClassName();
     });
-    window.addEventListener('resize', this.onWindowResize);
+    window.addEventListener('resize', this.debouncedResize);
   }
   componentWillUnmount() {
-    window.removeEventListener('resize', this.onWindowResize);
+    window.removeEventListener('resize', this.debouncedResize);
   }
-  onWindowResize = debounce(() => {
+  onWindowResize = () => {
     this.setScrollBarAwareHeight();
     this.setScrollIndicatorClassName();
-  }, 100);
+  };
   setScrollIndicatorClassName = () => {
     const classNames = computeScrollIndicatorClassName(this.scrollerEl, this.props.leadingIndicatorClassName, this.props.trailingIndicatorClassName);
     if (!classNames) {

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

@@ -42,6 +42,7 @@ const BpkScrollableCalendarGrid = ({
     }), /*#__PURE__*/_jsx(BpkCalendarGrid, {
       month: month,
       ignoreOutsideDate: true,
+      formatMonth: formatMonth,
       ...rest
     })]
   });

package/package.json

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