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

package/esm/components/DateTimeRangeModalImpl/DateTimeRangeModalImpl.js

@@ -0,0 +1,306 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/es.string.replace.js';
+import { Component } from 'react';
+import moment from 'moment';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import DSModal from '@elliemae/ds-modal';
+import { DropdownRepeatOptionsTypes } from '../../options/dropdownRepeatOptions.js';
+import { dropdownTimeZoneOptions } from '../../options/dropdownTimeZoneOptions.js';
+import RepeatPickerInput from '../RepeatPickerInput/RepeatPickerInput.js';
+import DaysOfWeekPicker from '../DaysOfWeekPicker/DaysOfWeekPicker.js';
+import StartDateTime from '../StartDateTime/StartDateTime.js';
+import EndDate from '../EndDate/EndDate.js';
+import DaysOfMonthPicker from '../DayOfMonthPicker/DayOfMonthPicker.js';
+import DaysOfMonthPicker$1 from '../DayOfYearPicker/DayOfYearPicker.js';
+import TimeZonePicker from '../TimeZonePicker/TimeZonePicker.js';
+import ValidationMessage from '../ValidationMessage/ValidationMessage.js';
+
+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(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
+} = convertPropToCssClassName('date-time-predefined-range-selector');
+
+class DateTimePredefinedRangeSelectorImpl extends 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(),
+      startTimeInput: startTimeInput || moment(),
+      qtyRepeatPickerInput: qtyRepeatPickerInput || 1,
+      typeRepeatPickerInput: typeRepeatPickerInput || dropdownRepeatOptions[0].value,
+      dayWeekRepeatPickerInput: !dayOfWeekOptionsEnable ? null : dayWeekRepeatPickerInput || dropdownDayOfWeekOptions[0].value,
+      endDateInput: endDateInput || moment(),
+      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[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 !== DropdownRepeatOptionsTypes.MONTH) {
+      update.dayOfMonthRepeatPickerInput = undefined;
+      update.dayOfMonthRepeatPickerKey = undefined;
+    }
+
+    if (value !== 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,
+      dayOfMonthOptionsEnable,
+      dayOfWeekOptionsEnable,
+      dayOfYearOptionsEnable,
+      timeZoneOptions,
+      useTimezoneSelector,
+      allowMultipleDaysOfWeek,
+      endTimesOptions,
+      endTypesOptions,
+      dayOfMonthAsCurrentDateOptions,
+      dayOfYearAsCurrentDateOptions,
+      validationMessage,
+      endDayBlocked,
+      startDayBlocked,
+      repeatFrecuencyCustomProps,
+      displayMonthCustomOption,
+      displayYearCustomOption
+    } = this.props;
+    return /*#__PURE__*/_jsx("div", {
+      className: "".concat(cssClassName)
+    }, void 0, /*#__PURE__*/_jsx(StartDateTime, {
+      onStartDateChange: this.onStartDateChangeInput,
+      onStartTimeChange: this.onStartTimeChangeInput,
+      startDateValue: startDateInput,
+      startDayBlocked: startDayBlocked,
+      startTimeValue: startTimeInput
+    }), useTimezoneSelector && /*#__PURE__*/_jsx(TimeZonePicker, {
+      onTimezoneChange: this.onTimeZonePickerInput,
+      timezoneOptions: timeZoneOptions,
+      timezoneValue: timezonePickerInput
+    }), /*#__PURE__*/_jsx(RepeatPickerInput, {
+      onQtyChange: this.onQtyRepeatPickerInput,
+      onTypeChange: this.onTypeRepeatPickerInput,
+      qtyValue: qtyRepeatPickerInput,
+      repeatFrecuencyCustomProps: repeatFrecuencyCustomProps,
+      repeatOptions: dropdownRepeatOptions,
+      repeatOptionsValue: typeRepeatPickerInput
+    }), dayOfWeekOptionsEnable && typeRepeatPickerInput === DropdownRepeatOptionsTypes.WEEK && /*#__PURE__*/_jsx(DaysOfWeekPicker, {
+      active: dayWeekRepeatPickerInput,
+      allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
+      onDayChange: this.onDayOfWeekRepeatPickerInput,
+      options: dropdownDayOfWeekOptions
+    }), dayOfMonthOptionsEnable && typeRepeatPickerInput === DropdownRepeatOptionsTypes.MONTH && /*#__PURE__*/_jsx(DaysOfMonthPicker, {
+      currentDate: startDateInput,
+      dayOfMonthAsCurrentDateOptions: dayOfMonthAsCurrentDateOptions,
+      dayOfMonthOptions: dropdownDayOfMonthOptions,
+      dayOfMonthValue: dayOfMonthRepeatPickerInput,
+      displayMonthCustomOption: displayMonthCustomOption,
+      displayOptionsAsCurrentDate: displayCurrentMonthYear,
+      onDayChange: this.onDayOfMonthRepeatChangeInput
+    }), dayOfYearOptionsEnable && typeRepeatPickerInput === DropdownRepeatOptionsTypes.YEAR && /*#__PURE__*/_jsx(DaysOfMonthPicker$1, {
+      currentDate: startDateInput,
+      dayOfMonthOptions: dropdownDayOfYearOptions,
+      dayOfMonthValue: dayOfYearRepeatPickerInput,
+      dayOfYearAsCurrentDateOptions: dayOfYearAsCurrentDateOptions,
+      displayOptionsAsCurrentDate: displayCurrentMonthYear,
+      displayYearCustomOption: displayYearCustomOption,
+      onDayChange: this.onDayOfYearRepeatChangeInput
+    }), _hr || (_hr = /*#__PURE__*/_jsx("hr", {})), /*#__PURE__*/_jsx(EndDate, {
+      endDateValue: endDateInput,
+      endDayBlocked: endDayBlocked,
+      endTimesOptions: endTimesOptions,
+      endTimesValue: endTimesInput,
+      endTypesOptions: endTypesOptions,
+      endTypeValue: endTypeInput,
+      onEndDateChange: this.onEndDateChangeInput,
+      onEndTimesChange: this.onEndTimesChangeInput,
+      onEndTypeChange: this.onEndTypeChangeInput
+    }), /*#__PURE__*/_jsx(DSModal, {
+      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("p", {}, void 0, "For these months, the occurrence will fall on the last day of the month."))), validationMessage && /*#__PURE__*/_jsx(ValidationMessage, {
+      validationMessage: validationMessage
+    }));
+  }
+
+}
+
+export { DateTimePredefinedRangeSelectorImpl as default };

package/esm/components/DateTimeRecurenceSelectorImpl.js

@@ -0,0 +1,277 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { Component } from 'react';
+import { isEqual } from 'lodash';
+import 'react-dates/initialize';
+import { components } from 'react-select';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { DSComboBox } from '@elliemae/ds-form';
+import DateTimeRangeModal from './DateTimeRangeModal/DateTimeRangeModal.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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; }
+const {
+  cssClassName,
+  classNameElement,
+  classNameBlock
+} = convertPropToCssClassName('date-time-predefined-range-selector');
+
+class DateTimeRecurenceSelectorImpl extends 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(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(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 && !isEqual(props.customRange, state.previousCustomRange)) {
+      if (props.value === props.advanceOption.value) {
+        // eslint-disable-next-line no-param-reassign
+        props.advanceOption.label = /*#__PURE__*/_jsx(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__*/jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+      className: "".concat(cssClassName, " ").concat(className),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "".concat(classNameBlock('container-selector'))
+      }, void 0, /*#__PURE__*/_jsx(DSComboBox, {
+        className: "".concat(classNameElement('dropdown-field-selector')),
+        components: {
+          Option: props => /*#__PURE__*/jsx(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(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
+      })]
+    }));
+  }
+
+}
+
+export { DateTimeRecurenceSelectorImpl as default };

package/esm/components/DayOfMonthPicker/DayOfMonthPicker.js

@@ -0,0 +1,68 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'react';
+import { DSComboBox } from '@elliemae/ds-form';
+import { nthDay } from '../helpers/nthday.js';
+import { dropdownDayOfMonthOptions } from '../../options/dropdownDayOfMonthOptions.js';
+import FormLabel from '../Forms/FormLabel.js';
+import FormFieldGroup from '../Forms/FormFieldGroup.js';
+import FormGroup from '../Forms/FormGroup.js';
+
+const DaysOfMonthPicker = _ref => {
+  let {
+    onDayChange = () => null,
+    dayOfMonthValue = dropdownDayOfMonthOptions[0].value,
+    dayOfMonthOptions = 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(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(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(FormGroup, {}, void 0, /*#__PURE__*/_jsx(FormLabel, {}, void 0, inputLabel), /*#__PURE__*/_jsx(FormFieldGroup, {}, void 0, /*#__PURE__*/_jsx(DSComboBox, {
+    onChange: value => onDayChange(value, options.find(o => o.value === value)),
+    options: options,
+    value: selected
+  })));
+};
+
+export { DaysOfMonthPicker as default };