@elliemae/ds-date-time-picker 2.0.0-alpha.1 → 2.0.0-alpha.13

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 (10) hide show
  1. package/cjs/DSDateTimePicker.js +49 -43
  2. package/cjs/components/DateTimePickerImpl.js +70 -68
  3. package/cjs/index.js +1 -1
  4. package/cjs/utils.js +1 -1
  5. package/esm/DSDateTimePicker.js +45 -39
  6. package/esm/components/DateTimePickerImpl.js +54 -50
  7. package/package.json +16 -9
  8. package/types/DSDateTimePicker.d.ts +139 -11
  9. package/cjs/package.json +0 -7
  10. package/esm/package.json +0 -7
package/cjs/DSDateTimePicker.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');
@@ -21,52 +26,53 @@ var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
21
26
 
22
27
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
23
28
 
24
- 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; }
29
+ 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; }
25
30
  const {
26
31
  placeholder: placeholderDefault,
27
32
  className: classNameDefault,
28
33
  id: idDefault
29
34
  } = english;
30
35
 
31
- const DSDateTimePicker = ({
32
- containerProps = {},
33
- className = classNameDefault,
34
- id = idDefault,
35
- placeholder = placeholderDefault,
36
- date,
37
- clearable = false,
38
- onBlur = () => null,
39
- datePickerProps = {
40
- disabled: false,
41
- numberOfMonths: 1,
42
- readOnly: false,
43
- enableOutsideDays: false,
44
- transitionDuration: 0,
45
- firstDayOfWeek: 0,
46
- keepOpenOnDateSelect: true,
47
- hideKeyboardShortcutsPanel: true,
48
- onPrevMonthClick: () => null,
49
- onNextMonthClick: () => null,
50
- onClose: () => null,
51
- onchange: () => null,
52
- onDateChange: () => null,
53
- phrases: dsDatePicker.SingleDatePickerPhrases,
54
- displayFormatDay: 'D',
55
- isDayBlocked: () => false,
56
- isOutsideRange: () => false,
57
- isDayHighlighted: () => false,
58
- zIndex: 11
59
- },
60
- timePickerProps = {
61
- format: 'hh:mm A',
62
- onChange: () => null,
63
- disabledTimes: undefined,
64
- minutesInterval: 1
65
- },
66
- dateInputProps = {
67
- onDateInputDateChange: () => null
68
- }
69
- }) => {
36
+ const DSDateTimePicker = _ref => {
37
+ let {
38
+ containerProps = {},
39
+ className = classNameDefault,
40
+ id = idDefault,
41
+ placeholder = placeholderDefault,
42
+ date,
43
+ clearable = false,
44
+ onBlur = () => null,
45
+ datePickerProps = {
46
+ disabled: false,
47
+ numberOfMonths: 1,
48
+ readOnly: false,
49
+ enableOutsideDays: false,
50
+ transitionDuration: 0,
51
+ firstDayOfWeek: 0,
52
+ keepOpenOnDateSelect: true,
53
+ hideKeyboardShortcutsPanel: true,
54
+ onPrevMonthClick: () => null,
55
+ onNextMonthClick: () => null,
56
+ onClose: () => null,
57
+ onchange: () => null,
58
+ onDateChange: () => null,
59
+ phrases: dsDatePicker.SingleDatePickerPhrases,
60
+ displayFormatDay: 'D',
61
+ isDayBlocked: () => false,
62
+ isOutsideRange: () => false,
63
+ isDayHighlighted: () => false,
64
+ zIndex: 11
65
+ },
66
+ timePickerProps = {
67
+ format: 'hh:mm A',
68
+ onChange: () => null,
69
+ disabledTimes: undefined,
70
+ minutesInterval: 1
71
+ },
72
+ dateInputProps = {
73
+ onDateInputDateChange: () => null
74
+ }
75
+ } = _ref;
70
76
  const {
71
77
  cssClassName
72
78
  } = dsClassnames.convertPropToCssClassName('datetimepicker', className, {
@@ -75,7 +81,7 @@ const DSDateTimePicker = ({
75
81
  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
76
82
  className: cssClassName
77
83
  }, containerProps), {}, {
78
- children: /*#__PURE__*/_jsx__default['default'](DateTimePickerImpl, {
84
+ children: /*#__PURE__*/_jsx__default["default"](DateTimePickerImpl, {
79
85
  clearable: clearable,
80
86
  date: date,
81
87
  datePickerProps: datePickerProps,
@@ -100,7 +106,7 @@ const dateTimePickerProps = {
100
106
  /**
101
107
  * Initial date, by default current date
102
108
  */
103
- date: reactDesc.PropTypes.instanceOf(Date, moment__default['default']).description('Initial date, by default current date'),
109
+ date: reactDesc.PropTypes.instanceOf(Date, moment__default["default"]).description('Initial date, by default current date'),
104
110
 
105
111
  /**
106
112
  * Flag to trigger onDateChange on error
@@ -184,4 +190,4 @@ const DateTimePickerWithSchema = reactDesc.describe(DSDateTimePicker);
184
190
  DateTimePickerWithSchema.propTypes = dateTimePickerProps;
185
191
 
186
192
  exports.DateTimePickerWithSchema = DateTimePickerWithSchema;
187
- exports['default'] = DSDateTimePicker;
193
+ exports["default"] = DSDateTimePicker;
package/cjs/components/DateTimePickerImpl.js CHANGED
@@ -3,16 +3,19 @@
3
3
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
4
4
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
5
5
  var _jsx = require('@babel/runtime/helpers/jsx');
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');
6
12
  var react = require('react');
7
13
  var moment = require('moment');
8
14
  var dsClassnames = require('@elliemae/ds-classnames');
9
15
  var dsDatePicker = require('@elliemae/ds-date-picker');
10
- var DSInputGroup = require('@elliemae/ds-basic/form/InputGroup');
11
- var DSInput = require('@elliemae/ds-basic/form/Input');
12
- var DateInputV2 = require('@elliemae/ds-basic/form/DateInputV2');
13
- var TimeInput = require('@elliemae/ds-basic/form/TimeInput');
14
- var timeUtils = require('@elliemae/ds-utilities/timeUtils');
15
- var TimePicker$1 = require('@elliemae/ds-basic/TimePicker');
16
+ var dsForm = require('@elliemae/ds-form');
17
+ var dsUtilities = require('@elliemae/ds-utilities');
18
+ var dsTimePicker = require('@elliemae/ds-time-picker');
16
19
  var utils = require('../utils.js');
17
20
  var jsxRuntime = require('react/jsx-runtime');
18
21
 
@@ -22,75 +25,74 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_obje
22
25
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
23
26
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
24
27
  var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
25
- var DSInputGroup__default = /*#__PURE__*/_interopDefaultLegacy(DSInputGroup);
26
- var DSInput__default = /*#__PURE__*/_interopDefaultLegacy(DSInput);
27
28
 
28
29
  const _excluded = ["onChange"];
29
30
 
30
31
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
31
32
 
32
- 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; }
33
+ 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; }
33
34
  const blockName = 'date-time-picker';
34
35
  const DateTimePickerWrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper');
35
- const TimePicker = dsClassnames.aggregatedClasses(TimePicker$1.Menu)(blockName, 'time-picker');
36
+ const TimePicker = dsClassnames.aggregatedClasses(dsTimePicker.DSTimePickerMenu)(blockName, 'time-picker');
36
37
  const TimePickerWrapper = dsClassnames.aggregatedClasses('div')(blockName, 'time-picker-wrapper'); // const DateInput = aggregatedClasses(DateInputsV2Impl)(blockName, 'date-input');
37
38
 
38
39
  const formatDate = 'MMDDYYYY';
39
40
 
40
- const DSDateTimePickerImpl = ({
41
- onBlur = () => null,
42
- placeholder,
43
- date,
44
- clearable,
45
- datePickerProps: {
46
- disabled = false,
47
- numberOfMonths = 1,
48
- readOnly = false,
49
- enableOutsideDays = false,
50
- transitionDuration = 0,
51
- firstDayOfWeek = 0,
52
- keepOpenOnDateSelect = true,
53
- hideKeyboardShortcutsPanel = true,
54
- onPrevMonthClick = () => null,
55
- onNextMonthClick = () => null,
56
- onClose = () => null,
57
- onChange: onDatePickerChange = () => null,
58
- onDateChange = () => null,
59
- onError: onErrorDate = () => null,
60
- phrases = dsDatePicker.SingleDatePickerPhrases,
61
- displayFormatDay = 'D',
62
- isDayBlocked = () => false,
63
- isOutsideRange = () => false,
64
- isDayHighlighted = () => false,
65
- zIndex = 11
66
- },
67
- timePickerProps: {
68
- format = 'hh:mm A',
69
- onChange: onChangeTimePicker = () => null,
70
- disabledTimes = undefined,
71
- onError: onErrorTime = () => null,
72
- minutesInterval = 1
73
- },
74
- dateInputProps: {
75
- onDateInputDateChange = () => null
76
- }
77
- }) => {
41
+ const DSDateTimePickerImpl = _ref => {
42
+ let {
43
+ onBlur = () => null,
44
+ placeholder,
45
+ date,
46
+ clearable,
47
+ datePickerProps: {
48
+ disabled = false,
49
+ numberOfMonths = 1,
50
+ readOnly = false,
51
+ enableOutsideDays = false,
52
+ transitionDuration = 0,
53
+ firstDayOfWeek = 0,
54
+ keepOpenOnDateSelect = true,
55
+ hideKeyboardShortcutsPanel = true,
56
+ onPrevMonthClick = () => null,
57
+ onNextMonthClick = () => null,
58
+ onClose = () => null,
59
+ onChange: onDatePickerChange = () => null,
60
+ onDateChange = () => null,
61
+ onError: onErrorDate = () => null,
62
+ phrases = dsDatePicker.SingleDatePickerPhrases,
63
+ displayFormatDay = 'D',
64
+ isDayBlocked = () => false,
65
+ isOutsideRange = () => false,
66
+ isDayHighlighted = () => false,
67
+ zIndex = 11
68
+ },
69
+ timePickerProps: {
70
+ format = 'hh:mm A',
71
+ onChange: onChangeTimePicker = () => null,
72
+ disabledTimes = undefined,
73
+ onError: onErrorTime = () => null,
74
+ minutesInterval = 1
75
+ },
76
+ dateInputProps: {
77
+ onDateInputDateChange = () => null
78
+ }
79
+ } = _ref;
78
80
  const [selectedDate, setSelectedDate] = react.useState(undefined);
79
81
  const [incompleteInput, setIncompleteInput] = react.useState(undefined);
80
82
  const [isOpen, setIsOpen] = react.useState(false);
81
83
  const disabledTimeRange = disabledTimes && {
82
- from: TimePicker$1.convertTimeString(disabledTimes.from),
83
- to: TimePicker$1.convertTimeString(disabledTimes.to)
84
+ from: dsTimePicker.convertTimeString(disabledTimes.from),
85
+ to: dsTimePicker.convertTimeString(disabledTimes.to)
84
86
  };
85
87
  const dateTimePickerWrapperRef = react.useRef();
86
- const fullFormat = `${formatDate} ${format}`;
88
+ const fullFormat = "".concat(formatDate, " ").concat(format);
87
89
  react.useEffect(() => {
88
90
  if (date) {
89
- setSelectedDate(moment__default['default'](date));
91
+ setSelectedDate(moment__default["default"](date));
90
92
  } else if (date === null) setSelectedDate(undefined);
91
93
  }, [date]);
92
- const visiblePanels = react.useMemo(() => timeUtils.getVisibleTimeByFormat(format), []);
93
- const currentYear = moment__default['default']().year();
94
+ const visiblePanels = react.useMemo(() => dsUtilities.getVisibleTimeByFormat(format), []);
95
+ const currentYear = moment__default["default"]().year();
94
96
 
95
97
  const handleDatePickerChange = dateSelected => {
96
98
  const splittedDate = utils.updateDateAndTime(dateSelected, selectedDate);
@@ -110,7 +112,7 @@ const DSDateTimePickerImpl = ({
110
112
  const handleInputChange = (inputValue, type) => {
111
113
  onDatePickerChange(inputValue);
112
114
  let timeBlocked = false;
113
- const inputMoment = moment__default['default'](inputValue, fullFormat);
115
+ const inputMoment = moment__default["default"](inputValue, fullFormat);
114
116
  setIncompleteInput(inputValue);
115
117
 
116
118
  if (type === 'date') {
@@ -181,7 +183,7 @@ const DSDateTimePickerImpl = ({
181
183
  });
182
184
 
183
185
  if (clearable && !selectedDate && !!incompleteInput) {
184
- const inputMoment = moment__default['default'](incompleteInput, fullFormat);
186
+ const inputMoment = moment__default["default"](incompleteInput, fullFormat);
185
187
  const splittedDate = utils.updateDateAndTime(inputMoment, selectedDate);
186
188
  setSelectedDate(splittedDate);
187
189
  onDateChange(splittedDate);
@@ -197,21 +199,21 @@ const DSDateTimePickerImpl = ({
197
199
  });
198
200
  }, [isOpen]);
199
201
  const hasSelectedDate = !!selectedDate;
200
- return /*#__PURE__*/_jsx__default['default'](DSInputGroup__default['default'], {
202
+ return /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {
201
203
  containerProps: {
202
204
  onBlur: handleContainerBlur
203
205
  },
204
- rightAddon: /*#__PURE__*/_jsx__default['default'](dsDatePicker.DatePickerDropdown, {
206
+ rightAddon: /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerDropdown, {
205
207
  disabled: disabled,
206
208
  isOpen: isOpen,
207
209
  zIndex: zIndex,
208
210
  menu: /*#__PURE__*/jsxRuntime.jsxs(DateTimePickerWrapper, {
209
211
  ref: dateTimePickerWrapperRef,
210
212
  "data-testid": "date-time-picker",
211
- children: [/*#__PURE__*/_jsx__default['default']("div", {
213
+ children: [/*#__PURE__*/_jsx__default["default"]("div", {
212
214
  className: hasSelectedDate ? 'has-selected-date' : 'without-selected-date',
213
215
  "data-testid": "date-time-picker-portal-wrapper"
214
- }, void 0, /*#__PURE__*/_jsx__default['default'](dsDatePicker.DSDatePickerController, {
216
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsDatePicker.DSDatePickerController, {
215
217
  date: selectedDate,
216
218
  displayFormatDay: displayFormatDay,
217
219
  enableOutsideDays: enableOutsideDays,
@@ -230,7 +232,7 @@ const DSDateTimePickerImpl = ({
230
232
  onPrevMonthClick: onPrevMonthClick,
231
233
  phrases: phrases,
232
234
  transitionDuration: transitionDuration
233
- })), /*#__PURE__*/_jsx__default['default'](TimePickerWrapper, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(TimePicker, _objectSpread({
235
+ })), /*#__PURE__*/_jsx__default["default"](TimePickerWrapper, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(TimePicker, _objectSpread({
234
236
  disabled: disabled,
235
237
  disabledTimes: disabledTimeRange,
236
238
  format: format,
@@ -245,19 +247,19 @@ const DSDateTimePickerImpl = ({
245
247
  onClick: handleOpen,
246
248
  readOnly: readOnly
247
249
  })
248
- }, void 0, /*#__PURE__*/_jsx__default['default'](DSInput__default['default'], {
249
- customInputType: _ref => {
250
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInput, {
251
+ customInputType: _ref2 => {
250
252
  let {
251
253
  onChange: handleChange
252
- } = _ref,
253
- restInputProps = _objectWithoutProperties__default['default'](_ref, _excluded);
254
+ } = _ref2,
255
+ restInputProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
254
256
 
255
257
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
256
- children: [/*#__PURE__*/_jsx__default['default']("div", {
258
+ children: [/*#__PURE__*/_jsx__default["default"]("div", {
257
259
  style: {
258
260
  display: 'flex'
259
261
  }
260
- }, void 0, /*#__PURE__*/jsxRuntime.jsx(DateInputV2.DateInputsV2Impl, _objectSpread(_objectSpread({
262
+ }, void 0, /*#__PURE__*/jsxRuntime.jsx(dsForm.DateInputsV2Impl, _objectSpread(_objectSpread({
261
263
  disabled: disabled,
262
264
  onChange: input => handleChange(input, 'date')
263
265
  }, restInputProps), {}, {
@@ -265,7 +267,7 @@ const DSDateTimePickerImpl = ({
265
267
  yearMaxRange: currentYear + 100,
266
268
  yearMinRange: currentYear - 100,
267
269
  time: restInputProps.value && restInputProps.value.hour && restInputProps.value.isValid() ? restInputProps.value.format(formatDate) : restInputProps.value
268
- }))), /*#__PURE__*/jsxRuntime.jsx(TimeInput.TimeInputImpl, _objectSpread({
270
+ }))), /*#__PURE__*/jsxRuntime.jsx(dsForm.TimeInputImpl, _objectSpread({
269
271
  disabled: disabled,
270
272
  format: format,
271
273
  onChange: time => handleChange(time, 'time')
package/cjs/index.js CHANGED
@@ -7,4 +7,4 @@ var DSDateTimePicker = require('./DSDateTimePicker.js');
7
7
 
8
8
 
9
9
  exports.DateTimePickerWithSchema = DSDateTimePicker.DateTimePickerWithSchema;
10
- exports.default = DSDateTimePicker['default'];
10
+ exports["default"] = DSDateTimePicker["default"];
package/cjs/utils.js CHANGED
@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
  var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
10
10
 
11
11
  const updateDateAndTime = (date, time) => {
12
- const splittedDate = moment__default['default']();
12
+ const splittedDate = moment__default["default"]();
13
13
  splittedDate.month(date === null || date === void 0 ? void 0 : date.get('month'));
14
14
  splittedDate.year(date === null || date === void 0 ? void 0 : date.get('year'));
15
15
  splittedDate.date(date === null || date === void 0 ? void 0 : date.get('date'));
package/esm/DSDateTimePicker.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';
@@ -18,45 +23,46 @@ const {
18
23
  id: idDefault
19
24
  } = english;
20
25
 
21
- const DSDateTimePicker = ({
22
- containerProps = {},
23
- className = classNameDefault,
24
- id = idDefault,
25
- placeholder = placeholderDefault,
26
- date,
27
- clearable = false,
28
- onBlur = () => null,
29
- datePickerProps = {
30
- disabled: false,
31
- numberOfMonths: 1,
32
- readOnly: false,
33
- enableOutsideDays: false,
34
- transitionDuration: 0,
35
- firstDayOfWeek: 0,
36
- keepOpenOnDateSelect: true,
37
- hideKeyboardShortcutsPanel: true,
38
- onPrevMonthClick: () => null,
39
- onNextMonthClick: () => null,
40
- onClose: () => null,
41
- onchange: () => null,
42
- onDateChange: () => null,
43
- phrases: SingleDatePickerPhrases,
44
- displayFormatDay: 'D',
45
- isDayBlocked: () => false,
46
- isOutsideRange: () => false,
47
- isDayHighlighted: () => false,
48
- zIndex: 11
49
- },
50
- timePickerProps = {
51
- format: 'hh:mm A',
52
- onChange: () => null,
53
- disabledTimes: undefined,
54
- minutesInterval: 1
55
- },
56
- dateInputProps = {
57
- onDateInputDateChange: () => null
58
- }
59
- }) => {
26
+ const DSDateTimePicker = _ref => {
27
+ let {
28
+ containerProps = {},
29
+ className = classNameDefault,
30
+ id = idDefault,
31
+ placeholder = placeholderDefault,
32
+ date,
33
+ clearable = false,
34
+ onBlur = () => null,
35
+ datePickerProps = {
36
+ disabled: false,
37
+ numberOfMonths: 1,
38
+ readOnly: false,
39
+ enableOutsideDays: false,
40
+ transitionDuration: 0,
41
+ firstDayOfWeek: 0,
42
+ keepOpenOnDateSelect: true,
43
+ hideKeyboardShortcutsPanel: true,
44
+ onPrevMonthClick: () => null,
45
+ onNextMonthClick: () => null,
46
+ onClose: () => null,
47
+ onchange: () => null,
48
+ onDateChange: () => null,
49
+ phrases: SingleDatePickerPhrases,
50
+ displayFormatDay: 'D',
51
+ isDayBlocked: () => false,
52
+ isOutsideRange: () => false,
53
+ isDayHighlighted: () => false,
54
+ zIndex: 11
55
+ },
56
+ timePickerProps = {
57
+ format: 'hh:mm A',
58
+ onChange: () => null,
59
+ disabledTimes: undefined,
60
+ minutesInterval: 1
61
+ },
62
+ dateInputProps = {
63
+ onDateInputDateChange: () => null
64
+ }
65
+ } = _ref;
60
66
  const {
61
67
  cssClassName
62
68
  } = convertPropToCssClassName('datetimepicker', className, {
package/esm/components/DateTimePickerImpl.js CHANGED
@@ -1,16 +1,19 @@
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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
2
7
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
8
  import _jsx from '@babel/runtime/helpers/esm/jsx';
9
+ import 'core-js/modules/web.dom-collections.iterator.js';
4
10
  import { useState, useRef, useEffect, useMemo } from 'react';
5
11
  import moment from 'moment';
6
12
  import { aggregatedClasses } from '@elliemae/ds-classnames';
7
- import { SingleDatePickerPhrases, DatePickerDropdown, DSDatePickerController } from '@elliemae/ds-date-picker';
8
- import DSInputGroup from '@elliemae/ds-basic/form/InputGroup';
9
- import DSInput from '@elliemae/ds-basic/form/Input';
10
- import { DateInputsV2Impl } from '@elliemae/ds-basic/form/DateInputV2';
11
- import { TimeInputImpl } from '@elliemae/ds-basic/form/TimeInput';
12
- import { getVisibleTimeByFormat } from '@elliemae/ds-utilities/timeUtils';
13
- import { Menu, convertTimeString } from '@elliemae/ds-basic/TimePicker';
13
+ import { DatePickerDropdown, DSDatePickerController, SingleDatePickerPhrases } from '@elliemae/ds-date-picker';
14
+ import { DSInputGroup, DSInput, DateInputsV2Impl, TimeInputImpl } from '@elliemae/ds-form';
15
+ import { getVisibleTimeByFormat } from '@elliemae/ds-utilities';
16
+ import { DSTimePickerMenu, convertTimeString } from '@elliemae/ds-time-picker';
14
17
  import { updateDateAndTime } from '../utils.js';
15
18
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
16
19
 
@@ -21,49 +24,50 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
21
24
  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; }
22
25
  const blockName = 'date-time-picker';
23
26
  const DateTimePickerWrapper = aggregatedClasses('div')(blockName, 'wrapper');
24
- const TimePicker = aggregatedClasses(Menu)(blockName, 'time-picker');
27
+ const TimePicker = aggregatedClasses(DSTimePickerMenu)(blockName, 'time-picker');
25
28
  const TimePickerWrapper = aggregatedClasses('div')(blockName, 'time-picker-wrapper'); // const DateInput = aggregatedClasses(DateInputsV2Impl)(blockName, 'date-input');
26
29
 
27
30
  const formatDate = 'MMDDYYYY';
28
31
 
29
- const DSDateTimePickerImpl = ({
30
- onBlur = () => null,
31
- placeholder,
32
- date,
33
- clearable,
34
- datePickerProps: {
35
- disabled = false,
36
- numberOfMonths = 1,
37
- readOnly = false,
38
- enableOutsideDays = false,
39
- transitionDuration = 0,
40
- firstDayOfWeek = 0,
41
- keepOpenOnDateSelect = true,
42
- hideKeyboardShortcutsPanel = true,
43
- onPrevMonthClick = () => null,
44
- onNextMonthClick = () => null,
45
- onClose = () => null,
46
- onChange: onDatePickerChange = () => null,
47
- onDateChange = () => null,
48
- onError: onErrorDate = () => null,
49
- phrases = SingleDatePickerPhrases,
50
- displayFormatDay = 'D',
51
- isDayBlocked = () => false,
52
- isOutsideRange = () => false,
53
- isDayHighlighted = () => false,
54
- zIndex = 11
55
- },
56
- timePickerProps: {
57
- format = 'hh:mm A',
58
- onChange: onChangeTimePicker = () => null,
59
- disabledTimes = undefined,
60
- onError: onErrorTime = () => null,
61
- minutesInterval = 1
62
- },
63
- dateInputProps: {
64
- onDateInputDateChange = () => null
65
- }
66
- }) => {
32
+ const DSDateTimePickerImpl = _ref => {
33
+ let {
34
+ onBlur = () => null,
35
+ placeholder,
36
+ date,
37
+ clearable,
38
+ datePickerProps: {
39
+ disabled = false,
40
+ numberOfMonths = 1,
41
+ readOnly = false,
42
+ enableOutsideDays = false,
43
+ transitionDuration = 0,
44
+ firstDayOfWeek = 0,
45
+ keepOpenOnDateSelect = true,
46
+ hideKeyboardShortcutsPanel = true,
47
+ onPrevMonthClick = () => null,
48
+ onNextMonthClick = () => null,
49
+ onClose = () => null,
50
+ onChange: onDatePickerChange = () => null,
51
+ onDateChange = () => null,
52
+ onError: onErrorDate = () => null,
53
+ phrases = SingleDatePickerPhrases,
54
+ displayFormatDay = 'D',
55
+ isDayBlocked = () => false,
56
+ isOutsideRange = () => false,
57
+ isDayHighlighted = () => false,
58
+ zIndex = 11
59
+ },
60
+ timePickerProps: {
61
+ format = 'hh:mm A',
62
+ onChange: onChangeTimePicker = () => null,
63
+ disabledTimes = undefined,
64
+ onError: onErrorTime = () => null,
65
+ minutesInterval = 1
66
+ },
67
+ dateInputProps: {
68
+ onDateInputDateChange = () => null
69
+ }
70
+ } = _ref;
67
71
  const [selectedDate, setSelectedDate] = useState(undefined);
68
72
  const [incompleteInput, setIncompleteInput] = useState(undefined);
69
73
  const [isOpen, setIsOpen] = useState(false);
@@ -72,7 +76,7 @@ const DSDateTimePickerImpl = ({
72
76
  to: convertTimeString(disabledTimes.to)
73
77
  };
74
78
  const dateTimePickerWrapperRef = useRef();
75
- const fullFormat = `${formatDate} ${format}`;
79
+ const fullFormat = "".concat(formatDate, " ").concat(format);
76
80
  useEffect(() => {
77
81
  if (date) {
78
82
  setSelectedDate(moment(date));
@@ -235,11 +239,11 @@ const DSDateTimePickerImpl = ({
235
239
  readOnly: readOnly
236
240
  })
237
241
  }, void 0, /*#__PURE__*/_jsx(DSInput, {
238
- customInputType: _ref => {
242
+ customInputType: _ref2 => {
239
243
  let {
240
244
  onChange: handleChange
241
- } = _ref,
242
- restInputProps = _objectWithoutProperties(_ref, _excluded);
245
+ } = _ref2,
246
+ restInputProps = _objectWithoutProperties(_ref2, _excluded);
243
247
 
244
248
  return /*#__PURE__*/jsxs(Fragment, {
245
249
  children: [/*#__PURE__*/_jsx("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-date-time-picker",
3
- "version": "2.0.0-alpha.1",
3
+ "version": "2.0.0-alpha.13",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Date Time Picker",
6
6
  "module": "./esm/index.js",
@@ -52,21 +52,28 @@
52
52
  "build": "node ../../scripts/build/build.js"
53
53
  },
54
54
  "dependencies": {
55
- "@elliemae/ds-basic": "2.0.0-alpha.1",
56
- "@elliemae/ds-classnames": "2.0.0-alpha.1",
57
- "@elliemae/ds-date-picker": "2.0.0-alpha.1",
58
- "@elliemae/ds-form": "2.0.0-alpha.1",
59
- "@elliemae/ds-utilities": "2.0.0-alpha.1",
55
+ "@elliemae/ds-classnames": "2.0.0-alpha.13",
56
+ "@elliemae/ds-date-picker": "2.0.0-alpha.13",
57
+ "@elliemae/ds-form": "2.0.0-alpha.13",
58
+ "@elliemae/ds-system": "2.0.0-alpha.13",
59
+ "@elliemae/ds-time-picker": "2.0.0-alpha.13",
60
+ "@elliemae/ds-utilities": "2.0.0-alpha.13",
60
61
  "lodash": "~4.17.21",
61
62
  "moment": "~2.29.1",
62
63
  "prop-types": "~15.7.2",
63
- "react-dates": "~21.8.0",
64
- "react-text-mask": "~5.4.3"
64
+ "react-desc": "^4.1.3"
65
+ },
66
+ "devDependencies": {
67
+ "@testing-library/jest-dom": "~5.15.0",
68
+ "@testing-library/react": "~12.1.2",
69
+ "@testing-library/user-event": "~13.5.0",
70
+ "styled-components": "~5.3.3"
65
71
  },
66
72
  "peerDependencies": {
67
73
  "lodash": "^4.17.21",
68
74
  "react": "~17.0.2",
69
- "react-dom": "^17.0.2"
75
+ "react-dom": "^17.0.2",
76
+ "styled-components": "^5.3.3"
70
77
  },
71
78
  "publishConfig": {
72
79
  "access": "public",
package/types/DSDateTimePicker.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  /// <reference types="react" />
2
3
  declare const DSDateTimePicker: {
3
4
  ({ containerProps, className, id, placeholder, date, clearable, onBlur, datePickerProps, timePickerProps, dateInputProps, }: {
@@ -75,36 +76,163 @@ declare const DSDateTimePicker: {
75
76
  } | undefined;
76
77
  }): JSX.Element;
77
78
  propTypes: {
78
- containerProps: any;
79
- className: any;
80
- id: any;
79
+ containerProps: {
80
+ defaultValue<T = unknown>(arg: T): {
81
+ deprecated: import("react-desc").PropTypesDescValidator;
82
+ };
83
+ isRequired: import("react-desc").PropTypesDescValidator;
84
+ };
85
+ className: {
86
+ defaultValue<T = unknown>(arg: T): {
87
+ deprecated: import("react-desc").PropTypesDescValidator;
88
+ };
89
+ isRequired: import("react-desc").PropTypesDescValidator;
90
+ };
91
+ id: {
92
+ defaultValue<T = unknown>(arg: T): {
93
+ deprecated: import("react-desc").PropTypesDescValidator;
94
+ };
95
+ isRequired: import("react-desc").PropTypesDescValidator;
96
+ };
81
97
  /**
82
98
  * on blur callback
83
99
  */
84
- onBlur: any;
100
+ onBlur: {
101
+ defaultValue<T = unknown>(arg: T): {
102
+ deprecated: import("react-desc").PropTypesDescValidator;
103
+ };
104
+ isRequired: import("react-desc").PropTypesDescValidator;
105
+ };
85
106
  /**
86
107
  * Initial date, by default current date
87
108
  */
88
- date: any;
109
+ date: {
110
+ defaultValue<T = unknown>(arg: T): {
111
+ deprecated: import("react-desc").PropTypesDescValidator;
112
+ };
113
+ isRequired: import("react-desc").PropTypesDescValidator;
114
+ };
89
115
  /**
90
116
  * Flag to trigger onDateChange on error
91
117
  */
92
- clearable: any;
118
+ clearable: {
119
+ defaultValue<T = unknown>(arg: T): {
120
+ deprecated: import("react-desc").PropTypesDescValidator;
121
+ };
122
+ isRequired: import("react-desc").PropTypesDescValidator;
123
+ };
93
124
  /**
94
125
  * DatePicker properties
95
126
  */
96
- datePickerProps: any;
127
+ datePickerProps: {
128
+ defaultValue<T = unknown>(arg: T): {
129
+ deprecated: import("react-desc").PropTypesDescValidator;
130
+ };
131
+ isRequired: import("react-desc").PropTypesDescValidator;
132
+ };
97
133
  /**
98
134
  * Input placeholder
99
135
  */
100
- placeholder: any;
136
+ placeholder: {
137
+ defaultValue<T = unknown>(arg: T): {
138
+ deprecated: import("react-desc").PropTypesDescValidator;
139
+ };
140
+ isRequired: import("react-desc").PropTypesDescValidator;
141
+ };
101
142
  /**
102
143
  * TimePicker properties
103
144
  */
104
- timePickerProps: any;
105
- dateInputProps: any;
145
+ timePickerProps: {
146
+ defaultValue<T = unknown>(arg: T): {
147
+ deprecated: import("react-desc").PropTypesDescValidator;
148
+ };
149
+ isRequired: import("react-desc").PropTypesDescValidator;
150
+ };
151
+ dateInputProps: {
152
+ defaultValue<T = unknown>(arg: T): {
153
+ deprecated: import("react-desc").PropTypesDescValidator;
154
+ };
155
+ isRequired: import("react-desc").PropTypesDescValidator;
156
+ };
106
157
  };
107
158
  };
108
- declare const DateTimePickerWithSchema: any;
159
+ declare const DateTimePickerWithSchema: {
160
+ (props?: {
161
+ containerProps?: {} | undefined;
162
+ className?: string | undefined;
163
+ id?: string | undefined;
164
+ placeholder?: string | undefined;
165
+ date: any;
166
+ clearable?: boolean | undefined;
167
+ onBlur?: (() => null) | undefined;
168
+ datePickerProps?: {
169
+ disabled: boolean;
170
+ numberOfMonths: number;
171
+ readOnly: boolean;
172
+ enableOutsideDays: boolean;
173
+ transitionDuration: number;
174
+ firstDayOfWeek: number;
175
+ keepOpenOnDateSelect: boolean;
176
+ hideKeyboardShortcutsPanel: boolean;
177
+ onPrevMonthClick: () => null;
178
+ onNextMonthClick: () => null;
179
+ onClose: () => null;
180
+ onchange: () => null;
181
+ onDateChange: () => null;
182
+ phrases: {
183
+ calendarLabel: string;
184
+ roleDescription: string;
185
+ closeDatePicker: string;
186
+ clearDate: string;
187
+ jumpToPrevMonth: string;
188
+ jumpToNextMonth: string;
189
+ keyboardShortcuts: string;
190
+ showKeyboardShortcutsPanel: string;
191
+ hideKeyboardShortcutsPanel: string;
192
+ openThisPanel: string;
193
+ enterKey: string;
194
+ leftArrowRightArrow: string;
195
+ upArrowDownArrow: string;
196
+ pageUpPageDown: string;
197
+ homeEnd: string;
198
+ escape: string;
199
+ questionMark: string;
200
+ selectFocusedDate: string;
201
+ moveFocusByOneDay: string;
202
+ moveFocusByOneWeek: string;
203
+ moveFocusByOneMonth: string;
204
+ moveFocustoStartAndEndOfWeek: string;
205
+ returnFocusToInput: string;
206
+ keyboardForwardNavigationInstructions: string;
207
+ keyboardBackwardNavigationInstructions: string;
208
+ chooseAvailableDate: ({ date }: {
209
+ date: any;
210
+ }) => any;
211
+ dateIsUnavailable: ({ date }: {
212
+ date: any;
213
+ }) => string;
214
+ dateIsSelected: ({ date }: {
215
+ date: any;
216
+ }) => string;
217
+ };
218
+ displayFormatDay: string;
219
+ isDayBlocked: () => boolean;
220
+ isOutsideRange: () => boolean;
221
+ isDayHighlighted: () => boolean;
222
+ zIndex: number;
223
+ } | undefined;
224
+ timePickerProps?: {
225
+ format: string;
226
+ onChange: () => null;
227
+ disabledTimes: undefined;
228
+ minutesInterval: number;
229
+ } | undefined;
230
+ dateInputProps?: {
231
+ onDateInputDateChange: () => null;
232
+ } | undefined;
233
+ } | undefined): JSX.Element;
234
+ propTypes: unknown;
235
+ toTypescript: () => import("react-desc").TypescriptSchema;
236
+ };
109
237
  export { DateTimePickerWithSchema };
110
238
  export default DSDateTimePicker;
package/cjs/package.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "type": "commonjs",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }
package/esm/package.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "type": "module",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }