@skyscanner/backpack-web 25.8.0 → 25.8.3

package/bpk-component-datatable/src/hasChildrenOfType.js

@@ -1,11 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-exports.getDisplayName = getDisplayName;
-var _react = require("react");
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,15 +14,16 @@ var _react = require("react");
  * 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 getDisplayName(Component) {
+ */import { Children } from 'react';
+export function getDisplayName(Component) {
   return Component.displayName || Component.name || (typeof Component === 'string' && Component.length > 0 ? Component : 'Unknown');
 }
 const hasChildrenOfType = (type, atLeast = 1) => (props, propType, componentName) => {
-  if (_react.Children.count(props[propType]) < atLeast) {
+  if (Children.count(props[propType]) < atLeast) {
     const inflectedNoun = atLeast === 1 ? 'child' : 'children';
     return Error(`${componentName} requires at least ${atLeast} '${getDisplayName(type)}' ${inflectedNoun}.`);
   }
-  const children = _react.Children.toArray(props[propType]);
+  const children = Children.toArray(props[propType]);
   for (let i = 0; i < children.length; i += 1) {
     const child = children[i];
     if (child.type !== type && !(child.type.prototype instanceof type)) {
@@ -39,5 +32,4 @@ const hasChildrenOfType = (type, atLeast = 1) => (props, propType, componentName
   }
   return undefined;
 };
-var _default = hasChildrenOfType;
-exports.default = _default;
+export default hasChildrenOfType;

package/bpk-component-datatable/src/sort-types.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SORT_DIRECTION_TYPES = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,8 +16,7 @@ exports.SORT_DIRECTION_TYPES = void 0;
  * limitations under the License.
  */ // This file exists to break a cycle that would otherwise happen between
 // BpkDataTableColumn.js and common-types.js
-const SORT_DIRECTION_TYPES = {
+export const SORT_DIRECTION_TYPES = {
   ASC: 'ASC',
   DESC: 'DESC'
-};
-exports.SORT_DIRECTION_TYPES = SORT_DIRECTION_TYPES;
+};

package/bpk-component-datatable/src/utils.js

@@ -1,14 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getColumns = void 0;
-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); }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -29,7 +18,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 // To maintain backwards compatibility with the old API of BpkDataTable which takes columns as children
 // The `react-table` library however expects columns as an array of objects
 // eslint-disable-next-line import/prefer-default-export
-const getColumns = columns => columns.map(column => {
+export const getColumns = columns => columns.map(column => {
   const {
     cellDataGetter,
     cellRenderer,
@@ -94,12 +83,12 @@ const getColumns = columns => columns.map(column => {
     style,
     width
   } = column.props;
-  return _objectSpread(_objectSpread({
+  return {
     Header: headerRenderer ? columnHeaderRenderer : label,
-    accessor: dataKey
-  }, (cellRenderer || cellDataGetter) && {
-    Cell: columnCellRenderer || columnCellDataGetter
-  }), {}, {
+    accessor: dataKey,
+    ...((cellRenderer || cellDataGetter) && {
+      Cell: columnCellRenderer || columnCellDataGetter
+    }),
     className,
     disableSortBy: disableSort,
     defaultSortDirection,
@@ -110,6 +99,5 @@ const getColumns = columns => columns.map(column => {
     minWidth,
     style,
     width
-  });
-});
-exports.getColumns = getColumns;
+  };
+});

package/bpk-component-datepicker/index.js

@@ -1,25 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "CALENDAR_SELECTION_TYPE", {
-  enumerable: true,
-  get: function () {
-    return _bpkComponentCalendar.CALENDAR_SELECTION_TYPE;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "themeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _themeAttributes.default;
-  }
-});
-var _bpkComponentCalendar = require("../bpk-component-calendar");
-var _BpkDatepicker = _interopRequireDefault(require("./src/BpkDatepicker"));
-var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -37,5 +15,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkDatepicker.default;
-exports.default = _default;
+
+import { CALENDAR_SELECTION_TYPE } from "../bpk-component-calendar";
+import BpkDatepicker from "./src/BpkDatepicker";
+import themeAttributes from "./src/themeAttributes";
+export default BpkDatepicker;
+export { CALENDAR_SELECTION_TYPE, themeAttributes };

package/bpk-component-datepicker/src/BpkDatepicker.js

@@ -1,137 +1,67 @@
-"use strict";
+/*
+ * 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.
+ */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _bpkComponentInput = _interopRequireWildcard(require("../../bpk-component-input"));
-var _bpkComponentModal = _interopRequireDefault(require("../../bpk-component-modal"));
-var _bpkComponentPopover = _interopRequireDefault(require("../../bpk-component-popover"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _bpkComponentBreakpoint = _interopRequireWildcard(require("../../bpk-component-breakpoint"));
-var _bpkComponentCalendar = require("../../bpk-component-calendar");
-var _BpkDatepickerModule = _interopRequireDefault(require("./BpkDatepicker.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["calendarComponent", "changeMonthLabel", "closeButtonText", "dateModifiers", "daysOfWeek", "fixedWidth", "formatDate", "formatDateFull", "formatMonth", "getApplicationElement", "id", "initiallyFocusedDate", "inputComponent", "inputProps", "markOutsideDays", "markToday", "maxDate", "minDate", "nextMonthLabel", "onMonthChange", "previousMonthLabel", "renderTarget", "selectionConfiguration", "title", "valid", "weekStartsOn"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 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 _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.
-                                                                                                                                                                                                                                                                                                                                                                                           */ // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkDatepickerModule.default);
-const Input = (0, _bpkComponentInput.withOpenEvents)(_bpkComponentInput.default);
-const DefaultCalendar = (0, _bpkComponentCalendar.withCalendarState)((0, _bpkComponentCalendar.composeCalendar)(_bpkComponentCalendar.BpkCalendarNav, _bpkComponentCalendar.BpkCalendarGridHeader, _bpkComponentCalendar.BpkCalendarGrid, _bpkComponentCalendar.BpkCalendarDate));
-class BpkDatepicker extends _react.Component {
+import { createRef, Component } from 'react';
+import BpkInput, { withOpenEvents } from "../../bpk-component-input";
+import BpkModal from "../../bpk-component-modal";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkPopover from "../../bpk-component-popover";
+import { cssModules } from "../../bpk-react-utils";
+import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
+import { composeCalendar, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate, withCalendarState, CALENDAR_SELECTION_TYPE, DateUtils, BpkCalendarNav } from "../../bpk-component-calendar";
+import STYLES from "./BpkDatepicker.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const Input = withOpenEvents(BpkInput);
+const DefaultCalendar = withCalendarState(composeCalendar(BpkCalendarNav, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate));
+class BpkDatepicker extends Component {
+  static defaultProps = {
+    calendarComponent: DefaultCalendar,
+    inputComponent: null,
+    dateModifiers: {},
+    inputProps: {},
+    fixedWidth: true,
+    markOutsideDays: true,
+    markToday: DefaultCalendar.defaultProps.markToday,
+    maxDate: DefaultCalendar.defaultProps.maxDate,
+    minDate: DefaultCalendar.defaultProps.minDate,
+    nextMonthLabel: null,
+    onDateSelect: null,
+    onOpenChange: null,
+    onMonthChange: null,
+    previousMonthLabel: null,
+    selectionConfiguration: {
+      type: CALENDAR_SELECTION_TYPE.single,
+      date: null
+    },
+    initiallyFocusedDate: null,
+    renderTarget: null,
+    isOpen: false,
+    valid: null
+  };
   constructor(props) {
     super(props);
-    _defineProperty(this, "inputRef", void 0);
-    _defineProperty(this, "onOpen", () => {
-      this.setState({
-        isOpen: true
-      });
-      if (this.props.onOpenChange) {
-        this.props.onOpenChange(true);
-      }
-    });
-    _defineProperty(this, "onClose", () => {
-      this.setState({
-        isOpen: false
-      });
-      if (this.props.onOpenChange) {
-        this.props.onOpenChange(false);
-      }
-    });
-    /**
-     * Gets the correct label for the input field to be supplied to the aria-label
-     * @param {Object} selectionConfiguration current selection configuration
-     * @param {Function} formatDateFull function supplied to format date
-     * @returns {String} date string
-     */
-    _defineProperty(this, "getLabel", (selectionConfiguration, formatDateFull) => {
-      if (selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single && selectionConfiguration.date) {
-        return formatDateFull(selectionConfiguration.date);
-      }
-      if (selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.range) {
-        if (selectionConfiguration.startDate && !selectionConfiguration.endDate) {
-          return formatDateFull(selectionConfiguration.startDate);
-        }
-        if (selectionConfiguration.startDate && selectionConfiguration.endDate) {
-          return `${formatDateFull(selectionConfiguration.startDate)} - ${formatDateFull(selectionConfiguration.endDate)}`;
-        }
-      }
-      return '';
-    });
-    /**
-     * Gets the correct value for the input field
-     * @param {Object} selectionConfiguration current selection configuration
-     * @param {Function} formatDate function supplied to format date
-     * @returns {String} date value
-     */
-    _defineProperty(this, "getValue", (selectionConfiguration, formatDate) => {
-      if (selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single && selectionConfiguration.date) {
-        return formatDate(selectionConfiguration.date);
-      }
-      if (selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.range) {
-        if (selectionConfiguration.startDate && !selectionConfiguration.endDate) {
-          return formatDate(selectionConfiguration.startDate);
-        }
-        if (selectionConfiguration.startDate && selectionConfiguration.endDate) {
-          return `${formatDate(selectionConfiguration.startDate)} - ${formatDate(selectionConfiguration.endDate)}`;
-        }
-      }
-      return '';
-    });
-    _defineProperty(this, "handleDateSelect", (startDate, endDate = null) => {
-      const {
-        maxDate,
-        minDate,
-        onClose,
-        onDateSelect,
-        selectionConfiguration
-      } = this.props;
-
-      // When the calendar is a single date we always want to close it when a date is selected
-      // or if its a range calendar we only want to close the calendar when a range is selected.
-      // If a custom onClose function is provided then we don't want to run the internal version.
-      if (selectionConfiguration && (selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single || selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.range && endDate) && !onClose) {
-        this.onClose();
-      }
-      if (onDateSelect) {
-        const newStartDate = _bpkComponentCalendar.DateUtils.dateToBoundaries(startDate, _bpkComponentCalendar.DateUtils.startOfDay(minDate), _bpkComponentCalendar.DateUtils.startOfDay(maxDate));
-        const newEndDate = _bpkComponentCalendar.DateUtils.dateToBoundaries(endDate, _bpkComponentCalendar.DateUtils.startOfDay(minDate), _bpkComponentCalendar.DateUtils.startOfDay(maxDate));
-        if (selectionConfiguration && selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && (_bpkComponentCalendar.DateUtils.isAfter(newEndDate, selectionConfiguration.startDate) || _bpkComponentCalendar.DateUtils.isSameDay(newEndDate, selectionConfiguration.startDate))) {
-          onDateSelect(selectionConfiguration.startDate, newEndDate);
-        } else {
-          onDateSelect(newStartDate);
-        }
-      }
-    });
     this.state = {
       isOpen: props.isOpen
     };
-    this.inputRef = /*#__PURE__*/(0, _react.createRef)();
+    this.inputRef = /*#__PURE__*/createRef();
   }
   componentDidUpdate(prevProps, prevState) {
     const {
@@ -145,46 +75,128 @@ class BpkDatepicker extends _react.Component {
       }
     }
   }
+  onOpen = () => {
+    this.setState({
+      isOpen: true
+    });
+    if (this.props.onOpenChange) {
+      this.props.onOpenChange(true);
+    }
+  };
+  onClose = () => {
+    this.setState({
+      isOpen: false
+    });
+    if (this.props.onOpenChange) {
+      this.props.onOpenChange(false);
+    }
+  };
+
+  /**
+   * Gets the correct label for the input field to be supplied to the aria-label
+   * @param {Object} selectionConfiguration current selection configuration
+   * @param {Function} formatDateFull function supplied to format date
+   * @returns {String} date string
+   */
+  getLabel = (selectionConfiguration, formatDateFull) => {
+    if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single && selectionConfiguration.date) {
+      return formatDateFull(selectionConfiguration.date);
+    }
+    if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range) {
+      if (selectionConfiguration.startDate && !selectionConfiguration.endDate) {
+        return formatDateFull(selectionConfiguration.startDate);
+      }
+      if (selectionConfiguration.startDate && selectionConfiguration.endDate) {
+        return `${formatDateFull(selectionConfiguration.startDate)} - ${formatDateFull(selectionConfiguration.endDate)}`;
+      }
+    }
+    return '';
+  };
+
+  /**
+   * Gets the correct value for the input field
+   * @param {Object} selectionConfiguration current selection configuration
+   * @param {Function} formatDate function supplied to format date
+   * @returns {String} date value
+   */
+  getValue = (selectionConfiguration, formatDate) => {
+    if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single && selectionConfiguration.date) {
+      return formatDate(selectionConfiguration.date);
+    }
+    if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range) {
+      if (selectionConfiguration.startDate && !selectionConfiguration.endDate) {
+        return formatDate(selectionConfiguration.startDate);
+      }
+      if (selectionConfiguration.startDate && selectionConfiguration.endDate) {
+        return `${formatDate(selectionConfiguration.startDate)} - ${formatDate(selectionConfiguration.endDate)}`;
+      }
+    }
+    return '';
+  };
+  handleDateSelect = (startDate, endDate = null) => {
+    const {
+      maxDate,
+      minDate,
+      onClose,
+      onDateSelect,
+      selectionConfiguration
+    } = this.props;
+
+    // When the calendar is a single date we always want to close it when a date is selected
+    // or if its a range calendar we only want to close the calendar when a range is selected.
+    // If a custom onClose function is provided then we don't want to run the internal version.
+    if (selectionConfiguration && (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single || selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range && endDate) && !onClose) {
+      this.onClose();
+    }
+    if (onDateSelect) {
+      const newStartDate = DateUtils.dateToBoundaries(startDate, DateUtils.startOfDay(minDate), DateUtils.startOfDay(maxDate));
+      const newEndDate = DateUtils.dateToBoundaries(endDate, DateUtils.startOfDay(minDate), DateUtils.startOfDay(maxDate));
+      if (selectionConfiguration && selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && (DateUtils.isAfter(newEndDate, selectionConfiguration.startDate) || DateUtils.isSameDay(newEndDate, selectionConfiguration.startDate))) {
+        onDateSelect(selectionConfiguration.startDate, newEndDate);
+      } else {
+        onDateSelect(newStartDate);
+      }
+    }
+  };
   render() {
-    const _this$props = this.props,
-      {
-        calendarComponent: Calendar,
-        changeMonthLabel,
-        closeButtonText,
-        dateModifiers,
-        daysOfWeek,
-        fixedWidth,
-        formatDate,
-        formatDateFull,
-        formatMonth,
-        getApplicationElement,
-        id,
-        initiallyFocusedDate,
-        inputComponent,
-        inputProps,
-        markOutsideDays,
-        markToday,
-        maxDate,
-        minDate,
-        nextMonthLabel,
-        onMonthChange,
-        previousMonthLabel,
-        renderTarget,
-        selectionConfiguration,
-        title,
-        valid,
-        weekStartsOn
-      } = _this$props,
-      rest = _objectWithoutProperties(_this$props, _excluded);
+    const {
+      calendarComponent: Calendar,
+      changeMonthLabel,
+      closeButtonText,
+      dateModifiers,
+      daysOfWeek,
+      fixedWidth,
+      formatDate,
+      formatDateFull,
+      formatMonth,
+      getApplicationElement,
+      id,
+      initiallyFocusedDate,
+      inputComponent,
+      inputProps,
+      markOutsideDays,
+      markToday,
+      maxDate,
+      minDate,
+      nextMonthLabel,
+      onMonthChange,
+      previousMonthLabel,
+      renderTarget,
+      selectionConfiguration,
+      title,
+      valid,
+      weekStartsOn,
+      ...rest
+    } = this.props;
 
     // The following props are not used in render
     delete rest.onDateSelect;
     delete rest.onOpenChange;
     delete rest.isOpen;
-    const input = inputComponent || /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    const input = inputComponent || /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-datepicker__input'),
       ref: this.inputRef,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, _objectSpread({
+      children: /*#__PURE__*/_jsx(Input, {
         id: id,
         name: `${id}_input`,
         value: this.getValue(selectionConfiguration, formatDate),
@@ -194,8 +206,9 @@ class BpkDatepicker extends _react.Component {
         onChange: () => null,
         onOpen: this.onOpen,
         isOpen: this.state.isOpen,
-        valid: valid
-      }, inputProps))
+        valid: valid,
+        ...inputProps
+      })
     });
     const calendarProps = {
       id: `${id}-calendar`,
@@ -217,10 +230,10 @@ class BpkDatepicker extends _react.Component {
       initiallyFocusedDate,
       selectionConfiguration
     };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentBreakpoint.default, {
-      query: _bpkComponentBreakpoint.BREAKPOINTS.MOBILE,
-      children: isMobile => isMobile ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [input, /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentModal.default, {
+    return /*#__PURE__*/_jsx(BpkBreakpoint, {
+      query: BREAKPOINTS.MOBILE,
+      children: isMobile => isMobile ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [input, /*#__PURE__*/_jsx(BpkModal, {
           id: `${id}-modal`,
           renderTarget: renderTarget,
           onClose: this.props.onClose || this.onClose,
@@ -228,11 +241,12 @@ class BpkDatepicker extends _react.Component {
           title: title,
           closeLabel: closeButtonText,
           getApplicationElement: getApplicationElement,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Calendar, _objectSpread(_objectSpread({}, calendarProps), {}, {
+          children: /*#__PURE__*/_jsx(Calendar, {
+            ...calendarProps,
             fixedWidth: false
-          }))
+          })
         })]
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentPopover.default, _objectSpread(_objectSpread({
+      }) : /*#__PURE__*/_jsx(BpkPopover, {
         id: `${id}-popover`,
         target: input,
         renderTarget: renderTarget,
@@ -240,38 +254,14 @@ class BpkDatepicker extends _react.Component {
         isOpen: this.state.isOpen,
         label: title,
         closeButtonText: closeButtonText,
-        tabIndex: 0
-      }, rest), {}, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Calendar, _objectSpread(_objectSpread({}, calendarProps), {}, {
+        tabIndex: 0,
+        ...rest,
+        children: /*#__PURE__*/_jsx(Calendar, {
+          ...calendarProps,
           fixedWidth: fixedWidth
-        }))
-      }))
+        })
+      })
     });
   }
 }
-_defineProperty(BpkDatepicker, "defaultProps", {
-  calendarComponent: DefaultCalendar,
-  inputComponent: null,
-  dateModifiers: {},
-  inputProps: {},
-  fixedWidth: true,
-  markOutsideDays: true,
-  markToday: DefaultCalendar.defaultProps.markToday,
-  maxDate: DefaultCalendar.defaultProps.maxDate,
-  minDate: DefaultCalendar.defaultProps.minDate,
-  nextMonthLabel: null,
-  onDateSelect: null,
-  onOpenChange: null,
-  onMonthChange: null,
-  previousMonthLabel: null,
-  selectionConfiguration: {
-    type: _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single,
-    date: null
-  },
-  initiallyFocusedDate: null,
-  renderTarget: null,
-  isOpen: false,
-  valid: null
-});
-var _default = BpkDatepicker;
-exports.default = _default;
+export default BpkDatepicker;

package/bpk-component-datepicker/src/themeAttributes.js

@@ -1,12 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _bpkComponentCalendar = require("../../bpk-component-calendar");
-var _bpkComponentModal = require("../../bpk-component-modal");
-var _bpkComponentPopover = require("../../bpk-component-popover");
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -24,6 +15,9 @@ var _bpkComponentPopover = require("../../bpk-component-popover");
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import { themeAttributes as calendarAttributes } from "../../bpk-component-calendar";
+import { themeAttributes as modalAttributes } from "../../bpk-component-modal";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-var _default = [..._bpkComponentCalendar.themeAttributes, ..._bpkComponentPopover.themeAttributes, ..._bpkComponentModal.themeAttributes].filter((attribute, index, attributes) => attributes.indexOf(attribute) === index);
-exports.default = _default;
+import { themeAttributes as popoverAttributes } from "../../bpk-component-popover";
+export default [...calendarAttributes, ...popoverAttributes, ...modalAttributes].filter((attribute, index, attributes) => attributes.indexOf(attribute) === index);