@elliemae/ds-date-range-picker 2.3.0-alpha.9 → 2.3.0-next.3

package/cjs/DSDateRangePicker.js

@@ -0,0 +1,204 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var dsClassnames = require('@elliemae/ds-classnames');
+var moment = require('moment');
+require('react-dates/initialize');
+var defaultPhrases = require('react-dates/lib/defaultPhrases');
+var DayPickerRangeController = require('./components/DayPickerRangeController.js');
+var DSDateRangePickerImpl = require('./components/DSDateRangePickerImpl.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+
+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__default["default"](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; }
+
+const DSDateRangePicker = _ref => {
+  let {
+    containerProps = {},
+    className = '',
+    disabled = false,
+    required = false,
+    startDateRequired = false,
+    endDateRequired = false,
+    id,
+    hasError = false,
+    validationMessage = '',
+    readOnly = false,
+    screenReaderInputMessage = 'Select date',
+    initialVisibleMonth = moment__default["default"](),
+    firstDayOfWeek = 0,
+    keepOpenOnDateSelect = true,
+    reopenPickerOnClearDates = false,
+    hideKeyboardShortcutsPanel = true,
+    onPrevMonthClick = () => null,
+    onNextMonthClick = () => null,
+    onClose = () => null,
+    onOutsideClick = () => null,
+    transitionDuration = 0,
+    verticalSpacing = 0,
+    minimumNights = 0,
+    isDayBlocked = () => false,
+    isOutsideRange = () => false,
+    isDayHighlighted = () => false,
+    displayFormat = 'L',
+    displayFormatDay = 'D',
+    phrases = defaultPhrases.DateRangePickerPhrases,
+    startDate,
+    endDate,
+    startDateId = 'startDateId',
+    endDateId = 'endDateId',
+    labelFrom = 'From',
+    labelTo = 'To',
+    enableOutsideDays = true,
+    onChangeStartInput = () => null,
+    onChangeEndInput = () => null,
+    onDatesChange = () => null
+  } = _ref;
+  const {
+    cssClassName,
+    prefixBlockName
+  } = dsClassnames.convertPropToCssClassName('datepicker', className, {
+    hasError,
+    readOnly,
+    disabled,
+    id
+  });
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+    className: "".concat(prefixBlockName, "-range ").concat(cssClassName, " ").concat(prefixBlockName, "-range"),
+    children: /*#__PURE__*/_jsx__default["default"](DSDateRangePickerImpl["default"], {
+      appendToBody: true,
+      disabled: disabled,
+      displayFormat: displayFormat,
+      displayFormatDay: displayFormatDay,
+      enableOutsideDays: enableOutsideDays,
+      endDate: endDate,
+      endDateId: endDateId,
+      firstDayOfWeek: firstDayOfWeek,
+      hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
+      initialVisibleMonth: () => initialVisibleMonth ? moment__default["default"](initialVisibleMonth) : moment__default["default"](startDate),
+      isDayBlocked: isDayBlocked,
+      isDayHighlighted: isDayHighlighted,
+      isOutsideRange: isOutsideRange === true || isOutsideRange === false ? () => isOutsideRange : isOutsideRange,
+      keepOpenOnDateSelect: keepOpenOnDateSelect,
+      labelFrom: labelFrom,
+      labelTo: labelTo,
+      minimumNights: minimumNights,
+      onDatesChange: onDatesChange,
+      onChangeStartInput: onChangeStartInput,
+      onChangeEndInput: onChangeEndInput,
+      onClose: onClose,
+      onNextMonthClick: onNextMonthClick,
+      onPrevMonthClick: onPrevMonthClick,
+      onOutsideClick: onOutsideClick,
+      phrases: phrases,
+      readOnly: readOnly,
+      reopenPickerOnClearDates: reopenPickerOnClearDates,
+      required: required,
+      startDateRequired: startDateRequired,
+      endDateRequired: endDateRequired,
+      screenReaderInputMessage: screenReaderInputMessage,
+      startDate: startDate,
+      startDateId: startDateId,
+      transitionDuration: transitionDuration,
+      verticalSpacing: verticalSpacing,
+      hasError: hasError,
+      validationMessage: validationMessage
+    })
+  }));
+};
+
+const dateRangePickerProps = {
+  containerProps: reactDesc.PropTypes.shape({}).description('Set of Properties attached to the main container'),
+  className: reactDesc.PropTypes.string.description('html class attribute'),
+  disabled: reactDesc.PropTypes.bool.description('disable component or not').defaultValue(false),
+  required: reactDesc.PropTypes.bool.description('input is required or not').defaultValue(false),
+  startDateRequired: reactDesc.PropTypes.bool.description('start date is required or not').defaultValue(false),
+  endDateRequired: reactDesc.PropTypes.bool.description('end date is required or not').defaultValue(false),
+  id: reactDesc.PropTypes.string.description('components id'),
+  hasError: reactDesc.PropTypes.bool.description('set error state').defaultValue(false),
+  validationMessage: reactDesc.PropTypes.string.description('validation message'),
+  readOnly: reactDesc.PropTypes.bool.description('component is read only or not').description(false),
+  screenReaderInputMessage: reactDesc.PropTypes.string.description('message to be anounced by screen reader').defaultValue('select date'),
+  initialVisibleMonth: reactDesc.PropTypes.instanceOf(Date, moment__default["default"]).description('initial visible month'),
+  firstDayOfWeek: reactDesc.PropTypes.number.description('first day of week').defaultValue(0),
+  keepOpenOnDateSelect: reactDesc.PropTypes.bool.description('keep picker open when a date is selected').defaultValue(true),
+  reopenPickerOnClearDates: reactDesc.PropTypes.bool.description('reopen picker when clearing dates').defaultValue(false),
+  hideKeyboardShortcutsPanel: reactDesc.PropTypes.bool.description('hide keyabord shortcut panel or not'),
+  onPrevMonthClick: reactDesc.PropTypes.func.description('function executed when clicking on prev month button'),
+  onNextMonthClick: reactDesc.PropTypes.func.description('function executed when clicking on next month button'),
+  onClose: reactDesc.PropTypes.func.description('function executed when component closes'),
+  transitionDuration: reactDesc.PropTypes.number.description('transition duration').defaultValue(0),
+  verticalSpacing: reactDesc.PropTypes.number.description('vertical spacing'),
+  isDayBlocked: reactDesc.PropTypes.func.description('function that returns each day and disables desired dates'),
+  isOutsideRange: reactDesc.PropTypes.func.description('function that returns each day and disables outisde range dates'),
+  isDayHighlighted: reactDesc.PropTypes.func.description('function that returns each day and higlights desired dates'),
+  minimumNights: 0,
+  displayFormat: reactDesc.PropTypes.string.description('display format').defaultValue('L'),
+  displayFormatDay: reactDesc.PropTypes.string.description('display format day').defaultValue('D'),
+  phrases: reactDesc.PropTypes.shape({
+    calendarLabel: reactDesc.PropTypes.string,
+    closeDatePicker: reactDesc.PropTypes.string,
+    clearDates: reactDesc.PropTypes.string,
+    focusStartDate: reactDesc.PropTypes.string,
+    jumpToPrevMonth: reactDesc.PropTypes.string,
+    jumpToNextMonth: reactDesc.PropTypes.string,
+    keyboardShortcuts: reactDesc.PropTypes.string,
+    showKeyboardShortcutsPanel: reactDesc.PropTypes.string,
+    hideKeyboardShortcutsPanel: reactDesc.PropTypes.string,
+    openThisPanel: reactDesc.PropTypes.string,
+    enterKey: reactDesc.PropTypes.string,
+    leftArrowRightArrow: reactDesc.PropTypes.string,
+    upArrowDownArrow: reactDesc.PropTypes.string,
+    pageUpPageDown: reactDesc.PropTypes.string,
+    homeEnd: reactDesc.PropTypes.string,
+    escape: reactDesc.PropTypes.string,
+    questionMark: reactDesc.PropTypes.string,
+    selectFocusedDate: reactDesc.PropTypes.string,
+    moveFocusByOneDay: reactDesc.PropTypes.string,
+    moveFocusByOneWeek: reactDesc.PropTypes.string,
+    moveFocusByOneMonth: reactDesc.PropTypes.string,
+    moveFocustoStartAndEndOfWeek: reactDesc.PropTypes.string,
+    returnFocusToInput: reactDesc.PropTypes.string,
+    keyboardNavigationInstructions: reactDesc.PropTypes.string,
+    chooseAvailableStartDate: reactDesc.PropTypes.func,
+    chooseAvailableEndDate: reactDesc.PropTypes.func,
+    dateIsUnavailable: reactDesc.PropTypes.func,
+    dateIsSelected: reactDesc.PropTypes.func
+  }).description('react-dates phrases'),
+  startDate: reactDesc.PropTypes.instanceOf(Date, moment__default["default"]).description('start date value'),
+  endDate: reactDesc.PropTypes.instanceOf(Date, moment__default["default"]).description('end date value'),
+  startDateId: reactDesc.PropTypes.string.description('start date id'),
+  endDateId: reactDesc.PropTypes.string.description('end date id'),
+  labelFrom: reactDesc.PropTypes.string.description('label of start date input'),
+  labelTo: reactDesc.PropTypes.string.description('label of end date input'),
+  enableOutsideDays: reactDesc.PropTypes.bool.description('enable days outside current month').defaultValue('true'),
+  onDatesChange: reactDesc.PropTypes.func.description('function executed when dates change'),
+  onChangeStartInput: reactDesc.PropTypes.func.description('function executed when start date input changes'),
+  onChangeEndInput: reactDesc.PropTypes.func.description('function executed when end date input changes'),
+  onOutsideClick: reactDesc.PropTypes.func.description('function executed when clicking outside component')
+};
+const DateRangePickerWithSchema = reactDesc.describe(DSDateRangePicker);
+DateRangePickerWithSchema.propTypes = dateRangePickerProps;
+
+exports.DayPickerRangeController = DayPickerRangeController;
+exports.END_DATE = DSDateRangePickerImpl.END_DATE;
+exports.START_DATE = DSDateRangePickerImpl.START_DATE;
+exports.DateRangePickerWithSchema = DateRangePickerWithSchema;
+exports["default"] = DSDateRangePicker;

package/cjs/components/DSDateRangePickerImpl.js

@@ -0,0 +1,343 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var moment = require('moment');
+var dsClassnames = require('@elliemae/ds-classnames');
+var DSInputMask = require('@elliemae/ds-form');
+var DSPopper = require('@elliemae/ds-popper');
+var dsDatePicker = require('@elliemae/ds-date-picker');
+var DayPickerRangeController = require('./DayPickerRangeController.js');
+var isMaxDiffSafe = require('../isMaxDiffSafe.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
+
+const START_DATE = 'startDate';
+const END_DATE = 'endDate';
+const {
+  classNameElement,
+  classNameBlock
+} = dsClassnames.convertPropToCssClassName('datepicker');
+class DSDateRangePickerImpl extends React__default["default"].Component {
+  constructor(props) {
+    super(props);
+
+    this.onDatesChange = _ref => {
+      let {
+        startDate,
+        endDate
+      } = _ref;
+      const {
+        onDatesChange
+      } = this.props;
+      onDatesChange(startDate, endDate);
+      const safe = isMaxDiffSafe.isMaxDiffSafe(startDate, endDate, this.state.startDate, this.state.endDate);
+
+      if (!safe) {
+        this.setState({
+          showPicker: false
+        });
+      }
+
+      this.setState({
+        startDate,
+        endDate,
+        primaryStartInput: false,
+        primaryEndInput: false
+      });
+    };
+
+    this.onFocusChange = () => {
+      this.setState(_ref2 => {
+        let {
+          focusedInput
+        } = _ref2;
+        return {
+          focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE
+        };
+      });
+    };
+
+    this.handleKeyDown = event => {
+      if (event.key === 'Escape') this.setState({
+        showPicker: false
+      });
+    };
+
+    this.getSafeStartInputValue = () => {
+      const {
+        startInput,
+        primaryStartInput,
+        startDate
+      } = this.state;
+      if (primaryStartInput && startInput) return startInput;
+      if (!startDate) return '';
+      return startDate.format('MMDDYYYY');
+    };
+
+    this.getSafeEndInputValue = () => {
+      const {
+        endInput,
+        primaryEndInput,
+        endDate
+      } = this.state;
+      if (primaryEndInput && endInput) return endInput;
+      if (!endDate) return '';
+      return endDate.format('MMDDYYYY');
+    };
+
+    this.changeFocus = () => {
+      const {
+        disabled
+      } = this.props;
+
+      if (!disabled) {
+        this.setState(() => ({
+          focusedInput: 'startDate'
+        }));
+      }
+    };
+
+    this.handleChangeStart = e => {
+      var _momentValue;
+
+      const {
+        onChangeStartInput,
+        isDayBlocked,
+        minimumNights
+      } = this.props;
+      const {
+        endDate
+      } = this.state;
+      const startInputVal = e.target.value;
+      let momentValue = null;
+
+      if (startInputVal && moment__default["default"](startInputVal, 'MM/DD/YYYY', true).isValid()) {
+        momentValue = moment__default["default"](startInputVal);
+      }
+
+      const startDateBlocked = isDayBlocked(momentValue);
+      const isStartDateAcceptable = !startDateBlocked && momentValue && startInputVal !== '';
+      const areDatesValid = endDate && momentValue && (endDate === null || endDate === void 0 ? void 0 : endDate.isValid()) && ((_momentValue = momentValue) === null || _momentValue === void 0 ? void 0 : _momentValue.isValid());
+      const canEndBeSameAsStart = minimumNights === 0;
+      const isStartAcceptableWithSelectedEnd = !endDate || areDatesValid && (canEndBeSameAsStart && momentValue.diff(endDate, 'days') <= 0 || !canEndBeSameAsStart && momentValue.diff(endDate, 'days') < 0);
+      const invalidDate = !isStartDateAcceptable || !isStartAcceptableWithSelectedEnd;
+      if (startDateBlocked) momentValue = null;
+      onChangeStartInput(momentValue);
+      this.setState(prevState => ({
+        startDate: momentValue,
+        startInput: startInputVal,
+        primaryStartInput: true,
+        startDateError: invalidDate,
+        endDateError: !isStartDateAcceptable || !prevState.endDateError ? prevState.endDateError : !isStartAcceptableWithSelectedEnd
+      }));
+    };
+
+    this.handleChangeEnd = e => {
+      var _momentValue2;
+
+      const {
+        onChangeEndInput,
+        isDayBlocked,
+        minimumNights
+      } = this.props;
+      const {
+        startDate
+      } = this.state;
+      const endInputValue = e.target.value;
+      let momentValue = null;
+
+      if (endInputValue && moment__default["default"](endInputValue, 'MM/DD/YYYY', true).isValid()) {
+        momentValue = moment__default["default"](endInputValue);
+      }
+
+      const endDateBlocked = isDayBlocked(momentValue);
+      const isEndDateAcceptable = !endDateBlocked && momentValue && endInputValue !== '';
+      const areDatesValid = startDate && momentValue && (startDate === null || startDate === void 0 ? void 0 : startDate.isValid()) && ((_momentValue2 = momentValue) === null || _momentValue2 === void 0 ? void 0 : _momentValue2.isValid());
+      const canEndBeSameAsStart = minimumNights === 0;
+      const isEndAcceptableWithSelectedStart = !startDate || // we can't compare with start date because it's not yet set
+      areDatesValid && ( // it's set and both are valid
+      canEndBeSameAsStart && momentValue.diff(startDate, 'days') >= 0 || // >= is valid
+      !canEndBeSameAsStart && momentValue.diff(startDate, 'days') > 0); // only > is valid
+
+      const invalidDate = !isEndDateAcceptable || !isEndAcceptableWithSelectedStart;
+      if (endDateBlocked) momentValue = null;
+      onChangeEndInput(momentValue);
+      this.setState(prevState => ({
+        endDate: momentValue,
+        endInput: endInputValue,
+        primaryEndInput: true,
+        startDateError: !isEndDateAcceptable || !prevState.startDateError ? prevState.startDateError : !isEndAcceptableWithSelectedStart,
+        endDateError: invalidDate
+      }));
+    };
+
+    this.handleChangeDate = _ref3 => {
+      let {
+        startDate: _start,
+        endDate
+      } = _ref3;
+
+      if (_start && endDate) {
+        this.setState({
+          startDate: moment__default["default"](_start),
+          endDate,
+          primaryStartInput: false,
+          primaryEndInput: false
+        });
+      } else if (_start) {
+        this.setState({
+          startDate: moment__default["default"](_start),
+          primaryStartInput: false
+        });
+      } else if (endDate) {
+        this.setState({
+          endDate,
+          primaryEndInput: false
+        });
+      }
+    };
+
+    this.state = {
+      startDate: props.startDate ? moment__default["default"](props.startDate) : null,
+      endDate: props.endDate ? moment__default["default"](props.endDate) : null,
+      focusedInput: START_DATE,
+      showPicker: false,
+      startDateError: false,
+      endDateError: false
+    };
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown, false);
+  }
+
+  render() {
+    const {
+      startDate,
+      endDate,
+      focusedInput,
+      showPicker,
+      startDateError,
+      endDateError
+    } = this.state;
+    const {
+      disabled,
+      displayFormatDay,
+      minimumNights,
+      labelFrom,
+      labelTo,
+      isDayBlocked,
+      isDayHighlighted,
+      isOutsideRange,
+      enableOutsideDays,
+      startDateRequired,
+      endDateRequired,
+      onOutsideClick,
+      onNextMonthClick,
+      onPrevMonthClick,
+      onClose,
+      hasError,
+      validationMessage
+    } = this.props;
+    const inputClass = classNameBlock('inputs', 'range-picker');
+    const inputClassModifier = '';
+    const safeStartInputValue = this.getSafeStartInputValue();
+    const safeEndInputValue = this.getSafeEndInputValue();
+    return /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "".concat(inputClass, " ").concat(inputClassModifier)
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
+      className: classNameBlock('wrapper-input-date-range-picker-controller')
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DSInputMask.DSFormItemLayout, {
+      floatingLabel: true,
+      inputComponent: DSInputMask.DSInputMask,
+      labelText: labelFrom,
+      mask: DSInputMask.MASK_TYPES.DATE,
+      onChange: this.handleChangeStart,
+      onFocus: () => this.setState({
+        showPicker: false
+      }),
+      pipe: DSInputMask.MASK_PIPES.AUTO_CORRECT_DATE,
+      value: safeStartInputValue,
+      required: startDateRequired,
+      hasError: hasError || startDateError,
+      placeholder: "MM/DD/YYYY"
+    }), /*#__PURE__*/_jsx__default["default"](DSInputMask.DSFormItemLayout, {
+      floatingLabel: true,
+      inputComponent: DSInputMask.DSInputMask,
+      labelText: labelTo,
+      mask: DSInputMask.MASK_TYPES.DATE,
+      onChange: this.handleChangeEnd,
+      onFocus: () => this.setState({
+        showPicker: false
+      }),
+      pipe: DSInputMask.MASK_PIPES.AUTO_CORRECT_DATE,
+      value: safeEndInputValue,
+      required: endDateRequired,
+      hasError: hasError || endDateError,
+      validationMessage: validationMessage,
+      placeholder: "MM/DD/YYYY"
+    })), /*#__PURE__*/_jsx__default["default"]("div", {
+      className: classNameBlock('wrapper-button-date-range-picker-controller')
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
+      contentComponent: /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, showPicker && /*#__PURE__*/_jsx__default["default"](DayPickerRangeController, {
+        enableOutsideDays: enableOutsideDays,
+        isDayBlocked: isDayBlocked,
+        isDayHighlighted: isDayHighlighted,
+        isOutsideRange: isOutsideRange,
+        displayFormatDay: displayFormatDay,
+        endDate: endDate,
+        focusedInput: focusedInput,
+        hideKeyboardShortcutsPanel: true,
+        minimumNights: minimumNights,
+        onDatesChange: this.onDatesChange,
+        onFocusChange: this.onFocusChange,
+        onOutsideClick: e => {
+          onOutsideClick(e);
+          this.setState({
+            showPicker: false
+          });
+        },
+        onNextMonthClick: onNextMonthClick,
+        onPrevMonthClick: onPrevMonthClick,
+        startDate: startDate,
+        renderMonthElement: dsDatePicker.renderMonthElement
+      })),
+      isOpen: showPicker && !startDateError && !endDateError,
+      onClose: onClose,
+      placement: "bottom-end",
+      showArrow: false,
+      triggerComponent: /*#__PURE__*/_jsx__default["default"]("div", {
+        onFocus: () => this.setState({
+          showPicker: true
+        })
+      }, void 0, /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerPicker, {
+        className: classNameElement('picker'),
+        disabled: disabled,
+        onClick: () => this.setState({
+          showPicker: true
+        })
+      }), hasError && validationMessage && /*#__PURE__*/_jsx__default["default"]("div", {
+        style: {
+          height: 15
+        }
+      }))
+    })));
+  }
+
+}
+
+exports.END_DATE = END_DATE;
+exports.START_DATE = START_DATE;
+exports["default"] = DSDateRangePickerImpl;

package/cjs/components/DatePickerLabel/DatePickerLabel.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const Label = _ref => {
+  let {
+    className = 'date-picker-label',
+    label = ''
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    className: className
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, label));
+};
+
+module.exports = Label;

package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js

@@ -0,0 +1,100 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var moment = require('moment');
+var DSInputMask = require('@elliemae/ds-form');
+var dsClassnames = require('@elliemae/ds-classnames');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+var DSInputMask__default = /*#__PURE__*/_interopDefaultLegacy(DSInputMask);
+
+const blockname = 'date-range-picker';
+const Header = dsClassnames.aggregatedClasses('div')(blockname, 'header');
+
+const formatDate = date => {
+  if (date) {
+    return date.format('MMDDYYYY');
+  }
+};
+
+const DatePickerRangeHeader = _ref => {
+  let {
+    placeholderStart = 'Start Date',
+    placeholderEnd = 'End Date',
+    onStartInputChange = () => null,
+    onEndInputChange = () => null,
+    selectedStartDate,
+    selectedEndDate
+  } = _ref;
+  const [startValue, setStartValue] = React.useState(selectedStartDate ? formatDate(selectedStartDate) : '');
+  const [endValue, setEndValue] = React.useState(selectedEndDate ? formatDate(selectedEndDate) : '');
+  React.useEffect(() => {
+    const startDate = formatDate(selectedStartDate);
+    const endDate = formatDate(selectedEndDate);
+    startDate !== startValue && setStartValue(startDate);
+    endDate !== endValue && setEndValue(endDate);
+  }, [selectedStartDate, selectedEndDate]);
+
+  const handleOnChangeStart = e => {
+    const newStartValue = e.target.value;
+    setStartValue(newStartValue);
+  };
+
+  const handleOnChangeEnd = e => {
+    const newEndValue = e.target.value;
+    setEndValue(newEndValue);
+  };
+
+  const handleOnBlurStart = e => {
+    const newStartValue = e.target.value;
+    onStartInputChange(moment__default["default"](newStartValue));
+  };
+
+  const handleOnBlurEnd = e => {
+    const newEndValue = e.target.value;
+    onEndInputChange(moment__default["default"](newEndValue));
+  };
+
+  const handleOnKeyDownStart = e => {
+    if (e.key === 'Enter') {
+      const newValue = e.target.value;
+      onStartInputChange(moment__default["default"](newValue));
+      e.target.blur();
+    }
+  };
+
+  const handleOnKeyDownEnd = e => {
+    if (e.key === 'Enter') {
+      const newValue = e.target.value;
+      onEndInputChange(moment__default["default"](newValue));
+      e.target.blur();
+    }
+  };
+
+  return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputMask.DSInputGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputMask__default["default"], {
+    "aria-label": placeholderStart || 'Date Picker Input Mask',
+    mask: DSInputMask.MASK_TYPES.DATE,
+    onBlur: handleOnBlurStart,
+    onChange: handleOnChangeStart,
+    onKeyDown: handleOnKeyDownStart,
+    pipe: DSInputMask.MASK_PIPES.AUTO_CORRECT_DATE,
+    placeholder: placeholderStart,
+    value: startValue
+  }), /*#__PURE__*/_jsx__default["default"](DSInputMask__default["default"], {
+    "aria-label": placeholderEnd || 'Date Picker Input Mask',
+    mask: DSInputMask.MASK_TYPES.DATE,
+    onBlur: handleOnBlurEnd,
+    onChange: handleOnChangeEnd,
+    onKeyDown: handleOnKeyDownEnd,
+    pipe: DSInputMask.MASK_PIPES.AUTO_CORRECT_DATE,
+    placeholder: placeholderEnd,
+    value: endValue
+  })));
+};
+
+module.exports = DatePickerRangeHeader;