@commercetools-uikit/date-time-input 19.12.0 → 19.13.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 +21 -7
  2. package/dist/commercetools-uikit-date-time-input.cjs.prod.js +21 -7
  3. package/dist/commercetools-uikit-date-time-input.esm.js +21 -7
  4. package/package.json +14 -14
package/dist/commercetools-uikit-date-time-input.cjs.dev.js CHANGED
@@ -79,11 +79,15 @@ const preventDownshiftDefault = event => {
79
79
 
80
80
  // This keeps the menu open when the user focuses the time input (thereby
81
81
  // blurring the regular input/toggle button)
82
- const createBlurHandler = timeInputRef => event => {
83
- event.persist();
84
- if (event.relatedTarget === timeInputRef.current) {
85
- preventDownshiftDefault(event);
86
- }
82
+ const createBlurHandler = function (timeInputRef) {
83
+ let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
84
+ return event => {
85
+ event.persist();
86
+ if (event.relatedTarget === timeInputRef.current) {
87
+ preventDownshiftDefault(event);
88
+ }
89
+ cb();
90
+ };
87
91
  };
88
92
  let DateTimeInput = /*#__PURE__*/function (_Component) {
89
93
  function DateTimeInput() {
@@ -271,6 +275,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
271
275
  if (event.key === 'Enter' && highlightedIndex === null) {
272
276
  preventDownshiftDefault(event);
273
277
  const parsedDate = calendarTimeUtils.parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
278
+
279
+ // If there is no parsed date, don't clear and submit. Instead, give
280
+ // the user a chance to fix the value.
281
+ if (!parsedDate) return;
274
282
  this.emit(parsedDate);
275
283
  closeMenu();
276
284
  }
@@ -298,7 +306,13 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
298
306
  }
299
307
  },
300
308
  onClick: this.props.isReadOnly ? undefined : openMenu,
301
- onBlur: createBlurHandler(this.timeInputRef),
309
+ // validate the input on blur, and emit the value if it's valid
310
+ onBlur: createBlurHandler(this.timeInputRef, () => {
311
+ const inputValue = this.inputRef.current?.value || '';
312
+ const parsedDate = calendarTimeUtils.parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
313
+ if (inputValue.length > 0 && !parsedDate) return;
314
+ this.emit(parsedDate);
315
+ }),
302
316
  onChange: event => {
303
317
  // keep timeInput and regular input in sync when user
304
318
  // types into regular input
@@ -413,7 +427,7 @@ DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
413
427
  var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
414
428
 
415
429
  // NOTE: This string will be replaced on build time with the package version.
416
- var version = "19.11.0";
430
+ var version = "19.13.0";
417
431
 
418
432
  exports["default"] = dateTimeInput;
419
433
  exports.version = version;
package/dist/commercetools-uikit-date-time-input.cjs.prod.js CHANGED
@@ -75,11 +75,15 @@ const preventDownshiftDefault = event => {
75
75
 
76
76
  // This keeps the menu open when the user focuses the time input (thereby
77
77
  // blurring the regular input/toggle button)
78
- const createBlurHandler = timeInputRef => event => {
79
- event.persist();
80
- if (event.relatedTarget === timeInputRef.current) {
81
- preventDownshiftDefault(event);
82
- }
78
+ const createBlurHandler = function (timeInputRef) {
79
+ let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
80
+ return event => {
81
+ event.persist();
82
+ if (event.relatedTarget === timeInputRef.current) {
83
+ preventDownshiftDefault(event);
84
+ }
85
+ cb();
86
+ };
83
87
  };
84
88
  let DateTimeInput = /*#__PURE__*/function (_Component) {
85
89
  function DateTimeInput() {
@@ -265,6 +269,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
265
269
  if (event.key === 'Enter' && highlightedIndex === null) {
266
270
  preventDownshiftDefault(event);
267
271
  const parsedDate = calendarTimeUtils.parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
272
+
273
+ // If there is no parsed date, don't clear and submit. Instead, give
274
+ // the user a chance to fix the value.
275
+ if (!parsedDate) return;
268
276
  this.emit(parsedDate);
269
277
  closeMenu();
270
278
  }
@@ -292,7 +300,13 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
292
300
  }
293
301
  },
294
302
  onClick: this.props.isReadOnly ? undefined : openMenu,
295
- onBlur: createBlurHandler(this.timeInputRef),
303
+ // validate the input on blur, and emit the value if it's valid
304
+ onBlur: createBlurHandler(this.timeInputRef, () => {
305
+ const inputValue = this.inputRef.current?.value || '';
306
+ const parsedDate = calendarTimeUtils.parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
307
+ if (inputValue.length > 0 && !parsedDate) return;
308
+ this.emit(parsedDate);
309
+ }),
296
310
  onChange: event => {
297
311
  // keep timeInput and regular input in sync when user
298
312
  // types into regular input
@@ -389,7 +403,7 @@ DateTimeInput.propTypes = {};
389
403
  var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
390
404
 
391
405
  // NOTE: This string will be replaced on build time with the package version.
392
- var version = "19.11.0";
406
+ var version = "19.13.0";
393
407
 
394
408
  exports["default"] = dateTimeInput;
395
409
  exports.version = version;
package/dist/commercetools-uikit-date-time-input.esm.js CHANGED
@@ -57,11 +57,15 @@ const preventDownshiftDefault = event => {
57
57
 
58
58
  // This keeps the menu open when the user focuses the time input (thereby
59
59
  // blurring the regular input/toggle button)
60
- const createBlurHandler = timeInputRef => event => {
61
- event.persist();
62
- if (event.relatedTarget === timeInputRef.current) {
63
- preventDownshiftDefault(event);
64
- }
60
+ const createBlurHandler = function (timeInputRef) {
61
+ let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
62
+ return event => {
63
+ event.persist();
64
+ if (event.relatedTarget === timeInputRef.current) {
65
+ preventDownshiftDefault(event);
66
+ }
67
+ cb();
68
+ };
65
69
  };
66
70
  let DateTimeInput = /*#__PURE__*/function (_Component) {
67
71
  function DateTimeInput() {
@@ -249,6 +253,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
249
253
  if (event.key === 'Enter' && highlightedIndex === null) {
250
254
  preventDownshiftDefault(event);
251
255
  const parsedDate = parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
256
+
257
+ // If there is no parsed date, don't clear and submit. Instead, give
258
+ // the user a chance to fix the value.
259
+ if (!parsedDate) return;
252
260
  this.emit(parsedDate);
253
261
  closeMenu();
254
262
  }
@@ -276,7 +284,13 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
276
284
  }
277
285
  },
278
286
  onClick: this.props.isReadOnly ? undefined : openMenu,
279
- onBlur: createBlurHandler(this.timeInputRef),
287
+ // validate the input on blur, and emit the value if it's valid
288
+ onBlur: createBlurHandler(this.timeInputRef, () => {
289
+ const inputValue = this.inputRef.current?.value || '';
290
+ const parsedDate = parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
291
+ if (inputValue.length > 0 && !parsedDate) return;
292
+ this.emit(parsedDate);
293
+ }),
280
294
  onChange: event => {
281
295
  // keep timeInput and regular input in sync when user
282
296
  // types into regular input
@@ -391,6 +405,6 @@ DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
391
405
  var dateTimeInput = injectIntl(DateTimeInput);
392
406
 
393
407
  // NOTE: This string will be replaced on build time with the package version.
394
- var version = "19.11.0";
408
+ var version = "19.13.0";
395
409
 
396
410
  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": "19.12.0",
4
+ "version": "19.13.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,19 +21,19 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/accessible-button": "19.12.0",
25
- "@commercetools-uikit/calendar-time-utils": "19.12.0",
26
- "@commercetools-uikit/calendar-utils": "19.12.0",
27
- "@commercetools-uikit/constraints": "19.12.0",
28
- "@commercetools-uikit/design-system": "19.12.0",
29
- "@commercetools-uikit/hooks": "19.12.0",
30
- "@commercetools-uikit/icons": "19.12.0",
31
- "@commercetools-uikit/secondary-icon-button": "19.12.0",
32
- "@commercetools-uikit/select-utils": "19.12.0",
33
- "@commercetools-uikit/spacings-inline": "19.12.0",
34
- "@commercetools-uikit/text": "19.12.0",
35
- "@commercetools-uikit/tooltip": "19.12.0",
36
- "@commercetools-uikit/utils": "19.12.0",
24
+ "@commercetools-uikit/accessible-button": "19.13.0",
25
+ "@commercetools-uikit/calendar-time-utils": "19.13.0",
26
+ "@commercetools-uikit/calendar-utils": "19.13.0",
27
+ "@commercetools-uikit/constraints": "19.13.0",
28
+ "@commercetools-uikit/design-system": "19.13.0",
29
+ "@commercetools-uikit/hooks": "19.13.0",
30
+ "@commercetools-uikit/icons": "19.13.0",
31
+ "@commercetools-uikit/secondary-icon-button": "19.13.0",
32
+ "@commercetools-uikit/select-utils": "19.13.0",
33
+ "@commercetools-uikit/spacings-inline": "19.13.0",
34
+ "@commercetools-uikit/text": "19.13.0",
35
+ "@commercetools-uikit/tooltip": "19.13.0",
36
+ "@commercetools-uikit/utils": "19.13.0",
37
37
  "@emotion/react": "^11.10.5",
38
38
  "@emotion/styled": "^11.10.5",
39
39
  "downshift": "6.1.12",