@skyscanner/backpack-web 22.3.0 → 23.0.0

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

@@ -1,69 +1,142 @@
-/*
- * 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.
- */
+"use strict";
 
-import PropTypes from 'prop-types';
-import { createRef, Component } from 'react';
-
-import BpkInput, { withOpenEvents } from '../../bpk-component-input';
-import BpkModal from '../../bpk-component-modal';
-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,
-  CustomPropTypes,
-  CALENDAR_SELECTION_TYPE,
-  DateUtils,
-  BpkCalendarNav,
-} from '../../bpk-component-calendar';
-
-import STYLES from './BpkDatepicker.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const Input = withOpenEvents(BpkInput);
-
-const DefaultCalendar = withCalendarState(
-  composeCalendar(
-    BpkCalendarNav,
-    BpkCalendarGridHeader,
-    BpkCalendarGrid,
-    BpkCalendarDate,
-  ),
-);
-
-class BpkDatepicker extends Component {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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 _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; }
+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)(_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 {
   constructor(props) {
     super(props);
+    _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.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.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,
+      isOpen: props.isOpen
     };
-    this.inputRef = createRef();
+    this.inputRef = /*#__PURE__*/(0, _react.createRef)();
   }
-
   componentDidUpdate(prevProps, prevState) {
-    const { isOpen } = this.props;
-
+    const {
+      isOpen
+    } = this.props;
     if (prevProps.isOpen !== isOpen && prevState.isOpen !== isOpen) {
       if (isOpen) {
         this.onOpen();
@@ -72,176 +145,58 @@ class BpkDatepicker extends 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.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.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 {
-      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;
+    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);
 
     // The following props are not used in render
     delete rest.onDateSelect;
     delete rest.onOpenChange;
     delete rest.isOpen;
-
-    const input = inputComponent || (
-      <div
-        className={getClassName('bpk-datepicker__input')}
-        ref={this.inputRef}
-      >
-        <Input
-          id={id}
-          name={`${id}_input`}
-          value={this.getValue(selectionConfiguration, formatDate)}
-          aria-live="assertive"
-          aria-atomic="true"
-          aria-label={this.getLabel(selectionConfiguration, formatDateFull)}
-          onChange={() => null}
-          onOpen={this.onOpen}
-          isOpen={this.state.isOpen}
-          valid={valid}
-          {...inputProps}
-        />
-      </div>
-    );
-
+    const input = inputComponent || /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: getClassName('bpk-datepicker__input'),
+      ref: this.inputRef,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, _objectSpread({
+        id: id,
+        name: `${id}_input`,
+        value: this.getValue(selectionConfiguration, formatDate),
+        "aria-live": "assertive",
+        "aria-atomic": "true",
+        "aria-label": this.getLabel(selectionConfiguration, formatDateFull),
+        onChange: () => null,
+        onOpen: this.onOpen,
+        isOpen: this.state.isOpen,
+        valid: valid
+      }, inputProps))
+    });
     const calendarProps = {
       id: `${id}-calendar`,
       className: getClassName('bpk-datepicker__calendar'),
@@ -260,85 +215,77 @@ class BpkDatepicker extends Component {
       previousMonthLabel,
       weekStartsOn,
       initiallyFocusedDate,
-      selectionConfiguration,
+      selectionConfiguration
     };
-
-    return (
-      <BpkBreakpoint query={BREAKPOINTS.MOBILE}>
-        {(isMobile) =>
-          isMobile ? (
-            <>
-              {input}
-              <BpkModal
-                id={`${id}-modal`}
-                renderTarget={renderTarget}
-                onClose={this.props.onClose || this.onClose}
-                isOpen={this.state.isOpen}
-                title={title}
-                closeLabel={closeButtonText}
-                getApplicationElement={getApplicationElement}
-              >
-                <Calendar {...calendarProps} fixedWidth={false} />
-              </BpkModal>
-            </>
-          ) : (
-            <BpkPopover
-              id={`${id}-popover`}
-              target={input}
-              renderTarget={renderTarget}
-              onClose={this.props.onClose || this.onClose}
-              isOpen={this.state.isOpen}
-              label={title}
-              closeButtonText={closeButtonText}
-              tabIndex={0}
-              {...rest}
-            >
-              <Calendar {...calendarProps} fixedWidth={fixedWidth} />
-            </BpkPopover>
-          )
-        }
-      </BpkBreakpoint>
-    );
+    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, {
+          id: `${id}-modal`,
+          renderTarget: renderTarget,
+          onClose: this.props.onClose || this.onClose,
+          isOpen: this.state.isOpen,
+          title: title,
+          closeLabel: closeButtonText,
+          getApplicationElement: getApplicationElement,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Calendar, _objectSpread(_objectSpread({}, calendarProps), {}, {
+            fixedWidth: false
+          }))
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentPopover.default, _objectSpread(_objectSpread({
+        id: `${id}-popover`,
+        target: input,
+        renderTarget: renderTarget,
+        onClose: this.props.onClose || this.onClose,
+        isOpen: this.state.isOpen,
+        label: title,
+        closeButtonText: closeButtonText,
+        tabIndex: 0
+      }, rest), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Calendar, _objectSpread(_objectSpread({}, calendarProps), {}, {
+          fixedWidth: fixedWidth
+        }))
+      }))
+    });
   }
 }
-
 BpkDatepicker.propTypes = {
   // Required
-  changeMonthLabel: PropTypes.string.isRequired,
-  closeButtonText: PropTypes.string.isRequired,
-  daysOfWeek: CustomPropTypes.DaysOfWeek.isRequired,
-  formatDate: PropTypes.func.isRequired,
-  formatDateFull: PropTypes.func.isRequired,
-  formatMonth: PropTypes.func.isRequired,
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  getApplicationElement: PropTypes.func.isRequired,
-  nextMonthLabel: PropTypes.string.isRequired,
-  previousMonthLabel: PropTypes.string.isRequired,
-  weekStartsOn: PropTypes.number.isRequired,
+  changeMonthLabel: _propTypes.default.string.isRequired,
+  closeButtonText: _propTypes.default.string.isRequired,
+  daysOfWeek: _bpkComponentCalendar.CustomPropTypes.DaysOfWeek.isRequired,
+  formatDate: _propTypes.default.func.isRequired,
+  formatDateFull: _propTypes.default.func.isRequired,
+  formatMonth: _propTypes.default.func.isRequired,
+  id: _propTypes.default.string.isRequired,
+  title: _propTypes.default.string.isRequired,
+  getApplicationElement: _propTypes.default.func.isRequired,
+  nextMonthLabel: _propTypes.default.string.isRequired,
+  previousMonthLabel: _propTypes.default.string.isRequired,
+  weekStartsOn: _propTypes.default.number.isRequired,
   // Optional
-  calendarComponent: PropTypes.elementType,
-  inputComponent: PropTypes.elementType,
-  dateModifiers: CustomPropTypes.DateModifiers,
-  fixedWidth: PropTypes.bool,
-  inputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  markOutsideDays: PropTypes.bool,
-  markToday: PropTypes.bool,
-  maxDate: PropTypes.instanceOf(Date),
-  minDate: PropTypes.instanceOf(Date),
-  onDateSelect: PropTypes.func,
-  onOpenChange: PropTypes.func,
-  onMonthChange: PropTypes.func,
-  selectionConfiguration: CustomPropTypes.SelectionConfiguration,
-  initiallyFocusedDate: PropTypes.instanceOf(Date),
-  renderTarget: PropTypes.func,
-  isOpen: PropTypes.bool,
-  valid: PropTypes.bool,
+  calendarComponent: _propTypes.default.elementType,
+  inputComponent: _propTypes.default.elementType,
+  dateModifiers: _bpkComponentCalendar.CustomPropTypes.DateModifiers,
+  fixedWidth: _propTypes.default.bool,
+  inputProps: _propTypes.default.object,
+  // eslint-disable-line react/forbid-prop-types
+  markOutsideDays: _propTypes.default.bool,
+  markToday: _propTypes.default.bool,
+  maxDate: _propTypes.default.instanceOf(Date),
+  minDate: _propTypes.default.instanceOf(Date),
+  onDateSelect: _propTypes.default.func,
+  onOpenChange: _propTypes.default.func,
+  onMonthChange: _propTypes.default.func,
+  selectionConfiguration: _bpkComponentCalendar.CustomPropTypes.SelectionConfiguration,
+  initiallyFocusedDate: _propTypes.default.instanceOf(Date),
+  renderTarget: _propTypes.default.func,
+  isOpen: _propTypes.default.bool,
+  valid: _propTypes.default.bool,
   // Disabling this as if we set a default property for this value it causes the internal onClose function to stop working for default setup
   // eslint-disable-next-line react/require-default-props
-  onClose: PropTypes.func,
+  onClose: _propTypes.default.func
 };
-
 BpkDatepicker.defaultProps = {
   calendarComponent: DefaultCalendar,
   inputComponent: null,
@@ -354,11 +301,14 @@ BpkDatepicker.defaultProps = {
   onOpenChange: null,
   onMonthChange: null,
   previousMonthLabel: null,
-  selectionConfiguration: { type: CALENDAR_SELECTION_TYPE.single, date: null },
+  selectionConfiguration: {
+    type: _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single,
+    date: null
+  },
   initiallyFocusedDate: null,
   renderTarget: null,
   isOpen: false,
-  valid: null,
+  valid: null
 };
-
-export default BpkDatepicker;
+var _default = BpkDatepicker;
+exports.default = _default;

package/bpk-component-datepicker/src/BpkDatepicker.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-datepicker__calendar{margin:0 auto}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-datepicker__calendar{margin:0 auto}.bpk-datepicker__input{display:inline-block;width:100%}

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

@@ -1,3 +1,12 @@
+"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
  *
@@ -15,15 +24,5 @@
  * 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';
-import { themeAttributes as popoverAttributes } from '../../bpk-component-popover';
-
-export default [
-  ...calendarAttributes,
-  ...popoverAttributes,
-  ...modalAttributes,
-].filter(
-  (attribute, index, attributes) => attributes.indexOf(attribute) === index,
-);
+var _default = [..._bpkComponentCalendar.themeAttributes, ..._bpkComponentPopover.themeAttributes, ..._bpkComponentModal.themeAttributes].filter((attribute, index, attributes) => attributes.indexOf(attribute) === index);
+exports.default = _default;