@elliemae/ds-date-range-selector 2.2.0-alpha.3 → 3.0.0-next.0

package/cjs/DSDateRangeSelector.js

@@ -1,89 +1,69 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var moment = require('moment');
+var DateRangeSelectorImpl = require('./components/DateRangeSelectorImpl.js');
+var dropdownPreselectedOptions = require('./options/dropdownPreselectedOptions.js');
+var CustomOptionRender = require('./components/CustomOptionRender/CustomOptionRender.js');
+
+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);
+
+const DSDateRangeSelector = _ref => {
+  let {
+    containerProps = {},
+    className = '',
+    preselectedOptions = dropdownPreselectedOptions.dropdownPreselectedOptions,
+    onChange = () => null,
+    placeholder = 'Select Range',
+    value = null,
+    customOptionRender = CustomOptionRender,
+    startDate = null,
+    endDate = null,
+    displayFormatDay = 'D',
+    disableCustomOption = false
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](DateRangeSelectorImpl, {
+    className: className,
+    containerProps: containerProps,
+    customOptionRender: customOptionRender,
+    disableCustomOption: disableCustomOption,
+    displayFormatDay: displayFormatDay,
+    dropdownPreselectedOptions: preselectedOptions,
+    endDate: endDate,
+    onChange: onChange,
+    placeholder: placeholder,
+    startDate: startDate,
+    value: value
+  });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DSDateRangeSelector_exports = {};
-__export(DSDateRangeSelector_exports, {
-  CUSTOM_OPTION_VALUE: () => import_dropdownPreselectedOptions.CUSTOM_OPTION_VALUE,
-  DateRangeRecurrenceSelectorWithSchema: () => DateRangeRecurrenceSelectorWithSchema,
-  DropdownOptionsTypes: () => import_dropdownPreselectedOptions.DropdownOptionsTypes,
-  default: () => DSDateRangeSelector_default,
-  dropdownPreselectedOptions: () => import_dropdownPreselectedOptions.dropdownPreselectedOptions
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = __toESM(require("react-desc"));
-var import_moment = __toESM(require("moment"));
-var import_DateRangeSelectorImpl = __toESM(require("./components/DateRangeSelectorImpl"));
-var import_dropdownPreselectedOptions = __toESM(require("./options/dropdownPreselectedOptions"));
-var import_CustomOptionRender = __toESM(require("./components/CustomOptionRender/CustomOptionRender"));
-const DSDateRangeSelector = ({
-  containerProps = {},
-  className = "",
-  preselectedOptions = import_dropdownPreselectedOptions.dropdownPreselectedOptions,
-  onChange = () => null,
-  placeholder = "Select Range",
-  value = null,
-  customOptionRender = import_CustomOptionRender.default,
-  startDate = null,
-  endDate = null,
-  displayFormatDay = "D",
-  disableCustomOption = false
-}) => /* @__PURE__ */ import_react.default.createElement(import_DateRangeSelectorImpl.default, {
-  className,
-  containerProps,
-  customOptionRender,
-  disableCustomOption,
-  displayFormatDay,
-  dropdownPreselectedOptions: preselectedOptions,
-  endDate,
-  onChange,
-  placeholder,
-  startDate,
-  value
-});
 const dateRangeRecurrenceSelectorProps = {
-  containerProps: import_react_desc.PropTypes.object.description("Set of properties attached to the main container"),
-  className: import_react_desc.PropTypes.string.description("html class attribute"),
-  preselectedOptions: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.shape({
-    label: import_react_desc.PropTypes.string,
-    value: import_react_desc.PropTypes.string
-  })).description("options to display in dropdown menu"),
-  onChange: import_react_desc.PropTypes.func.description("function executed when selection changes"),
-  placeholder: import_react_desc.PropTypes.string.description("inputs placeholder").defaultValue("Select Range"),
-  value: import_react_desc.PropTypes.oneOf([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("selected value"),
-  customOptionRender: import_react_desc.PropTypes.element.description("custom renderer for options"),
-  startDate: import_react_desc.PropTypes.instanceOf(Date, import_moment.default).description("moment object of start date"),
-  endDate: import_react_desc.PropTypes.instanceOf(Date, import_moment.default).description("moment object of end date"),
-  displayFormatDay: import_react_desc.PropTypes.string.description("format to display date").defaultValue("D"),
-  disableCustomOption: import_react_desc.PropTypes.bool.description("disables custom options").defaultValue(false)
+  containerProps: reactDesc.PropTypes.object.description('Set of properties attached to the main container'),
+  className: reactDesc.PropTypes.string.description('html class attribute'),
+  preselectedOptions: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
+    label: reactDesc.PropTypes.string,
+    value: reactDesc.PropTypes.string
+  })).description('options to display in dropdown menu'),
+  onChange: reactDesc.PropTypes.func.description('function executed when selection changes'),
+  placeholder: reactDesc.PropTypes.string.description('inputs placeholder').defaultValue('Select Range'),
+  value: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('selected value'),
+  customOptionRender: reactDesc.PropTypes.element.description('custom renderer for options'),
+  startDate: reactDesc.PropTypes.instanceOf(Date, moment__default["default"]).description('moment object of start date'),
+  endDate: reactDesc.PropTypes.instanceOf(Date, moment__default["default"]).description('moment object of end date'),
+  displayFormatDay: reactDesc.PropTypes.string.description('format to display date').defaultValue('D'),
+  disableCustomOption: reactDesc.PropTypes.bool.description('disables custom options').defaultValue(false)
 };
-DSDateRangeSelector.propTypes = dateRangeRecurrenceSelectorProps;
-const DateRangeRecurrenceSelectorWithSchema = (0, import_react_desc.describe)(DSDateRangeSelector);
+const DateRangeRecurrenceSelectorWithSchema = reactDesc.describe(DSDateRangeSelector);
 DateRangeRecurrenceSelectorWithSchema.propTypes = dateRangeRecurrenceSelectorProps;
-var DSDateRangeSelector_default = DSDateRangeSelector;
-module.exports = __toCommonJS(DSDateRangeSelector_exports);
-//# sourceMappingURL=DSDateRangeSelector.js.map
+
+exports.CUSTOM_OPTION_VALUE = dropdownPreselectedOptions.CUSTOM_OPTION_VALUE;
+exports.DropdownOptionsTypes = dropdownPreselectedOptions.DropdownOptionsTypes;
+exports.dropdownPreselectedOptions = dropdownPreselectedOptions.dropdownPreselectedOptions;
+exports.DateRangeRecurrenceSelectorWithSchema = DateRangeRecurrenceSelectorWithSchema;
+exports["default"] = DSDateRangeSelector;

package/cjs/components/CustomOptionRender/CustomOptionRender.js

@@ -1,46 +1,40 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var CustomOptionRender_exports = {};
-__export(CustomOptionRender_exports, {
-  default: () => CustomOptionRender_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ds_classnames = __toESM(require("@elliemae/ds-classnames"));
-const { cssClassName } = (0, import_ds_classnames.convertPropToCssClassName)("date-range-selector-customoption");
-const CustomOptionRender = ({ customRange: { startDate, endDate } }) => {
-  const start = startDate ? startDate.format("MM/DD/YYYY") : null;
-  const end = endDate ? endDate.format("MM/DD/YYYY") : null;
-  const display = `From ${start} to ${end}` || "Custom";
-  return /* @__PURE__ */ import_react.default.createElement("em", {
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+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);
+
+const {
+  cssClassName
+} = dsClassnames.convertPropToCssClassName('date-range-selector-customoption');
+/**
+ * @param root0
+ * @param root0.customRange
+ * @param root0.customRange.startDate
+ * @param root0.customRange.endDate
+ * @customRange {
+endDate
+startDate
+}
+ */
+
+const CustomOptionRender = _ref => {
+  let {
+    customRange: {
+      startDate,
+      endDate
+    }
+  } = _ref;
+  const start = startDate ? startDate.format('MM/DD/YYYY') : null;
+  const end = endDate ? endDate.format('MM/DD/YYYY') : null;
+  const display = "From ".concat(start, " to ").concat(end) || 'Custom';
+  return /*#__PURE__*/_jsx__default["default"]("em", {
     className: cssClassName
-  }, display);
+  }, void 0, display);
 };
-var CustomOptionRender_default = CustomOptionRender;
-module.exports = __toCommonJS(CustomOptionRender_exports);
-//# sourceMappingURL=CustomOptionRender.js.map
+
+module.exports = CustomOptionRender;

package/cjs/components/DateRangeSelectorImpl.js

@@ -1,102 +1,141 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DateRangeSelectorImpl_exports = {};
-__export(DateRangeSelectorImpl_exports, {
-  default: () => DateRangeSelectorImpl_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_moment = __toESM(require("moment"));
-var import_react_select = __toESM(require("react-select"));
-var import_initialize = __toESM(require("react-dates/initialize"));
-var import_react_dates = __toESM(require("react-dates"));
-var import_ds_classnames = __toESM(require("@elliemae/ds-classnames"));
-var import_ds_form = __toESM(require("@elliemae/ds-form"));
-var import_ds_popper = __toESM(require("@elliemae/ds-popper"));
-var import_ds_date_picker = __toESM(require("@elliemae/ds-date-picker"));
-var import_ds_icons = __toESM(require("@elliemae/ds-icons"));
-var import_dropdownPreselectedOptions = __toESM(require("../options/dropdownPreselectedOptions"));
-const START_DATE = "startDate";
-const END_DATE = "endDate";
+'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 moment = require('moment');
+var reactSelect = require('react-select');
+require('react-dates/initialize');
+var reactDates = require('react-dates');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsForm = require('@elliemae/ds-form');
+var DSPopper = require('@elliemae/ds-popper');
+var dsDatePicker = require('@elliemae/ds-date-picker');
+var dsIcons = require('@elliemae/ds-icons');
+var dropdownPreselectedOptions = require('../options/dropdownPreselectedOptions.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);
+var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
+
+var _div;
+
+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 START_DATE = 'startDate';
+const END_DATE = 'endDate';
 const advanceOption = {
-  label: "Custom",
-  value: import_dropdownPreselectedOptions.CUSTOM_OPTION_VALUE,
+  label: 'Custom',
+  value: dropdownPreselectedOptions.CUSTOM_OPTION_VALUE,
   isAdvance: true
 };
-const { cssClassName, classNameElement, classNameBlock } = (0, import_ds_classnames.convertPropToCssClassName)("date-range-selector");
-const { classNameElement: pickerNameElement } = (0, import_ds_classnames.convertPropToCssClassName)("datepicker");
-class DateTimeRecurenceSelectorImpl extends import_react.Component {
+const {
+  cssClassName,
+  classNameElement,
+  classNameBlock
+} = dsClassnames.convertPropToCssClassName('date-range-selector');
+const {
+  classNameElement: pickerNameElement
+} = dsClassnames.convertPropToCssClassName('datepicker');
+
+class DateTimeRecurenceSelectorImpl extends react.Component {
   constructor(props) {
     super(props);
+
     this.onChange = () => {
-      const { onChange } = this.props;
-      const { customRange, selected } = this.state;
+      const {
+        onChange
+      } = this.props;
+      const {
+        customRange,
+        selected
+      } = this.state;
       onChange(selected, customRange);
     };
-    this.onChangeDropdown = (value) => {
-      const { dropdownPreselectedOptions } = this.props;
-      const selected = dropdownPreselectedOptions.find((op) => op.value === value);
-      const { onChange } = this.props;
+
+    this.onChangeDropdown = value => {
+      const {
+        dropdownPreselectedOptions
+      } = this.props;
+      const selected = dropdownPreselectedOptions.find(op => op.value === value);
+      const {
+        onChange
+      } = this.props;
+
       if (!selected) {
-        this.setState({ selected: value });
+        this.setState({
+          selected: value
+        });
         this.handleOpenModal();
       } else if (selected) {
         onChange(value);
-        this.setState({ selected: value, openModal: false });
+        this.setState({
+          selected: value,
+          openModal: false
+        });
       }
     };
+
     this.handleConfirm = () => {
-      const { customOptionRender: CustomOptionRender } = this.props;
-      const { customRange } = this.state;
-      advanceOption.label = /* @__PURE__ */ import_react.default.createElement(CustomOptionRender, {
+      const {
+        customOptionRender: CustomOptionRender
+      } = this.props;
+      const {
         customRange
+      } = this.state;
+      advanceOption.label = /*#__PURE__*/_jsx__default["default"](CustomOptionRender, {
+        customRange: customRange
       });
       this.onChange();
       this.handleCloseModal();
     };
-    this.handleOpenModal = () => this.setState({ openModal: true });
-    this.handleCloseModal = () => this.setState({ openModal: false });
-    const customRange = {
-      startDate: props.startDate ? (0, import_moment.default)(props.startDate) : (0, import_moment.default)(),
-      endDate: props.endDate ? (0, import_moment.default)(props.endDate) : (0, import_moment.default)()
+
+    this.handleOpenModal = () => this.setState({
+      openModal: true
+    });
+
+    this.handleCloseModal = () => this.setState({
+      openModal: false
+    });
+
+    const _customRange = {
+      startDate: props.startDate ? moment__default["default"](props.startDate) : moment__default["default"](),
+      endDate: props.endDate ? moment__default["default"](props.endDate) : moment__default["default"]()
     };
     this.state = {
       openModal: false,
       selected: props.value,
       focusedInput: START_DATE,
-      customRange
+      customRange: _customRange
     };
-    const { customOptionRender: CustomOptionRender } = props;
-    advanceOption.label = /* @__PURE__ */ import_react.default.createElement(CustomOptionRender, {
-      customRange
+    const {
+      customOptionRender: _CustomOptionRender
+    } = props;
+    advanceOption.label = /*#__PURE__*/_jsx__default["default"](_CustomOptionRender, {
+      customRange: _customRange
     });
+    this.onDatesChange = this.onDatesChange.bind(this);
+    this.onFocusChange = this.onFocusChange.bind(this);
   }
-  onDatesChange({ startDate, endDate }) {
+
+  onDatesChange(_ref) {
+    let {
+      startDate,
+      endDate
+    } = _ref;
     this.setState({
       customRange: {
         startDate,
@@ -106,11 +145,18 @@ class DateTimeRecurenceSelectorImpl extends import_react.Component {
       this.onChange();
     });
   }
+
   onFocusChange() {
-    this.setState(({ focusedInput }) => ({
-      focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE
-    }));
+    this.setState(_ref2 => {
+      let {
+        focusedInput
+      } = _ref2;
+      return {
+        focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE
+      };
+    });
   }
+
   render() {
     const {
       placeholder,
@@ -124,60 +170,64 @@ class DateTimeRecurenceSelectorImpl extends import_react.Component {
       selected,
       openModal,
       focusedInput,
-      customRange: { startDate, endDate }
+      customRange: {
+        startDate,
+        endDate
+      }
     } = this.state;
     let options = [...dropdownPreselectedOptions];
+
     if (!disableCustomOption) {
-      options = [...options, advanceOption];
+      options = [...options, advanceOption]; // eslint-disable-next-line max-lines
     }
-    return /* @__PURE__ */ import_react.default.createElement("div", {
-      ...containerProps,
-      className: `${cssClassName} ${className}`
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: `${classNameBlock("container-selector")}`
-    }, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSComboBox, {
-      className: `${classNameElement("dropdown-field-selector")}`,
-      components: {
-        Option: (props) => /* @__PURE__ */ import_react.default.createElement(import_react_select.components.Option, {
-          ...props
-        }),
-        IndicatorSeparator: () => null
-      },
-      onChange: this.onChangeDropdown,
-      onKeyDown: this.onKeyDown,
-      options,
-      placeholder,
-      value: selected,
-      keepTypedValue: false
-    })), /* @__PURE__ */ import_react.default.createElement(import_ds_popper.default, {
-      contentComponent: /* @__PURE__ */ import_react.default.createElement("div", {
-        className: classNameBlock("wrap-day-picker")
-      }, /* @__PURE__ */ import_react.default.createElement(import_react_dates.DayPickerRangeController, {
-        endDate,
-        focusedInput,
-        hideKeyboardShortcutsPanel: true,
-        navNext: /* @__PURE__ */ import_react.default.createElement(import_ds_date_picker.DatePickerNavigation, {
-          className: pickerNameElement("navigation-next")
-        }),
-        navPrev: /* @__PURE__ */ import_react.default.createElement(import_ds_date_picker.DatePickerNavigation, {
-          className: pickerNameElement("navigation-prev"),
-          icon: import_ds_icons.ChevronLeft
-        }),
-        onDatesChange: this.onDatesChange,
-        onFocusChange: this.onFocusChange,
-        onOutsideClick: this.handleConfirm,
-        renderDayContents: (date) => /* @__PURE__ */ import_react.default.createElement(import_ds_date_picker.DatePickerDay, {
-          className: pickerNameElement("day-contents"),
-          date: date.format(displayFormatDay)
-        }),
-        startDate
-      })),
-      isOpen: openModal,
-      showArrow: false,
-      triggerComponent: /* @__PURE__ */ import_react.default.createElement("div", null)
+
+    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({}, props)),
+          IndicatorSeparator: () => null
+        },
+        onChange: this.onChangeDropdown,
+        onKeyDown: this.onKeyDown,
+        options: options,
+        placeholder: placeholder,
+        value: selected,
+        keepTypedValue: false // TEMPORARY FIX
+
+      })), /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
+        contentComponent: /*#__PURE__*/_jsx__default["default"]("div", {
+          className: classNameBlock('wrap-day-picker')
+        }, void 0, /*#__PURE__*/_jsx__default["default"](reactDates.DayPickerRangeController, {
+          endDate: endDate,
+          focusedInput: focusedInput,
+          hideKeyboardShortcutsPanel: true,
+          navNext: /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerNavigation, {
+            className: pickerNameElement('navigation-next')
+          }),
+          navPrev: /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerNavigation, {
+            className: pickerNameElement('navigation-prev'),
+            icon: dsIcons.ChevronLeft
+          }),
+          onDatesChange: this.onDatesChange,
+          onFocusChange: this.onFocusChange,
+          onOutsideClick: this.handleConfirm,
+          renderDayContents: date => /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerDay, {
+            className: pickerNameElement('day-contents'),
+            date: date.format(displayFormatDay)
+          }),
+          startDate: startDate
+        })),
+        isOpen: openModal,
+        showArrow: false,
+        triggerComponent: _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {}))
+      })]
     }));
   }
+
 }
-var DateRangeSelectorImpl_default = DateTimeRecurenceSelectorImpl;
-module.exports = __toCommonJS(DateRangeSelectorImpl_exports);
-//# sourceMappingURL=DateRangeSelectorImpl.js.map
+
+module.exports = DateTimeRecurenceSelectorImpl;