@elliemae/ds-date-picker 2.0.0-next.7 → 2.0.0-rc.10

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 (33) hide show
  1. package/cjs/DSDatePicker.js +50 -44
  2. package/cjs/components/DSDatePickerImpl.js +37 -37
  3. package/cjs/components/DatePickerController/DatePickerController.js +27 -25
  4. package/cjs/components/DatePickerDay/DatePickerDay.js +13 -10
  5. package/cjs/components/DatePickerDropdown.js +17 -11
  6. package/cjs/components/DatePickerHeader/DatePickerHeader.js +8 -10
  7. package/cjs/components/DatePickerNavigation/DatePickerNavigation.js +18 -15
  8. package/cjs/components/DatePickerPicker/DatePickerPicker.js +1 -1
  9. package/cjs/components/DatePickerRange/DatePickerRange.js +27 -19
  10. package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js +22 -21
  11. package/cjs/components/DatePickerRenderMonth/DatePickerRenderMonth.js +32 -32
  12. package/cjs/components/DatePickerSingleDate/DatePickerSingleDate.js +9 -8
  13. package/cjs/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js +22 -20
  14. package/cjs/defaultPhrases.js +42 -21
  15. package/esm/DSDatePicker.js +50 -44
  16. package/esm/components/DSDatePickerImpl.js +35 -33
  17. package/esm/components/DatePickerController/DatePickerController.js +25 -22
  18. package/esm/components/DatePickerDay/DatePickerDay.js +13 -10
  19. package/esm/components/DatePickerDropdown.js +17 -11
  20. package/esm/components/DatePickerHeader/DatePickerHeader.js +8 -8
  21. package/esm/components/DatePickerNavigation/DatePickerNavigation.js +18 -15
  22. package/esm/components/DatePickerPicker/DatePickerPicker.js +1 -1
  23. package/esm/components/DatePickerRange/DatePickerRange.js +25 -16
  24. package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js +22 -19
  25. package/esm/components/DatePickerRenderMonth/DatePickerRenderMonth.js +32 -30
  26. package/esm/components/DatePickerSingleDate/DatePickerSingleDate.js +7 -5
  27. package/esm/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js +19 -16
  28. package/esm/defaultPhrases.js +42 -21
  29. package/package.json +15 -5
  30. package/types/components/DatePickerDropdown.d.ts +1 -1
  31. package/types/components/DatePickerHeader/DatePickerHeader.d.ts +1 -1
  32. package/types/components/DatePickerPicker/DatePickerPicker.d.ts +2 -2
  33. package/types/components/DatePickerRange/DatePickerRange.d.ts +1 -1
@@ -1,36 +1,38 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import 'react';
3
- import ChevronDoubleLeft from '@elliemae/ds-icons/ChevronDoubleLeft';
4
- import ChevronDoubleRight from '@elliemae/ds-icons/ChevronDoubleRight';
5
- import { Grid } from '@elliemae/ds-basic/Grid';
3
+ import { ChevronDoubleLeft, ChevronDoubleRight } from '@elliemae/ds-icons';
4
+ import { Grid } from '@elliemae/ds-grid';
6
5
 
7
6
  var _ChevronDoubleLeft, _ChevronDoubleRight;
8
- const renderMonthElement = ({
9
- month,
10
- onYearSelect
11
- }) => /*#__PURE__*/_jsx(Grid, {
12
- height: "20px",
13
- cols: ['auto', 1, 'auto'],
14
- alignItems: "flex-end",
15
- mr: "10px"
16
- }, void 0, /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/_jsx("div", {
17
- role: "button",
18
- tabIndex: "0",
19
- "data-testid": "date-picker-prev-year-arrow",
20
- onClick: () => onYearSelect(month, month.year() - 1)
21
- }, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx(ChevronDoubleLeft, {
22
- width: 13.6,
23
- height: 13.6
24
- })))), /*#__PURE__*/_jsx(Grid, {
25
- "data-testid": "date-picker-header"
26
- }, void 0, /*#__PURE__*/_jsx("strong", {}, void 0, month.format('MMMM YYYY'))), /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/_jsx("div", {
27
- role: "button",
28
- tabIndex: "0",
29
- "data-testid": "date-picker-next-year-arrow",
30
- onClick: () => onYearSelect(month, month.year() + 1)
31
- }, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx(ChevronDoubleRight, {
32
- width: 13.6,
33
- height: 13.6
34
- })))));
7
+ const renderMonthElement = _ref => {
8
+ let {
9
+ month,
10
+ onYearSelect
11
+ } = _ref;
12
+ return /*#__PURE__*/_jsx(Grid, {
13
+ height: "20px",
14
+ cols: ['auto', 1, 'auto'],
15
+ alignItems: "flex-end",
16
+ mr: "10px"
17
+ }, void 0, /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/_jsx("div", {
18
+ role: "button",
19
+ tabIndex: "0",
20
+ "data-testid": "date-picker-prev-year-arrow",
21
+ onClick: () => onYearSelect(month, month.year() - 1)
22
+ }, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx(ChevronDoubleLeft, {
23
+ width: 13.6,
24
+ height: 13.6
25
+ })))), /*#__PURE__*/_jsx(Grid, {
26
+ "data-testid": "date-picker-header"
27
+ }, void 0, /*#__PURE__*/_jsx("strong", {}, void 0, month.format('MMMM YYYY'))), /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/_jsx("div", {
28
+ role: "button",
29
+ tabIndex: "0",
30
+ "data-testid": "date-picker-next-year-arrow",
31
+ onClick: () => onYearSelect(month, month.year() + 1)
32
+ }, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx(ChevronDoubleRight, {
33
+ width: 13.6,
34
+ height: 13.6
35
+ })))));
36
+ };
35
37
 
36
38
  export { renderMonthElement };
@@ -4,9 +4,11 @@ import 'core-js/modules/web.dom-collections.iterator.js';
4
4
  import { useState, useRef } from 'react';
5
5
  import { DayPickerSingleDateController } from 'react-dates';
6
6
  import moment from 'moment';
7
- import { DatePickerHeader, DatePickerNavigation, DatePickerDay } from '@elliemae/ds-date-picker';
8
- import ChevronLeft from '@elliemae/ds-icons/ChevronLeft';
9
7
  import { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
8
+ import { ChevronLeft } from '@elliemae/ds-icons';
9
+ import Day from '../DatePickerDay/DatePickerDay.js';
10
+ import Navigation from '../DatePickerNavigation/DatePickerNavigation.js';
11
+ import DatePickerHeader from '../DatePickerHeader/DatePickerHeader.js';
10
12
  import { jsx } from 'react/jsx-runtime';
11
13
 
12
14
  const _excluded = ["date", "displayFormatDay", "isDayHighlighted", "enableOutsideDays", "showHeader", "onChange"];
@@ -56,15 +58,15 @@ const DatePickerSingleDate = _ref => {
56
58
  hideKeyboardShortcutsPanel: true,
57
59
  isDayHighlighted: isDayHighlighted,
58
60
  keepOpenOnDateSelect: true,
59
- navNext: /*#__PURE__*/_jsx(DatePickerNavigation, {
61
+ navNext: /*#__PURE__*/_jsx(Navigation, {
60
62
  className: classNameElement('navigation-next')
61
63
  }),
62
- navPrev: /*#__PURE__*/_jsx(DatePickerNavigation, {
64
+ navPrev: /*#__PURE__*/_jsx(Navigation, {
63
65
  className: classNameElement('navigation-prev'),
64
66
  icon: ChevronLeft
65
67
  }),
66
68
  onDateChange: handleDateChange,
67
- renderDayContents: givenDate => /*#__PURE__*/_jsx(DatePickerDay, {
69
+ renderDayContents: givenDate => /*#__PURE__*/_jsx(Day, {
68
70
  className: classNameElement('day-contents'),
69
71
  date: givenDate.format(displayFormatDay)
70
72
  })
@@ -1,26 +1,29 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import 'react';
3
- import DSCheckbox from '@elliemae/ds-form/Checkbox';
4
- import { DatePickerHeader, DatePickerRangeHeader } from '@elliemae/ds-date-picker';
3
+ import { DSCheckbox } from '@elliemae/ds-form';
5
4
  import { aggregatedClasses } from '@elliemae/ds-classnames';
5
+ import DatePickerRangeHeader from '../DatePickerRangeHeader/DatePickerRangeHeader.js';
6
+ import DatePickerHeader from '../DatePickerHeader/DatePickerHeader.js';
6
7
 
7
8
  const blockname = 'date-switcher';
8
9
  const Header = aggregatedClasses('div')(blockname, 'header');
9
10
 
10
- const SingleRangeDateSwitcher = ({
11
- onStartInputChange,
12
- onEndInputChange,
13
- onSingleInputChange,
14
- onFocusChange,
15
- selectedStartDate,
16
- selectedEndDate,
17
- selectedSingleDate,
18
- isDateRange,
19
- setIsDateRange,
20
- handleDatesChange,
21
- updateKeyDate,
22
- focusedInput
23
- }) => {
11
+ const SingleRangeDateSwitcher = _ref => {
12
+ let {
13
+ onStartInputChange,
14
+ onEndInputChange,
15
+ onSingleInputChange,
16
+ onFocusChange,
17
+ selectedStartDate,
18
+ selectedEndDate,
19
+ selectedSingleDate,
20
+ isDateRange,
21
+ setIsDateRange,
22
+ handleDatesChange,
23
+ updateKeyDate,
24
+ focusedInput
25
+ } = _ref;
26
+
24
27
  const SingleDateInput = /*#__PURE__*/_jsx(DatePickerHeader, {
25
28
  onInputChange: onSingleInputChange,
26
29
  selectedDate: selectedSingleDate,
@@ -26,33 +26,54 @@ const returnFocusToInput = 'Return to the date input field.';
26
26
  const keyboardForwardNavigationInstructions = 'Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';
27
27
  const keyboardBackwardNavigationInstructions = 'Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';
28
28
 
29
- const chooseAvailableStartDate = ({
30
- date
31
- }) => "Choose ".concat(date, " as your check-in date. It\u2019s available.");
29
+ const chooseAvailableStartDate = _ref => {
30
+ let {
31
+ date
32
+ } = _ref;
33
+ return "Choose ".concat(date, " as your check-in date. It\u2019s available.");
34
+ };
32
35
 
33
- const chooseAvailableEndDate = ({
34
- date
35
- }) => "Choose ".concat(date, " as your check-out date. It\u2019s available.");
36
+ const chooseAvailableEndDate = _ref2 => {
37
+ let {
38
+ date
39
+ } = _ref2;
40
+ return "Choose ".concat(date, " as your check-out date. It\u2019s available.");
41
+ };
36
42
 
37
- const chooseAvailableDate = ({
38
- date
39
- }) => date;
43
+ const chooseAvailableDate = _ref3 => {
44
+ let {
45
+ date
46
+ } = _ref3;
47
+ return date;
48
+ };
40
49
 
41
- const dateIsUnavailable = ({
42
- date
43
- }) => "Not available. ".concat(date);
50
+ const dateIsUnavailable = _ref4 => {
51
+ let {
52
+ date
53
+ } = _ref4;
54
+ return "Not available. ".concat(date);
55
+ };
44
56
 
45
- const dateIsSelected = ({
46
- date
47
- }) => "Selected. ".concat(date);
57
+ const dateIsSelected = _ref5 => {
58
+ let {
59
+ date
60
+ } = _ref5;
61
+ return "Selected. ".concat(date);
62
+ };
48
63
 
49
- const dateIsSelectedAsStartDate = ({
50
- date
51
- }) => "Selected as start date. ".concat(date);
64
+ const dateIsSelectedAsStartDate = _ref6 => {
65
+ let {
66
+ date
67
+ } = _ref6;
68
+ return "Selected as start date. ".concat(date);
69
+ };
52
70
 
53
- const dateIsSelectedAsEndDate = ({
54
- date
55
- }) => "Selected as end date. ".concat(date);
71
+ const dateIsSelectedAsEndDate = _ref7 => {
72
+ let {
73
+ date
74
+ } = _ref7;
75
+ return "Selected as end date. ".concat(date);
76
+ };
56
77
 
57
78
  var defaultPhrases = {
58
79
  calendarLabel,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-date-picker",
3
- "version": "2.0.0-next.7",
3
+ "version": "2.0.0-rc.10",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Date Picker",
6
6
  "module": "./esm/index.js",
@@ -92,13 +92,23 @@
92
92
  "build": "node ../../scripts/build/build.js"
93
93
  },
94
94
  "dependencies": {
95
- "@elliemae/ds-basic": "2.0.0-next.7",
96
- "@elliemae/ds-classnames": "2.0.0-next.7",
97
- "@elliemae/ds-form": "2.0.0-next.7",
95
+ "@elliemae/ds-basic": "2.0.0-rc.10",
96
+ "@elliemae/ds-button": "2.0.0-rc.10",
97
+ "@elliemae/ds-classnames": "2.0.0-rc.10",
98
+ "@elliemae/ds-form": "2.0.0-rc.10",
99
+ "@elliemae/ds-grid": "2.0.0-rc.10",
100
+ "@elliemae/ds-icons": "2.0.0-rc.10",
101
+ "@elliemae/ds-popper": "2.0.0-rc.10",
102
+ "@elliemae/ds-shared": "2.0.0-rc.10",
103
+ "@elliemae/ds-system": "2.0.0-rc.10",
98
104
  "moment": "~2.29.1",
99
105
  "prop-types": "~15.7.2",
100
106
  "react-dates": "~21.8.0",
101
- "react-text-mask": "~5.4.3"
107
+ "react-desc": "~4.1.3"
108
+ },
109
+ "devDependencies": {
110
+ "@testing-library/jest-dom": "~5.15.0",
111
+ "@testing-library/react": "~12.1.2"
102
112
  },
103
113
  "peerDependencies": {
104
114
  "lodash": "^4.17.21",
@@ -29,7 +29,7 @@ declare namespace DatePickerDropdown {
29
29
  disabled: PropTypes.Requireable<boolean>;
30
30
  icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
31
31
  size: PropTypes.Requireable<unknown>;
32
- buttonActionType: PropTypes.Requireable<unknown>;
32
+ buttonActionType: PropTypes.Requireable<string>;
33
33
  onClick: PropTypes.Requireable<(...args: any[]) => any>;
34
34
  onFocus: PropTypes.Requireable<(...args: any[]) => any>;
35
35
  onBlur: PropTypes.Requireable<(...args: any[]) => any>;
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import PropTypes from 'prop-types';
3
3
  declare const DatePickerHeader: {
4
- ({ onInputChange, selectedDate, updateKeyDate, }: {
4
+ ({ onInputChange, selectedDate, updateKeyDate }: {
5
5
  onInputChange?: (() => null) | undefined;
6
6
  selectedDate: any;
7
7
  updateKeyDate: any;
@@ -22,7 +22,7 @@ export declare const Picker: {
22
22
  disabled: PropTypes.Requireable<boolean>;
23
23
  icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
24
24
  size: PropTypes.Requireable<unknown>;
25
- buttonActionType: PropTypes.Requireable<unknown>;
25
+ buttonActionType: PropTypes.Requireable<string>;
26
26
  onClick: PropTypes.Requireable<(...args: any[]) => any>;
27
27
  onFocus: PropTypes.Requireable<(...args: any[]) => any>;
28
28
  onBlur: PropTypes.Requireable<(...args: any[]) => any>;
@@ -38,7 +38,7 @@ export declare const PickerPropsTypes: {
38
38
  disabled: PropTypes.Requireable<boolean>;
39
39
  icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
40
40
  size: PropTypes.Requireable<unknown>;
41
- buttonActionType: PropTypes.Requireable<unknown>;
41
+ buttonActionType: PropTypes.Requireable<string>;
42
42
  onClick: PropTypes.Requireable<(...args: any[]) => any>;
43
43
  onFocus: PropTypes.Requireable<(...args: any[]) => any>;
44
44
  onBlur: PropTypes.Requireable<(...args: any[]) => any>;
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- declare const DatePickerRangeDate: ({ dateStart, dateEnd, displayFormatDay, showHeader, otherProps, }: {
2
+ declare const DatePickerRangeDate: ({ dateStart, dateEnd, displayFormatDay, showHeader, otherProps }: {
3
3
  dateStart: any;
4
4
  dateEnd: any;
5
5
  displayFormatDay?: string | undefined;