@commercetools-uikit/date-input 19.12.0 → 19.12.1

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-input.cjs.dev.js +15 -1
  2. package/dist/commercetools-uikit-date-input.cjs.prod.js +15 -1
  3. package/dist/commercetools-uikit-date-input.esm.js +15 -1
  4. package/package.json +14 -14
package/dist/commercetools-uikit-date-input.cjs.dev.js CHANGED
@@ -98,6 +98,19 @@ const DateInput = props => {
98
98
  setCalendarDate(nextDate);
99
99
  setHighlightedIndex(dayToHighlight);
100
100
  };
101
+
102
+ /**
103
+ * If the user manually enters a value in the text-input field,
104
+ * attempt to parse the value and emit it to the consumer if it's valid and in range.
105
+ */
106
+ const onInputBlur = event => {
107
+ const inputValue = event.target.value || '';
108
+ const date = calendarUtils.parseInputToDate(inputValue, intl.locale);
109
+ const inRange = calendarUtils.getIsDateInRange(date, props.minValue, props.maxValue);
110
+ if (inputValue.length === 0) emit(inputValue);
111
+ if (!date || !inRange) return;
112
+ emit(date);
113
+ };
101
114
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
102
115
  max: props.horizontalConstraint,
103
116
  children: jsxRuntime.jsx(Downshift__default["default"], {
@@ -217,6 +230,7 @@ const DateInput = props => {
217
230
  }
218
231
  }
219
232
  },
233
+ onBlur: onInputBlur,
220
234
  // we only do this for readOnly because the input
221
235
  // doesn't ignore these events, unlike when its disabled
222
236
  onClick: props.isReadOnly ? undefined : openMenu
@@ -292,7 +306,7 @@ DateInput.isEmpty = value => value === '';
292
306
  var DateInput$1 = DateInput;
293
307
 
294
308
  // NOTE: This string will be replaced on build time with the package version.
295
- var version = "19.11.0";
309
+ var version = "19.12.1";
296
310
 
297
311
  exports["default"] = DateInput$1;
298
312
  exports.version = version;
package/dist/commercetools-uikit-date-input.cjs.prod.js CHANGED
@@ -95,6 +95,19 @@ const DateInput = props => {
95
95
  setCalendarDate(nextDate);
96
96
  setHighlightedIndex(dayToHighlight);
97
97
  };
98
+
99
+ /**
100
+ * If the user manually enters a value in the text-input field,
101
+ * attempt to parse the value and emit it to the consumer if it's valid and in range.
102
+ */
103
+ const onInputBlur = event => {
104
+ const inputValue = event.target.value || '';
105
+ const date = calendarUtils.parseInputToDate(inputValue, intl.locale);
106
+ const inRange = calendarUtils.getIsDateInRange(date, props.minValue, props.maxValue);
107
+ if (inputValue.length === 0) emit(inputValue);
108
+ if (!date || !inRange) return;
109
+ emit(date);
110
+ };
98
111
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
99
112
  max: props.horizontalConstraint,
100
113
  children: jsxRuntime.jsx(Downshift__default["default"], {
@@ -214,6 +227,7 @@ const DateInput = props => {
214
227
  }
215
228
  }
216
229
  },
230
+ onBlur: onInputBlur,
217
231
  // we only do this for readOnly because the input
218
232
  // doesn't ignore these events, unlike when its disabled
219
233
  onClick: props.isReadOnly ? undefined : openMenu
@@ -271,7 +285,7 @@ DateInput.isEmpty = value => value === '';
271
285
  var DateInput$1 = DateInput;
272
286
 
273
287
  // NOTE: This string will be replaced on build time with the package version.
274
- var version = "19.11.0";
288
+ var version = "19.12.1";
275
289
 
276
290
  exports["default"] = DateInput$1;
277
291
  exports.version = version;
package/dist/commercetools-uikit-date-input.esm.js CHANGED
@@ -78,6 +78,19 @@ const DateInput = props => {
78
78
  setCalendarDate(nextDate);
79
79
  setHighlightedIndex(dayToHighlight);
80
80
  };
81
+
82
+ /**
83
+ * If the user manually enters a value in the text-input field,
84
+ * attempt to parse the value and emit it to the consumer if it's valid and in range.
85
+ */
86
+ const onInputBlur = event => {
87
+ const inputValue = event.target.value || '';
88
+ const date = parseInputToDate(inputValue, intl.locale);
89
+ const inRange = getIsDateInRange(date, props.minValue, props.maxValue);
90
+ if (inputValue.length === 0) emit(inputValue);
91
+ if (!date || !inRange) return;
92
+ emit(date);
93
+ };
81
94
  return jsx(Constraints.Horizontal, {
82
95
  max: props.horizontalConstraint,
83
96
  children: jsx(Downshift, {
@@ -197,6 +210,7 @@ const DateInput = props => {
197
210
  }
198
211
  }
199
212
  },
213
+ onBlur: onInputBlur,
200
214
  // we only do this for readOnly because the input
201
215
  // doesn't ignore these events, unlike when its disabled
202
216
  onClick: props.isReadOnly ? undefined : openMenu
@@ -272,6 +286,6 @@ DateInput.isEmpty = value => value === '';
272
286
  var DateInput$1 = DateInput;
273
287
 
274
288
  // NOTE: This string will be replaced on build time with the package version.
275
- var version = "19.11.0";
289
+ var version = "19.12.1";
276
290
 
277
291
  export { DateInput$1 as default, version };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/date-input",
3
3
  "description": "The `DateInput` component allows the user to select a date. It formats the selected date depending on the users' locale.",
4
- "version": "19.12.0",
4
+ "version": "19.12.1",
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.12.1",
25
+ "@commercetools-uikit/calendar-time-utils": "19.12.1",
26
+ "@commercetools-uikit/calendar-utils": "19.12.1",
27
+ "@commercetools-uikit/constraints": "19.12.1",
28
+ "@commercetools-uikit/design-system": "19.12.1",
29
+ "@commercetools-uikit/hooks": "19.12.1",
30
+ "@commercetools-uikit/icons": "19.12.1",
31
+ "@commercetools-uikit/secondary-icon-button": "19.12.1",
32
+ "@commercetools-uikit/select-utils": "19.12.1",
33
+ "@commercetools-uikit/spacings-inline": "19.12.1",
34
+ "@commercetools-uikit/text": "19.12.1",
35
+ "@commercetools-uikit/tooltip": "19.12.1",
36
+ "@commercetools-uikit/utils": "19.12.1",
37
37
  "@emotion/react": "^11.10.5",
38
38
  "@emotion/styled": "^11.10.5",
39
39
  "downshift": "6.1.12",