@elliemae/ds-date-picker 2.2.0-alpha.4 → 3.0.0-next.2

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 (76) hide show
  1. package/cjs/DSDatePicker.js +221 -219
  2. package/cjs/components/DSDatePickerImpl.js +208 -128
  3. package/cjs/components/DatePickerController/DatePickerController.js +242 -204
  4. package/cjs/components/DatePickerDay/DatePickerDay.js +23 -48
  5. package/cjs/components/DatePickerDropdown.js +54 -74
  6. package/cjs/components/DatePickerHeader/DatePickerHeader.js +44 -62
  7. package/cjs/components/DatePickerNavigation/DatePickerNavigation.js +31 -62
  8. package/cjs/components/DatePickerPicker/DatePickerPicker.js +71 -82
  9. package/cjs/components/DatePickerRange/DatePickerRange.js +93 -84
  10. package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js +97 -91
  11. package/cjs/components/DatePickerRenderMonth/DatePickerRenderMonth.js +45 -60
  12. package/cjs/components/DatePickerSingleDate/DatePickerSingleDate.js +77 -88
  13. package/cjs/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js +48 -69
  14. package/cjs/components/index.js +27 -53
  15. package/cjs/defaultPhrases.js +92 -77
  16. package/cjs/index.js +35 -38
  17. package/esm/DSDatePicker.js +169 -171
  18. package/esm/components/DSDatePickerImpl.js +189 -88
  19. package/esm/components/DatePickerController/DatePickerController.js +198 -141
  20. package/esm/components/DatePickerDay/DatePickerDay.js +17 -19
  21. package/esm/components/DatePickerDropdown.js +46 -45
  22. package/esm/components/DatePickerHeader/DatePickerHeader.js +35 -31
  23. package/esm/components/DatePickerNavigation/DatePickerNavigation.js +24 -36
  24. package/esm/components/DatePickerPicker/DatePickerPicker.js +48 -44
  25. package/esm/components/DatePickerRange/DatePickerRange.js +79 -49
  26. package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js +78 -50
  27. package/esm/components/DatePickerRenderMonth/DatePickerRenderMonth.js +37 -31
  28. package/esm/components/DatePickerSingleDate/DatePickerSingleDate.js +66 -56
  29. package/esm/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js +42 -40
  30. package/esm/components/index.js +10 -24
  31. package/esm/defaultPhrases.js +80 -48
  32. package/esm/index.js +13 -9
  33. package/package.json +10 -10
  34. package/types/components/DSDatePickerImpl.d.ts +1 -2
  35. package/types/components/DatePickerController/DatePickerController.d.ts +1 -1
  36. package/types/components/DatePickerDay/DatePickerDay.d.ts +0 -1
  37. package/types/components/DatePickerDropdown.d.ts +0 -1
  38. package/types/components/DatePickerHeader/DatePickerHeader.d.ts +0 -1
  39. package/types/components/DatePickerNavigation/DatePickerNavigation.d.ts +3 -4
  40. package/types/components/DatePickerPicker/DatePickerPicker.d.ts +1 -2
  41. package/types/components/DatePickerRange/DatePickerRange.d.ts +0 -1
  42. package/types/components/DatePickerRangeHeader/DatePickerRangeHeader.d.ts +0 -1
  43. package/types/components/DatePickerSingleDate/DatePickerSingleDate.d.ts +0 -1
  44. package/types/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.d.ts +0 -1
  45. package/cjs/DSDatePicker.js.map +0 -7
  46. package/cjs/components/DSDatePickerImpl.js.map +0 -7
  47. package/cjs/components/DatePickerController/DatePickerController.js.map +0 -7
  48. package/cjs/components/DatePickerDay/DatePickerDay.js.map +0 -7
  49. package/cjs/components/DatePickerDropdown.js.map +0 -7
  50. package/cjs/components/DatePickerHeader/DatePickerHeader.js.map +0 -7
  51. package/cjs/components/DatePickerNavigation/DatePickerNavigation.js.map +0 -7
  52. package/cjs/components/DatePickerPicker/DatePickerPicker.js.map +0 -7
  53. package/cjs/components/DatePickerRange/DatePickerRange.js.map +0 -7
  54. package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js.map +0 -7
  55. package/cjs/components/DatePickerRenderMonth/DatePickerRenderMonth.js.map +0 -7
  56. package/cjs/components/DatePickerSingleDate/DatePickerSingleDate.js.map +0 -7
  57. package/cjs/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js.map +0 -7
  58. package/cjs/components/index.js.map +0 -7
  59. package/cjs/defaultPhrases.js.map +0 -7
  60. package/cjs/index.js.map +0 -7
  61. package/esm/DSDatePicker.js.map +0 -7
  62. package/esm/components/DSDatePickerImpl.js.map +0 -7
  63. package/esm/components/DatePickerController/DatePickerController.js.map +0 -7
  64. package/esm/components/DatePickerDay/DatePickerDay.js.map +0 -7
  65. package/esm/components/DatePickerDropdown.js.map +0 -7
  66. package/esm/components/DatePickerHeader/DatePickerHeader.js.map +0 -7
  67. package/esm/components/DatePickerNavigation/DatePickerNavigation.js.map +0 -7
  68. package/esm/components/DatePickerPicker/DatePickerPicker.js.map +0 -7
  69. package/esm/components/DatePickerRange/DatePickerRange.js.map +0 -7
  70. package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js.map +0 -7
  71. package/esm/components/DatePickerRenderMonth/DatePickerRenderMonth.js.map +0 -7
  72. package/esm/components/DatePickerSingleDate/DatePickerSingleDate.js.map +0 -7
  73. package/esm/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js.map +0 -7
  74. package/esm/components/index.js.map +0 -7
  75. package/esm/defaultPhrases.js.map +0 -7
  76. package/esm/index.js.map +0 -7
@@ -1,45 +1,49 @@
1
- import * as React from "react";
2
- import React2, { useState, useEffect } from "react";
3
- import PropTypes from "prop-types";
4
- import moment from "moment";
5
- import { DSDateInputV2, DSInputGroup } from "@elliemae/ds-form";
6
- import { aggregatedClasses } from "@elliemae/ds-classnames";
7
- const DATE_FORMAT = "MMDDYYYY";
8
- const blockname = "date-picker-header";
9
- const Header = aggregatedClasses("div")(blockname);
10
- const isFn = (variable) => typeof variable === "function";
11
- const DatePickerHeader = ({ onInputChange = () => null, selectedDate, updateKeyDate }) => {
12
- const [value, setValue] = useState(isFn(selectedDate?.format) ? selectedDate.format(DATE_FORMAT) : "");
1
+ import _jsx from '@babel/runtime/helpers/esm/jsx';
2
+ import 'core-js/modules/web.dom-collections.iterator.js';
3
+ import { useState, useEffect } from 'react';
4
+ import moment from 'moment';
5
+ import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
6
+ import { aggregatedClasses } from '@elliemae/ds-classnames';
7
+
8
+ const DATE_FORMAT = 'MMDDYYYY';
9
+ const blockname = 'date-picker-header';
10
+ const Header = aggregatedClasses('div')(blockname);
11
+
12
+ const isFn = variable => typeof variable === 'function';
13
+
14
+ const DatePickerHeader = _ref => {
15
+ let {
16
+ onInputChange = () => null,
17
+ selectedDate,
18
+ updateKeyDate
19
+ } = _ref;
20
+ const [value, setValue] = useState(isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format) ? selectedDate.format(DATE_FORMAT) : '');
13
21
  useEffect(() => {
14
- if (isFn(selectedDate?.format)) {
15
- setValue(selectedDate?.format(DATE_FORMAT));
22
+ if (isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format)) {
23
+ setValue(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format(DATE_FORMAT));
16
24
  }
17
25
  }, [selectedDate]);
18
- const handleOnChange = (newDate) => {
26
+
27
+ const handleOnChange = newDate => {
19
28
  setValue(newDate);
20
29
  };
21
- const handleOnKeyDown = (e) => {
22
- if (e.key === "Enter" && value.length === DATE_FORMAT.length) {
30
+
31
+ const handleOnKeyDown = e => {
32
+ if (e.key === 'Enter' && value.length === DATE_FORMAT.length) {
23
33
  const momentValue = moment(value, DATE_FORMAT);
24
34
  onInputChange(momentValue);
25
35
  updateKeyDate(momentValue);
26
36
  }
27
37
  };
28
- return /* @__PURE__ */ React2.createElement(Header, null, /* @__PURE__ */ React2.createElement(DSInputGroup, null, /* @__PURE__ */ React2.createElement(DSDateInputV2, {
38
+
39
+ return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInputV2, {
29
40
  onChange: handleOnChange,
30
41
  onKeyDown: handleOnKeyDown,
31
- value,
32
- containerProps: { "data-testid": "start-date" }
42
+ value: value,
43
+ containerProps: {
44
+ 'data-testid': 'start-date'
45
+ }
33
46
  })));
34
47
  };
35
- DatePickerHeader.propTypes = {
36
- onInputChange: PropTypes.func,
37
- selectedDate: PropTypes.any,
38
- updateKeyDate: PropTypes.any
39
- };
40
- var DatePickerHeader_default = DatePickerHeader;
41
- export {
42
- DatePickerHeader,
43
- DatePickerHeader_default as default
44
- };
45
- //# sourceMappingURL=DatePickerHeader.js.map
48
+
49
+ export { DatePickerHeader as default };
@@ -1,37 +1,25 @@
1
- import * as React from "react";
2
- import React2 from "react";
3
- import PropTypes from "prop-types";
4
- import { ChevronRight } from "@elliemae/ds-icons";
5
- import { DSIconColors, DSIconSizes } from "@elliemae/ds-icon";
6
- import {
7
- iconSizes,
8
- iconColors
9
- } from "@elliemae/ds-shared/prop-types";
10
- const Navigation = ({
11
- className = "date-picker-navigation",
12
- icon: Icon = ChevronRight,
13
- color = DSIconColors.NEUTRAL,
14
- size = DSIconSizes.S,
15
- innerRef
16
- }) => /* @__PURE__ */ React2.createElement("div", {
17
- tabIndex: 0,
18
- "data-testid": "date-picker-nav"
19
- }, /* @__PURE__ */ React2.createElement(Icon, {
20
- className,
21
- color,
22
- innerRef,
23
- size
24
- }));
25
- Navigation.propTypes = {
26
- className: "date-picker-navigation",
27
- icon: PropTypes.element,
28
- color: PropTypes.oneOf(iconColors),
29
- size: PropTypes.oneOf(iconSizes),
30
- innerRef: PropTypes.any
1
+ import _jsx from '@babel/runtime/helpers/esm/jsx';
2
+ import 'react';
3
+ import ChevronRight from '@elliemae/ds-icons/ChevronRight';
4
+ import { DSIconColors, DSIconSizes } from '@elliemae/ds-basic/Icon';
5
+
6
+ const Navigation = _ref => {
7
+ let {
8
+ className = 'date-picker-navigation',
9
+ icon: Icon = ChevronRight,
10
+ color = DSIconColors.NEUTRAL,
11
+ size = DSIconSizes.S,
12
+ innerRef
13
+ } = _ref;
14
+ return /*#__PURE__*/_jsx("div", {
15
+ tabIndex: 0,
16
+ "data-testid": "date-picker-nav"
17
+ }, void 0, /*#__PURE__*/_jsx(Icon, {
18
+ className: className,
19
+ color: color,
20
+ innerRef: innerRef,
21
+ size: size
22
+ }));
31
23
  };
32
- var DatePickerNavigation_default = Navigation;
33
- export {
34
- Navigation as DatePickerNavigation,
35
- DatePickerNavigation_default as default
36
- };
37
- //# sourceMappingURL=DatePickerNavigation.js.map
24
+
25
+ export { Navigation as default };
@@ -1,39 +1,50 @@
1
- import * as React from "react";
2
- import React2 from "react";
3
- import PropTypes from "prop-types";
4
- import { DSIconColors, DSIconSizes } from "@elliemae/ds-icon";
5
- import { DatePicker } from "@elliemae/ds-icons";
6
- import { DSButton, buttonTypes } from "@elliemae/ds-button";
7
- import { iconSizes } from "@elliemae/ds-shared/prop-types";
8
- const Picker = ({
9
- className = "date-picker-icon",
10
- disabled = false,
11
- icon = /* @__PURE__ */ React2.createElement(DatePicker, null),
12
- size = DSIconSizes.M,
13
- buttonActionType = "secondary",
14
- onClick = () => null,
15
- onBlur = () => null,
16
- readOnly = false,
17
- tabIndex = 0,
18
- innerRef,
19
- ...rest
20
- }) => /* @__PURE__ */ React2.createElement(DSButton, {
21
- innerRef,
22
- "aria-label": rest["aria-label"] || "Date Picker Button",
23
- buttonType: buttonActionType,
24
- className,
25
- color: !disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL,
26
- disabled,
27
- icon,
28
- onBlur,
29
- onClick,
30
- readOnly,
31
- size,
32
- tabIndex,
33
- "data-testid": "btn-date-picker"
34
- });
1
+ import _jsx from '@babel/runtime/helpers/esm/jsx';
2
+ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
3
+ import 'react';
4
+ import PropTypes from 'prop-types';
5
+ import { DSIconSizes, DSIconColors } from '@elliemae/ds-basic/Icon';
6
+ import DatePicker from '@elliemae/ds-icons/DatePicker';
7
+ import DSButton, { buttonTypes } from '@elliemae/ds-button';
8
+ import { iconSizes } from '@elliemae/ds-shared/prop-types';
9
+
10
+ var _DatePicker;
11
+
12
+ const _excluded = ["className", "disabled", "icon", "size", "buttonActionType", "onClick", "onBlur", "readOnly", "tabIndex", "innerRef"];
13
+ const Picker = _ref => {
14
+ let {
15
+ className = 'date-picker-icon',
16
+ disabled = false,
17
+ icon = _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {})),
18
+ size = DSIconSizes.M,
19
+ buttonActionType = 'secondary',
20
+ onClick = () => null,
21
+ onBlur = () => null,
22
+ readOnly = false,
23
+ tabIndex = 0,
24
+ innerRef
25
+ } = _ref,
26
+ rest = _objectWithoutProperties(_ref, _excluded);
27
+
28
+ return /*#__PURE__*/_jsx(DSButton, {
29
+ innerRef: innerRef,
30
+ "aria-label": rest['aria-label'] || 'Date Picker Button',
31
+ buttonType: buttonActionType,
32
+ className: className,
33
+ color: !disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL,
34
+ disabled: disabled,
35
+ icon: icon,
36
+ onBlur: onBlur,
37
+ onClick: onClick,
38
+ readOnly: readOnly,
39
+ size: size,
40
+ tabIndex: tabIndex,
41
+ "data-testid": "btn-date-picker"
42
+ });
43
+ };
35
44
  const PickerPropsTypes = {
36
- innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
45
+ innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
46
+ current: PropTypes.any
47
+ })]),
37
48
  className: PropTypes.string,
38
49
  disabled: PropTypes.bool,
39
50
  icon: PropTypes.element,
@@ -45,12 +56,5 @@ const PickerPropsTypes = {
45
56
  readOnly: PropTypes.bool,
46
57
  tabIndex: PropTypes.number
47
58
  };
48
- Picker.propTypes = PickerPropsTypes;
49
- var DatePickerPicker_default = Picker;
50
- export {
51
- Picker as DatePickerPicker,
52
- Picker,
53
- PickerPropsTypes,
54
- DatePickerPicker_default as default
55
- };
56
- //# sourceMappingURL=DatePickerPicker.js.map
59
+
60
+ export { Picker, PickerPropsTypes, Picker as default };
@@ -1,81 +1,111 @@
1
- import * as React from "react";
2
- import React2, { useState, useRef } from "react";
3
- import { DayPickerRangeController } from "react-dates";
4
- import moment from "moment";
5
- import { aggregatedClasses, convertPropToCssClassName } from "@elliemae/ds-classnames";
6
- import { ChevronLeft } from "@elliemae/ds-icons";
7
- import { DatePickerDay } from "../DatePickerDay/DatePickerDay";
8
- import { DatePickerNavigation } from "../DatePickerNavigation/DatePickerNavigation";
9
- import { DatePickerRangeHeader } from "../DatePickerRangeHeader/DatePickerRangeHeader";
10
- const blockname = "date-range";
11
- const Wrapper = aggregatedClasses("div")(blockname, "wrapper");
12
- const { classNameElement, classNameBlock } = convertPropToCssClassName("datepicker");
13
- const START_DATE = "startDate";
14
- const END_DATE = "endDate";
15
- const DatePickerRangeDate = ({ dateStart, dateEnd, displayFormatDay = "D", showHeader = true, otherProps }) => {
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';
6
+ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
+ import _jsx from '@babel/runtime/helpers/esm/jsx';
8
+ import 'core-js/modules/web.dom-collections.iterator.js';
9
+ import { useState, useRef } from 'react';
10
+ import { DayPickerRangeController } from 'react-dates';
11
+ import moment from 'moment';
12
+ import { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
13
+ import { ChevronLeft } from '@elliemae/ds-icons';
14
+ import Day from '../DatePickerDay/DatePickerDay.js';
15
+ import Navigation from '../DatePickerNavigation/DatePickerNavigation.js';
16
+ import DatePickerRangeHeader from '../DatePickerRangeHeader/DatePickerRangeHeader.js';
17
+ import { jsx } from 'react/jsx-runtime';
18
+
19
+ 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; }
20
+
21
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
22
+ const blockname = 'date-range';
23
+ const Wrapper = aggregatedClasses('div')(blockname, 'wrapper');
24
+ const {
25
+ classNameElement,
26
+ classNameBlock
27
+ } = convertPropToCssClassName('datepicker');
28
+ const START_DATE = 'startDate';
29
+ const END_DATE = 'endDate';
30
+
31
+ const DatePickerRangeDate = _ref => {
32
+ let {
33
+ dateStart,
34
+ dateEnd,
35
+ displayFormatDay = 'D',
36
+ showHeader = true,
37
+ otherProps
38
+ } = _ref;
16
39
  const [selectedDateStart, setSelectedDateStart] = useState(dateStart);
17
40
  const [selectedDateEnd, setSelectedDateEnd] = useState(dateEnd);
18
41
  const [focusedInput, setFocusedInput] = useState(START_DATE);
19
42
  const datePickerRef = useRef();
43
+
20
44
  const handleFocusChange = () => {
21
45
  setFocusedInput(focusedInput === START_DATE ? END_DATE : START_DATE);
22
46
  };
23
- const handleDatesChange = ({ startDate, endDate }) => {
47
+
48
+ const handleDatesChange = _ref2 => {
49
+ let {
50
+ startDate,
51
+ endDate
52
+ } = _ref2;
24
53
  setSelectedDateStart(startDate);
25
54
  setSelectedDateEnd(endDate);
26
55
  };
27
- const handleStartInputChange = (newDate) => {
56
+
57
+ const handleStartInputChange = newDate => {
28
58
  setSelectedDateStart(newDate);
29
59
  };
30
- const handleEndInputChange = (newDate) => {
60
+
61
+ const handleEndInputChange = newDate => {
31
62
  setSelectedDateEnd(newDate);
32
63
  };
64
+
33
65
  const getSafeDateStartValue = () => {
34
66
  if (selectedDateStart) {
35
67
  return moment(selectedDateStart);
36
68
  }
37
69
  };
70
+
38
71
  const getSafeDateEndValue = () => {
39
72
  if (selectedDateEnd) {
40
73
  return moment(selectedDateEnd);
41
74
  }
42
75
  };
76
+
43
77
  const safeStartDate = getSafeDateStartValue();
44
78
  const safeEndDate = getSafeDateEndValue();
45
- return /* @__PURE__ */ React2.createElement(Wrapper, null, showHeader && /* @__PURE__ */ React2.createElement(DatePickerRangeHeader, {
79
+ return /*#__PURE__*/_jsx(Wrapper, {}, void 0, showHeader && /*#__PURE__*/_jsx(DatePickerRangeHeader, {
46
80
  onEndInputChange: handleEndInputChange,
47
81
  onStartInputChange: handleStartInputChange,
48
82
  selectedEndDate: safeEndDate,
49
83
  selectedStartDate: safeStartDate
50
- }), /* @__PURE__ */ React2.createElement("div", {
84
+ }), /*#__PURE__*/jsx("div", {
51
85
  ref: datePickerRef,
52
- className: classNameBlock("wrapper-day-picker-single-date-controller")
53
- }, /* @__PURE__ */ React2.createElement(DayPickerRangeController, {
54
- ...otherProps,
55
- enableOutsideDays: true,
56
- endDate: safeEndDate,
57
- focused: true,
58
- focusedInput,
59
- hideKeyboardShortcutsPanel: true,
60
- navNext: /* @__PURE__ */ React2.createElement(DatePickerNavigation, {
61
- className: classNameElement("navigation-next")
62
- }),
63
- navPrev: /* @__PURE__ */ React2.createElement(DatePickerNavigation, {
64
- className: classNameElement("navigation-prev"),
65
- icon: ChevronLeft
66
- }),
67
- onDatesChange: handleDatesChange,
68
- onFocusChange: handleFocusChange,
69
- renderDayContents: (date) => /* @__PURE__ */ React2.createElement(DatePickerDay, {
70
- className: classNameElement("day-contents"),
71
- date: date.format(displayFormatDay)
72
- }),
73
- startDate: safeStartDate
74
- })));
86
+ className: classNameBlock('wrapper-day-picker-single-date-controller'),
87
+ children: /*#__PURE__*/jsx(DayPickerRangeController, _objectSpread(_objectSpread({}, otherProps), {}, {
88
+ enableOutsideDays: true,
89
+ endDate: safeEndDate,
90
+ focused: true,
91
+ focusedInput: focusedInput,
92
+ hideKeyboardShortcutsPanel: true,
93
+ navNext: /*#__PURE__*/_jsx(Navigation, {
94
+ className: classNameElement('navigation-next')
95
+ }),
96
+ navPrev: /*#__PURE__*/_jsx(Navigation, {
97
+ className: classNameElement('navigation-prev'),
98
+ icon: ChevronLeft
99
+ }),
100
+ onDatesChange: handleDatesChange,
101
+ onFocusChange: handleFocusChange,
102
+ renderDayContents: date => /*#__PURE__*/_jsx(Day, {
103
+ className: classNameElement('day-contents'),
104
+ date: date.format(displayFormatDay)
105
+ }),
106
+ startDate: safeStartDate
107
+ }))
108
+ }));
75
109
  };
76
- var DatePickerRange_default = DatePickerRangeDate;
77
- export {
78
- DatePickerRangeDate,
79
- DatePickerRange_default as default
80
- };
81
- //# sourceMappingURL=DatePickerRange.js.map
110
+
111
+ export { DatePickerRangeDate as default };
@@ -1,22 +1,35 @@
1
- import * as React from "react";
2
- import React2, { useState, useEffect, useRef } from "react";
3
- import PropTypes from "prop-types";
4
- import moment from "moment";
5
- import { DSDateInputV2, DSInputGroup } from "@elliemae/ds-form";
6
- import { aggregatedClasses } from "@elliemae/ds-classnames";
7
- const blockname = "date-range-picker";
8
- const DATE_FORMAT = "MMDDYYYY";
1
+ import _jsx from '@babel/runtime/helpers/esm/jsx';
2
+ import 'core-js/modules/web.dom-collections.iterator.js';
3
+ import { useState, useRef, useEffect } from 'react';
4
+ import moment from 'moment';
5
+ import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
6
+ import { aggregatedClasses } from '@elliemae/ds-classnames';
7
+
8
+ const blockname = 'date-range-picker';
9
+ const DATE_FORMAT = 'MMDDYYYY'; // When year is greater than 999 it means the user finished writing
10
+ // the year for the range, because they must type 4 numbers for the year
11
+ // to be higher than 999
12
+
9
13
  const MAGIC_NUMBER = 999;
10
- const Header = aggregatedClasses("div")(blockname, "header", ({ invalidDate }) => ({ invalidDate }));
11
- const DatePickerRangeHeader = ({
12
- onStartInputChange = () => null,
13
- onEndInputChange = () => null,
14
- onFocusChange = () => null,
15
- selectedStartDate,
16
- selectedEndDate,
17
- handleDatesChange,
18
- autoJumpOnEdit = true
19
- }) => {
14
+ const Header = aggregatedClasses('div')(blockname, 'header', _ref => {
15
+ let {
16
+ invalidDate
17
+ } = _ref;
18
+ return {
19
+ invalidDate
20
+ };
21
+ });
22
+
23
+ const DatePickerRangeHeader = _ref2 => {
24
+ let {
25
+ onStartInputChange = () => null,
26
+ onEndInputChange = () => null,
27
+ onFocusChange = () => null,
28
+ selectedStartDate,
29
+ selectedEndDate,
30
+ handleDatesChange,
31
+ autoJumpOnEdit = true
32
+ } = _ref2;
20
33
  const [startValue, setStartValue] = useState(selectedStartDate);
21
34
  const [endValue, setEndValue] = useState(selectedEndDate);
22
35
  const startInputRef = useRef();
@@ -25,85 +38,100 @@ const DatePickerRangeHeader = ({
25
38
  if (selectedStartDate) {
26
39
  setStartValue(selectedStartDate.format(DATE_FORMAT));
27
40
  }
41
+
28
42
  if (selectedEndDate) {
29
43
  setEndValue(selectedEndDate.format(DATE_FORMAT));
30
44
  }
31
45
  }, [selectedStartDate, selectedEndDate]);
46
+
32
47
  const isValidRangeDate = (start, end) => {
33
48
  let isValidRange = false;
49
+
34
50
  if (start && end) {
35
51
  const momentStart = moment(start, DATE_FORMAT);
36
52
  const momentEnd = moment(end, DATE_FORMAT);
37
53
  isValidRange = momentStart.isBefore(momentEnd);
38
54
  }
55
+
39
56
  return isValidRange;
40
57
  };
41
- const handleOnFocus = (inputType) => onFocusChange(inputType);
42
- const handleOnChangeStart = (newStartValue) => {
58
+
59
+ const handleOnFocus = inputType => onFocusChange(inputType);
60
+
61
+ const handleOnChangeStart = newStartValue => {
62
+ var _endInputRef$current, _endInputRef$current$;
63
+
43
64
  const y = newStartValue.substring(4);
44
65
  const momentValue = moment(newStartValue, DATE_FORMAT);
66
+
45
67
  if (newStartValue && newStartValue.length === DATE_FORMAT.length) {
46
68
  onStartInputChange(momentValue);
47
69
  }
70
+
48
71
  setStartValue(newStartValue);
49
- if (autoJumpOnEdit && parseInt(y, 10) > MAGIC_NUMBER && endInputRef?.current?.firstChild?.focus) {
72
+
73
+ if (autoJumpOnEdit && parseInt(y, 10) > MAGIC_NUMBER && endInputRef !== null && endInputRef !== void 0 && (_endInputRef$current = endInputRef.current) !== null && _endInputRef$current !== void 0 && (_endInputRef$current$ = _endInputRef$current.firstChild) !== null && _endInputRef$current$ !== void 0 && _endInputRef$current$.focus) {
50
74
  endInputRef.current.firstChild.focus();
51
75
  }
52
76
  };
53
- const handleOnChangeEnd = (newEndValue) => {
77
+
78
+ const handleOnChangeEnd = newEndValue => {
54
79
  const momentValue = moment(newEndValue, DATE_FORMAT);
80
+
55
81
  if (isValidRangeDate(startValue, newEndValue) && newEndValue && newEndValue.length === DATE_FORMAT.length) {
56
82
  onEndInputChange(momentValue);
57
83
  }
84
+
58
85
  setEndValue(newEndValue);
59
86
  };
60
- const handleOnKeyDownStart = (e) => {
87
+
88
+ const handleOnKeyDownStart = e => {
61
89
  const isValid = isValidRangeDate(startValue, endValue);
62
90
  const momentStart = moment(startValue, DATE_FORMAT);
63
91
  const momentEnd = moment(endValue, DATE_FORMAT);
64
- if (e.key === "Enter" && startValue) {
92
+
93
+ if (e.key === 'Enter' && startValue) {
65
94
  onStartInputChange(momentStart);
66
- if (isValid)
67
- handleDatesChange({ startDate: momentStart, endDate: momentEnd });
95
+ if (isValid) handleDatesChange({
96
+ startDate: momentStart,
97
+ endDate: momentEnd
98
+ });
68
99
  }
69
100
  };
70
- const handleOnKeyDownEnd = (e) => {
101
+
102
+ const handleOnKeyDownEnd = e => {
71
103
  const isValid = isValidRangeDate(startValue, endValue);
72
104
  const momentStart = moment(startValue, DATE_FORMAT);
73
105
  const momentEnd = moment(endValue, DATE_FORMAT);
74
- if (e.key === "Enter" && isValid) {
75
- handleDatesChange({ startDate: momentStart, endDate: momentEnd });
106
+
107
+ if (e.key === 'Enter' && isValid) {
108
+ handleDatesChange({
109
+ startDate: momentStart,
110
+ endDate: momentEnd
111
+ });
76
112
  onEndInputChange(momentEnd);
77
113
  }
78
114
  };
79
- return /* @__PURE__ */ React2.createElement(Header, null, /* @__PURE__ */ React2.createElement(DSInputGroup, null, /* @__PURE__ */ React2.createElement(DSDateInputV2, {
80
- containerProps: { "data-testid": "start-date" },
115
+
116
+ return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInputV2, {
117
+ containerProps: {
118
+ 'data-testid': 'start-date'
119
+ },
81
120
  innerRef: startInputRef,
82
121
  onChange: handleOnChangeStart,
83
- onFocus: () => handleOnFocus("startDate"),
122
+ onFocus: () => handleOnFocus('startDate'),
84
123
  onKeyDown: handleOnKeyDownStart,
85
124
  value: startValue
86
- }), /* @__PURE__ */ React2.createElement(DSDateInputV2, {
87
- containerProps: { "data-testid": "end-date" },
125
+ }), /*#__PURE__*/_jsx(DSDateInputV2, {
126
+ containerProps: {
127
+ 'data-testid': 'end-date'
128
+ },
88
129
  innerRef: endInputRef,
89
130
  onChange: handleOnChangeEnd,
90
- onFocus: () => handleOnFocus("endDate"),
131
+ onFocus: () => handleOnFocus('endDate'),
91
132
  onKeyDown: handleOnKeyDownEnd,
92
133
  value: endValue
93
134
  })));
94
135
  };
95
- DatePickerRangeHeader.propTypes = {
96
- onStartInputChange: PropTypes.func,
97
- onEndInputChange: PropTypes.func,
98
- onFocusChange: PropTypes.func,
99
- selectedStartDate: PropTypes.any,
100
- selectedEndDate: PropTypes.any,
101
- handleDatesChange: PropTypes.func,
102
- autoJumpOnEdit: PropTypes.bool
103
- };
104
- var DatePickerRangeHeader_default = DatePickerRangeHeader;
105
- export {
106
- DatePickerRangeHeader,
107
- DatePickerRangeHeader_default as default
108
- };
109
- //# sourceMappingURL=DatePickerRangeHeader.js.map
136
+
137
+ export { DatePickerRangeHeader as default };