@skyscanner/backpack-web 23.2.1 → 23.3.0

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.addCalendarGridTransition = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _bpkReactUtils = require("../../bpk-react-utils");
 var _utils = require("./utils");
@@ -12,31 +11,30 @@ var _dateUtils = require("./date-utils");
 var _BpkCalendarGridTransitionModule = _interopRequireDefault(require("./BpkCalendarGridTransition.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["TransitionComponent", "className", "focusedDate"];
-/*
- * 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.
- */
 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; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /*
+                                                                                                                                                                                                                                                                                                                                                                                           * 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 getClassName = (0, _bpkReactUtils.cssModules)(_BpkCalendarGridTransitionModule.default);
 const transitionValues = {
   previous: '0px',
@@ -47,6 +45,10 @@ const getFocusedDateForMonth = (month, currentFocusedDate, minDate, maxDate) =>
 class BpkCalendarGridTransition extends _react.Component {
   constructor(props) {
     super(props);
+    _defineProperty(this, "isTransitionEndSupported", void 0);
+    const {
+      month = new Date()
+    } = props;
     this.onMonthTransitionEnd = this.onMonthTransitionEnd.bind(this);
     this.state = {
       isTransitioning: false,
@@ -54,15 +56,20 @@ class BpkCalendarGridTransition extends _react.Component {
       // Used in a test so this is valid usage.
       // eslint-disable-next-line react/no-unused-state
       currentMonth: props.month,
-      months: [(0, _dateUtils.addMonths)(props.month, -1), props.month, (0, _dateUtils.addMonths)(props.month, 1)]
+      months: [(0, _dateUtils.addMonths)(month, -1), month, (0, _dateUtils.addMonths)(month, 1)]
     };
     this.isTransitionEndSupported = (0, _utils.isTransitionEndSupported)();
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const hasMonthChanged = !(0, _dateUtils.isSameMonth)(this.props.month, nextProps.month);
+  UNSAFE_componentWillReceiveProps({
+    month: nextMonth = new Date()
+  }) {
+    const {
+      month = new Date()
+    } = this.props;
+    const hasMonthChanged = !(0, _dateUtils.isSameMonth)(month, nextMonth);
     if (hasMonthChanged) {
       const reverse = (0, _bpkReactUtils.isRTL)();
-      if ((0, _dateUtils.differenceInCalendarMonths)(nextProps.month, this.props.month) === 1) {
+      if ((0, _dateUtils.differenceInCalendarMonths)(nextMonth, month) === 1) {
         // Transition to next month
         this.setState({
           transitionValue: reverse ? transitionValues.previous : transitionValues.next,
@@ -70,7 +77,7 @@ class BpkCalendarGridTransition extends _react.Component {
         });
         return;
       }
-      if ((0, _dateUtils.differenceInCalendarMonths)(nextProps.month, this.props.month) === -1) {
+      if ((0, _dateUtils.differenceInCalendarMonths)(nextMonth, month) === -1) {
         // Transition to previous month
         this.setState({
           transitionValue: reverse ? transitionValues.next : transitionValues.previous,
@@ -81,8 +88,8 @@ class BpkCalendarGridTransition extends _react.Component {
       this.setState({
         // Used in a test so this is valid usage.
         // eslint-disable-next-line react/no-unused-state
-        currentMonth: nextProps.month,
-        months: [(0, _dateUtils.addMonths)(nextProps.month, -1), nextProps.month, (0, _dateUtils.addMonths)(nextProps.month, 1)]
+        currentMonth: nextMonth,
+        months: [(0, _dateUtils.addMonths)(nextMonth, -1), nextMonth, (0, _dateUtils.addMonths)(nextMonth, 1)]
       });
     }
   }
@@ -96,7 +103,7 @@ class BpkCalendarGridTransition extends _react.Component {
   }
   onMonthTransitionEnd() {
     const {
-      month
+      month = new Date()
     } = this.props;
     this.setState({
       transitionValue: transitionValues.current,
@@ -111,8 +118,8 @@ class BpkCalendarGridTransition extends _react.Component {
     const _this$props = this.props,
       {
         TransitionComponent,
-        className,
-        focusedDate
+        className = null,
+        focusedDate = null
       } = _this$props,
       rest = _objectWithoutProperties(_this$props, _excluded);
     const {
@@ -152,20 +159,14 @@ class BpkCalendarGridTransition extends _react.Component {
     });
   }
 }
-BpkCalendarGridTransition.propTypes = {
-  TransitionComponent: _propTypes.default.elementType.isRequired,
-  className: _propTypes.default.string,
-  month: _propTypes.default.instanceOf(Date),
-  focusedDate: _propTypes.default.instanceOf(Date)
-};
-BpkCalendarGridTransition.defaultProps = {
+_defineProperty(BpkCalendarGridTransition, "defaultProps", {
   className: null,
-  month: null,
+  month: new Date(),
   focusedDate: null
-};
-const addCalendarGridTransition = TransitionComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(BpkCalendarGridTransition, _objectSpread({
+});
+const addCalendarGridTransition = TransitionComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(BpkCalendarGridTransition, _objectSpread(_objectSpread({}, props), {}, {
   TransitionComponent: TransitionComponent
-}, props));
+}));
 exports.addCalendarGridTransition = addCalendarGridTransition;
 var _default = BpkCalendarGridTransition;
 exports.default = _default;

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

@@ -0,0 +1,37 @@
+/*
+ * 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 { ChangeEvent, MouseEvent } from 'react';
+type MonthChangeEvent = ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>;
+type Props = {
+    changeMonthLabel: string;
+    formatMonth: (month: Date) => string;
+    id: string;
+    maxDate: Date;
+    minDate: Date;
+    month: Date;
+    nextMonthLabel: string;
+    previousMonthLabel: string;
+    onMonthChange?: (event: MonthChangeEvent, options: {
+        month: Date;
+        source: string;
+    }) => void;
+    disabled?: boolean;
+};
+declare const BpkCalendarNav: ({ changeMonthLabel, disabled, formatMonth, id, maxDate, minDate, month, nextMonthLabel, onMonthChange, previousMonthLabel, }: Props) => JSX.Element;
+export default BpkCalendarNav;

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _arrowLeft = _interopRequireDefault(require("../../bpk-component-icon/lg/arrow-left"));
 var _arrowRight = _interopRequireDefault(require("../../bpk-component-icon/lg/arrow-right"));
 var _bpkComponentSelect = _interopRequireDefault(require("../../bpk-component-select"));
@@ -32,6 +31,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * limitations under the License.
  */
 
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+
 const getClassName = (0, _bpkReactUtils.cssModules)(_BpkCalendarNavModule.default);
 const changeMonth = ({
   callback,
@@ -53,19 +58,18 @@ const changeMonth = ({
     });
   }
 };
-const BpkCalendarNav = props => {
-  const {
-    changeMonthLabel,
-    disabled,
-    formatMonth,
-    id,
-    maxDate,
-    minDate,
-    month,
-    nextMonthLabel,
-    onMonthChange,
-    previousMonthLabel
-  } = props;
+const BpkCalendarNav = ({
+  changeMonthLabel,
+  disabled = false,
+  formatMonth,
+  id,
+  maxDate,
+  minDate,
+  month,
+  nextMonthLabel,
+  onMonthChange = () => {},
+  previousMonthLabel
+}) => {
   const baseMonth = (0, _dateUtils.startOfMonth)(month);
   const {
     max,
@@ -157,23 +161,5 @@ const BpkCalendarNav = props => {
     })
   });
 };
-BpkCalendarNav.propTypes = {
-  // Required
-  changeMonthLabel: _propTypes.default.string.isRequired,
-  formatMonth: _propTypes.default.func.isRequired,
-  id: _propTypes.default.string.isRequired,
-  maxDate: _propTypes.default.instanceOf(Date).isRequired,
-  minDate: _propTypes.default.instanceOf(Date).isRequired,
-  month: _propTypes.default.instanceOf(Date).isRequired,
-  nextMonthLabel: _propTypes.default.string.isRequired,
-  previousMonthLabel: _propTypes.default.string.isRequired,
-  // Optional
-  onMonthChange: _propTypes.default.func,
-  disabled: _propTypes.default.bool
-};
-BpkCalendarNav.defaultProps = {
-  onMonthChange: null,
-  disabled: false
-};
 var _default = BpkCalendarNav;
 exports.default = _default;

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

@@ -0,0 +1,51 @@
+/*
+ * 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 { ElementType } from 'react';
+import { Component } from 'react';
+import type { DateModifiers, SelectionConfiguration } from './custom-proptypes';
+export type Props = DefaultProps & {
+    DateComponent: ElementType;
+    dateModifiers: DateModifiers;
+    dates: Date[];
+    formatDateFull: (date: Date) => Date | string;
+    preventKeyboardFocus: boolean;
+    markToday: boolean;
+    markOutsideDays: boolean;
+    isKeyboardFocusable: boolean;
+    month: Date;
+    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    [rest: string]: any;
+};
+type DefaultProps = {
+    dateProps: {};
+    focusedDate: Date | number | null;
+    ignoreOutsideDate: boolean;
+    maxDate: Date | null;
+    minDate: Date | null;
+    onDateClick: () => void;
+    onDateKeyDown: () => void;
+    cellClassName: string | null;
+    selectionConfiguration: SelectionConfiguration;
+};
+declare class Week extends Component<Props> {
+    static defaultProps: DefaultProps;
+    shouldComponentUpdate(nextProps: Props): boolean;
+    render(): JSX.Element | null;
+}
+export default Week;

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

@@ -4,16 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _bpkReactUtils = require("../../bpk-react-utils");
 var _dateUtils = require("./date-utils");
-var _customProptypes = _interopRequireWildcard(require("./custom-proptypes"));
+var _customProptypes = require("./custom-proptypes");
 var _BpkCalendarGridModule = _interopRequireDefault(require("./BpkCalendarGrid.module.css"));
 var _BpkCalendarDate = require("./BpkCalendarDate");
 var _jsxRuntime = require("react/jsx-runtime");
-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 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; }
@@ -59,12 +56,16 @@ function or(total, bool) {
  * @returns {Boolean} true is selected and false if not
  */
 function getSelectedDate(date, selectionConfiguration) {
-  const startDate = selectionConfiguration.date || selectionConfiguration.startDate;
-  const {
-    endDate
-  } = selectionConfiguration;
-  const sameStartDay = (0, _dateUtils.isSameDay)(date, startDate);
-  const sameEndDay = (0, _dateUtils.isSameDay)(date, endDate);
+  let startDate;
+  let endDate;
+  if (selectionConfiguration.type === _customProptypes.CALENDAR_SELECTION_TYPE.single) {
+    startDate = selectionConfiguration.date;
+  } else {
+    startDate = selectionConfiguration.startDate;
+    endDate = selectionConfiguration.endDate;
+  }
+  const sameStartDay = startDate && (0, _dateUtils.isSameDay)(date, startDate);
+  const sameEndDay = endDate && (0, _dateUtils.isSameDay)(date, endDate);
   if (startDate && endDate && (sameStartDay || sameEndDay || (0, _dateUtils.isWithinRange)(date, {
     start: startDate,
     end: endDate
@@ -88,9 +89,12 @@ function getSelectionType(date, selectionConfiguration, formatDateFull, month, w
   const {
     endDate,
     startDate
-  } = selectionConfiguration;
-  const sameStartDay = (0, _dateUtils.isSameDay)(date, startDate);
-  const sameEndDay = (0, _dateUtils.isSameDay)(date, endDate);
+  } = selectionConfiguration.type === _customProptypes.CALENDAR_SELECTION_TYPE.range ? selectionConfiguration : {
+    startDate: null,
+    endDate: null
+  };
+  const sameStartDay = startDate && (0, _dateUtils.isSameDay)(date, startDate);
+  const sameEndDay = endDate && (0, _dateUtils.isSameDay)(date, endDate);
   const rangeDates = startDate && endDate;
   const isEmptyCell = !(0, _dateUtils.isSameMonth)(date, month) && ignoreOutsideDate;
   if (selectionConfiguration.type === _customProptypes.CALENDAR_SELECTION_TYPE.single && selectionConfiguration.date && (selectionConfiguration.date === formatDateFull(date) || formatDateFull(selectionConfiguration.date) === formatDateFull(date))) {
@@ -147,9 +151,9 @@ function getSelectionType(date, selectionConfiguration, formatDateFull, month, w
 const singleDateHandler = (props, nextProps) => {
   const currentSelectConfig = props.selectionConfiguration;
   const nextSelectConfig = nextProps.selectionConfiguration;
-  if (((0, _dateUtils.isSameWeek)(nextSelectConfig.date, nextProps.dates[0], {
+  if ((nextSelectConfig.date && (0, _dateUtils.isSameWeek)(nextSelectConfig.date, nextProps.dates[0], {
     weekStartsOn: nextProps.weekStartsOn
-  }) || (0, _dateUtils.isSameWeek)(currentSelectConfig.date, props.dates[0], {
+  }) || currentSelectConfig.date && (0, _dateUtils.isSameWeek)(currentSelectConfig.date, props.dates[0], {
     weekStartsOn: props.weekStartsOn
   })) && currentSelectConfig.date !== nextSelectConfig.date) {
     return true;
@@ -164,14 +168,21 @@ const singleDateHandler = (props, nextProps) => {
  * @returns {Boolean} based on if the date has changed
  */
 const rangeDateHandler = (props, nextProps) => {
-  const startDateChanged = !(0, _dateUtils.isSameDay)(props.selectionConfiguration.startDate, nextProps.selectionConfiguration.startDate);
-  const endDateChanged = !(0, _dateUtils.isSameDay)(props.selectionConfiguration.endDate, nextProps.selectionConfiguration.endDate);
+  const {
+    endDate,
+    startDate
+  } = props.selectionConfiguration;
+  const {
+    endDate: nextEndDate,
+    startDate: nextStartDate
+  } = nextProps.selectionConfiguration;
+  const startDateChanged = startDate && nextStartDate && !(0, _dateUtils.isSameDay)(startDate, nextStartDate);
+  const endDateChanged = endDate && nextEndDate && !(0, _dateUtils.isSameDay)(endDate, nextEndDate);
   if (startDateChanged || endDateChanged) {
     return true;
   }
   return false;
 };
-
 /*
   Week - table row containing a week full of DateContainer components
 */
@@ -187,9 +198,9 @@ class Week extends _react.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 (((0, _dateUtils.isSameWeek)(nextProps.focusedDate, nextProps.dates[0], {
+    if ((nextProps.focusedDate && (0, _dateUtils.isSameWeek)(nextProps.focusedDate, nextProps.dates[0], {
       weekStartsOn: nextProps.weekStartsOn
-    }) || (0, _dateUtils.isSameWeek)(this.props.focusedDate, this.props.dates[0], {
+    }) || this.props.focusedDate && (0, _dateUtils.isSameWeek)(this.props.focusedDate, this.props.dates[0], {
       weekStartsOn: this.props.weekStartsOn
     })) && this.props.focusedDate !== nextProps.focusedDate) {
       return true;
@@ -229,6 +240,7 @@ class Week extends _react.Component {
   render() {
     const {
       DateComponent,
+      cellClassName,
       dateModifiers,
       dateProps,
       focusedDate,
@@ -262,7 +274,7 @@ class Week extends _react.Component {
         }) : false;
         const dateSelectionType = getSelectionType(date, selectionConfiguration, formatDateFull, month, weekStartsOn, ignoreOutsideDate);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(DateContainer, {
-          className: this.props.cellClassName,
+          className: cellClassName,
           isEmptyCell: !(0, _dateUtils.isSameMonth)(date, month) && ignoreOutsideDate,
           isBlocked: isBlocked,
           selectionType: dateSelectionType,
@@ -274,7 +286,7 @@ class Week extends _react.Component {
             onDateKeyDown: onDateKeyDown,
             preventKeyboardFocus: preventKeyboardFocus,
             isKeyboardFocusable: isKeyboardFocusable,
-            isFocused: (0, _dateUtils.isSameDay)(date, focusedDate),
+            isFocused: focusedDate && (0, _dateUtils.isSameDay)(date, focusedDate),
             isSelected: getSelectedDate(date, selectionConfiguration),
             isBlocked: isBlocked,
             isOutside: markOutsideDays && !(0, _dateUtils.isSameMonth)(date, month),
@@ -286,54 +298,30 @@ class Week extends _react.Component {
     });
   }
 }
-Week.propTypes = {
-  DateComponent: _propTypes.default.elementType.isRequired,
-  dateModifiers: _customProptypes.default.DateModifiers.isRequired,
-  dates: _propTypes.default.arrayOf(Date).isRequired,
-  formatDateFull: _propTypes.default.func.isRequired,
-  preventKeyboardFocus: _propTypes.default.bool.isRequired,
-  markToday: _propTypes.default.bool.isRequired,
-  markOutsideDays: _propTypes.default.bool.isRequired,
-  isKeyboardFocusable: _propTypes.default.bool.isRequired,
-  month: _propTypes.default.instanceOf(Date).isRequired,
-  weekStartsOn: _propTypes.default.number.isRequired,
-  focusedDate: _propTypes.default.instanceOf(Date),
-  maxDate: _propTypes.default.instanceOf(Date),
-  minDate: _propTypes.default.instanceOf(Date),
-  cellClassName: _propTypes.default.string,
-  onDateClick: _propTypes.default.func,
-  onDateKeyDown: _propTypes.default.func,
-  selectionConfiguration: _customProptypes.default.SelectionConfiguration,
-  ignoreOutsideDate: _propTypes.default.bool,
-  dateProps: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
-};
-
-Week.defaultProps = {
-  cellClassName: null,
+_defineProperty(Week, "defaultProps", {
+  dateProps: {},
   focusedDate: null,
+  ignoreOutsideDate: false,
   maxDate: null,
   minDate: null,
-  onDateClick: null,
-  onDateKeyDown: null,
+  onDateClick: () => {},
+  onDateKeyDown: () => {},
   selectionConfiguration: {
     type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
     date: null
   },
-  ignoreOutsideDate: false,
-  dateProps: null
-};
-
+  cellClassName: null
+});
 /*
   DateContainer - one for each date in the grid; wraps the actual BpkCalendarDate (or custom) component
 */
-const DateContainer = props => {
-  const {
-    children,
-    className,
-    isBlocked,
-    isEmptyCell,
-    selectionType
-  } = props;
+const DateContainer = ({
+  children,
+  className = null,
+  isBlocked,
+  isEmptyCell,
+  selectionType
+}) => {
   const classNames = getClassName('bpk-calendar-grid__date', `bpk-calendar-grid__date--${selectionType}`, className);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     "aria-hidden": isEmptyCell || isBlocked,
@@ -341,15 +329,5 @@ const DateContainer = props => {
     children: children
   });
 };
-DateContainer.propTypes = {
-  children: _propTypes.default.element.isRequired,
-  selectionType: _propTypes.default.string.isRequired,
-  isEmptyCell: _propTypes.default.bool.isRequired,
-  isBlocked: _propTypes.default.bool.isRequired,
-  className: _propTypes.default.string
-};
-DateContainer.defaultProps = {
-  className: null
-};
 var _default = Week;
 exports.default = _default;

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

@@ -0,0 +1,52 @@
+/*
+ * 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 { DaysOfWeek, SelectionConfiguration, DateModifiers } from './custom-proptypes';
+type Props = {
+    changeMonthLabel?: string | null;
+    daysOfWeek: DaysOfWeek;
+    formatDateFull: (date: Date) => Date | string;
+    formatMonth: (date: Date) => Date | string;
+    id: string;
+    maxDate: Date;
+    minDate: Date;
+    month: Date;
+    nextMonthLabel?: string | null;
+    previousMonthLabel?: string | null;
+    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    className?: string | null;
+    dateModifiers?: DateModifiers;
+    fixedWidth?: boolean;
+    focusedDate?: Date | null;
+    markOutsideDays?: boolean;
+    markToday?: boolean;
+    onMonthChange?: () => void;
+    onDateClick?: () => void;
+    onDateKeyDown?: () => void;
+    preventKeyboardFocus?: boolean;
+    selectionConfiguration?: SelectionConfiguration;
+    gridClassName?: string | null;
+    weekDayKey?: string;
+    navProps?: {} | null;
+    headerProps?: {} | null;
+    gridProps?: {} | null;
+    dateProps?: {} | null;
+};
+declare const composeCalendar: (Nav: ComponentType<any> | string | null, GridHeader: ComponentType<any> | string | null, Grid: ComponentType<any> | string, CalendarDate: ComponentType<any> | string | null) => ({ changeMonthLabel, className, dateModifiers, dateProps, daysOfWeek, fixedWidth, focusedDate, formatDateFull, formatMonth, gridClassName, gridProps, headerProps, id, markOutsideDays, markToday, maxDate, minDate, month, navProps, nextMonthLabel, onDateClick, onDateKeyDown, onMonthChange, preventKeyboardFocus, previousMonthLabel, selectionConfiguration, weekDayKey, weekStartsOn, }: Props) => JSX.Element;
+export default composeCalendar;