@elliemae/ds-date-range-picker 2.0.0-next.8 → 2.0.0-rc.11

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.
Files changed (12) hide show
  1. package/cjs/DSDateRangePicker.js +47 -41
  2. package/cjs/components/DSDateRangePickerImpl.js +41 -40
  3. package/cjs/components/DatePickerLabel/DatePickerLabel.js +9 -6
  4. package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js +11 -12
  5. package/cjs/components/DayPickerRangeController.js +7 -3
  6. package/esm/DSDateRangePicker.js +47 -41
  7. package/esm/components/DSDateRangePickerImpl.js +37 -33
  8. package/esm/components/DatePickerLabel/DatePickerLabel.js +9 -6
  9. package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js +10 -10
  10. package/esm/components/DayPickerRangeController.js +6 -1
  11. package/package.json +7 -5
  12. package/types/DSDateRangePicker.d.ts +228 -37
package/cjs/DSDateRangePicker.js CHANGED
@@ -2,6 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ require('core-js/modules/esnext.async-iterator.filter.js');
6
+ require('core-js/modules/esnext.iterator.constructor.js');
7
+ require('core-js/modules/esnext.iterator.filter.js');
8
+ require('core-js/modules/esnext.async-iterator.for-each.js');
9
+ require('core-js/modules/esnext.iterator.for-each.js');
5
10
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
11
  var _jsx = require('@babel/runtime/helpers/jsx');
7
12
  require('react');
@@ -24,47 +29,48 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
24
29
 
25
30
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
26
31
 
27
- const DSDateRangePicker = ({
28
- containerProps = {},
29
- className = '',
30
- disabled = false,
31
- required = false,
32
- startDateRequired = false,
33
- endDateRequired = false,
34
- id,
35
- hasError = false,
36
- validationMessage = '',
37
- readOnly = false,
38
- screenReaderInputMessage = 'Select date',
39
- initialVisibleMonth = moment__default["default"](),
40
- firstDayOfWeek = 0,
41
- keepOpenOnDateSelect = true,
42
- reopenPickerOnClearDates = false,
43
- hideKeyboardShortcutsPanel = true,
44
- onPrevMonthClick = () => null,
45
- onNextMonthClick = () => null,
46
- onClose = () => null,
47
- onOutsideClick = () => null,
48
- transitionDuration = 0,
49
- verticalSpacing = 0,
50
- minimumNights = 0,
51
- isDayBlocked = () => false,
52
- isOutsideRange = () => false,
53
- isDayHighlighted = () => false,
54
- displayFormat = 'L',
55
- displayFormatDay = 'D',
56
- phrases = defaultPhrases.DateRangePickerPhrases,
57
- startDate,
58
- endDate,
59
- startDateId = 'startDateId',
60
- endDateId = 'endDateId',
61
- labelFrom = 'From',
62
- labelTo = 'To',
63
- enableOutsideDays = true,
64
- onChangeStartInput = () => null,
65
- onChangeEndInput = () => null,
66
- onDatesChange = () => null
67
- }) => {
32
+ const DSDateRangePicker = _ref => {
33
+ let {
34
+ containerProps = {},
35
+ className = '',
36
+ disabled = false,
37
+ required = false,
38
+ startDateRequired = false,
39
+ endDateRequired = false,
40
+ id,
41
+ hasError = false,
42
+ validationMessage = '',
43
+ readOnly = false,
44
+ screenReaderInputMessage = 'Select date',
45
+ initialVisibleMonth = moment__default["default"](),
46
+ firstDayOfWeek = 0,
47
+ keepOpenOnDateSelect = true,
48
+ reopenPickerOnClearDates = false,
49
+ hideKeyboardShortcutsPanel = true,
50
+ onPrevMonthClick = () => null,
51
+ onNextMonthClick = () => null,
52
+ onClose = () => null,
53
+ onOutsideClick = () => null,
54
+ transitionDuration = 0,
55
+ verticalSpacing = 0,
56
+ minimumNights = 0,
57
+ isDayBlocked = () => false,
58
+ isOutsideRange = () => false,
59
+ isDayHighlighted = () => false,
60
+ displayFormat = 'L',
61
+ displayFormatDay = 'D',
62
+ phrases = defaultPhrases.DateRangePickerPhrases,
63
+ startDate,
64
+ endDate,
65
+ startDateId = 'startDateId',
66
+ endDateId = 'endDateId',
67
+ labelFrom = 'From',
68
+ labelTo = 'To',
69
+ enableOutsideDays = true,
70
+ onChangeStartInput = () => null,
71
+ onChangeEndInput = () => null,
72
+ onDatesChange = () => null
73
+ } = _ref;
68
74
  const {
69
75
  cssClassName,
70
76
  prefixBlockName
package/cjs/components/DSDateRangePickerImpl.js CHANGED
@@ -3,13 +3,11 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _jsx = require('@babel/runtime/helpers/jsx');
6
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
6
  var React = require('react');
8
7
  var moment = require('moment');
9
8
  var dsClassnames = require('@elliemae/ds-classnames');
10
- var DSInputMask = require('@elliemae/ds-basic/form/InputMask');
11
- var DSFormItemLayout = require('@elliemae/ds-basic/form/FormItem');
12
- var DSPopper = require('@elliemae/ds-basic/Popper');
9
+ var DSInputMask = require('@elliemae/ds-form');
10
+ var DSPopper = require('@elliemae/ds-popper');
13
11
  var dsDatePicker = require('@elliemae/ds-date-picker');
14
12
  var DayPickerRangeController = require('./DayPickerRangeController.js');
15
13
  var isMaxDiffSafe = require('../isMaxDiffSafe.js');
@@ -17,11 +15,8 @@ var isMaxDiffSafe = require('../isMaxDiffSafe.js');
17
15
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
16
 
19
17
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
20
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
21
18
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
22
19
  var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
23
- var DSInputMask__default = /*#__PURE__*/_interopDefaultLegacy(DSInputMask);
24
- var DSFormItemLayout__default = /*#__PURE__*/_interopDefaultLegacy(DSFormItemLayout);
25
20
  var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
26
21
 
27
22
  const START_DATE = 'startDate';
@@ -34,10 +29,11 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
34
29
  constructor(props) {
35
30
  super(props);
36
31
 
37
- _defineProperty__default["default"](this, "onDatesChange", ({
38
- startDate,
39
- endDate
40
- }) => {
32
+ this.onDatesChange = _ref => {
33
+ let {
34
+ startDate,
35
+ endDate
36
+ } = _ref;
41
37
  const {
42
38
  onDatesChange
43
39
  } = this.props;
@@ -56,23 +52,26 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
56
52
  primaryStartInput: false,
57
53
  primaryEndInput: false
58
54
  });
59
- });
55
+ };
60
56
 
61
- _defineProperty__default["default"](this, "onFocusChange", () => {
62
- this.setState(({
63
- focusedInput
64
- }) => ({
65
- focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE
66
- }));
67
- });
57
+ this.onFocusChange = () => {
58
+ this.setState(_ref2 => {
59
+ let {
60
+ focusedInput
61
+ } = _ref2;
62
+ return {
63
+ focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE
64
+ };
65
+ });
66
+ };
68
67
 
69
- _defineProperty__default["default"](this, "handleKeyDown", event => {
68
+ this.handleKeyDown = event => {
70
69
  if (event.key === 'Escape') this.setState({
71
70
  showPicker: false
72
71
  });
73
- });
72
+ };
74
73
 
75
- _defineProperty__default["default"](this, "getSafeStartInputValue", () => {
74
+ this.getSafeStartInputValue = () => {
76
75
  const {
77
76
  startInput,
78
77
  primaryStartInput,
@@ -81,9 +80,9 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
81
80
  if (primaryStartInput && startInput) return startInput;
82
81
  if (!startDate) return '';
83
82
  return startDate.format('MMDDYYYY');
84
- });
83
+ };
85
84
 
86
- _defineProperty__default["default"](this, "getSafeEndInputValue", () => {
85
+ this.getSafeEndInputValue = () => {
87
86
  const {
88
87
  endInput,
89
88
  primaryEndInput,
@@ -92,9 +91,9 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
92
91
  if (primaryEndInput && endInput) return endInput;
93
92
  if (!endDate) return '';
94
93
  return endDate.format('MMDDYYYY');
95
- });
94
+ };
96
95
 
97
- _defineProperty__default["default"](this, "changeFocus", () => {
96
+ this.changeFocus = () => {
98
97
  const {
99
98
  disabled
100
99
  } = this.props;
@@ -104,9 +103,9 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
104
103
  focusedInput: 'startDate'
105
104
  }));
106
105
  }
107
- });
106
+ };
108
107
 
109
- _defineProperty__default["default"](this, "handleChangeStart", e => {
108
+ this.handleChangeStart = e => {
110
109
  var _momentValue;
111
110
 
112
111
  const {
@@ -139,9 +138,9 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
139
138
  startDateError: invalidDate,
140
139
  endDateError: !isStartDateAcceptable || !prevState.endDateError ? prevState.endDateError : !isStartAcceptableWithSelectedEnd
141
140
  }));
142
- });
141
+ };
143
142
 
144
- _defineProperty__default["default"](this, "handleChangeEnd", e => {
143
+ this.handleChangeEnd = e => {
145
144
  var _momentValue2;
146
145
 
147
146
  const {
@@ -178,12 +177,14 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
178
177
  startDateError: !isEndDateAcceptable || !prevState.startDateError ? prevState.startDateError : !isEndAcceptableWithSelectedStart,
179
178
  endDateError: invalidDate
180
179
  }));
181
- });
180
+ };
181
+
182
+ this.handleChangeDate = _ref3 => {
183
+ let {
184
+ startDate: _start,
185
+ endDate
186
+ } = _ref3;
182
187
 
183
- _defineProperty__default["default"](this, "handleChangeDate", ({
184
- startDate: _start,
185
- endDate
186
- }) => {
187
188
  if (_start && endDate) {
188
189
  this.setState({
189
190
  startDate: moment__default["default"](_start),
@@ -202,7 +203,7 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
202
203
  primaryEndInput: false
203
204
  });
204
205
  }
205
- });
206
+ };
206
207
 
207
208
  this.state = {
208
209
  startDate: props.startDate ? moment__default["default"](props.startDate) : null,
@@ -258,9 +259,9 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
258
259
  className: "".concat(inputClass, " ").concat(inputClassModifier)
259
260
  }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
260
261
  className: classNameBlock('wrapper-input-date-range-picker-controller')
261
- }, void 0, /*#__PURE__*/_jsx__default["default"](DSFormItemLayout__default["default"], {
262
+ }, void 0, /*#__PURE__*/_jsx__default["default"](DSInputMask.DSFormItemLayout, {
262
263
  floatingLabel: true,
263
- inputComponent: DSInputMask__default["default"],
264
+ inputComponent: DSInputMask.DSInputMask,
264
265
  labelText: labelFrom,
265
266
  mask: DSInputMask.MASK_TYPES.DATE,
266
267
  onChange: this.handleChangeStart,
@@ -272,9 +273,9 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
272
273
  required: startDateRequired,
273
274
  hasError: hasError || startDateError,
274
275
  placeholder: "MM/DD/YYYY"
275
- }), /*#__PURE__*/_jsx__default["default"](DSFormItemLayout__default["default"], {
276
+ }), /*#__PURE__*/_jsx__default["default"](DSInputMask.DSFormItemLayout, {
276
277
  floatingLabel: true,
277
- inputComponent: DSInputMask__default["default"],
278
+ inputComponent: DSInputMask.DSInputMask,
278
279
  labelText: labelTo,
279
280
  mask: DSInputMask.MASK_TYPES.DATE,
280
281
  onChange: this.handleChangeEnd,
package/cjs/components/DatePickerLabel/DatePickerLabel.js CHANGED
@@ -7,11 +7,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
7
7
 
8
8
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
9
9
 
10
- const Label = ({
11
- className = 'date-picker-label',
12
- label = ''
13
- }) => /*#__PURE__*/_jsx__default["default"]("div", {
14
- className: className
15
- }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, label));
10
+ const Label = _ref => {
11
+ let {
12
+ className = 'date-picker-label',
13
+ label = ''
14
+ } = _ref;
15
+ return /*#__PURE__*/_jsx__default["default"]("div", {
16
+ className: className
17
+ }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, label));
18
+ };
16
19
 
17
20
  module.exports = Label;
package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js CHANGED
@@ -4,8 +4,7 @@ var _jsx = require('@babel/runtime/helpers/jsx');
4
4
  require('core-js/modules/web.dom-collections.iterator.js');
5
5
  var React = require('react');
6
6
  var moment = require('moment');
7
- var DSInputMask = require('@elliemae/ds-basic/form/InputMask');
8
- var DSInputGroup = require('@elliemae/ds-basic/form/InputGroup');
7
+ var DSInputMask = require('@elliemae/ds-form');
9
8
  var dsClassnames = require('@elliemae/ds-classnames');
10
9
 
11
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -13,7 +12,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
13
12
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
14
13
  var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
15
14
  var DSInputMask__default = /*#__PURE__*/_interopDefaultLegacy(DSInputMask);
16
- var DSInputGroup__default = /*#__PURE__*/_interopDefaultLegacy(DSInputGroup);
17
15
 
18
16
  const blockname = 'date-range-picker';
19
17
  const Header = dsClassnames.aggregatedClasses('div')(blockname, 'header');
@@ -24,14 +22,15 @@ const formatDate = date => {
24
22
  }
25
23
  };
26
24
 
27
- const DatePickerRangeHeader = ({
28
- placeholderStart = 'Start Date',
29
- placeholderEnd = 'End Date',
30
- onStartInputChange = () => null,
31
- onEndInputChange = () => null,
32
- selectedStartDate,
33
- selectedEndDate
34
- }) => {
25
+ const DatePickerRangeHeader = _ref => {
26
+ let {
27
+ placeholderStart = 'Start Date',
28
+ placeholderEnd = 'End Date',
29
+ onStartInputChange = () => null,
30
+ onEndInputChange = () => null,
31
+ selectedStartDate,
32
+ selectedEndDate
33
+ } = _ref;
35
34
  const [startValue, setStartValue] = React.useState(selectedStartDate ? formatDate(selectedStartDate) : '');
36
35
  const [endValue, setEndValue] = React.useState(selectedEndDate ? formatDate(selectedEndDate) : '');
37
36
  React.useEffect(() => {
@@ -77,7 +76,7 @@ const DatePickerRangeHeader = ({
77
76
  }
78
77
  };
79
78
 
80
- return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputGroup__default["default"], {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputMask__default["default"], {
79
+ return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputMask.DSInputGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputMask__default["default"], {
81
80
  "aria-label": placeholderStart || 'Date Picker Input Mask',
82
81
  mask: DSInputMask.MASK_TYPES.DATE,
83
82
  onBlur: handleOnBlurStart,
package/cjs/components/DayPickerRangeController.js CHANGED
@@ -4,10 +4,15 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
4
  var _jsx = require('@babel/runtime/helpers/jsx');
5
5
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
6
6
  require('core-js/modules/web.dom-collections.iterator.js');
7
+ require('core-js/modules/esnext.async-iterator.filter.js');
8
+ require('core-js/modules/esnext.iterator.constructor.js');
9
+ require('core-js/modules/esnext.iterator.filter.js');
10
+ require('core-js/modules/esnext.async-iterator.for-each.js');
11
+ require('core-js/modules/esnext.iterator.for-each.js');
7
12
  var React = require('react');
8
13
  var reactDates = require('react-dates');
9
14
  var dsDatePicker = require('@elliemae/ds-date-picker');
10
- var ChevronLeft = require('@elliemae/ds-icons/ChevronLeft');
15
+ var dsIcons = require('@elliemae/ds-icons');
11
16
  var dsClassnames = require('@elliemae/ds-classnames');
12
17
  var jsxRuntime = require('react/jsx-runtime');
13
18
 
@@ -16,7 +21,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
16
21
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
17
22
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
18
23
  var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
19
- var ChevronLeft__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeft);
20
24
 
21
25
  const _excluded = ["endDate", "startDate", "displayFormatDay", "focusedInput", "enableOutsideDays", "onDatesChange", "onFocusChange", "onOutsideClick", "isDayBlocked", "isDayHighlighted", "isOutsideRange", "onNextMonthClick", "onPrevMonthClick"];
22
26
 
@@ -123,7 +127,7 @@ const DayPickerRangeController = _ref => {
123
127
  }),
124
128
  navPrev: /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerNavigation, {
125
129
  className: classNameElement('navigation-prev'),
126
- icon: ChevronLeft__default["default"]
130
+ icon: dsIcons.ChevronLeft
127
131
  }),
128
132
  onDatesChange: onDatesChange,
129
133
  onFocusChange: onFocusChange,
package/esm/DSDateRangePicker.js CHANGED
@@ -1,3 +1,8 @@
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
1
6
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
7
  import _jsx from '@babel/runtime/helpers/esm/jsx';
3
8
  import 'react';
@@ -15,47 +20,48 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
15
20
 
16
21
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
17
22
 
18
- const DSDateRangePicker = ({
19
- containerProps = {},
20
- className = '',
21
- disabled = false,
22
- required = false,
23
- startDateRequired = false,
24
- endDateRequired = false,
25
- id,
26
- hasError = false,
27
- validationMessage = '',
28
- readOnly = false,
29
- screenReaderInputMessage = 'Select date',
30
- initialVisibleMonth = moment(),
31
- firstDayOfWeek = 0,
32
- keepOpenOnDateSelect = true,
33
- reopenPickerOnClearDates = false,
34
- hideKeyboardShortcutsPanel = true,
35
- onPrevMonthClick = () => null,
36
- onNextMonthClick = () => null,
37
- onClose = () => null,
38
- onOutsideClick = () => null,
39
- transitionDuration = 0,
40
- verticalSpacing = 0,
41
- minimumNights = 0,
42
- isDayBlocked = () => false,
43
- isOutsideRange = () => false,
44
- isDayHighlighted = () => false,
45
- displayFormat = 'L',
46
- displayFormatDay = 'D',
47
- phrases = DateRangePickerPhrases,
48
- startDate,
49
- endDate,
50
- startDateId = 'startDateId',
51
- endDateId = 'endDateId',
52
- labelFrom = 'From',
53
- labelTo = 'To',
54
- enableOutsideDays = true,
55
- onChangeStartInput = () => null,
56
- onChangeEndInput = () => null,
57
- onDatesChange = () => null
58
- }) => {
23
+ const DSDateRangePicker = _ref => {
24
+ let {
25
+ containerProps = {},
26
+ className = '',
27
+ disabled = false,
28
+ required = false,
29
+ startDateRequired = false,
30
+ endDateRequired = false,
31
+ id,
32
+ hasError = false,
33
+ validationMessage = '',
34
+ readOnly = false,
35
+ screenReaderInputMessage = 'Select date',
36
+ initialVisibleMonth = moment(),
37
+ firstDayOfWeek = 0,
38
+ keepOpenOnDateSelect = true,
39
+ reopenPickerOnClearDates = false,
40
+ hideKeyboardShortcutsPanel = true,
41
+ onPrevMonthClick = () => null,
42
+ onNextMonthClick = () => null,
43
+ onClose = () => null,
44
+ onOutsideClick = () => null,
45
+ transitionDuration = 0,
46
+ verticalSpacing = 0,
47
+ minimumNights = 0,
48
+ isDayBlocked = () => false,
49
+ isOutsideRange = () => false,
50
+ isDayHighlighted = () => false,
51
+ displayFormat = 'L',
52
+ displayFormatDay = 'D',
53
+ phrases = DateRangePickerPhrases,
54
+ startDate,
55
+ endDate,
56
+ startDateId = 'startDateId',
57
+ endDateId = 'endDateId',
58
+ labelFrom = 'From',
59
+ labelTo = 'To',
60
+ enableOutsideDays = true,
61
+ onChangeStartInput = () => null,
62
+ onChangeEndInput = () => null,
63
+ onDatesChange = () => null
64
+ } = _ref;
59
65
  const {
60
66
  cssClassName,
61
67
  prefixBlockName
package/esm/components/DSDateRangePickerImpl.js CHANGED
@@ -1,11 +1,9 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
2
  import React from 'react';
4
3
  import moment from 'moment';
5
4
  import { convertPropToCssClassName } from '@elliemae/ds-classnames';
6
- import DSInputMask, { MASK_TYPES, MASK_PIPES } from '@elliemae/ds-basic/form/InputMask';
7
- import DSFormItemLayout from '@elliemae/ds-basic/form/FormItem';
8
- import DSPopper from '@elliemae/ds-basic/Popper';
5
+ import { DSFormItemLayout, DSInputMask, MASK_TYPES, MASK_PIPES } from '@elliemae/ds-form';
6
+ import DSPopper from '@elliemae/ds-popper';
9
7
  import { renderMonthElement, DatePickerPicker } from '@elliemae/ds-date-picker';
10
8
  import DayPickerRangeController from './DayPickerRangeController.js';
11
9
  import { isMaxDiffSafe } from '../isMaxDiffSafe.js';
@@ -20,10 +18,11 @@ class DSDateRangePickerImpl extends React.Component {
20
18
  constructor(props) {
21
19
  super(props);
22
20
 
23
- _defineProperty(this, "onDatesChange", ({
24
- startDate,
25
- endDate
26
- }) => {
21
+ this.onDatesChange = _ref => {
22
+ let {
23
+ startDate,
24
+ endDate
25
+ } = _ref;
27
26
  const {
28
27
  onDatesChange
29
28
  } = this.props;
@@ -42,23 +41,26 @@ class DSDateRangePickerImpl extends React.Component {
42
41
  primaryStartInput: false,
43
42
  primaryEndInput: false
44
43
  });
45
- });
44
+ };
46
45
 
47
- _defineProperty(this, "onFocusChange", () => {
48
- this.setState(({
49
- focusedInput
50
- }) => ({
51
- focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE
52
- }));
53
- });
46
+ this.onFocusChange = () => {
47
+ this.setState(_ref2 => {
48
+ let {
49
+ focusedInput
50
+ } = _ref2;
51
+ return {
52
+ focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE
53
+ };
54
+ });
55
+ };
54
56
 
55
- _defineProperty(this, "handleKeyDown", event => {
57
+ this.handleKeyDown = event => {
56
58
  if (event.key === 'Escape') this.setState({
57
59
  showPicker: false
58
60
  });
59
- });
61
+ };
60
62
 
61
- _defineProperty(this, "getSafeStartInputValue", () => {
63
+ this.getSafeStartInputValue = () => {
62
64
  const {
63
65
  startInput,
64
66
  primaryStartInput,
@@ -67,9 +69,9 @@ class DSDateRangePickerImpl extends React.Component {
67
69
  if (primaryStartInput && startInput) return startInput;
68
70
  if (!startDate) return '';
69
71
  return startDate.format('MMDDYYYY');
70
- });
72
+ };
71
73
 
72
- _defineProperty(this, "getSafeEndInputValue", () => {
74
+ this.getSafeEndInputValue = () => {
73
75
  const {
74
76
  endInput,
75
77
  primaryEndInput,
@@ -78,9 +80,9 @@ class DSDateRangePickerImpl extends React.Component {
78
80
  if (primaryEndInput && endInput) return endInput;
79
81
  if (!endDate) return '';
80
82
  return endDate.format('MMDDYYYY');
81
- });
83
+ };
82
84
 
83
- _defineProperty(this, "changeFocus", () => {
85
+ this.changeFocus = () => {
84
86
  const {
85
87
  disabled
86
88
  } = this.props;
@@ -90,9 +92,9 @@ class DSDateRangePickerImpl extends React.Component {
90
92
  focusedInput: 'startDate'
91
93
  }));
92
94
  }
93
- });
95
+ };
94
96
 
95
- _defineProperty(this, "handleChangeStart", e => {
97
+ this.handleChangeStart = e => {
96
98
  var _momentValue;
97
99
 
98
100
  const {
@@ -125,9 +127,9 @@ class DSDateRangePickerImpl extends React.Component {
125
127
  startDateError: invalidDate,
126
128
  endDateError: !isStartDateAcceptable || !prevState.endDateError ? prevState.endDateError : !isStartAcceptableWithSelectedEnd
127
129
  }));
128
- });
130
+ };
129
131
 
130
- _defineProperty(this, "handleChangeEnd", e => {
132
+ this.handleChangeEnd = e => {
131
133
  var _momentValue2;
132
134
 
133
135
  const {
@@ -164,12 +166,14 @@ class DSDateRangePickerImpl extends React.Component {
164
166
  startDateError: !isEndDateAcceptable || !prevState.startDateError ? prevState.startDateError : !isEndAcceptableWithSelectedStart,
165
167
  endDateError: invalidDate
166
168
  }));
167
- });
169
+ };
170
+
171
+ this.handleChangeDate = _ref3 => {
172
+ let {
173
+ startDate: _start,
174
+ endDate
175
+ } = _ref3;
168
176
 
169
- _defineProperty(this, "handleChangeDate", ({
170
- startDate: _start,
171
- endDate
172
- }) => {
173
177
  if (_start && endDate) {
174
178
  this.setState({
175
179
  startDate: moment(_start),
@@ -188,7 +192,7 @@ class DSDateRangePickerImpl extends React.Component {
188
192
  primaryEndInput: false
189
193
  });
190
194
  }
191
- });
195
+ };
192
196
 
193
197
  this.state = {
194
198
  startDate: props.startDate ? moment(props.startDate) : null,
package/esm/components/DatePickerLabel/DatePickerLabel.js CHANGED
@@ -1,11 +1,14 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import 'react';
3
3
 
4
- const Label = ({
5
- className = 'date-picker-label',
6
- label = ''
7
- }) => /*#__PURE__*/_jsx("div", {
8
- className: className
9
- }, void 0, /*#__PURE__*/_jsx("span", {}, void 0, label));
4
+ const Label = _ref => {
5
+ let {
6
+ className = 'date-picker-label',
7
+ label = ''
8
+ } = _ref;
9
+ return /*#__PURE__*/_jsx("div", {
10
+ className: className
11
+ }, void 0, /*#__PURE__*/_jsx("span", {}, void 0, label));
12
+ };
10
13
 
11
14
  export { Label as default };
package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js CHANGED
@@ -2,8 +2,7 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import 'core-js/modules/web.dom-collections.iterator.js';
3
3
  import { useState, useEffect } from 'react';
4
4
  import moment from 'moment';
5
- import DSInputMask, { MASK_TYPES, MASK_PIPES } from '@elliemae/ds-basic/form/InputMask';
6
- import DSInputGroup from '@elliemae/ds-basic/form/InputGroup';
5
+ import DSInputMask, { DSInputGroup, MASK_TYPES, MASK_PIPES } from '@elliemae/ds-form';
7
6
  import { aggregatedClasses } from '@elliemae/ds-classnames';
8
7
 
9
8
  const blockname = 'date-range-picker';
@@ -15,14 +14,15 @@ const formatDate = date => {
15
14
  }
16
15
  };
17
16
 
18
- const DatePickerRangeHeader = ({
19
- placeholderStart = 'Start Date',
20
- placeholderEnd = 'End Date',
21
- onStartInputChange = () => null,
22
- onEndInputChange = () => null,
23
- selectedStartDate,
24
- selectedEndDate
25
- }) => {
17
+ const DatePickerRangeHeader = _ref => {
18
+ let {
19
+ placeholderStart = 'Start Date',
20
+ placeholderEnd = 'End Date',
21
+ onStartInputChange = () => null,
22
+ onEndInputChange = () => null,
23
+ selectedStartDate,
24
+ selectedEndDate
25
+ } = _ref;
26
26
  const [startValue, setStartValue] = useState(selectedStartDate ? formatDate(selectedStartDate) : '');
27
27
  const [endValue, setEndValue] = useState(selectedEndDate ? formatDate(selectedEndDate) : '');
28
28
  useEffect(() => {
package/esm/components/DayPickerRangeController.js CHANGED
@@ -2,10 +2,15 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
2
  import _jsx from '@babel/runtime/helpers/esm/jsx';
3
3
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
4
  import 'core-js/modules/web.dom-collections.iterator.js';
5
+ import 'core-js/modules/esnext.async-iterator.filter.js';
6
+ import 'core-js/modules/esnext.iterator.constructor.js';
7
+ import 'core-js/modules/esnext.iterator.filter.js';
8
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
9
+ import 'core-js/modules/esnext.iterator.for-each.js';
5
10
  import { useRef, useEffect } from 'react';
6
11
  import { DayPickerRangeController as DayPickerRangeController$1 } from 'react-dates';
7
12
  import { DatePickerNavigation, DatePickerDay, renderMonthElement } from '@elliemae/ds-date-picker';
8
- import ChevronLeft from '@elliemae/ds-icons/ChevronLeft';
13
+ import { ChevronLeft } from '@elliemae/ds-icons';
9
14
  import { convertPropToCssClassName } from '@elliemae/ds-classnames';
10
15
  import { jsx } from 'react/jsx-runtime';
11
16
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-date-range-picker",
3
- "version": "2.0.0-next.8",
3
+ "version": "2.0.0-rc.11",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Date Range Picker",
6
6
  "module": "./esm/index.js",
@@ -56,13 +56,15 @@
56
56
  "build": "node ../../scripts/build/build.js"
57
57
  },
58
58
  "dependencies": {
59
- "@elliemae/ds-basic": "2.0.0-next.8",
60
- "@elliemae/ds-classnames": "2.0.0-next.8",
61
- "@elliemae/ds-date-picker": "2.0.0-next.8",
59
+ "@elliemae/ds-classnames": "2.0.0-rc.11",
60
+ "@elliemae/ds-date-picker": "2.0.0-rc.11",
61
+ "@elliemae/ds-form": "2.0.0-rc.11",
62
+ "@elliemae/ds-icons": "2.0.0-rc.11",
63
+ "@elliemae/ds-popper": "2.0.0-rc.11",
62
64
  "moment": "~2.29.1",
63
65
  "prop-types": "~15.7.2",
64
66
  "react-dates": "~21.8.0",
65
- "react-text-mask": "~5.4.3"
67
+ "react-desc": "~4.1.3"
66
68
  },
67
69
  "peerDependencies": {
68
70
  "lodash": "^4.17.21",
package/types/DSDateRangePicker.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  /// <reference types="react" />
2
3
  import moment from 'moment';
3
4
  import 'react-dates/initialize';
@@ -46,47 +47,237 @@ declare const DSDateRangePicker: {
46
47
  onDatesChange?: (() => null) | undefined;
47
48
  }): JSX.Element;
48
49
  propTypes: {
49
- containerProps: any;
50
- className: any;
51
- disabled: any;
52
- required: any;
53
- startDateRequired: any;
54
- endDateRequired: any;
55
- id: any;
56
- hasError: any;
57
- validationMessage: any;
50
+ containerProps: {
51
+ defaultValue<T = unknown>(arg: T): {
52
+ deprecated: import("react-desc").PropTypesDescValidator;
53
+ };
54
+ isRequired: import("react-desc").PropTypesDescValidator;
55
+ };
56
+ className: {
57
+ defaultValue<T = unknown>(arg: T): {
58
+ deprecated: import("react-desc").PropTypesDescValidator;
59
+ };
60
+ isRequired: import("react-desc").PropTypesDescValidator;
61
+ };
62
+ disabled: {
63
+ deprecated: import("react-desc").PropTypesDescValidator;
64
+ };
65
+ required: {
66
+ deprecated: import("react-desc").PropTypesDescValidator;
67
+ };
68
+ startDateRequired: {
69
+ deprecated: import("react-desc").PropTypesDescValidator;
70
+ };
71
+ endDateRequired: {
72
+ deprecated: import("react-desc").PropTypesDescValidator;
73
+ };
74
+ id: {
75
+ defaultValue<T = unknown>(arg: T): {
76
+ deprecated: import("react-desc").PropTypesDescValidator;
77
+ };
78
+ isRequired: import("react-desc").PropTypesDescValidator;
79
+ };
80
+ hasError: {
81
+ deprecated: import("react-desc").PropTypesDescValidator;
82
+ };
83
+ validationMessage: {
84
+ defaultValue<T = unknown>(arg: T): {
85
+ deprecated: import("react-desc").PropTypesDescValidator;
86
+ };
87
+ isRequired: import("react-desc").PropTypesDescValidator;
88
+ };
58
89
  readOnly: any;
59
- screenReaderInputMessage: any;
60
- initialVisibleMonth: any;
61
- firstDayOfWeek: any;
62
- keepOpenOnDateSelect: any;
63
- reopenPickerOnClearDates: any;
64
- hideKeyboardShortcutsPanel: any;
65
- onPrevMonthClick: any;
66
- onNextMonthClick: any;
67
- onClose: any;
68
- transitionDuration: any;
69
- verticalSpacing: any;
70
- isDayBlocked: any;
71
- isOutsideRange: any;
72
- isDayHighlighted: any;
90
+ screenReaderInputMessage: {
91
+ deprecated: import("react-desc").PropTypesDescValidator;
92
+ };
93
+ initialVisibleMonth: {
94
+ defaultValue<T = unknown>(arg: T): {
95
+ deprecated: import("react-desc").PropTypesDescValidator;
96
+ };
97
+ isRequired: import("react-desc").PropTypesDescValidator;
98
+ };
99
+ firstDayOfWeek: {
100
+ deprecated: import("react-desc").PropTypesDescValidator;
101
+ };
102
+ keepOpenOnDateSelect: {
103
+ deprecated: import("react-desc").PropTypesDescValidator;
104
+ };
105
+ reopenPickerOnClearDates: {
106
+ deprecated: import("react-desc").PropTypesDescValidator;
107
+ };
108
+ hideKeyboardShortcutsPanel: {
109
+ defaultValue<T = unknown>(arg: T): {
110
+ deprecated: import("react-desc").PropTypesDescValidator;
111
+ };
112
+ isRequired: import("react-desc").PropTypesDescValidator;
113
+ };
114
+ onPrevMonthClick: {
115
+ defaultValue<T = unknown>(arg: T): {
116
+ deprecated: import("react-desc").PropTypesDescValidator;
117
+ };
118
+ isRequired: import("react-desc").PropTypesDescValidator;
119
+ };
120
+ onNextMonthClick: {
121
+ defaultValue<T = unknown>(arg: T): {
122
+ deprecated: import("react-desc").PropTypesDescValidator;
123
+ };
124
+ isRequired: import("react-desc").PropTypesDescValidator;
125
+ };
126
+ onClose: {
127
+ defaultValue<T = unknown>(arg: T): {
128
+ deprecated: import("react-desc").PropTypesDescValidator;
129
+ };
130
+ isRequired: import("react-desc").PropTypesDescValidator;
131
+ };
132
+ transitionDuration: {
133
+ deprecated: import("react-desc").PropTypesDescValidator;
134
+ };
135
+ verticalSpacing: {
136
+ defaultValue<T = unknown>(arg: T): {
137
+ deprecated: import("react-desc").PropTypesDescValidator;
138
+ };
139
+ isRequired: import("react-desc").PropTypesDescValidator;
140
+ };
141
+ isDayBlocked: {
142
+ defaultValue<T = unknown>(arg: T): {
143
+ deprecated: import("react-desc").PropTypesDescValidator;
144
+ };
145
+ isRequired: import("react-desc").PropTypesDescValidator;
146
+ };
147
+ isOutsideRange: {
148
+ defaultValue<T = unknown>(arg: T): {
149
+ deprecated: import("react-desc").PropTypesDescValidator;
150
+ };
151
+ isRequired: import("react-desc").PropTypesDescValidator;
152
+ };
153
+ isDayHighlighted: {
154
+ defaultValue<T = unknown>(arg: T): {
155
+ deprecated: import("react-desc").PropTypesDescValidator;
156
+ };
157
+ isRequired: import("react-desc").PropTypesDescValidator;
158
+ };
73
159
  minimumNights: number;
74
- displayFormat: any;
75
- displayFormatDay: any;
76
- phrases: any;
160
+ displayFormat: {
161
+ deprecated: import("react-desc").PropTypesDescValidator;
162
+ };
163
+ displayFormatDay: {
164
+ deprecated: import("react-desc").PropTypesDescValidator;
165
+ };
166
+ phrases: {
167
+ defaultValue<T = unknown>(arg: T): {
168
+ deprecated: import("react-desc").PropTypesDescValidator;
169
+ };
170
+ isRequired: import("react-desc").PropTypesDescValidator;
171
+ };
172
+ startDate: {
173
+ defaultValue<T = unknown>(arg: T): {
174
+ deprecated: import("react-desc").PropTypesDescValidator;
175
+ };
176
+ isRequired: import("react-desc").PropTypesDescValidator;
177
+ };
178
+ endDate: {
179
+ defaultValue<T = unknown>(arg: T): {
180
+ deprecated: import("react-desc").PropTypesDescValidator;
181
+ };
182
+ isRequired: import("react-desc").PropTypesDescValidator;
183
+ };
184
+ startDateId: {
185
+ defaultValue<T = unknown>(arg: T): {
186
+ deprecated: import("react-desc").PropTypesDescValidator;
187
+ };
188
+ isRequired: import("react-desc").PropTypesDescValidator;
189
+ };
190
+ endDateId: {
191
+ defaultValue<T = unknown>(arg: T): {
192
+ deprecated: import("react-desc").PropTypesDescValidator;
193
+ };
194
+ isRequired: import("react-desc").PropTypesDescValidator;
195
+ };
196
+ labelFrom: {
197
+ defaultValue<T = unknown>(arg: T): {
198
+ deprecated: import("react-desc").PropTypesDescValidator;
199
+ };
200
+ isRequired: import("react-desc").PropTypesDescValidator;
201
+ };
202
+ labelTo: {
203
+ defaultValue<T = unknown>(arg: T): {
204
+ deprecated: import("react-desc").PropTypesDescValidator;
205
+ };
206
+ isRequired: import("react-desc").PropTypesDescValidator;
207
+ };
208
+ enableOutsideDays: {
209
+ deprecated: import("react-desc").PropTypesDescValidator;
210
+ };
211
+ onDatesChange: {
212
+ defaultValue<T = unknown>(arg: T): {
213
+ deprecated: import("react-desc").PropTypesDescValidator;
214
+ };
215
+ isRequired: import("react-desc").PropTypesDescValidator;
216
+ };
217
+ onChangeStartInput: {
218
+ defaultValue<T = unknown>(arg: T): {
219
+ deprecated: import("react-desc").PropTypesDescValidator;
220
+ };
221
+ isRequired: import("react-desc").PropTypesDescValidator;
222
+ };
223
+ onChangeEndInput: {
224
+ defaultValue<T = unknown>(arg: T): {
225
+ deprecated: import("react-desc").PropTypesDescValidator;
226
+ };
227
+ isRequired: import("react-desc").PropTypesDescValidator;
228
+ };
229
+ onOutsideClick: {
230
+ defaultValue<T = unknown>(arg: T): {
231
+ deprecated: import("react-desc").PropTypesDescValidator;
232
+ };
233
+ isRequired: import("react-desc").PropTypesDescValidator;
234
+ };
235
+ };
236
+ };
237
+ declare const DateRangePickerWithSchema: {
238
+ (props?: {
239
+ containerProps?: {} | undefined;
240
+ className?: string | undefined;
241
+ disabled?: boolean | undefined;
242
+ required?: boolean | undefined;
243
+ startDateRequired?: boolean | undefined;
244
+ endDateRequired?: boolean | undefined;
245
+ id: any;
246
+ hasError?: boolean | undefined;
247
+ validationMessage?: string | undefined;
248
+ readOnly?: boolean | undefined;
249
+ screenReaderInputMessage?: string | undefined;
250
+ initialVisibleMonth?: moment.Moment | undefined;
251
+ firstDayOfWeek?: number | undefined;
252
+ keepOpenOnDateSelect?: boolean | undefined;
253
+ reopenPickerOnClearDates?: boolean | undefined;
254
+ hideKeyboardShortcutsPanel?: boolean | undefined;
255
+ onPrevMonthClick?: (() => null) | undefined;
256
+ onNextMonthClick?: (() => null) | undefined;
257
+ onClose?: (() => null) | undefined;
258
+ onOutsideClick?: (() => null) | undefined;
259
+ transitionDuration?: number | undefined;
260
+ verticalSpacing?: number | undefined;
261
+ minimumNights?: number | undefined;
262
+ isDayBlocked?: (() => boolean) | undefined;
263
+ isOutsideRange?: (() => boolean) | undefined;
264
+ isDayHighlighted?: (() => boolean) | undefined;
265
+ displayFormat?: string | undefined;
266
+ displayFormatDay?: string | undefined;
267
+ phrases?: any;
77
268
  startDate: any;
78
269
  endDate: any;
79
- startDateId: any;
80
- endDateId: any;
81
- labelFrom: any;
82
- labelTo: any;
83
- enableOutsideDays: any;
84
- onDatesChange: any;
85
- onChangeStartInput: any;
86
- onChangeEndInput: any;
87
- onOutsideClick: any;
88
- };
270
+ startDateId?: string | undefined;
271
+ endDateId?: string | undefined;
272
+ labelFrom?: string | undefined;
273
+ labelTo?: string | undefined;
274
+ enableOutsideDays?: boolean | undefined;
275
+ onChangeStartInput?: (() => null) | undefined;
276
+ onChangeEndInput?: (() => null) | undefined;
277
+ onDatesChange?: (() => null) | undefined;
278
+ } | undefined): JSX.Element;
279
+ propTypes: unknown;
280
+ toTypescript: () => import("react-desc").TypescriptSchema;
89
281
  };
90
- declare const DateRangePickerWithSchema: any;
91
282
  export { DayPickerRangeController, START_DATE, END_DATE, DateRangePickerWithSchema, };
92
283
  export default DSDateRangePicker;