@elliemae/ds-date-range-selector 3.5.0-rc.9 → 3.6.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSDateRangeSelector.js +2 -2
- package/dist/cjs/DSDateRangeSelector.js.map +2 -2
- package/dist/cjs/components/CustomOptionRender/CustomOptionRender.js +5 -4
- package/dist/cjs/components/CustomOptionRender/CustomOptionRender.js.map +2 -2
- package/dist/cjs/components/DateRangeSelectorImpl.js +55 -48
- package/dist/cjs/components/DateRangeSelectorImpl.js.map +2 -2
- package/dist/esm/DSDateRangeSelector.js +2 -2
- package/dist/esm/DSDateRangeSelector.js.map +2 -2
- package/dist/esm/components/CustomOptionRender/CustomOptionRender.js +5 -4
- package/dist/esm/components/CustomOptionRender/CustomOptionRender.js.map +2 -2
- package/dist/esm/components/DateRangeSelectorImpl.js +55 -48
- package/dist/esm/components/DateRangeSelectorImpl.js.map +2 -2
- package/package.json +7 -7
|
@@ -33,7 +33,7 @@ __export(DSDateRangeSelector_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(DSDateRangeSelector_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
|
-
var
|
|
36
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
38
38
|
var import_moment = __toESM(require("moment"));
|
|
39
39
|
var import_DateRangeSelectorImpl = __toESM(require("./components/DateRangeSelectorImpl"));
|
|
@@ -52,7 +52,7 @@ const DSDateRangeSelector = ({
|
|
|
52
52
|
displayFormatDay = "D",
|
|
53
53
|
disableCustomOption = false,
|
|
54
54
|
hasError = false
|
|
55
|
-
}) => /* @__PURE__ */
|
|
55
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DateRangeSelectorImpl.default, {
|
|
56
56
|
className,
|
|
57
57
|
containerProps,
|
|
58
58
|
customOptionRender,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSDateRangeSelector.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport moment from 'moment';\nimport DateRangeSelectorImpl from './components/DateRangeSelectorImpl';\nimport {\n DropdownOptionsTypes,\n dropdownPreselectedOptions,\n CUSTOM_OPTION_VALUE,\n} from './options/dropdownPreselectedOptions';\nimport CustomOptionRender from './components/CustomOptionRender/CustomOptionRender';\n\nconst DSDateRangeSelector = ({\n containerProps = {},\n className = '',\n preselectedOptions = dropdownPreselectedOptions,\n onChange = () => null,\n placeholder = 'Select Range',\n value = null,\n customOptionRender = CustomOptionRender,\n startDate = null,\n endDate = null,\n displayFormatDay = 'D',\n disableCustomOption = false,\n hasError = false,\n}) => (\n <DateRangeSelectorImpl\n className={className}\n containerProps={containerProps}\n customOptionRender={customOptionRender}\n disableCustomOption={disableCustomOption}\n displayFormatDay={displayFormatDay}\n dropdownPreselectedOptions={preselectedOptions}\n endDate={endDate}\n onChange={onChange}\n placeholder={placeholder}\n startDate={startDate}\n value={value}\n hasError={hasError}\n />\n);\n\nexport { CUSTOM_OPTION_VALUE, dropdownPreselectedOptions, DropdownOptionsTypes };\n\nconst dateRangeRecurrenceSelectorProps = {\n containerProps: PropTypes.object.description('Set of properties attached to the main container'),\n className: PropTypes.string.description('html class attribute'),\n preselectedOptions: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ).description('options to display in dropdown menu'),\n onChange: PropTypes.func.description('function executed when selection changes'),\n placeholder: PropTypes.string.description('inputs placeholder').defaultValue('Select Range'),\n value: PropTypes.oneOf([PropTypes.string, PropTypes.number]).description('selected value'),\n customOptionRender: PropTypes.element.description('custom renderer for options'),\n startDate: PropTypes.instanceOf(Date, moment).description('moment object of start date'),\n endDate: PropTypes.instanceOf(Date, moment).description('moment object of end date'),\n displayFormatDay: PropTypes.string.description('format to display date').defaultValue('D'),\n disableCustomOption: PropTypes.bool.description('disables custom options').defaultValue(false),\n};\n\nDSDateRangeSelector.propTypes = dateRangeRecurrenceSelectorProps;\nDSDateRangeSelector.displayName = 'DSDateRangeSelector';\nconst DateRangeRecurrenceSelectorWithSchema = describe(DSDateRangeSelector);\nDateRangeRecurrenceSelectorWithSchema.propTypes = dateRangeRecurrenceSelectorProps;\n\nexport { DateRangeRecurrenceSelectorWithSchema, DSDateRangeSelector };\nexport default DSDateRangeSelector;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB
|
|
6
|
-
"names": ["CustomOptionRender", "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,0BAAoC;AACpC,oBAAmB;AACnB,mCAAkC;AAClC,wCAIO;AACP,gCAA+B;AAE/B,MAAM,sBAAsB,CAAC;AAAA,EAC3B,iBAAiB,CAAC;AAAA,EAClB,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,WAAW,MAAM;AAAA,EACjB,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,qBAAqB,0BAAAA;AAAA,EACrB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,WAAW;AACb,MACE,4CAAC,6BAAAC,SAAA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,4BAA4B;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACF;AAKF,MAAM,mCAAmC;AAAA,EACvC,gBAAgB,8BAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,WAAW,8BAAU,OAAO,YAAY,sBAAsB;AAAA,EAC9D,oBAAoB,8BAAU;AAAA,IAC5B,8BAAU,MAAM;AAAA,MACd,OAAO,8BAAU;AAAA,MACjB,OAAO,8BAAU;AAAA,IACnB,CAAC;AAAA,EACH,EAAE,YAAY,qCAAqC;AAAA,EACnD,UAAU,8BAAU,KAAK,YAAY,0CAA0C;AAAA,EAC/E,aAAa,8BAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,cAAc;AAAA,EAC3F,OAAO,8BAAU,MAAM,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACzF,oBAAoB,8BAAU,QAAQ,YAAY,6BAA6B;AAAA,EAC/E,WAAW,8BAAU,WAAW,MAAM,cAAAC,OAAM,EAAE,YAAY,6BAA6B;AAAA,EACvF,SAAS,8BAAU,WAAW,MAAM,cAAAA,OAAM,EAAE,YAAY,2BAA2B;AAAA,EACnF,kBAAkB,8BAAU,OAAO,YAAY,wBAAwB,EAAE,aAAa,GAAG;AAAA,EACzF,qBAAqB,8BAAU,KAAK,YAAY,yBAAyB,EAAE,aAAa,KAAK;AAC/F;AAEA,oBAAoB,YAAY;AAChC,oBAAoB,cAAc;AAClC,MAAM,4CAAwC,8BAAS,mBAAmB;AAC1E,sCAAsC,YAAY;AAGlD,IAAO,8BAAQ;",
|
|
6
|
+
"names": ["CustomOptionRender", "DateRangeSelectorImpl", "moment"]
|
|
7
7
|
}
|
|
@@ -28,7 +28,7 @@ __export(CustomOptionRender_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(CustomOptionRender_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
32
|
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
33
33
|
const { cssClassName } = (0, import_ds_classnames.convertPropToCssClassName)(
|
|
34
34
|
"date-range-selector-customoption"
|
|
@@ -37,9 +37,10 @@ const CustomOptionRender = ({ customRange: { startDate, endDate } }) => {
|
|
|
37
37
|
const start = startDate ? startDate.format("MM/DD/YYYY") : null;
|
|
38
38
|
const end = endDate ? endDate.format("MM/DD/YYYY") : null;
|
|
39
39
|
const display = `From ${start} to ${end}` || "Custom";
|
|
40
|
-
return /* @__PURE__ */
|
|
41
|
-
className: cssClassName
|
|
42
|
-
|
|
40
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", {
|
|
41
|
+
className: cssClassName,
|
|
42
|
+
children: display
|
|
43
|
+
});
|
|
43
44
|
};
|
|
44
45
|
var CustomOptionRender_default = CustomOptionRender;
|
|
45
46
|
//# sourceMappingURL=CustomOptionRender.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/CustomOptionRender/CustomOptionRender.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\n\nconst { cssClassName } = convertPropToCssClassName(\n 'date-range-selector-customoption',\n);\n/**\n * @param root0\n * @param root0.customRange\n * @param root0.customRange.startDate\n * @param root0.customRange.endDate\n * @customRange {\nendDate\nstartDate\n}\n */\nconst CustomOptionRender = ({ customRange: { startDate, endDate } }) => {\n const start = startDate ? startDate.format('MM/DD/YYYY') : null;\n const end = endDate ? endDate.format('MM/DD/YYYY') : null;\n const display = `From ${start} to ${end}` || 'Custom';\n return <em className={cssClassName}>{display}</em>;\n};\n\nexport default CustomOptionRender;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,2BAA0C;AAE1C,MAAM,EAAE,aAAa,QAAI;AAAA,EACvB;AACF;AAWA,MAAM,qBAAqB,CAAC,EAAE,aAAa,EAAE,WAAW,QAAQ,EAAE,MAAM;AACtE,QAAM,QAAQ,YAAY,UAAU,OAAO,YAAY,IAAI;AAC3D,QAAM,MAAM,UAAU,QAAQ,OAAO,YAAY,IAAI;AACrD,QAAM,UAAU,QAAQ,YAAY,SAAS;AAC7C,SAAO,4CAAC;AAAA,IAAG,WAAW;AAAA,IAAe;AAAA,GAAQ;AAC/C;AAEA,IAAO,6BAAQ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -28,7 +28,8 @@ __export(DateRangeSelectorImpl_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(DateRangeSelectorImpl_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
+
var import_react = require("react");
|
|
32
33
|
var import_moment = __toESM(require("moment"));
|
|
33
34
|
var import_react_select = require("react-select");
|
|
34
35
|
var import_initialize = require("react-dates/initialize");
|
|
@@ -71,7 +72,7 @@ class DateTimeRecurenceSelectorImpl extends import_react.Component {
|
|
|
71
72
|
this.handleConfirm = () => {
|
|
72
73
|
const { customOptionRender: CustomOptionRender } = this.props;
|
|
73
74
|
const { customRange } = this.state;
|
|
74
|
-
advanceOption.label = /* @__PURE__ */
|
|
75
|
+
advanceOption.label = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomOptionRender, {
|
|
75
76
|
customRange
|
|
76
77
|
});
|
|
77
78
|
this.onChange();
|
|
@@ -92,7 +93,7 @@ class DateTimeRecurenceSelectorImpl extends import_react.Component {
|
|
|
92
93
|
this.onDatesChange = this.onDatesChange.bind(this);
|
|
93
94
|
this.onFocusChange = this.onFocusChange.bind(this);
|
|
94
95
|
const { customOptionRender: CustomOptionRender } = props;
|
|
95
|
-
advanceOption.label = /* @__PURE__ */
|
|
96
|
+
advanceOption.label = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomOptionRender, {
|
|
96
97
|
customRange
|
|
97
98
|
});
|
|
98
99
|
}
|
|
@@ -134,53 +135,59 @@ class DateTimeRecurenceSelectorImpl extends import_react.Component {
|
|
|
134
135
|
if (!disableCustomOption) {
|
|
135
136
|
options = [...options, advanceOption];
|
|
136
137
|
}
|
|
137
|
-
return /* @__PURE__ */
|
|
138
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
138
139
|
...containerProps,
|
|
139
|
-
className: `${cssClassName} ${className}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
140
|
+
className: `${cssClassName} ${className}`,
|
|
141
|
+
children: [
|
|
142
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
143
|
+
className: `${classNameBlock("container-selector")}`,
|
|
144
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form.DSComboBox, {
|
|
145
|
+
className: `${classNameElement("dropdown-field-selector")}`,
|
|
146
|
+
components: {
|
|
147
|
+
Option: (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_select.components.Option, {
|
|
148
|
+
...props
|
|
149
|
+
}),
|
|
150
|
+
IndicatorSeparator: () => null
|
|
151
|
+
},
|
|
152
|
+
onChange: this.onChangeDropdown,
|
|
153
|
+
onKeyDown: this.onKeyDown,
|
|
154
|
+
options,
|
|
155
|
+
placeholder,
|
|
156
|
+
value: selected,
|
|
157
|
+
hasError,
|
|
158
|
+
keepTypedValue: false
|
|
159
|
+
})
|
|
147
160
|
}),
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
startDate
|
|
179
|
-
})),
|
|
180
|
-
isOpen: openModal,
|
|
181
|
-
showArrow: false,
|
|
182
|
-
triggerComponent: /* @__PURE__ */ import_react.default.createElement("div", null)
|
|
183
|
-
}));
|
|
161
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_popper.default, {
|
|
162
|
+
contentComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
163
|
+
className: classNameBlock("wrap-day-picker"),
|
|
164
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_dates.DayPickerRangeController, {
|
|
165
|
+
endDate,
|
|
166
|
+
focusedInput,
|
|
167
|
+
hideKeyboardShortcutsPanel: true,
|
|
168
|
+
navNext: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_date_picker.DatePickerNavigation, {
|
|
169
|
+
className: pickerNameElement("navigation-next")
|
|
170
|
+
}),
|
|
171
|
+
navPrev: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_date_picker.DatePickerNavigation, {
|
|
172
|
+
className: pickerNameElement("navigation-prev"),
|
|
173
|
+
icon: import_ds_icons.ChevronLeft
|
|
174
|
+
}),
|
|
175
|
+
onDatesChange: this.onDatesChange,
|
|
176
|
+
onFocusChange: this.onFocusChange,
|
|
177
|
+
onOutsideClick: this.handleConfirm,
|
|
178
|
+
renderDayContents: (date) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_date_picker.DatePickerDay, {
|
|
179
|
+
className: pickerNameElement("day-contents"),
|
|
180
|
+
date: date.format(displayFormatDay)
|
|
181
|
+
}),
|
|
182
|
+
startDate
|
|
183
|
+
})
|
|
184
|
+
}),
|
|
185
|
+
isOpen: openModal,
|
|
186
|
+
showArrow: false,
|
|
187
|
+
triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
|
|
188
|
+
})
|
|
189
|
+
]
|
|
190
|
+
});
|
|
184
191
|
}
|
|
185
192
|
}
|
|
186
193
|
var DateRangeSelectorImpl_default = DateTimeRecurenceSelectorImpl;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/DateRangeSelectorImpl.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport moment from 'moment';\nimport { components } from 'react-select';\nimport 'react-dates/initialize';\nimport { DayPickerRangeController } from 'react-dates';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSComboBox } from '@elliemae/ds-form';\nimport DSPopper from '@elliemae/ds-popper';\nimport { DatePickerDay, DatePickerNavigation } from '@elliemae/ds-date-picker';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { CUSTOM_OPTION_VALUE } from '../options/dropdownPreselectedOptions';\n\nconst START_DATE = 'startDate';\nconst END_DATE = 'endDate';\n\nconst advanceOption = {\n label: 'Custom',\n value: CUSTOM_OPTION_VALUE,\n isAdvance: true,\n};\nconst { cssClassName, classNameElement, classNameBlock } = convertPropToCssClassName('date-range-selector');\n\nconst { classNameElement: pickerNameElement } = convertPropToCssClassName('datepicker');\n\nclass DateTimeRecurenceSelectorImpl extends Component {\n constructor(props) {\n super(props);\n\n const customRange = {\n startDate: props.startDate ? moment(props.startDate) : moment(),\n endDate: props.endDate ? moment(props.endDate) : moment(),\n };\n this.state = {\n openModal: false,\n selected: props.value,\n focusedInput: START_DATE,\n customRange,\n };\n\n this.onDatesChange = this.onDatesChange.bind(this);\n this.onFocusChange = this.onFocusChange.bind(this);\n\n const { customOptionRender: CustomOptionRender } = props;\n advanceOption.label = <CustomOptionRender customRange={customRange} />;\n }\n\n onChange = () => {\n const { onChange } = this.props;\n const { customRange, selected } = this.state;\n onChange(selected, customRange);\n };\n\n onChangeDropdown = (value) => {\n const { dropdownPreselectedOptions } = this.props;\n const selected = dropdownPreselectedOptions.find((op) => op.value === value);\n const { onChange } = this.props;\n if (!selected) {\n this.setState({ selected: value });\n this.handleOpenModal();\n } else if (selected) {\n onChange(value);\n this.setState({ selected: value, openModal: false });\n }\n };\n\n onDatesChange({ startDate, endDate }) {\n this.setState(\n {\n customRange: {\n startDate,\n endDate,\n },\n },\n () => {\n this.onChange();\n },\n );\n }\n\n onFocusChange() {\n this.setState(({ focusedInput }) => ({\n focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE,\n }));\n }\n\n handleConfirm = () => {\n const { customOptionRender: CustomOptionRender } = this.props;\n const { customRange } = this.state;\n advanceOption.label = <CustomOptionRender customRange={customRange} />;\n this.onChange();\n this.handleCloseModal();\n };\n\n handleOpenModal = () => this.setState({ openModal: true });\n\n handleCloseModal = () => this.setState({ openModal: false });\n\n render() {\n const {\n placeholder,\n dropdownPreselectedOptions,\n displayFormatDay,\n className,\n disableCustomOption,\n containerProps,\n hasError,\n } = this.props;\n const {\n selected,\n openModal,\n focusedInput,\n customRange: { startDate, endDate },\n } = this.state;\n\n let options = [...dropdownPreselectedOptions];\n if (!disableCustomOption) {\n options = [...options, advanceOption];\n // eslint-disable-next-line max-lines\n }\n\n return (\n <div {...containerProps} className={`${cssClassName} ${className}`}>\n <div className={`${classNameBlock('container-selector')}`}>\n <DSComboBox\n className={`${classNameElement('dropdown-field-selector')}`}\n components={{\n Option: (props) => <components.Option {...props} />,\n IndicatorSeparator: () => null,\n }}\n onChange={this.onChangeDropdown}\n onKeyDown={this.onKeyDown}\n options={options}\n placeholder={placeholder}\n value={selected}\n hasError={hasError}\n keepTypedValue={false} // TEMPORARY FIX\n />\n </div>\n <DSPopper\n contentComponent={\n <div className={classNameBlock('wrap-day-picker')}>\n <DayPickerRangeController\n endDate={endDate}\n focusedInput={focusedInput}\n hideKeyboardShortcutsPanel\n navNext={<DatePickerNavigation className={pickerNameElement('navigation-next')} />}\n navPrev={<DatePickerNavigation className={pickerNameElement('navigation-prev')} icon={ChevronLeft} />}\n onDatesChange={this.onDatesChange}\n onFocusChange={this.onFocusChange}\n onOutsideClick={this.handleConfirm}\n renderDayContents={(date) => (\n <DatePickerDay className={pickerNameElement('day-contents')} date={date.format(displayFormatDay)} />\n )}\n startDate={startDate}\n />\n </div>\n }\n isOpen={openModal}\n showArrow={false}\n triggerComponent={<div />}\n />\n </div>\n );\n }\n}\n\nexport default DateTimeRecurenceSelectorImpl;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": ["
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["moment", "DSPopper"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { PropTypes, describe } from "@elliemae/ds-utilities";
|
|
4
4
|
import moment from "moment";
|
|
5
5
|
import DateRangeSelectorImpl from "./components/DateRangeSelectorImpl";
|
|
@@ -22,7 +22,7 @@ const DSDateRangeSelector = ({
|
|
|
22
22
|
displayFormatDay = "D",
|
|
23
23
|
disableCustomOption = false,
|
|
24
24
|
hasError = false
|
|
25
|
-
}) => /* @__PURE__ */
|
|
25
|
+
}) => /* @__PURE__ */ jsx(DateRangeSelectorImpl, {
|
|
26
26
|
className,
|
|
27
27
|
containerProps,
|
|
28
28
|
customOptionRender,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSDateRangeSelector.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport moment from 'moment';\nimport DateRangeSelectorImpl from './components/DateRangeSelectorImpl';\nimport {\n DropdownOptionsTypes,\n dropdownPreselectedOptions,\n CUSTOM_OPTION_VALUE,\n} from './options/dropdownPreselectedOptions';\nimport CustomOptionRender from './components/CustomOptionRender/CustomOptionRender';\n\nconst DSDateRangeSelector = ({\n containerProps = {},\n className = '',\n preselectedOptions = dropdownPreselectedOptions,\n onChange = () => null,\n placeholder = 'Select Range',\n value = null,\n customOptionRender = CustomOptionRender,\n startDate = null,\n endDate = null,\n displayFormatDay = 'D',\n disableCustomOption = false,\n hasError = false,\n}) => (\n <DateRangeSelectorImpl\n className={className}\n containerProps={containerProps}\n customOptionRender={customOptionRender}\n disableCustomOption={disableCustomOption}\n displayFormatDay={displayFormatDay}\n dropdownPreselectedOptions={preselectedOptions}\n endDate={endDate}\n onChange={onChange}\n placeholder={placeholder}\n startDate={startDate}\n value={value}\n hasError={hasError}\n />\n);\n\nexport { CUSTOM_OPTION_VALUE, dropdownPreselectedOptions, DropdownOptionsTypes };\n\nconst dateRangeRecurrenceSelectorProps = {\n containerProps: PropTypes.object.description('Set of properties attached to the main container'),\n className: PropTypes.string.description('html class attribute'),\n preselectedOptions: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ).description('options to display in dropdown menu'),\n onChange: PropTypes.func.description('function executed when selection changes'),\n placeholder: PropTypes.string.description('inputs placeholder').defaultValue('Select Range'),\n value: PropTypes.oneOf([PropTypes.string, PropTypes.number]).description('selected value'),\n customOptionRender: PropTypes.element.description('custom renderer for options'),\n startDate: PropTypes.instanceOf(Date, moment).description('moment object of start date'),\n endDate: PropTypes.instanceOf(Date, moment).description('moment object of end date'),\n displayFormatDay: PropTypes.string.description('format to display date').defaultValue('D'),\n disableCustomOption: PropTypes.bool.description('disables custom options').defaultValue(false),\n};\n\nDSDateRangeSelector.propTypes = dateRangeRecurrenceSelectorProps;\nDSDateRangeSelector.displayName = 'DSDateRangeSelector';\nconst DateRangeRecurrenceSelectorWithSchema = describe(DSDateRangeSelector);\nDateRangeRecurrenceSelectorWithSchema.propTypes = dateRangeRecurrenceSelectorProps;\n\nexport { DateRangeRecurrenceSelectorWithSchema, DSDateRangeSelector };\nexport default DSDateRangeSelector;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,WAAW,gBAAgB;AACpC,OAAO,YAAY;AACnB,OAAO,2BAA2B;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,wBAAwB;AAE/B,MAAM,sBAAsB,CAAC;AAAA,EAC3B,iBAAiB,CAAC;AAAA,EAClB,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,WAAW,MAAM;AAAA,EACjB,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,qBAAqB;AAAA,EACrB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,WAAW;AACb,MACE,oBAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,4BAA4B;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACF;AAKF,MAAM,mCAAmC;AAAA,EACvC,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,WAAW,UAAU,OAAO,YAAY,sBAAsB;AAAA,EAC9D,oBAAoB,UAAU;AAAA,IAC5B,UAAU,MAAM;AAAA,MACd,OAAO,UAAU;AAAA,MACjB,OAAO,UAAU;AAAA,IACnB,CAAC;AAAA,EACH,EAAE,YAAY,qCAAqC;AAAA,EACnD,UAAU,UAAU,KAAK,YAAY,0CAA0C;AAAA,EAC/E,aAAa,UAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,cAAc;AAAA,EAC3F,OAAO,UAAU,MAAM,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACzF,oBAAoB,UAAU,QAAQ,YAAY,6BAA6B;AAAA,EAC/E,WAAW,UAAU,WAAW,MAAM,MAAM,EAAE,YAAY,6BAA6B;AAAA,EACvF,SAAS,UAAU,WAAW,MAAM,MAAM,EAAE,YAAY,2BAA2B;AAAA,EACnF,kBAAkB,UAAU,OAAO,YAAY,wBAAwB,EAAE,aAAa,GAAG;AAAA,EACzF,qBAAqB,UAAU,KAAK,YAAY,yBAAyB,EAAE,aAAa,KAAK;AAC/F;AAEA,oBAAoB,YAAY;AAChC,oBAAoB,cAAc;AAClC,MAAM,wCAAwC,SAAS,mBAAmB;AAC1E,sCAAsC,YAAY;AAGlD,IAAO,8BAAQ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { convertPropToCssClassName } from "@elliemae/ds-classnames";
|
|
4
4
|
const { cssClassName } = convertPropToCssClassName(
|
|
5
5
|
"date-range-selector-customoption"
|
|
@@ -8,9 +8,10 @@ const CustomOptionRender = ({ customRange: { startDate, endDate } }) => {
|
|
|
8
8
|
const start = startDate ? startDate.format("MM/DD/YYYY") : null;
|
|
9
9
|
const end = endDate ? endDate.format("MM/DD/YYYY") : null;
|
|
10
10
|
const display = `From ${start} to ${end}` || "Custom";
|
|
11
|
-
return /* @__PURE__ */
|
|
12
|
-
className: cssClassName
|
|
13
|
-
|
|
11
|
+
return /* @__PURE__ */ jsx("em", {
|
|
12
|
+
className: cssClassName,
|
|
13
|
+
children: display
|
|
14
|
+
});
|
|
14
15
|
};
|
|
15
16
|
var CustomOptionRender_default = CustomOptionRender;
|
|
16
17
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/CustomOptionRender/CustomOptionRender.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\n\nconst { cssClassName } = convertPropToCssClassName(\n 'date-range-selector-customoption',\n);\n/**\n * @param root0\n * @param root0.customRange\n * @param root0.customRange.startDate\n * @param root0.customRange.endDate\n * @customRange {\nendDate\nstartDate\n}\n */\nconst CustomOptionRender = ({ customRange: { startDate, endDate } }) => {\n const start = startDate ? startDate.format('MM/DD/YYYY') : null;\n const end = endDate ? endDate.format('MM/DD/YYYY') : null;\n const display = `From ${start} to ${end}` || 'Custom';\n return <em className={cssClassName}>{display}</em>;\n};\n\nexport default CustomOptionRender;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,iCAAiC;AAE1C,MAAM,EAAE,aAAa,IAAI;AAAA,EACvB;AACF;AAWA,MAAM,qBAAqB,CAAC,EAAE,aAAa,EAAE,WAAW,QAAQ,EAAE,MAAM;AACtE,QAAM,QAAQ,YAAY,UAAU,OAAO,YAAY,IAAI;AAC3D,QAAM,MAAM,UAAU,QAAQ,OAAO,YAAY,IAAI;AACrD,QAAM,UAAU,QAAQ,YAAY,SAAS;AAC7C,SAAO,oBAAC;AAAA,IAAG,WAAW;AAAA,IAAe;AAAA,GAAQ;AAC/C;AAEA,IAAO,6BAAQ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Component } from "react";
|
|
3
4
|
import moment from "moment";
|
|
4
5
|
import { components } from "react-select";
|
|
5
6
|
import "react-dates/initialize";
|
|
@@ -42,7 +43,7 @@ class DateTimeRecurenceSelectorImpl extends Component {
|
|
|
42
43
|
this.handleConfirm = () => {
|
|
43
44
|
const { customOptionRender: CustomOptionRender } = this.props;
|
|
44
45
|
const { customRange } = this.state;
|
|
45
|
-
advanceOption.label = /* @__PURE__ */
|
|
46
|
+
advanceOption.label = /* @__PURE__ */ jsx(CustomOptionRender, {
|
|
46
47
|
customRange
|
|
47
48
|
});
|
|
48
49
|
this.onChange();
|
|
@@ -63,7 +64,7 @@ class DateTimeRecurenceSelectorImpl extends Component {
|
|
|
63
64
|
this.onDatesChange = this.onDatesChange.bind(this);
|
|
64
65
|
this.onFocusChange = this.onFocusChange.bind(this);
|
|
65
66
|
const { customOptionRender: CustomOptionRender } = props;
|
|
66
|
-
advanceOption.label = /* @__PURE__ */
|
|
67
|
+
advanceOption.label = /* @__PURE__ */ jsx(CustomOptionRender, {
|
|
67
68
|
customRange
|
|
68
69
|
});
|
|
69
70
|
}
|
|
@@ -105,53 +106,59 @@ class DateTimeRecurenceSelectorImpl extends Component {
|
|
|
105
106
|
if (!disableCustomOption) {
|
|
106
107
|
options = [...options, advanceOption];
|
|
107
108
|
}
|
|
108
|
-
return /* @__PURE__ */
|
|
109
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
109
110
|
...containerProps,
|
|
110
|
-
className: `${cssClassName} ${className}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
111
|
+
className: `${cssClassName} ${className}`,
|
|
112
|
+
children: [
|
|
113
|
+
/* @__PURE__ */ jsx("div", {
|
|
114
|
+
className: `${classNameBlock("container-selector")}`,
|
|
115
|
+
children: /* @__PURE__ */ jsx(DSComboBox, {
|
|
116
|
+
className: `${classNameElement("dropdown-field-selector")}`,
|
|
117
|
+
components: {
|
|
118
|
+
Option: (props) => /* @__PURE__ */ jsx(components.Option, {
|
|
119
|
+
...props
|
|
120
|
+
}),
|
|
121
|
+
IndicatorSeparator: () => null
|
|
122
|
+
},
|
|
123
|
+
onChange: this.onChangeDropdown,
|
|
124
|
+
onKeyDown: this.onKeyDown,
|
|
125
|
+
options,
|
|
126
|
+
placeholder,
|
|
127
|
+
value: selected,
|
|
128
|
+
hasError,
|
|
129
|
+
keepTypedValue: false
|
|
130
|
+
})
|
|
118
131
|
}),
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
startDate
|
|
150
|
-
})),
|
|
151
|
-
isOpen: openModal,
|
|
152
|
-
showArrow: false,
|
|
153
|
-
triggerComponent: /* @__PURE__ */ React2.createElement("div", null)
|
|
154
|
-
}));
|
|
132
|
+
/* @__PURE__ */ jsx(DSPopper, {
|
|
133
|
+
contentComponent: /* @__PURE__ */ jsx("div", {
|
|
134
|
+
className: classNameBlock("wrap-day-picker"),
|
|
135
|
+
children: /* @__PURE__ */ jsx(DayPickerRangeController, {
|
|
136
|
+
endDate,
|
|
137
|
+
focusedInput,
|
|
138
|
+
hideKeyboardShortcutsPanel: true,
|
|
139
|
+
navNext: /* @__PURE__ */ jsx(DatePickerNavigation, {
|
|
140
|
+
className: pickerNameElement("navigation-next")
|
|
141
|
+
}),
|
|
142
|
+
navPrev: /* @__PURE__ */ jsx(DatePickerNavigation, {
|
|
143
|
+
className: pickerNameElement("navigation-prev"),
|
|
144
|
+
icon: ChevronLeft
|
|
145
|
+
}),
|
|
146
|
+
onDatesChange: this.onDatesChange,
|
|
147
|
+
onFocusChange: this.onFocusChange,
|
|
148
|
+
onOutsideClick: this.handleConfirm,
|
|
149
|
+
renderDayContents: (date) => /* @__PURE__ */ jsx(DatePickerDay, {
|
|
150
|
+
className: pickerNameElement("day-contents"),
|
|
151
|
+
date: date.format(displayFormatDay)
|
|
152
|
+
}),
|
|
153
|
+
startDate
|
|
154
|
+
})
|
|
155
|
+
}),
|
|
156
|
+
isOpen: openModal,
|
|
157
|
+
showArrow: false,
|
|
158
|
+
triggerComponent: /* @__PURE__ */ jsx("div", {})
|
|
159
|
+
})
|
|
160
|
+
]
|
|
161
|
+
});
|
|
155
162
|
}
|
|
156
163
|
}
|
|
157
164
|
var DateRangeSelectorImpl_default = DateTimeRecurenceSelectorImpl;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/DateRangeSelectorImpl.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport moment from 'moment';\nimport { components } from 'react-select';\nimport 'react-dates/initialize';\nimport { DayPickerRangeController } from 'react-dates';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSComboBox } from '@elliemae/ds-form';\nimport DSPopper from '@elliemae/ds-popper';\nimport { DatePickerDay, DatePickerNavigation } from '@elliemae/ds-date-picker';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { CUSTOM_OPTION_VALUE } from '../options/dropdownPreselectedOptions';\n\nconst START_DATE = 'startDate';\nconst END_DATE = 'endDate';\n\nconst advanceOption = {\n label: 'Custom',\n value: CUSTOM_OPTION_VALUE,\n isAdvance: true,\n};\nconst { cssClassName, classNameElement, classNameBlock } = convertPropToCssClassName('date-range-selector');\n\nconst { classNameElement: pickerNameElement } = convertPropToCssClassName('datepicker');\n\nclass DateTimeRecurenceSelectorImpl extends Component {\n constructor(props) {\n super(props);\n\n const customRange = {\n startDate: props.startDate ? moment(props.startDate) : moment(),\n endDate: props.endDate ? moment(props.endDate) : moment(),\n };\n this.state = {\n openModal: false,\n selected: props.value,\n focusedInput: START_DATE,\n customRange,\n };\n\n this.onDatesChange = this.onDatesChange.bind(this);\n this.onFocusChange = this.onFocusChange.bind(this);\n\n const { customOptionRender: CustomOptionRender } = props;\n advanceOption.label = <CustomOptionRender customRange={customRange} />;\n }\n\n onChange = () => {\n const { onChange } = this.props;\n const { customRange, selected } = this.state;\n onChange(selected, customRange);\n };\n\n onChangeDropdown = (value) => {\n const { dropdownPreselectedOptions } = this.props;\n const selected = dropdownPreselectedOptions.find((op) => op.value === value);\n const { onChange } = this.props;\n if (!selected) {\n this.setState({ selected: value });\n this.handleOpenModal();\n } else if (selected) {\n onChange(value);\n this.setState({ selected: value, openModal: false });\n }\n };\n\n onDatesChange({ startDate, endDate }) {\n this.setState(\n {\n customRange: {\n startDate,\n endDate,\n },\n },\n () => {\n this.onChange();\n },\n );\n }\n\n onFocusChange() {\n this.setState(({ focusedInput }) => ({\n focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE,\n }));\n }\n\n handleConfirm = () => {\n const { customOptionRender: CustomOptionRender } = this.props;\n const { customRange } = this.state;\n advanceOption.label = <CustomOptionRender customRange={customRange} />;\n this.onChange();\n this.handleCloseModal();\n };\n\n handleOpenModal = () => this.setState({ openModal: true });\n\n handleCloseModal = () => this.setState({ openModal: false });\n\n render() {\n const {\n placeholder,\n dropdownPreselectedOptions,\n displayFormatDay,\n className,\n disableCustomOption,\n containerProps,\n hasError,\n } = this.props;\n const {\n selected,\n openModal,\n focusedInput,\n customRange: { startDate, endDate },\n } = this.state;\n\n let options = [...dropdownPreselectedOptions];\n if (!disableCustomOption) {\n options = [...options, advanceOption];\n // eslint-disable-next-line max-lines\n }\n\n return (\n <div {...containerProps} className={`${cssClassName} ${className}`}>\n <div className={`${classNameBlock('container-selector')}`}>\n <DSComboBox\n className={`${classNameElement('dropdown-field-selector')}`}\n components={{\n Option: (props) => <components.Option {...props} />,\n IndicatorSeparator: () => null,\n }}\n onChange={this.onChangeDropdown}\n onKeyDown={this.onKeyDown}\n options={options}\n placeholder={placeholder}\n value={selected}\n hasError={hasError}\n keepTypedValue={false} // TEMPORARY FIX\n />\n </div>\n <DSPopper\n contentComponent={\n <div className={classNameBlock('wrap-day-picker')}>\n <DayPickerRangeController\n endDate={endDate}\n focusedInput={focusedInput}\n hideKeyboardShortcutsPanel\n navNext={<DatePickerNavigation className={pickerNameElement('navigation-next')} />}\n navPrev={<DatePickerNavigation className={pickerNameElement('navigation-prev')} icon={ChevronLeft} />}\n onDatesChange={this.onDatesChange}\n onFocusChange={this.onFocusChange}\n onOutsideClick={this.handleConfirm}\n renderDayContents={(date) => (\n <DatePickerDay className={pickerNameElement('day-contents')} date={date.format(displayFormatDay)} />\n )}\n startDate={startDate}\n />\n </div>\n }\n isOpen={openModal}\n showArrow={false}\n triggerComponent={<div />}\n />\n </div>\n );\n }\n}\n\nexport default DateTimeRecurenceSelectorImpl;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-date-range-selector",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.6.0-next.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Date Range Selector",
|
|
6
6
|
"files": [
|
|
@@ -51,12 +51,12 @@
|
|
|
51
51
|
"indent": 4
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@elliemae/ds-classnames": "3.
|
|
55
|
-
"@elliemae/ds-date-picker": "3.
|
|
56
|
-
"@elliemae/ds-form": "3.
|
|
57
|
-
"@elliemae/ds-icons": "3.
|
|
58
|
-
"@elliemae/ds-popper": "3.
|
|
59
|
-
"@elliemae/ds-utilities": "3.
|
|
54
|
+
"@elliemae/ds-classnames": "3.6.0-next.0",
|
|
55
|
+
"@elliemae/ds-date-picker": "3.6.0-next.0",
|
|
56
|
+
"@elliemae/ds-form": "3.6.0-next.0",
|
|
57
|
+
"@elliemae/ds-icons": "3.6.0-next.0",
|
|
58
|
+
"@elliemae/ds-popper": "3.6.0-next.0",
|
|
59
|
+
"@elliemae/ds-utilities": "3.6.0-next.0",
|
|
60
60
|
"moment": "~2.29.3",
|
|
61
61
|
"react-dates": "~21.8.0",
|
|
62
62
|
"react-select": "4.3.1"
|