@skyscanner/backpack-web 23.2.1 → 23.3.0

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

@@ -0,0 +1,429 @@
+/*
+ * 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.
+ */
+
+import type { ComponentType } from 'react';
+import type { SelectionConfiguration } from './custom-proptypes';
+type Props = {
+    fixedWidth: boolean;
+    maxDate: Date;
+    minDate: Date;
+    onDateSelect?: (date: Date, newDate?: Date) => void;
+    onMonthChange?: (event: UIEvent, { month, source }: {
+        month: Date;
+        source: string;
+    }) => void;
+    selectionConfiguration: SelectionConfiguration;
+    initiallyFocusedDate: Date | null;
+};
+type CalendarProps<P> = P & Props;
+type State = {
+    preventKeyboardFocus: boolean;
+    focusedDate: Date;
+};
+declare const withCalendarState: <P extends {}>(Calendar: ComponentType<P>) => {
+    new (props: CalendarProps<P>): {
+        UNSAFE_componentWillReceiveProps(nextProps: CalendarProps<P>): void;
+        handleDateFocus: (event: UIEvent, { date, source }: {
+            date: Date;
+            source: string;
+        }) => void;
+        handleDateSelect: (date: Date) => void;
+        handleMonthChange: (event: UIEvent, { month, source }: {
+            month: Date;
+            source: string;
+        }) => void;
+        handleDateKeyDown: (event: KeyboardEvent) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends keyof State>(state: State | ((prevState: Readonly<State>, props: Readonly<CalendarProps<P>>) => State | Pick<State, K> | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<CalendarProps<P>> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<State>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<CalendarProps<P>>, nextState: Readonly<State>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<CalendarProps<P>>, prevState: Readonly<State>): any;
+        componentDidUpdate?(prevProps: Readonly<CalendarProps<P>>, prevState: Readonly<State>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<CalendarProps<P>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<CalendarProps<P>>, nextState: Readonly<State>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<CalendarProps<P>>, nextState: Readonly<State>, nextContext: any): void;
+    };
+    defaultProps: {
+        fixedWidth: boolean;
+        maxDate: Date;
+        minDate: Date;
+        onDateSelect: () => void;
+        onMonthChange: () => void;
+        selectionConfiguration: {
+            type: "single";
+            date: null;
+        };
+        initiallyFocusedDate: null;
+    };
+    contextType?: import("react").Context<any> | undefined;
+};
+declare const _default: {
+    new (props: CalendarProps<{
+        changeMonthLabel?: string | null | undefined;
+        daysOfWeek: import("./custom-proptypes").DaysOfWeek;
+        formatDateFull: (date: Date) => string | Date;
+        formatMonth: (date: Date) => string | Date;
+        id: string;
+        maxDate: Date;
+        minDate: Date;
+        month: Date;
+        nextMonthLabel?: string | null | undefined;
+        previousMonthLabel?: string | null | undefined;
+        weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+        className?: string | null | undefined;
+        dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
+        fixedWidth?: boolean | undefined;
+        focusedDate?: Date | null | undefined;
+        markOutsideDays?: boolean | undefined;
+        markToday?: boolean | undefined;
+        onMonthChange?: (() => void) | undefined;
+        onDateClick?: (() => void) | undefined;
+        onDateKeyDown?: (() => void) | undefined;
+        preventKeyboardFocus?: boolean | undefined;
+        selectionConfiguration?: SelectionConfiguration | undefined;
+        gridClassName?: string | null | undefined;
+        weekDayKey?: string | undefined;
+        navProps?: {} | null | undefined;
+        headerProps?: {} | null | undefined;
+        gridProps?: {} | null | undefined;
+        dateProps?: {} | null | undefined;
+    }>): {
+        UNSAFE_componentWillReceiveProps(nextProps: CalendarProps<{
+            changeMonthLabel?: string | null | undefined;
+            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
+            formatDateFull: (date: Date) => string | Date;
+            formatMonth: (date: Date) => string | Date;
+            id: string;
+            maxDate: Date;
+            minDate: Date;
+            month: Date;
+            nextMonthLabel?: string | null | undefined;
+            previousMonthLabel?: string | null | undefined;
+            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            className?: string | null | undefined;
+            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
+            fixedWidth?: boolean | undefined;
+            focusedDate?: Date | null | undefined;
+            markOutsideDays?: boolean | undefined;
+            markToday?: boolean | undefined;
+            onMonthChange?: (() => void) | undefined;
+            onDateClick?: (() => void) | undefined;
+            onDateKeyDown?: (() => void) | undefined;
+            preventKeyboardFocus?: boolean | undefined;
+            selectionConfiguration?: SelectionConfiguration | undefined;
+            gridClassName?: string | null | undefined;
+            weekDayKey?: string | undefined;
+            navProps?: {} | null | undefined;
+            headerProps?: {} | null | undefined;
+            gridProps?: {} | null | undefined;
+            dateProps?: {} | null | undefined;
+        }>): void;
+        handleDateFocus: (event: UIEvent, { date, source }: {
+            date: Date;
+            source: string;
+        }) => void;
+        handleDateSelect: (date: Date) => void;
+        handleMonthChange: (event: UIEvent, { month, source }: {
+            month: Date;
+            source: string;
+        }) => void;
+        handleDateKeyDown: (event: KeyboardEvent) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends keyof State>(state: State | ((prevState: Readonly<State>, props: Readonly<CalendarProps<{
+            changeMonthLabel?: string | null | undefined;
+            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
+            formatDateFull: (date: Date) => string | Date;
+            formatMonth: (date: Date) => string | Date;
+            id: string;
+            maxDate: Date;
+            minDate: Date;
+            month: Date;
+            nextMonthLabel?: string | null | undefined;
+            previousMonthLabel?: string | null | undefined;
+            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            className?: string | null | undefined;
+            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
+            fixedWidth?: boolean | undefined;
+            focusedDate?: Date | null | undefined;
+            markOutsideDays?: boolean | undefined;
+            markToday?: boolean | undefined;
+            onMonthChange?: (() => void) | undefined;
+            onDateClick?: (() => void) | undefined;
+            onDateKeyDown?: (() => void) | undefined;
+            preventKeyboardFocus?: boolean | undefined;
+            selectionConfiguration?: SelectionConfiguration | undefined;
+            gridClassName?: string | null | undefined;
+            weekDayKey?: string | undefined;
+            navProps?: {} | null | undefined;
+            headerProps?: {} | null | undefined;
+            gridProps?: {} | null | undefined;
+            dateProps?: {} | null | undefined;
+        }>>) => State | Pick<State, K> | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<CalendarProps<{
+            changeMonthLabel?: string | null | undefined;
+            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
+            formatDateFull: (date: Date) => string | Date;
+            formatMonth: (date: Date) => string | Date;
+            id: string;
+            maxDate: Date;
+            minDate: Date;
+            month: Date;
+            nextMonthLabel?: string | null | undefined;
+            previousMonthLabel?: string | null | undefined;
+            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            className?: string | null | undefined;
+            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
+            fixedWidth?: boolean | undefined;
+            focusedDate?: Date | null | undefined;
+            markOutsideDays?: boolean | undefined;
+            markToday?: boolean | undefined;
+            onMonthChange?: (() => void) | undefined;
+            onDateClick?: (() => void) | undefined;
+            onDateKeyDown?: (() => void) | undefined;
+            preventKeyboardFocus?: boolean | undefined;
+            selectionConfiguration?: SelectionConfiguration | undefined;
+            gridClassName?: string | null | undefined;
+            weekDayKey?: string | undefined;
+            navProps?: {} | null | undefined;
+            headerProps?: {} | null | undefined;
+            gridProps?: {} | null | undefined;
+            dateProps?: {} | null | undefined;
+        }>> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<State>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<CalendarProps<{
+            changeMonthLabel?: string | null | undefined;
+            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
+            formatDateFull: (date: Date) => string | Date;
+            formatMonth: (date: Date) => string | Date;
+            id: string;
+            maxDate: Date;
+            minDate: Date;
+            month: Date;
+            nextMonthLabel?: string | null | undefined;
+            previousMonthLabel?: string | null | undefined;
+            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            className?: string | null | undefined;
+            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
+            fixedWidth?: boolean | undefined;
+            focusedDate?: Date | null | undefined;
+            markOutsideDays?: boolean | undefined;
+            markToday?: boolean | undefined;
+            onMonthChange?: (() => void) | undefined;
+            onDateClick?: (() => void) | undefined;
+            onDateKeyDown?: (() => void) | undefined;
+            preventKeyboardFocus?: boolean | undefined;
+            selectionConfiguration?: SelectionConfiguration | undefined;
+            gridClassName?: string | null | undefined;
+            weekDayKey?: string | undefined;
+            navProps?: {} | null | undefined;
+            headerProps?: {} | null | undefined;
+            gridProps?: {} | null | undefined;
+            dateProps?: {} | null | undefined;
+        }>>, nextState: Readonly<State>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<CalendarProps<{
+            changeMonthLabel?: string | null | undefined;
+            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
+            formatDateFull: (date: Date) => string | Date;
+            formatMonth: (date: Date) => string | Date;
+            id: string;
+            maxDate: Date;
+            minDate: Date;
+            month: Date;
+            nextMonthLabel?: string | null | undefined;
+            previousMonthLabel?: string | null | undefined;
+            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            className?: string | null | undefined;
+            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
+            fixedWidth?: boolean | undefined;
+            focusedDate?: Date | null | undefined;
+            markOutsideDays?: boolean | undefined;
+            markToday?: boolean | undefined;
+            onMonthChange?: (() => void) | undefined;
+            onDateClick?: (() => void) | undefined;
+            onDateKeyDown?: (() => void) | undefined;
+            preventKeyboardFocus?: boolean | undefined;
+            selectionConfiguration?: SelectionConfiguration | undefined;
+            gridClassName?: string | null | undefined;
+            weekDayKey?: string | undefined;
+            navProps?: {} | null | undefined;
+            headerProps?: {} | null | undefined;
+            gridProps?: {} | null | undefined;
+            dateProps?: {} | null | undefined;
+        }>>, prevState: Readonly<State>): any;
+        componentDidUpdate?(prevProps: Readonly<CalendarProps<{
+            changeMonthLabel?: string | null | undefined;
+            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
+            formatDateFull: (date: Date) => string | Date;
+            formatMonth: (date: Date) => string | Date;
+            id: string;
+            maxDate: Date;
+            minDate: Date;
+            month: Date;
+            nextMonthLabel?: string | null | undefined;
+            previousMonthLabel?: string | null | undefined;
+            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            className?: string | null | undefined;
+            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
+            fixedWidth?: boolean | undefined;
+            focusedDate?: Date | null | undefined;
+            markOutsideDays?: boolean | undefined;
+            markToday?: boolean | undefined;
+            onMonthChange?: (() => void) | undefined;
+            onDateClick?: (() => void) | undefined;
+            onDateKeyDown?: (() => void) | undefined;
+            preventKeyboardFocus?: boolean | undefined;
+            selectionConfiguration?: SelectionConfiguration | undefined;
+            gridClassName?: string | null | undefined;
+            weekDayKey?: string | undefined;
+            navProps?: {} | null | undefined;
+            headerProps?: {} | null | undefined;
+            gridProps?: {} | null | undefined;
+            dateProps?: {} | null | undefined;
+        }>>, prevState: Readonly<State>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<CalendarProps<{
+            changeMonthLabel?: string | null | undefined;
+            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
+            formatDateFull: (date: Date) => string | Date;
+            formatMonth: (date: Date) => string | Date;
+            id: string;
+            maxDate: Date;
+            minDate: Date;
+            month: Date;
+            nextMonthLabel?: string | null | undefined;
+            previousMonthLabel?: string | null | undefined;
+            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            className?: string | null | undefined;
+            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
+            fixedWidth?: boolean | undefined;
+            focusedDate?: Date | null | undefined;
+            markOutsideDays?: boolean | undefined;
+            markToday?: boolean | undefined;
+            onMonthChange?: (() => void) | undefined;
+            onDateClick?: (() => void) | undefined;
+            onDateKeyDown?: (() => void) | undefined;
+            preventKeyboardFocus?: boolean | undefined;
+            selectionConfiguration?: SelectionConfiguration | undefined;
+            gridClassName?: string | null | undefined;
+            weekDayKey?: string | undefined;
+            navProps?: {} | null | undefined;
+            headerProps?: {} | null | undefined;
+            gridProps?: {} | null | undefined;
+            dateProps?: {} | null | undefined;
+        }>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<CalendarProps<{
+            changeMonthLabel?: string | null | undefined;
+            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
+            formatDateFull: (date: Date) => string | Date;
+            formatMonth: (date: Date) => string | Date;
+            id: string;
+            maxDate: Date;
+            minDate: Date;
+            month: Date;
+            nextMonthLabel?: string | null | undefined;
+            previousMonthLabel?: string | null | undefined;
+            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            className?: string | null | undefined;
+            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
+            fixedWidth?: boolean | undefined;
+            focusedDate?: Date | null | undefined;
+            markOutsideDays?: boolean | undefined;
+            markToday?: boolean | undefined;
+            onMonthChange?: (() => void) | undefined;
+            onDateClick?: (() => void) | undefined;
+            onDateKeyDown?: (() => void) | undefined;
+            preventKeyboardFocus?: boolean | undefined;
+            selectionConfiguration?: SelectionConfiguration | undefined;
+            gridClassName?: string | null | undefined;
+            weekDayKey?: string | undefined;
+            navProps?: {} | null | undefined;
+            headerProps?: {} | null | undefined;
+            gridProps?: {} | null | undefined;
+            dateProps?: {} | null | undefined;
+        }>>, nextState: Readonly<State>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<CalendarProps<{
+            changeMonthLabel?: string | null | undefined;
+            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
+            formatDateFull: (date: Date) => string | Date;
+            formatMonth: (date: Date) => string | Date;
+            id: string;
+            maxDate: Date;
+            minDate: Date;
+            month: Date;
+            nextMonthLabel?: string | null | undefined;
+            previousMonthLabel?: string | null | undefined;
+            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            className?: string | null | undefined;
+            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
+            fixedWidth?: boolean | undefined;
+            focusedDate?: Date | null | undefined;
+            markOutsideDays?: boolean | undefined;
+            markToday?: boolean | undefined;
+            onMonthChange?: (() => void) | undefined;
+            onDateClick?: (() => void) | undefined;
+            onDateKeyDown?: (() => void) | undefined;
+            preventKeyboardFocus?: boolean | undefined;
+            selectionConfiguration?: SelectionConfiguration | undefined;
+            gridClassName?: string | null | undefined;
+            weekDayKey?: string | undefined;
+            navProps?: {} | null | undefined;
+            headerProps?: {} | null | undefined;
+            gridProps?: {} | null | undefined;
+            dateProps?: {} | null | undefined;
+        }>>, nextState: Readonly<State>, nextContext: any): void;
+    };
+    defaultProps: {
+        fixedWidth: boolean;
+        maxDate: Date;
+        minDate: Date;
+        onDateSelect: () => void;
+        onMonthChange: () => void;
+        selectionConfiguration: {
+            type: "single";
+            date: null;
+        };
+        initiallyFocusedDate: null;
+    };
+    contextType?: import("react").Context<any> | undefined;
+};
+export default _default;
+export { withCalendarState };

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

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.withCalendarState = exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _bpkReactUtils = require("../../bpk-react-utils");
-var _customProptypes = _interopRequireWildcard(require("./custom-proptypes"));
+var _customProptypes = require("./custom-proptypes");
 var _BpkCalendarNav = _interopRequireDefault(require("./BpkCalendarNav"));
 var _BpkCalendarGrid = require("./BpkCalendarGrid");
 var _BpkCalendarGridHeader = _interopRequireDefault(require("./BpkCalendarGridHeader"));
@@ -15,9 +14,7 @@ var _BpkCalendarDate = _interopRequireDefault(require("./BpkCalendarDate"));
 var _composeCalendar = _interopRequireDefault(require("./composeCalendar"));
 var _dateUtils = require("./date-utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["maxDate", "minDate", "selectionConfiguration"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const _excluded = ["maxDate", "minDate", "onDateSelect", "onMonthChange", "selectionConfiguration"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -41,23 +38,26 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
                                                                                                                                                                                                                                                                                                                                                                                            * 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.
-                                                                                                                                                                                                                                                                                                                                                                                           */ /**
-                                                                                                                                                                                                                                                                                                                                                                                               * Updates the current focused date
-                                                                                                                                                                                                                                                                                                                                                                                               * @param {Object} currentProps current input properties
-                                                                                                                                                                                                                                                                                                                                                                                               * @param {Object} nextProps next input properties when component changes
-                                                                                                                                                                                                                                                                                                                                                                                               * @returns {Boolean} if the selected date has changed
-                                                                                                                                                                                                                                                                                                                                                                                               */
+                                                                                                                                                                                                                                                                                                                                                                                           */
+/**
+ * Updates the current focused date
+ * @param {Object} currentProps current input properties
+ * @param {Object} nextProps next input properties when component changes
+ * @returns {Boolean} if the selected date has changed
+ */
 const focusedDateHasChanged = (currentProps, nextProps) => {
   const currentSelectConfig = currentProps.selectionConfiguration;
   const nextSelectConfig = nextProps.selectionConfiguration;
-  const rawNextSelectedDate = nextSelectConfig.date || nextSelectConfig.startDate;
-  const rawSelectedDate = currentSelectConfig.date || currentSelectConfig.startDate;
+  const rawNextSelectedDate = nextSelectConfig.type === _customProptypes.CALENDAR_SELECTION_TYPE.single ? nextSelectConfig.date : nextSelectConfig.startDate;
+  const rawSelectedDate = currentSelectConfig.type === _customProptypes.CALENDAR_SELECTION_TYPE.single ? currentSelectConfig.date : currentSelectConfig.startDate;
   if (!rawSelectedDate && !rawNextSelectedDate) {
     return false;
   }
   if (rawSelectedDate && !rawNextSelectedDate || !rawSelectedDate && rawNextSelectedDate) {
     return true;
   }
+
+  // @ts-expect-error TS reporting incorrectly as we are already checking above that the dates are not null
   return !(0, _dateUtils.isSameDay)(rawNextSelectedDate, rawSelectedDate);
 };
 
@@ -153,7 +153,6 @@ const withCalendarState = Calendar => {
         });
       });
       _defineProperty(this, "handleDateKeyDown", event => {
-        event.persist();
         const reverse = (0, _bpkReactUtils.isRTL)() ? -1 : 1;
         const {
           focusedDate
@@ -243,11 +242,11 @@ const withCalendarState = Calendar => {
         {
           maxDate,
           minDate,
+          onDateSelect,
+          onMonthChange,
           selectionConfiguration
         } = _this$props,
         calendarProps = _objectWithoutProperties(_this$props, _excluded);
-      delete calendarProps.onDateSelect;
-      delete calendarProps.onMonthChange;
       const sanitisedMinDate = (0, _dateUtils.startOfDay)(minDate);
       const sanitisedMaxDate = (0, _dateUtils.startOfDay)(maxDate);
       const sanitisedFocusedDate = (0, _dateUtils.dateToBoundaries)(this.state.focusedDate, sanitisedMinDate, sanitisedMaxDate);
@@ -266,27 +265,18 @@ const withCalendarState = Calendar => {
       }));
     }
   }
-  BpkCalendarContainer.propTypes = {
-    fixedWidth: _propTypes.default.bool,
-    maxDate: _propTypes.default.instanceOf(Date),
-    minDate: _propTypes.default.instanceOf(Date),
-    onDateSelect: _propTypes.default.func,
-    onMonthChange: _propTypes.default.func,
-    selectionConfiguration: _customProptypes.default.SelectionConfiguration,
-    initiallyFocusedDate: _propTypes.default.instanceOf(Date)
-  };
-  BpkCalendarContainer.defaultProps = {
+  _defineProperty(BpkCalendarContainer, "defaultProps", {
     fixedWidth: true,
     maxDate: (0, _dateUtils.addMonths)(new Date(), 12),
     minDate: new Date(),
-    onDateSelect: null,
-    onMonthChange: null,
+    onDateSelect: () => {},
+    onMonthChange: () => {},
     selectionConfiguration: {
       type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
       date: null
     },
     initiallyFocusedDate: null
-  };
+  });
   return BpkCalendarContainer;
 };
 exports.withCalendarState = withCalendarState;

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

@@ -0,0 +1,62 @@
+/*
+ * 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.
+ */
+
+import type { KeyboardEvent } from 'react';
+import { PureComponent } from 'react';
+import type { DateModifiers } from './custom-proptypes';
+export declare const SELECTION_TYPES: {
+    readonly none: "none";
+    readonly single: "single";
+    readonly start: "start";
+    readonly middle: "middle";
+    readonly end: "end";
+    readonly sameDay: "sameDay";
+};
+export declare const ROW_TYPES: {
+    readonly start: "start";
+    readonly middle: "middle";
+    readonly end: "end";
+    readonly both: "both";
+};
+export type SelectionTypes = typeof SELECTION_TYPES[keyof typeof SELECTION_TYPES];
+export type Props = DefaultProps & {
+    date: Date;
+};
+type DefaultProps = {
+    className: string | null;
+    isBlocked: boolean;
+    isFocused: boolean;
+    isKeyboardFocusable: boolean;
+    isOutside: boolean;
+    isSelected: boolean;
+    isToday: boolean;
+    modifiers: DateModifiers;
+    onClick: ((date: Date) => void) | null;
+    onDateKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    preventKeyboardFocus?: boolean;
+    selectionType: SelectionTypes;
+    style: {};
+};
+declare class BpkCalendarDate extends PureComponent<Props> {
+    static defaultProps: DefaultProps;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props): void;
+    button: HTMLButtonElement | null;
+    render(): JSX.Element;
+}
+export default BpkCalendarDate;