@elliemae/ds-date-time-recurrence-picker 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/components/DateTimeRangeModalImpl/DateTimeRangeModalImpl.js

@@ -0,0 +1,315 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/es.string.replace.js');
+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 React = require('react');
+var moment = require('moment');
+var dsClassnames = require('@elliemae/ds-classnames');
+var DSModal = require('@elliemae/ds-modal');
+var dropdownRepeatOptions = require('../../options/dropdownRepeatOptions.js');
+var dropdownTimeZoneOptions = require('../../options/dropdownTimeZoneOptions.js');
+var RepeatPickerInput = require('../RepeatPickerInput/RepeatPickerInput.js');
+var DaysOfWeekPicker = require('../DaysOfWeekPicker/DaysOfWeekPicker.js');
+var StartDateTime = require('../StartDateTime/StartDateTime.js');
+var EndDate = require('../EndDate/EndDate.js');
+var DayOfMonthPicker = require('../DayOfMonthPicker/DayOfMonthPicker.js');
+var DayOfYearPicker = require('../DayOfYearPicker/DayOfYearPicker.js');
+var TimeZonePicker = require('../TimeZonePicker/TimeZonePicker.js');
+var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
+
+var _hr, _p;
+
+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 {
+  cssClassName
+} = dsClassnames.convertPropToCssClassName('date-time-predefined-range-selector');
+
+class DateTimePredefinedRangeSelectorImpl extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onChange = () => {
+      const {
+        onCustomDateTimeRange
+      } = this.props;
+      onCustomDateTimeRange(this.state);
+    };
+
+    this.onQtyRepeatPickerInput = value => {
+      this.setState({
+        qtyRepeatPickerInput: value.replace(/[^0-9]/g, '')
+      }, () => {
+        this.onChange();
+      });
+    };
+
+    const {
+      dropdownDayOfMonthOptions,
+      dropdownDayOfWeekOptions,
+      dropdownDayOfYearOptions,
+      dropdownRepeatOptions,
+      dayOfMonthOptionsEnable,
+      dayOfWeekOptionsEnable,
+      dayOfYearOptionsEnable,
+      useTimezoneSelector,
+      rangeValue: {
+        startDateInput,
+        startTimeInput,
+        qtyRepeatPickerInput,
+        typeRepeatPickerInput,
+        dayWeekRepeatPickerInput,
+        endDateInput,
+        endTypeInput,
+        endTimesInput,
+        dayOfMonthRepeatPickerInput,
+        dayOfYearRepeatPickerInput,
+        timezonePickerInput
+      }
+    } = props;
+    this.state = {
+      alertReplace: '',
+      alertModal: false,
+      startDateInput: startDateInput || moment__default["default"](),
+      startTimeInput: startTimeInput || moment__default["default"](),
+      qtyRepeatPickerInput: qtyRepeatPickerInput || 1,
+      typeRepeatPickerInput: typeRepeatPickerInput || dropdownRepeatOptions[0].value,
+      dayWeekRepeatPickerInput: !dayOfWeekOptionsEnable ? null : dayWeekRepeatPickerInput || dropdownDayOfWeekOptions[0].value,
+      endDateInput: endDateInput || moment__default["default"](),
+      endTypeInput: endTypeInput || props.endTypesOptions[0].value,
+      endTimesInput: endTimesInput || props.endTimesOptions[0].value,
+      dayOfMonthRepeatPickerInput: !dayOfMonthOptionsEnable ? null : dayOfMonthRepeatPickerInput || dropdownDayOfMonthOptions[0].value,
+      dayOfYearRepeatPickerInput: !dayOfYearOptionsEnable ? null : dayOfYearRepeatPickerInput || dropdownDayOfYearOptions[0].value,
+      timezonePickerInput: !useTimezoneSelector ? null : timezonePickerInput || dropdownTimeZoneOptions.dropdownTimeZoneOptions[0].value
+    };
+    this.onChange();
+    this.onStartDateChangeInput = this.onStartDateChangeInput.bind(this);
+    this.onStartTimeChangeInput = this.onStartTimeChangeInput.bind(this);
+    this.onTimeZonePickerInput = this.onTimeZonePickerInput.bind(this);
+    this.onTypeRepeatPickerInput = this.onTypeRepeatPickerInput.bind(this);
+    this.onDayOfWeekRepeatPickerInput = this.onDayOfWeekRepeatPickerInput.bind(this);
+    this.onDayOfMonthRepeatChangeInput = this.onDayOfMonthRepeatChangeInput.bind(this);
+    this.onDayOfYearRepeatChangeInput = this.onDayOfYearRepeatChangeInput.bind(this);
+    this.onEndDateChangeInput = this.onEndDateChangeInput.bind(this);
+    this.onEndTimesChangeInput = this.onEndTimesChangeInput.bind(this);
+    this.onEndTypeChangeInput = this.onEndTypeChangeInput.bind(this);
+  }
+
+  onTypeRepeatPickerInput(value) {
+    const update = {
+      typeRepeatPickerInput: value
+    };
+
+    if (value !== dropdownRepeatOptions.DropdownRepeatOptionsTypes.MONTH) {
+      update.dayOfMonthRepeatPickerInput = undefined;
+      update.dayOfMonthRepeatPickerKey = undefined;
+    }
+
+    if (value !== dropdownRepeatOptions.DropdownRepeatOptionsTypes.YEAR) {
+      update.dayOfYearRepeatPickerInput = undefined;
+      update.dayOfYearRepeatPickerKey = undefined;
+    }
+
+    this.setState(_objectSpread({}, update), () => {
+      this.onChange();
+    });
+  }
+
+  onDayOfWeekRepeatPickerInput(value) {
+    this.setState({
+      dayWeekRepeatPickerInput: value
+    }, () => {
+      this.onChange();
+    });
+  }
+
+  onEndTypeChangeInput(value) {
+    this.setState({
+      endTypeInput: value
+    }, () => {
+      this.onChange();
+    });
+  }
+
+  onEndTimesChangeInput(value) {
+    this.setState({
+      endTimesInput: value
+    }, () => {
+      this.onChange();
+    });
+  }
+
+  onEndDateChangeInput(value) {
+    this.setState({
+      endDateInput: value
+    }, () => {
+      this.onChange();
+    });
+  }
+
+  onStartDateChangeInput(value) {
+    this.setState({
+      startDateInput: value
+    }, () => {
+      this.onChange();
+    });
+  }
+
+  onStartTimeChangeInput(value) {
+    this.setState({
+      startTimeInput: value
+    }, () => {
+      this.onChange();
+    });
+  }
+
+  onDayOfMonthRepeatChangeInput(value, option) {
+    this.setState({
+      dayOfMonthRepeatPickerInput: value,
+      dayOfMonthRepeatPickerKey: option.dayOfMonthRepeatPickerKey,
+      alertModal: option.number > 28 || (option.numberLabel || '').includes('Fifth'),
+      alertReplace: option.number || "".concat(option.numberLabel, " ")
+    }, () => {
+      this.onChange();
+    });
+  }
+
+  onDayOfYearRepeatChangeInput(value, option) {
+    this.setState({
+      dayOfYearRepeatPickerInput: value,
+      dayOfYearRepeatPickerKey: option.dayOfYearRepeatPickerKey
+    }, () => {
+      this.onChange();
+    });
+  }
+
+  onTimeZonePickerInput(value) {
+    this.setState({
+      timezonePickerInput: value
+    }, () => {
+      this.onChange();
+    });
+  }
+
+  render() {
+    const {
+      alertModal,
+      alertReplace,
+      qtyRepeatPickerInput,
+      typeRepeatPickerInput,
+      dayWeekRepeatPickerInput,
+      endDateInput,
+      endTypeInput,
+      endTimesInput,
+      startDateInput,
+      startTimeInput,
+      dayOfMonthRepeatPickerInput,
+      dayOfYearRepeatPickerInput,
+      timezonePickerInput
+    } = this.state;
+    const {
+      displayCurrentMonthYear,
+      dropdownDayOfMonthOptions,
+      dropdownDayOfWeekOptions,
+      dropdownDayOfYearOptions,
+      dropdownRepeatOptions: dropdownRepeatOptions$1,
+      dayOfMonthOptionsEnable,
+      dayOfWeekOptionsEnable,
+      dayOfYearOptionsEnable,
+      timeZoneOptions,
+      useTimezoneSelector,
+      allowMultipleDaysOfWeek,
+      endTimesOptions,
+      endTypesOptions,
+      dayOfMonthAsCurrentDateOptions,
+      dayOfYearAsCurrentDateOptions,
+      validationMessage,
+      endDayBlocked,
+      startDayBlocked,
+      repeatFrecuencyCustomProps,
+      displayMonthCustomOption,
+      displayYearCustomOption
+    } = this.props;
+    return /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "".concat(cssClassName)
+    }, void 0, /*#__PURE__*/_jsx__default["default"](StartDateTime, {
+      onStartDateChange: this.onStartDateChangeInput,
+      onStartTimeChange: this.onStartTimeChangeInput,
+      startDateValue: startDateInput,
+      startDayBlocked: startDayBlocked,
+      startTimeValue: startTimeInput
+    }), useTimezoneSelector && /*#__PURE__*/_jsx__default["default"](TimeZonePicker, {
+      onTimezoneChange: this.onTimeZonePickerInput,
+      timezoneOptions: timeZoneOptions,
+      timezoneValue: timezonePickerInput
+    }), /*#__PURE__*/_jsx__default["default"](RepeatPickerInput, {
+      onQtyChange: this.onQtyRepeatPickerInput,
+      onTypeChange: this.onTypeRepeatPickerInput,
+      qtyValue: qtyRepeatPickerInput,
+      repeatFrecuencyCustomProps: repeatFrecuencyCustomProps,
+      repeatOptions: dropdownRepeatOptions$1,
+      repeatOptionsValue: typeRepeatPickerInput
+    }), dayOfWeekOptionsEnable && typeRepeatPickerInput === dropdownRepeatOptions.DropdownRepeatOptionsTypes.WEEK && /*#__PURE__*/_jsx__default["default"](DaysOfWeekPicker, {
+      active: dayWeekRepeatPickerInput,
+      allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
+      onDayChange: this.onDayOfWeekRepeatPickerInput,
+      options: dropdownDayOfWeekOptions
+    }), dayOfMonthOptionsEnable && typeRepeatPickerInput === dropdownRepeatOptions.DropdownRepeatOptionsTypes.MONTH && /*#__PURE__*/_jsx__default["default"](DayOfMonthPicker, {
+      currentDate: startDateInput,
+      dayOfMonthAsCurrentDateOptions: dayOfMonthAsCurrentDateOptions,
+      dayOfMonthOptions: dropdownDayOfMonthOptions,
+      dayOfMonthValue: dayOfMonthRepeatPickerInput,
+      displayMonthCustomOption: displayMonthCustomOption,
+      displayOptionsAsCurrentDate: displayCurrentMonthYear,
+      onDayChange: this.onDayOfMonthRepeatChangeInput
+    }), dayOfYearOptionsEnable && typeRepeatPickerInput === dropdownRepeatOptions.DropdownRepeatOptionsTypes.YEAR && /*#__PURE__*/_jsx__default["default"](DayOfYearPicker, {
+      currentDate: startDateInput,
+      dayOfMonthOptions: dropdownDayOfYearOptions,
+      dayOfMonthValue: dayOfYearRepeatPickerInput,
+      dayOfYearAsCurrentDateOptions: dayOfYearAsCurrentDateOptions,
+      displayOptionsAsCurrentDate: displayCurrentMonthYear,
+      displayYearCustomOption: displayYearCustomOption,
+      onDayChange: this.onDayOfYearRepeatChangeInput
+    }), _hr || (_hr = /*#__PURE__*/_jsx__default["default"]("hr", {})), /*#__PURE__*/_jsx__default["default"](EndDate, {
+      endDateValue: endDateInput,
+      endDayBlocked: endDayBlocked,
+      endTimesOptions: endTimesOptions,
+      endTimesValue: endTimesInput,
+      endTypesOptions: endTypesOptions,
+      endTypeValue: endTypeInput,
+      onEndDateChange: this.onEndDateChangeInput,
+      onEndTimesChange: this.onEndTimesChangeInput,
+      onEndTypeChange: this.onEndTypeChangeInput
+    }), /*#__PURE__*/_jsx__default["default"](DSModal__default["default"], {
+      className: "datetime-alert-modal",
+      isOpen: alertModal,
+      modalTitle: "Some months have fewer  than ".concat(alertReplace, " days") // modalType={modalType}
+      ,
+      onClose: () => this.setState({
+        alertModal: false
+      }),
+      onConfirm: () => this.setState({
+        alertModal: false
+      })
+    }, void 0, _p || (_p = /*#__PURE__*/_jsx__default["default"]("p", {}, void 0, "For these months, the occurrence will fall on the last day of the month."))), validationMessage && /*#__PURE__*/_jsx__default["default"](ValidationMessage, {
+      validationMessage: validationMessage
+    }));
+  }
+
+}
+
+module.exports = DateTimePredefinedRangeSelectorImpl;

package/cjs/components/DateTimeRecurenceSelectorImpl.js

@@ -0,0 +1,284 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.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 React = require('react');
+var lodash = require('lodash');
+require('react-dates/initialize');
+var reactSelect = require('react-select');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsForm = require('@elliemae/ds-form');
+var DateTimeRangeModal = require('./DateTimeRangeModal/DateTimeRangeModal.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);
+
+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 {
+  cssClassName,
+  classNameElement,
+  classNameBlock
+} = dsClassnames.convertPropToCssClassName('date-time-predefined-range-selector');
+
+class DateTimeRecurenceSelectorImpl extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onChange = () => {
+      const {
+        onChange
+      } = this.props;
+      const {
+        customRange,
+        selected
+      } = this.state;
+      onChange(selected, customRange);
+    };
+
+    this.onCustomDateTimeRange = customRange => {
+      this.setState({
+        customRange
+      });
+    };
+
+    this.onChangeDropdown = value => {
+      const {
+        dropdownPreselectedOptions
+      } = this.props;
+      const selected = dropdownPreselectedOptions.find(op => op.value === value);
+      const {
+        onChange
+      } = this.props;
+
+      if (!selected) {
+        this.setState(previousState => ({
+          selected: value,
+          previousSelection: previousState.selected
+        }));
+        this.handleOpenModal();
+      } else if (selected) {
+        onChange(value);
+        this.setState({
+          selected: value,
+          openModal: false
+        });
+      }
+    };
+
+    this.handleConfirm = () => {
+      const {
+        onConfirmField,
+        customOptionRender: CustomOptionRender,
+        dayOfMonthOptionsEnable,
+        dayOfWeekOptionsEnable,
+        dayOfYearOptionsEnable,
+        useTimezoneSelector,
+        allowMultipleDaysOfWeek
+      } = this.props;
+      const {
+        customRange
+      } = this.state;
+      this.props.advanceOption.label = /*#__PURE__*/_jsx__default["default"](CustomOptionRender, {
+        allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
+        customRange: customRange,
+        dayOfMonthOptionsEnable: dayOfMonthOptionsEnable,
+        dayOfWeekOptionsEnable: dayOfWeekOptionsEnable,
+        dayOfYearOptionsEnable: dayOfYearOptionsEnable,
+        useTimezoneSelector: useTimezoneSelector
+      });
+      this.onChange();
+      this.handleCloseModal();
+      onConfirmField();
+    };
+
+    this.handleReject = () => {
+      const {
+        onRejectField
+      } = this.props;
+      this.handleActionClose();
+      onRejectField();
+    };
+
+    this.handleActionClose = () => {
+      this.setState(previousState => ({
+        selected: previousState.previousSelection
+      }));
+      this.handleCloseModal();
+    };
+
+    this.handleOpenModal = () => this.setState({
+      openModal: true
+    });
+
+    this.handleCloseModal = () => {
+      this.setState({
+        openModal: false
+      });
+      setTimeout(() => document.activeElement.blur(), 0); // https://github.com/reactjs/react-modal/issues/680
+    };
+
+    this.initCustomRange = props.customRange;
+    this.state = {
+      // eslint-disable-next-line react/no-unused-state
+      previousCustomRange: _objectSpread({}, props.customRange),
+      openModal: props.openModal || false,
+      selected: props.value,
+      customRange: _objectSpread({}, props.customRange)
+    };
+
+    if (props.value === props.advanceOption.value) {
+      // eslint-disable-next-line no-param-reassign
+      props.advanceOption.label = /*#__PURE__*/_jsx__default["default"](props.customOptionRender, {
+        allowMultipleDaysOfWeek: props.allowMultipleDaysOfWeek,
+        customRange: props.customRange,
+        dayOfMonthOptionsEnable: props.dayOfMonthOptionsEnable,
+        dayOfWeekOptionsEnable: props.dayOfWeekOptionsEnable,
+        dayOfYearOptionsEnable: props.dayOfYearOptionsEnable,
+        useTimezoneSelector: props.useTimezoneSelector
+      });
+    }
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (props.customRange && !lodash.isEqual(props.customRange, state.previousCustomRange)) {
+      if (props.value === props.advanceOption.value) {
+        // eslint-disable-next-line no-param-reassign
+        props.advanceOption.label = /*#__PURE__*/_jsx__default["default"](props.customOptionRender, {
+          allowMultipleDaysOfWeek: props.allowMultipleDaysOfWeek,
+          customRange: props.customRange,
+          dayOfMonthOptionsEnable: props.dayOfMonthOptionsEnable,
+          dayOfWeekOptionsEnable: props.dayOfWeekOptionsEnable,
+          dayOfYearOptionsEnable: props.dayOfYearOptionsEnable,
+          useTimezoneSelector: props.useTimezoneSelector
+        });
+      }
+
+      return {
+        previousCustomRange: _objectSpread({}, props.customRange),
+        customRange: _objectSpread({}, props.customRange),
+        selected: props.value
+      };
+    }
+
+    return null;
+  }
+
+  render() {
+    const {
+      placeholder,
+      dropdownPreselectedOptions,
+      appElement,
+      confirmLabel,
+      modalSize,
+      modalTitle,
+      modalType,
+      rejectLabel,
+      dropdownDayOfMonthOptions,
+      dropdownDayOfWeekOptions,
+      dropdownDayOfYearOptions,
+      dropdownRepeatOptions,
+      displayCurrentMonthYear,
+      className,
+      dayOfMonthOptionsEnable,
+      dayOfWeekOptionsEnable,
+      dayOfYearOptionsEnable,
+      timeZoneOptions,
+      useTimezoneSelector,
+      allowMultipleDaysOfWeek,
+      endTimesOptions,
+      endTypesOptions,
+      advanceOption,
+      dayOfMonthAsCurrentDateOptions,
+      dayOfYearAsCurrentDateOptions,
+      isValidRecurrence,
+      validationMessage,
+      endDayBlocked,
+      startDayBlocked,
+      repeatFrecuencyCustomProps,
+      displayMonthCustomOption,
+      displayYearCustomOption,
+      containerProps
+    } = this.props;
+    const {
+      selected,
+      openModal,
+      customRange
+    } = this.state;
+    const options = [...dropdownPreselectedOptions, advanceOption];
+    return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+      className: "".concat(cssClassName, " ").concat(className),
+      children: [/*#__PURE__*/_jsx__default["default"]("div", {
+        className: "".concat(classNameBlock('container-selector'))
+      }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSComboBox, {
+        className: "".concat(classNameElement('dropdown-field-selector')),
+        components: {
+          Option: props => /*#__PURE__*/jsxRuntime.jsx(reactSelect.components.Option, _objectSpread(_objectSpread({}, props), {}, {
+            allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
+            dayOfMonthOptionsEnable: dayOfMonthOptionsEnable,
+            dayOfWeekOptionsEnable: dayOfWeekOptionsEnable,
+            dayOfYearOptionsEnable: dayOfYearOptionsEnable,
+            useTimezoneSelector: useTimezoneSelector
+          })),
+          IndicatorSeparator: () => null
+        },
+        onChange: this.onChangeDropdown,
+        onKeyDown: this.onKeyDown,
+        options: options,
+        placeholder: placeholder,
+        value: selected
+      })), /*#__PURE__*/_jsx__default["default"](DateTimeRangeModal, {
+        allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
+        appElement: appElement,
+        confirmLabel: confirmLabel,
+        dayOfMonthAsCurrentDateOptions: dayOfMonthAsCurrentDateOptions,
+        dayOfMonthOptionsEnable: dayOfMonthOptionsEnable,
+        dayOfWeekOptionsEnable: dayOfWeekOptionsEnable,
+        dayOfYearAsCurrentDateOptions: dayOfYearAsCurrentDateOptions,
+        dayOfYearOptionsEnable: dayOfYearOptionsEnable,
+        displayCurrentMonthYear: displayCurrentMonthYear,
+        displayMonthCustomOption: displayMonthCustomOption,
+        displayYearCustomOption: displayYearCustomOption,
+        dropdownDayOfMonthOptions: dropdownDayOfMonthOptions,
+        dropdownDayOfWeekOptions: dropdownDayOfWeekOptions,
+        dropdownDayOfYearOptions: dropdownDayOfYearOptions,
+        dropdownRepeatOptions: dropdownRepeatOptions,
+        endDayBlocked: endDayBlocked,
+        endTimesOptions: endTimesOptions,
+        endTypesOptions: endTypesOptions,
+        isOpen: openModal,
+        isValidRecurrence: isValidRecurrence,
+        modalSize: modalSize,
+        modalTitle: modalTitle,
+        modalType: modalType,
+        onClose: this.handleActionClose,
+        onConfirmField: this.handleConfirm,
+        onCustomDateTimeRange: this.onCustomDateTimeRange,
+        onRejectField: this.handleReject,
+        placeholder: placeholder,
+        rangeValue: customRange,
+        rejectLabel: rejectLabel,
+        repeatFrecuencyCustomProps: repeatFrecuencyCustomProps,
+        startDayBlocked: startDayBlocked,
+        timeZoneOptions: timeZoneOptions,
+        useTimezoneSelector: useTimezoneSelector,
+        validationMessage: validationMessage
+      })]
+    }));
+  }
+
+}
+
+module.exports = DateTimeRecurenceSelectorImpl;

package/cjs/components/DayOfMonthPicker/DayOfMonthPicker.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('react');
+var dsForm = require('@elliemae/ds-form');
+var nthday = require('../helpers/nthday.js');
+var dropdownDayOfMonthOptions = require('../../options/dropdownDayOfMonthOptions.js');
+var FormLabel = require('../Forms/FormLabel.js');
+var FormFieldGroup = require('../Forms/FormFieldGroup.js');
+var FormGroup = require('../Forms/FormGroup.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const DaysOfMonthPicker = _ref => {
+  let {
+    onDayChange = () => null,
+    dayOfMonthValue = dropdownDayOfMonthOptions.dropdownDayOfMonthOptions[0].value,
+    dayOfMonthOptions = dropdownDayOfMonthOptions.dropdownDayOfMonthOptions,
+    displayOptionsAsCurrentDate = true,
+    currentDate = null,
+    inputLabel = 'On',
+    dayOfMonthAsCurrentDateOptions,
+    displayMonthCustomOption
+  } = _ref;
+  let options = dayOfMonthOptions;
+
+  if (displayOptionsAsCurrentDate) {
+    const numberoption = "on the ".concat(currentDate.format('Do'), " of the month");
+    const nthoption = "on the ".concat(nthday.nthDay(currentDate.toDate()), " ").concat(currentDate.format('dddd'), " of the month");
+    options = [];
+
+    if (dayOfMonthAsCurrentDateOptions.indexOf('numberOfMonth') > -1) {
+      options.push({
+        number: currentDate.format('DD'),
+        label: numberoption,
+        value: numberoption,
+        dayOfMonthRepeatPickerKey: 'numberOfMonth'
+      });
+    }
+
+    if (dayOfMonthAsCurrentDateOptions.indexOf('dayOfTheWeekOfMonth') > -1) {
+      options.push({
+        numberLabel: "".concat(nthday.nthDay(currentDate.toDate()), " ").concat(currentDate.format('dddd')),
+        label: nthoption,
+        value: nthoption,
+        dayOfMonthRepeatPickerKey: 'dayOfTheWeekOfMonth'
+      });
+    }
+
+    if (displayMonthCustomOption) {
+      options = [...options, ...dayOfMonthOptions];
+    }
+  }
+
+  const selected = options.find(option => option.value === dayOfMonthValue) ? dayOfMonthValue : null;
+
+  if (!selected) {
+    onDayChange(options[0].value, options[0]);
+  }
+
+  return /*#__PURE__*/_jsx__default["default"](FormGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](FormLabel, {}, void 0, inputLabel), /*#__PURE__*/_jsx__default["default"](FormFieldGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSComboBox, {
+    onChange: value => onDayChange(value, options.find(o => o.value === value)),
+    options: options,
+    value: selected
+  })));
+};
+
+module.exports = DaysOfMonthPicker;