@skyscanner/backpack-web 7.0.0-alpha.1 → 7.0.0-alpha.2

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

@@ -0,0 +1,356 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testUtils = require("../test-utils");
+
+var _BpkCalendarContainer = _interopRequireDefault(require("./BpkCalendarContainer"));
+
+var _customProptypes = require("./custom-proptypes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * 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.
+ */
+const createNodeMock = () => ({
+  focus: () => null
+});
+
+describe('BpkCalendarContainer', () => {
+  it('should render correctly', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarContainer.default, {
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 1,
+      changeMonthLabel: "Change month",
+      previousMonthLabel: "Go to previous month",
+      nextMonthLabel: "Go to next month",
+      id: "myCalendar",
+      minDate: new Date(2010, 1, 15),
+      maxDate: new Date(2010, 2, 15),
+      selectionConfiguration: {
+        type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
+        date: new Date(2010, 1, 15)
+      }
+    }), {
+      createNodeMock
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly in range mode', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarContainer.default, {
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 1,
+      changeMonthLabel: "Change month",
+      previousMonthLabel: "Go to previous month",
+      nextMonthLabel: "Go to next month",
+      id: "myCalendar",
+      minDate: new Date(2010, 1, 15),
+      maxDate: new Date(2010, 2, 15),
+      selectionConfiguration: {
+        type: _customProptypes.CALENDAR_SELECTION_TYPE.range,
+        startDate: new Date(2010, 1, 16),
+        endDate: new Date(2010, 1, 20)
+      }
+    }), {
+      createNodeMock
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should focus the correct date when `initiallyFocusedDate` is set and selected date is not', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarContainer.default, {
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 1,
+      changeMonthLabel: "Change month",
+      previousMonthLabel: "Go to previous month",
+      nextMonthLabel: "Go to next month",
+      id: "myCalendar",
+      minDate: new Date(2010, 1, 15),
+      maxDate: new Date(2010, 2, 15),
+      initiallyFocusedDate: new Date(2010, 1, 28)
+    }), {
+      createNodeMock
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should change the month', async () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarContainer.default, {
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 1,
+      changeMonthLabel: "Change month",
+      previousMonthLabel: "Go to previous month",
+      nextMonthLabel: "Go to next month",
+      id: "myCalendar",
+      minDate: new Date(2010, 1, 15),
+      maxDate: new Date(2010, 2, 15),
+      selectionConfiguration: {
+        type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
+        date: new Date(2010, 1, 15)
+      }
+    })); // dates in March are outside current month
+
+    const outsideDate = _react2.screen.getByRole('button', {
+      name: /1st March 2010/i
+    });
+
+    expect(outsideDate.classList.contains('bpk-calendar-date--outside')).toBe(true); // change month to March
+
+    const inputField = _react2.screen.getByRole('combobox', {
+      name: 'Change month'
+    });
+
+    await _userEvent.default.selectOptions(inputField, 'March 2010'); // dates in March are within current month
+
+    const currentDate = _react2.screen.getByRole('button', {
+      name: /1st March 2010/i
+    });
+
+    expect(currentDate.classList.contains('bpk-calendar-date--outside')).toBe(false);
+  });
+  it('should call the onDateSelect callback', async () => {
+    const onDateSelect = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarContainer.default, {
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 1,
+      changeMonthLabel: "Change month",
+      previousMonthLabel: "Go to previous month",
+      nextMonthLabel: "Go to next month",
+      id: "myCalendar",
+      minDate: new Date(2010, 1, 15),
+      maxDate: new Date(2010, 2, 15),
+      selectionConfiguration: {
+        type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
+        date: new Date(2010, 1, 15)
+      },
+      onDateSelect: onDateSelect
+    }));
+    expect(onDateSelect.mock.calls.length).toBe(0);
+
+    const date = _react2.screen.getByRole('button', {
+      name: /20th February 2010/i
+    });
+
+    await _userEvent.default.click(date);
+    expect(onDateSelect.mock.calls.length).toBe(1);
+  });
+  it('should account for focus state if selected date is set to null', async () => {
+    const onDateSelect = jest.fn();
+    const initialSelectedDate = new Date(2010, 1, 22);
+    const minDate = new Date(2010, 1, 15);
+    const maxDate = new Date(2010, 2, 15);
+    const {
+      rerender
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarContainer.default, {
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 1,
+      changeMonthLabel: "Change month",
+      previousMonthLabel: "Go to previous month",
+      nextMonthLabel: "Go to next month",
+      id: "myCalendar",
+      minDate: minDate,
+      maxDate: maxDate,
+      selectionConfiguration: {
+        type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
+        date: initialSelectedDate
+      },
+      onDateSelect: onDateSelect
+    }));
+
+    const initialSelectedDateButton = _react2.screen.getByRole('button', {
+      name: /22nd February 2010/i
+    });
+
+    expect(initialSelectedDateButton.classList.contains('bpk-calendar-date--focused')).toBe(true);
+    rerender( /*#__PURE__*/_react.default.createElement(_BpkCalendarContainer.default, {
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 1,
+      changeMonthLabel: "Change month",
+      previousMonthLabel: "Go to previous month",
+      nextMonthLabel: "Go to next month",
+      id: "myCalendar",
+      minDate: minDate,
+      maxDate: maxDate,
+      selectionConfiguration: {
+        type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
+        date: null
+      },
+      onDateSelect: onDateSelect
+    }));
+
+    const minDateButton = _react2.screen.getByRole('button', {
+      name: /15th February 2010/i
+    });
+
+    expect(minDateButton.classList.contains('bpk-calendar-date--focused')).toBe(true);
+  });
+  it('should set state only once on date selection', async () => {
+    const setStateSpy = jest.fn();
+    const oldSetState = _BpkCalendarContainer.default.prototype.setState;
+    _BpkCalendarContainer.default.prototype.setState = setStateSpy;
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarContainer.default, {
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 1,
+      changeMonthLabel: "Change month",
+      previousMonthLabel: "Go to previous month",
+      nextMonthLabel: "Go to next month",
+      id: "myCalendar",
+      minDate: new Date(2010, 1, 15),
+      maxDate: new Date(2010, 2, 15),
+      selectionConfiguration: {
+        type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
+        date: new Date(2010, 1, 15)
+      },
+      onDateSelect: null
+    }));
+    expect(setStateSpy.mock.calls.length).toBe(0);
+
+    const date = _react2.screen.getByRole('button', {
+      name: /20th February 2010/i
+    });
+
+    await _userEvent.default.click(date);
+    expect(setStateSpy.mock.calls.length).toBe(1);
+    _BpkCalendarContainer.default.prototype.setState = oldSetState;
+  });
+  it('should move focus on keyboard input', async () => {
+    const origin = new Date(2010, 2, 1);
+    const originStr = 'Monday, 1st March 2010';
+
+    const getDate = name => _react2.screen.getByRole('button', {
+      name
+    });
+
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarContainer.default, {
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 1,
+      changeMonthLabel: "Change month",
+      previousMonthLabel: "Go to previous month",
+      nextMonthLabel: "Go to next month",
+      id: "myCalendar",
+      minDate: new Date(2010, 1, 15),
+      maxDate: new Date(2010, 2, 15),
+      selectionConfiguration: {
+        type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
+        date: origin
+      }
+    }));
+    await _react2.fireEvent.keyDown(getDate(originStr), {
+      key: 'S'
+    });
+    expect(getDate(originStr).classList.contains('bpk-calendar-date--focused')).toBe(true);
+    await _react2.fireEvent.keyDown(getDate(originStr), {
+      key: 'ArrowRight'
+    });
+    expect(getDate(/2nd March/).classList.contains('bpk-calendar-date--focused')).toBe(true);
+    await _react2.fireEvent.keyDown(getDate(/2nd March/i), {
+      key: 'ArrowDown'
+    });
+    expect(getDate(/9th March/i).classList.contains('bpk-calendar-date--focused')).toBe(true);
+    await _react2.fireEvent.keyDown(getDate(/9th March/i), {
+      key: 'ArrowLeft'
+    });
+    expect(getDate(/8th March/i).classList.contains('bpk-calendar-date--focused')).toBe(true);
+    await _react2.fireEvent.keyDown(getDate(/8th March/i), {
+      key: 'ArrowUp'
+    });
+    expect(getDate(originStr).classList.contains('bpk-calendar-date--focused')).toBe(true);
+    await _react2.fireEvent.keyDown(getDate(originStr), {
+      key: 'End'
+    });
+    expect(getDate(/15th March/i).classList.contains('bpk-calendar-date--focused')).toBe(true);
+    await _react2.fireEvent.keyDown(getDate(/15th March/i), {
+      key: 'Home'
+    });
+    expect(getDate(originStr).classList.contains('bpk-calendar-date--focused')).toBe(true);
+    await _react2.fireEvent.keyDown(getDate(originStr), {
+      key: 'PageDown'
+    });
+    expect(getDate(/15th March/i).classList.contains('bpk-calendar-date--focused')).toBe(true);
+    await _react2.fireEvent.keyDown(getDate(/15th March/i), {
+      key: 'PageUp'
+    });
+    expect(getDate(/15th February/i).classList.contains('bpk-calendar-date--focused')).toBe(true);
+  });
+  it('should change month on keyboard nav across month boundary', async () => {
+    const onMonthChange = jest.fn();
+    const origin = new Date(2010, 1, 27);
+    const originStr = 'Saturday, 27th February 2010';
+
+    const getDate = name => _react2.screen.getByRole('button', {
+      name
+    });
+
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarContainer.default, {
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 1,
+      changeMonthLabel: "Change month",
+      previousMonthLabel: "Go to previous month",
+      nextMonthLabel: "Go to next month",
+      id: "myCalendar",
+      minDate: new Date(2010, 1, 1),
+      maxDate: new Date(2010, 2, 15),
+      selectionConfiguration: {
+        type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
+        date: origin
+      },
+      onMonthChange: onMonthChange
+    }));
+    await _react2.fireEvent.keyDown(getDate(originStr), {
+      key: 'ArrowRight'
+    });
+    expect(getDate(/28th February/i).classList.contains('bpk-calendar-date--focused')).toBe(true);
+    await _react2.fireEvent.keyDown(getDate(/28th February/i), {
+      key: 'ArrowRight'
+    });
+    expect(getDate(/1st March/i).classList.contains('bpk-calendar-date--focused')).toBe(true);
+    expect(onMonthChange.mock.calls.length).toEqual(1);
+    expect(onMonthChange.mock.calls[0][1]).toEqual({
+      month: new Date(2010, 2, 1),
+      source: 'GRID'
+    });
+  });
+});

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

@@ -0,0 +1,337 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withCalendarState = exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _bpkReactUtils = require("bpk-react-utils");
+
+var _customProptypes = _interopRequireWildcard(require("./custom-proptypes"));
+
+var _BpkCalendarNav = _interopRequireDefault(require("./BpkCalendarNav"));
+
+var _BpkCalendarGrid = require("./BpkCalendarGrid");
+
+var _BpkCalendarGridHeader = _interopRequireDefault(require("./BpkCalendarGridHeader"));
+
+var _BpkCalendarDate = _interopRequireDefault(require("./BpkCalendarDate"));
+
+var _composeCalendar = _interopRequireDefault(require("./composeCalendar"));
+
+var _dateUtils = require("./date-utils");
+
+const _excluded = ["date", "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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * 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;
+
+  if (!rawSelectedDate && !rawNextSelectedDate) {
+    return false;
+  }
+
+  if (rawSelectedDate && !rawNextSelectedDate || !rawSelectedDate && rawNextSelectedDate) {
+    return true;
+  }
+
+  return !(0, _dateUtils.isSameDay)(rawNextSelectedDate, rawSelectedDate);
+};
+/**
+ * Determines the focused date on the calendar
+ * @param {Date} rawSelectedDate the raw date provided to the calendar to be selected
+ * @param {Date} initiallyFocusedDate inital date that was selected
+ * @param {Date} minDate min available date to be selectable in the calendar
+ * @param {Date} maxDate max available date to be selectable in the calendar
+ * @returns {Date} which date to be focused on the calendar when it loads
+ */
+
+
+const determineFocusedDate = (rawSelectedDate, initiallyFocusedDate, minDate, maxDate) => {
+  if (rawSelectedDate) {
+    return (0, _dateUtils.dateToBoundaries)(rawSelectedDate, minDate, maxDate);
+  }
+
+  if (initiallyFocusedDate) {
+    return (0, _dateUtils.dateToBoundaries)(initiallyFocusedDate, minDate, maxDate);
+  }
+
+  return minDate;
+};
+/**
+ * Function that based on the configuration will return a single date or start and end date.
+ * @param {Object} selectionConfig - The configuration of calendar to be used
+ * @returns {Array} An array or single of multiple dates
+ */
+
+
+const getRawSelectedDate = selectionConfig => {
+  let rawDate = [];
+
+  switch (selectionConfig.type) {
+    case _customProptypes.CALENDAR_SELECTION_TYPE.single:
+      rawDate = [selectionConfig.date];
+      break;
+
+    case _customProptypes.CALENDAR_SELECTION_TYPE.range:
+      rawDate = [selectionConfig.startDate, selectionConfig.endDate];
+      break;
+
+    default:
+      rawDate = [null];
+      break;
+  }
+
+  return rawDate;
+};
+
+const withCalendarState = Calendar => {
+  class BpkCalendarContainer extends _react.Component {
+    constructor(props) {
+      super(props);
+
+      _defineProperty(this, "handleDateFocus", (event, {
+        date,
+        source
+      }) => {
+        const {
+          onMonthChange
+        } = this.props;
+        const focusedDate = (0, _dateUtils.dateToBoundaries)(date, (0, _dateUtils.startOfDay)(this.props.minDate), (0, _dateUtils.startOfDay)(this.props.maxDate));
+        const didMonthChange = !(0, _dateUtils.isSameMonth)(this.state.focusedDate, focusedDate);
+        this.setState({
+          preventKeyboardFocus: false,
+          focusedDate
+        }, () => {
+          if (onMonthChange && didMonthChange) {
+            onMonthChange(event, {
+              month: (0, _dateUtils.startOfMonth)(focusedDate),
+              source
+            });
+          }
+        });
+      });
+
+      _defineProperty(this, "handleDateSelect", date => {
+        const {
+          onDateSelect,
+          selectionConfiguration
+        } = this.props;
+        const keyboardFocusState = {
+          preventKeyboardFocus: false
+        };
+
+        if (onDateSelect) {
+          const newDate = (0, _dateUtils.dateToBoundaries)(date, (0, _dateUtils.startOfDay)(this.props.minDate), (0, _dateUtils.startOfDay)(this.props.maxDate));
+
+          if (selectionConfiguration.type === _customProptypes.CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && ((0, _dateUtils.isAfter)(newDate, selectionConfiguration.startDate) || (0, _dateUtils.isSameDay)(newDate, selectionConfiguration.startDate))) {
+            onDateSelect(selectionConfiguration.startDate, newDate);
+          } else {
+            onDateSelect(newDate);
+          }
+        } else {
+          this.setState(keyboardFocusState);
+        }
+      });
+
+      _defineProperty(this, "handleMonthChange", (event, {
+        month,
+        source
+      }) => {
+        this.handleDateFocus(event, {
+          date: (0, _dateUtils.setMonthYear)(this.state.focusedDate, month.getMonth(), month.getFullYear()),
+          source
+        });
+      });
+
+      _defineProperty(this, "handleDateKeyDown", event => {
+        event.persist();
+        const reverse = (0, _bpkReactUtils.isRTL)() ? -1 : 1;
+        const {
+          focusedDate
+        } = this.state;
+        const source = 'GRID';
+        let preventDefault = true;
+
+        switch (event.key) {
+          case 'ArrowRight':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.addDays)(focusedDate, reverse * 1),
+              source
+            });
+            break;
+
+          case 'ArrowLeft':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.addDays)(focusedDate, reverse * -1),
+              source
+            });
+            break;
+
+          case 'ArrowUp':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.addDays)(focusedDate, -7),
+              source
+            });
+            break;
+
+          case 'ArrowDown':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.addDays)(focusedDate, 7),
+              source
+            });
+            break;
+
+          case 'PageUp':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.addMonths)(focusedDate, -1),
+              source
+            });
+            break;
+
+          case 'PageDown':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.addMonths)(focusedDate, 1),
+              source
+            });
+            break;
+
+          case 'Home':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.startOfMonth)(focusedDate),
+              source
+            });
+            break;
+
+          case 'End':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.lastDayOfMonth)(focusedDate),
+              source
+            });
+            break;
+
+          default:
+            preventDefault = false;
+            break;
+        }
+
+        if (preventDefault) {
+          event.preventDefault();
+        }
+      });
+
+      const minDate = (0, _dateUtils.startOfDay)(this.props.minDate);
+      const maxDate = (0, _dateUtils.startOfDay)(this.props.maxDate);
+      const rawSelectedDate = getRawSelectedDate(this.props.selectionConfiguration);
+      const {
+        initiallyFocusedDate
+      } = this.props;
+      this.state = {
+        preventKeyboardFocus: true,
+        focusedDate: determineFocusedDate(rawSelectedDate[0], initiallyFocusedDate, minDate, maxDate)
+      };
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      const rawNextSelectedDate = getRawSelectedDate(nextProps.selectionConfiguration);
+      const minDate = (0, _dateUtils.startOfDay)(nextProps.minDate);
+      const maxDate = (0, _dateUtils.startOfDay)(nextProps.maxDate);
+
+      if (focusedDateHasChanged(this.props, nextProps)) {
+        this.setState({
+          focusedDate: (0, _dateUtils.dateToBoundaries)(rawNextSelectedDate[0], minDate, maxDate)
+        });
+      }
+    }
+
+    render() {
+      const _this$props = this.props,
+            {
+        date,
+        maxDate,
+        minDate,
+        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);
+      const month = (0, _dateUtils.startOfMonth)(sanitisedFocusedDate);
+      return /*#__PURE__*/_react.default.createElement(Calendar, _extends({
+        onDateClick: this.handleDateSelect,
+        onDateKeyDown: this.handleDateKeyDown,
+        onMonthChange: this.handleMonthChange,
+        month: month,
+        preventKeyboardFocus: this.state.preventKeyboardFocus,
+        focusedDate: sanitisedFocusedDate
+      }, calendarProps, {
+        minDate: sanitisedMinDate,
+        maxDate: sanitisedMaxDate,
+        selectionConfiguration: selectionConfiguration
+      }));
+    }
+
+  }
+
+  BpkCalendarContainer.propTypes = {
+    date: (0, _bpkReactUtils.deprecated)(_propTypes.default.instanceOf(Date), 'Use selectionConfiguration to set selectedDate'),
+    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,
+    selectedDate: (0, _bpkReactUtils.deprecated)(_propTypes.default.instanceOf(Date), 'Use selectionConfiguration to set selectedDate'),
+    initiallyFocusedDate: _propTypes.default.instanceOf(Date)
+  };
+  BpkCalendarContainer.defaultProps = {
+    date: null,
+    fixedWidth: true,
+    maxDate: (0, _dateUtils.addMonths)(new Date(), 12),
+    minDate: new Date(),
+    onDateSelect: null,
+    onMonthChange: null,
+    selectionConfiguration: {
+      type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
+      date: null
+    },
+    selectedDate: null,
+    initiallyFocusedDate: null
+  };
+  return BpkCalendarContainer;
+};
+
+exports.withCalendarState = withCalendarState;
+
+var _default = withCalendarState((0, _composeCalendar.default)(_BpkCalendarNav.default, _BpkCalendarGridHeader.default, _BpkCalendarGrid.BpkCalendarGridWithTransition, _BpkCalendarDate.default));
+
+exports.default = _default;