@commercetools-uikit/date-time-input 20.2.2 → 20.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/commercetools-uikit-date-time-input.cjs.dev.js +36 -22
  2. package/dist/commercetools-uikit-date-time-input.cjs.prod.js +36 -22
  3. package/dist/commercetools-uikit-date-time-input.esm.js +35 -22
  4. package/package.json +17 -17
package/dist/commercetools-uikit-date-time-input.cjs.dev.js CHANGED
@@ -17,6 +17,7 @@ var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
17
17
  var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
18
18
  var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
19
19
  var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
20
+ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
20
21
  var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
21
22
  var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
22
23
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
@@ -42,6 +43,7 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
42
43
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
43
44
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
44
45
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
46
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
45
47
  var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
46
48
  var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
47
49
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
@@ -64,7 +66,7 @@ DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
64
66
  var TimeInput = DateCalendarTimeInput;
65
67
 
66
68
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
67
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
69
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
68
70
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
69
71
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
70
72
  const activationTypes = [Downshift__default["default"].stateChangeTypes.keyDownEnter, Downshift__default["default"].stateChangeTypes.clickItem];
@@ -115,7 +117,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
115
117
  _this.setState(prevState => ({
116
118
  calendarDate: today,
117
119
  highlightedIndex: (prevState.suggestedItems || []).length + calendarTimeUtils.getDateInMonth(today, _this.props.timeZone) - 1
118
- }), () => _this.inputRef.current?.focus());
120
+ }), () => {
121
+ var _this$inputRef$curren;
122
+ return (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
123
+ });
119
124
  };
120
125
  _this.handleBlur = () => {
121
126
  if (_this.props.onBlur) _this.props.onBlur({
@@ -139,21 +144,25 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
139
144
  }
140
145
  _this.emit(date);
141
146
  };
142
- _this.emit = value => _this.props.onChange?.({
143
- target: {
144
- id: _this.props.id,
145
- name: _this.props.name,
146
- // when cleared the value is null, but we always want it to be an
147
- // empty string when there is no value.
148
- value: value || ''
149
- }
150
- });
147
+ _this.emit = value => {
148
+ var _this$props$onChange, _this$props;
149
+ return (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
150
+ target: {
151
+ id: _this.props.id,
152
+ name: _this.props.name,
153
+ // when cleared the value is null, but we always want it to be an
154
+ // empty string when there is no value.
155
+ value: value || ''
156
+ }
157
+ });
158
+ };
151
159
  return _this;
152
160
  }
153
161
  _inherits(DateTimeInput, _Component);
154
162
  return _createClass(DateTimeInput, [{
155
163
  key: "render",
156
164
  value: function render() {
165
+ var _context;
157
166
  if (!this.props.isReadOnly) {
158
167
  process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'DateTimeInput: `onChange` is required when input is not read only.') : void 0;
159
168
  }
@@ -216,13 +225,14 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
216
225
  return null;
217
226
  }, () => {
218
227
  if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
219
- this.timeInputRef.current?.focus();
220
- this.timeInputRef.current?.setSelectionRange(0, this.state.timeString.length);
228
+ var _this$timeInputRef$cu, _this$timeInputRef$cu2;
229
+ (_this$timeInputRef$cu = this.timeInputRef.current) === null || _this$timeInputRef$cu === void 0 || _this$timeInputRef$cu.focus();
230
+ (_this$timeInputRef$cu2 = this.timeInputRef.current) === null || _this$timeInputRef$cu2 === void 0 || _this$timeInputRef$cu2.setSelectionRange(0, this.state.timeString.length);
221
231
  }
222
232
  });
223
233
  },
224
234
  children: _ref => {
225
- var _context;
235
+ var _context2;
226
236
  let getInputProps = _ref.getInputProps,
227
237
  getMenuProps = _ref.getMenuProps,
228
238
  getItemProps = _ref.getItemProps,
@@ -238,7 +248,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
238
248
  const suggestedItems = this.state.suggestedItems;
239
249
  const calendarItems = calendarTimeUtils.createCalendarItems(this.state.calendarDate, this.state.timeString, this.props.timeZone);
240
250
  const paddingDayCount = calendarTimeUtils.getPaddingDayCount(this.state.calendarDate, this.props.intl.locale, this.props.timeZone);
241
- const paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context, undefined);
251
+ const paddingDays = _fillInstanceProperty__default["default"](_context2 = Array(paddingDayCount)).call(_context2, undefined);
242
252
  const weekdays = calendarTimeUtils.getWeekdayNames(this.props.intl.locale);
243
253
  const today = calendarTimeUtils.getToday(this.props.timeZone);
244
254
  const isTimeInputVisible = Boolean(this.props.value) && this.props.value !== '';
@@ -306,17 +316,19 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
306
316
  // validate the input on blur, and emit the value if it's valid
307
317
  onBlur: event => {
308
318
  createBlurHandler(this.timeInputRef, () => {
309
- const inputValue = this.inputRef.current?.value || '';
319
+ var _this$inputRef$curren2;
320
+ const inputValue = ((_this$inputRef$curren2 = this.inputRef.current) === null || _this$inputRef$curren2 === void 0 ? void 0 : _this$inputRef$curren2.value) || '';
310
321
  const parsedDate = calendarTimeUtils.parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
311
322
  if (inputValue.length > 0 && !parsedDate) return;
312
323
  this.emit(parsedDate);
313
324
  })(event);
314
325
  },
315
326
  onChange: event => {
327
+ var _event$target$value;
316
328
  // keep timeInput and regular input in sync when user
317
329
  // types into regular input
318
330
  if (!isOpen) return;
319
- const time = event.target.value?.split(' ')[1];
331
+ const time = (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.split(' ')[1];
320
332
  if (!time) return;
321
333
  const parsedTime = utils.parseTime(time);
322
334
  this.setState(() => {
@@ -384,14 +396,16 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
384
396
  onChange: this.handleTimeChange,
385
397
  onKeyDown: event => {
386
398
  if (event.key === 'ArrowUp') {
399
+ var _this$inputRef$curren3;
387
400
  setHighlightedIndex(-1);
388
- this.inputRef.current?.focus();
401
+ (_this$inputRef$curren3 = this.inputRef.current) === null || _this$inputRef$curren3 === void 0 || _this$inputRef$curren3.focus();
389
402
  return;
390
403
  }
391
404
  if (event.key === 'Enter') {
405
+ var _this$inputRef$curren4, _this$inputRef$curren5;
392
406
  setHighlightedIndex(-1);
393
- this.inputRef.current?.focus();
394
- this.inputRef.current?.setSelectionRange(0, 100);
407
+ (_this$inputRef$curren4 = this.inputRef.current) === null || _this$inputRef$curren4 === void 0 || _this$inputRef$curren4.focus();
408
+ (_this$inputRef$curren5 = this.inputRef.current) === null || _this$inputRef$curren5 === void 0 || _this$inputRef$curren5.setSelectionRange(0, 100);
395
409
  closeMenu();
396
410
  }
397
411
  }
@@ -399,7 +413,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
399
413
  }))]
400
414
  });
401
415
  }
402
- }, `${this.props.timeZone}:${this.props.intl.locale}`)
416
+ }, _concatInstanceProperty__default["default"](_context = "".concat(this.props.timeZone, ":")).call(_context, this.props.intl.locale))
403
417
  });
404
418
  }
405
419
  }]);
@@ -408,7 +422,7 @@ DateTimeInput.displayName = 'DateTimeInput';
408
422
  var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
409
423
 
410
424
  // NOTE: This string will be replaced on build time with the package version.
411
- var version = "20.2.2";
425
+ var version = "20.3.0";
412
426
 
413
427
  exports["default"] = dateTimeInput;
414
428
  exports.version = version;
package/dist/commercetools-uikit-date-time-input.cjs.prod.js CHANGED
@@ -17,6 +17,7 @@ var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
17
17
  var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
18
18
  var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
19
19
  var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
20
+ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
20
21
  var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
21
22
  var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
22
23
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
@@ -42,6 +43,7 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
42
43
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
43
44
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
44
45
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
46
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
45
47
  var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
46
48
  var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
47
49
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
@@ -64,7 +66,7 @@ DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
64
66
  var TimeInput = DateCalendarTimeInput;
65
67
 
66
68
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
67
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
69
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
68
70
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
69
71
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
70
72
  const activationTypes = [Downshift__default["default"].stateChangeTypes.keyDownEnter, Downshift__default["default"].stateChangeTypes.clickItem];
@@ -115,7 +117,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
115
117
  _this.setState(prevState => ({
116
118
  calendarDate: today,
117
119
  highlightedIndex: (prevState.suggestedItems || []).length + calendarTimeUtils.getDateInMonth(today, _this.props.timeZone) - 1
118
- }), () => _this.inputRef.current?.focus());
120
+ }), () => {
121
+ var _this$inputRef$curren;
122
+ return (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
123
+ });
119
124
  };
120
125
  _this.handleBlur = () => {
121
126
  if (_this.props.onBlur) _this.props.onBlur({
@@ -139,21 +144,25 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
139
144
  }
140
145
  _this.emit(date);
141
146
  };
142
- _this.emit = value => _this.props.onChange?.({
143
- target: {
144
- id: _this.props.id,
145
- name: _this.props.name,
146
- // when cleared the value is null, but we always want it to be an
147
- // empty string when there is no value.
148
- value: value || ''
149
- }
150
- });
147
+ _this.emit = value => {
148
+ var _this$props$onChange, _this$props;
149
+ return (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
150
+ target: {
151
+ id: _this.props.id,
152
+ name: _this.props.name,
153
+ // when cleared the value is null, but we always want it to be an
154
+ // empty string when there is no value.
155
+ value: value || ''
156
+ }
157
+ });
158
+ };
151
159
  return _this;
152
160
  }
153
161
  _inherits(DateTimeInput, _Component);
154
162
  return _createClass(DateTimeInput, [{
155
163
  key: "render",
156
164
  value: function render() {
165
+ var _context;
157
166
  if (!this.props.isReadOnly) ;
158
167
  const appearance = this.props.appearance || 'default';
159
168
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
@@ -214,13 +223,14 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
214
223
  return null;
215
224
  }, () => {
216
225
  if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
217
- this.timeInputRef.current?.focus();
218
- this.timeInputRef.current?.setSelectionRange(0, this.state.timeString.length);
226
+ var _this$timeInputRef$cu, _this$timeInputRef$cu2;
227
+ (_this$timeInputRef$cu = this.timeInputRef.current) === null || _this$timeInputRef$cu === void 0 || _this$timeInputRef$cu.focus();
228
+ (_this$timeInputRef$cu2 = this.timeInputRef.current) === null || _this$timeInputRef$cu2 === void 0 || _this$timeInputRef$cu2.setSelectionRange(0, this.state.timeString.length);
219
229
  }
220
230
  });
221
231
  },
222
232
  children: _ref => {
223
- var _context;
233
+ var _context2;
224
234
  let getInputProps = _ref.getInputProps,
225
235
  getMenuProps = _ref.getMenuProps,
226
236
  getItemProps = _ref.getItemProps,
@@ -236,7 +246,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
236
246
  const suggestedItems = this.state.suggestedItems;
237
247
  const calendarItems = calendarTimeUtils.createCalendarItems(this.state.calendarDate, this.state.timeString, this.props.timeZone);
238
248
  const paddingDayCount = calendarTimeUtils.getPaddingDayCount(this.state.calendarDate, this.props.intl.locale, this.props.timeZone);
239
- const paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context, undefined);
249
+ const paddingDays = _fillInstanceProperty__default["default"](_context2 = Array(paddingDayCount)).call(_context2, undefined);
240
250
  const weekdays = calendarTimeUtils.getWeekdayNames(this.props.intl.locale);
241
251
  const today = calendarTimeUtils.getToday(this.props.timeZone);
242
252
  const isTimeInputVisible = Boolean(this.props.value) && this.props.value !== '';
@@ -304,17 +314,19 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
304
314
  // validate the input on blur, and emit the value if it's valid
305
315
  onBlur: event => {
306
316
  createBlurHandler(this.timeInputRef, () => {
307
- const inputValue = this.inputRef.current?.value || '';
317
+ var _this$inputRef$curren2;
318
+ const inputValue = ((_this$inputRef$curren2 = this.inputRef.current) === null || _this$inputRef$curren2 === void 0 ? void 0 : _this$inputRef$curren2.value) || '';
308
319
  const parsedDate = calendarTimeUtils.parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
309
320
  if (inputValue.length > 0 && !parsedDate) return;
310
321
  this.emit(parsedDate);
311
322
  })(event);
312
323
  },
313
324
  onChange: event => {
325
+ var _event$target$value;
314
326
  // keep timeInput and regular input in sync when user
315
327
  // types into regular input
316
328
  if (!isOpen) return;
317
- const time = event.target.value?.split(' ')[1];
329
+ const time = (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.split(' ')[1];
318
330
  if (!time) return;
319
331
  const parsedTime = utils.parseTime(time);
320
332
  this.setState(() => {
@@ -382,14 +394,16 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
382
394
  onChange: this.handleTimeChange,
383
395
  onKeyDown: event => {
384
396
  if (event.key === 'ArrowUp') {
397
+ var _this$inputRef$curren3;
385
398
  setHighlightedIndex(-1);
386
- this.inputRef.current?.focus();
399
+ (_this$inputRef$curren3 = this.inputRef.current) === null || _this$inputRef$curren3 === void 0 || _this$inputRef$curren3.focus();
387
400
  return;
388
401
  }
389
402
  if (event.key === 'Enter') {
403
+ var _this$inputRef$curren4, _this$inputRef$curren5;
390
404
  setHighlightedIndex(-1);
391
- this.inputRef.current?.focus();
392
- this.inputRef.current?.setSelectionRange(0, 100);
405
+ (_this$inputRef$curren4 = this.inputRef.current) === null || _this$inputRef$curren4 === void 0 || _this$inputRef$curren4.focus();
406
+ (_this$inputRef$curren5 = this.inputRef.current) === null || _this$inputRef$curren5 === void 0 || _this$inputRef$curren5.setSelectionRange(0, 100);
393
407
  closeMenu();
394
408
  }
395
409
  }
@@ -397,7 +411,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
397
411
  }))]
398
412
  });
399
413
  }
400
- }, `${this.props.timeZone}:${this.props.intl.locale}`)
414
+ }, _concatInstanceProperty__default["default"](_context = "".concat(this.props.timeZone, ":")).call(_context, this.props.intl.locale))
401
415
  });
402
416
  }
403
417
  }]);
@@ -406,7 +420,7 @@ DateTimeInput.displayName = 'DateTimeInput';
406
420
  var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
407
421
 
408
422
  // NOTE: This string will be replaced on build time with the package version.
409
- var version = "20.2.2";
423
+ var version = "20.3.0";
410
424
 
411
425
  exports["default"] = dateTimeInput;
412
426
  exports.version = version;
package/dist/commercetools-uikit-date-time-input.esm.js CHANGED
@@ -13,6 +13,7 @@ import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
13
13
  import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
14
14
  import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
15
15
  import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
16
+ import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
16
17
  import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
17
18
  import _fillInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/fill';
18
19
  import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
@@ -43,7 +44,7 @@ DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
43
44
  var TimeInput = DateCalendarTimeInput;
44
45
 
45
46
  function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
46
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
47
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
47
48
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
48
49
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
49
50
  const activationTypes = [Downshift.stateChangeTypes.keyDownEnter, Downshift.stateChangeTypes.clickItem];
@@ -94,7 +95,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
94
95
  _this.setState(prevState => ({
95
96
  calendarDate: today,
96
97
  highlightedIndex: (prevState.suggestedItems || []).length + getDateInMonth(today, _this.props.timeZone) - 1
97
- }), () => _this.inputRef.current?.focus());
98
+ }), () => {
99
+ var _this$inputRef$curren;
100
+ return (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
101
+ });
98
102
  };
99
103
  _this.handleBlur = () => {
100
104
  if (_this.props.onBlur) _this.props.onBlur({
@@ -118,21 +122,25 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
118
122
  }
119
123
  _this.emit(date);
120
124
  };
121
- _this.emit = value => _this.props.onChange?.({
122
- target: {
123
- id: _this.props.id,
124
- name: _this.props.name,
125
- // when cleared the value is null, but we always want it to be an
126
- // empty string when there is no value.
127
- value: value || ''
128
- }
129
- });
125
+ _this.emit = value => {
126
+ var _this$props$onChange, _this$props;
127
+ return (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
128
+ target: {
129
+ id: _this.props.id,
130
+ name: _this.props.name,
131
+ // when cleared the value is null, but we always want it to be an
132
+ // empty string when there is no value.
133
+ value: value || ''
134
+ }
135
+ });
136
+ };
130
137
  return _this;
131
138
  }
132
139
  _inherits(DateTimeInput, _Component);
133
140
  return _createClass(DateTimeInput, [{
134
141
  key: "render",
135
142
  value: function render() {
143
+ var _context;
136
144
  if (!this.props.isReadOnly) {
137
145
  process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'DateTimeInput: `onChange` is required when input is not read only.') : void 0;
138
146
  }
@@ -195,13 +203,14 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
195
203
  return null;
196
204
  }, () => {
197
205
  if (_includesInstanceProperty(activationTypes).call(activationTypes, changes.type)) {
198
- this.timeInputRef.current?.focus();
199
- this.timeInputRef.current?.setSelectionRange(0, this.state.timeString.length);
206
+ var _this$timeInputRef$cu, _this$timeInputRef$cu2;
207
+ (_this$timeInputRef$cu = this.timeInputRef.current) === null || _this$timeInputRef$cu === void 0 || _this$timeInputRef$cu.focus();
208
+ (_this$timeInputRef$cu2 = this.timeInputRef.current) === null || _this$timeInputRef$cu2 === void 0 || _this$timeInputRef$cu2.setSelectionRange(0, this.state.timeString.length);
200
209
  }
201
210
  });
202
211
  },
203
212
  children: _ref => {
204
- var _context;
213
+ var _context2;
205
214
  let getInputProps = _ref.getInputProps,
206
215
  getMenuProps = _ref.getMenuProps,
207
216
  getItemProps = _ref.getItemProps,
@@ -217,7 +226,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
217
226
  const suggestedItems = this.state.suggestedItems;
218
227
  const calendarItems = createCalendarItems(this.state.calendarDate, this.state.timeString, this.props.timeZone);
219
228
  const paddingDayCount = getPaddingDayCount(this.state.calendarDate, this.props.intl.locale, this.props.timeZone);
220
- const paddingDays = _fillInstanceProperty(_context = Array(paddingDayCount)).call(_context, undefined);
229
+ const paddingDays = _fillInstanceProperty(_context2 = Array(paddingDayCount)).call(_context2, undefined);
221
230
  const weekdays = getWeekdayNames(this.props.intl.locale);
222
231
  const today = getToday(this.props.timeZone);
223
232
  const isTimeInputVisible = Boolean(this.props.value) && this.props.value !== '';
@@ -285,17 +294,19 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
285
294
  // validate the input on blur, and emit the value if it's valid
286
295
  onBlur: event => {
287
296
  createBlurHandler(this.timeInputRef, () => {
288
- const inputValue = this.inputRef.current?.value || '';
297
+ var _this$inputRef$curren2;
298
+ const inputValue = ((_this$inputRef$curren2 = this.inputRef.current) === null || _this$inputRef$curren2 === void 0 ? void 0 : _this$inputRef$curren2.value) || '';
289
299
  const parsedDate = parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
290
300
  if (inputValue.length > 0 && !parsedDate) return;
291
301
  this.emit(parsedDate);
292
302
  })(event);
293
303
  },
294
304
  onChange: event => {
305
+ var _event$target$value;
295
306
  // keep timeInput and regular input in sync when user
296
307
  // types into regular input
297
308
  if (!isOpen) return;
298
- const time = event.target.value?.split(' ')[1];
309
+ const time = (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.split(' ')[1];
299
310
  if (!time) return;
300
311
  const parsedTime = parseTime(time);
301
312
  this.setState(() => {
@@ -363,14 +374,16 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
363
374
  onChange: this.handleTimeChange,
364
375
  onKeyDown: event => {
365
376
  if (event.key === 'ArrowUp') {
377
+ var _this$inputRef$curren3;
366
378
  setHighlightedIndex(-1);
367
- this.inputRef.current?.focus();
379
+ (_this$inputRef$curren3 = this.inputRef.current) === null || _this$inputRef$curren3 === void 0 || _this$inputRef$curren3.focus();
368
380
  return;
369
381
  }
370
382
  if (event.key === 'Enter') {
383
+ var _this$inputRef$curren4, _this$inputRef$curren5;
371
384
  setHighlightedIndex(-1);
372
- this.inputRef.current?.focus();
373
- this.inputRef.current?.setSelectionRange(0, 100);
385
+ (_this$inputRef$curren4 = this.inputRef.current) === null || _this$inputRef$curren4 === void 0 || _this$inputRef$curren4.focus();
386
+ (_this$inputRef$curren5 = this.inputRef.current) === null || _this$inputRef$curren5 === void 0 || _this$inputRef$curren5.setSelectionRange(0, 100);
374
387
  closeMenu();
375
388
  }
376
389
  }
@@ -378,7 +391,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
378
391
  }))]
379
392
  });
380
393
  }
381
- }, `${this.props.timeZone}:${this.props.intl.locale}`)
394
+ }, _concatInstanceProperty(_context = "".concat(this.props.timeZone, ":")).call(_context, this.props.intl.locale))
382
395
  });
383
396
  }
384
397
  }]);
@@ -387,6 +400,6 @@ DateTimeInput.displayName = 'DateTimeInput';
387
400
  var dateTimeInput = injectIntl(DateTimeInput);
388
401
 
389
402
  // NOTE: This string will be replaced on build time with the package version.
390
- var version = "20.2.2";
403
+ var version = "20.3.0";
391
404
 
392
405
  export { dateTimeInput as default, version };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/date-time-input",
3
3
  "description": "The `DateTimeInput` component allows the user to select a date. This component also supports multiple date selection.",
4
- "version": "20.2.2",
4
+ "version": "20.3.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,28 +21,28 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/accessible-button": "20.2.2",
25
- "@commercetools-uikit/calendar-time-utils": "20.2.2",
26
- "@commercetools-uikit/calendar-utils": "20.2.2",
27
- "@commercetools-uikit/constraints": "20.2.2",
28
- "@commercetools-uikit/design-system": "20.2.2",
29
- "@commercetools-uikit/hooks": "20.2.2",
30
- "@commercetools-uikit/icons": "20.2.2",
31
- "@commercetools-uikit/secondary-icon-button": "20.2.2",
32
- "@commercetools-uikit/select-utils": "20.2.2",
33
- "@commercetools-uikit/spacings-inline": "20.2.2",
34
- "@commercetools-uikit/text": "20.2.2",
35
- "@commercetools-uikit/tooltip": "20.2.2",
36
- "@commercetools-uikit/utils": "20.2.2",
24
+ "@commercetools-uikit/accessible-button": "20.3.0",
25
+ "@commercetools-uikit/calendar-time-utils": "20.3.0",
26
+ "@commercetools-uikit/calendar-utils": "20.3.0",
27
+ "@commercetools-uikit/constraints": "20.3.0",
28
+ "@commercetools-uikit/design-system": "20.3.0",
29
+ "@commercetools-uikit/hooks": "20.3.0",
30
+ "@commercetools-uikit/icons": "20.3.0",
31
+ "@commercetools-uikit/secondary-icon-button": "20.3.0",
32
+ "@commercetools-uikit/select-utils": "20.3.0",
33
+ "@commercetools-uikit/spacings-inline": "20.3.0",
34
+ "@commercetools-uikit/text": "20.3.0",
35
+ "@commercetools-uikit/tooltip": "20.3.0",
36
+ "@commercetools-uikit/utils": "20.3.0",
37
37
  "@emotion/react": "^11.10.5",
38
38
  "@emotion/styled": "^11.10.5",
39
- "downshift": "9.0.9",
40
- "react-is": "19.1.0",
39
+ "downshift": "9.0.10",
40
+ "react-is": "19.2.0",
41
41
  "warning": "4.0.3"
42
42
  },
43
43
  "devDependencies": {
44
44
  "moment": "2.30.1",
45
- "react": "19.1.0",
45
+ "react": "19.2.0",
46
46
  "react-intl": "^7.1.4"
47
47
  },
48
48
  "peerDependencies": {