@commercetools-uikit/date-input 19.11.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 +19 -9
  2. package/dist/commercetools-uikit-date-input.cjs.prod.js +19 -9
  3. package/dist/commercetools-uikit-date-input.esm.js +19 -8
  4. package/package.json +14 -14
package/dist/commercetools-uikit-date-input.cjs.dev.js CHANGED
@@ -14,7 +14,6 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
14
  var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
15
15
  var _pt = require('prop-types');
16
16
  var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
17
- var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
18
17
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
19
18
  var react = require('react');
20
19
  var Downshift = require('downshift');
@@ -37,7 +36,6 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
37
36
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
38
37
  var _pt__default = /*#__PURE__*/_interopDefault(_pt);
39
38
  var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
40
- var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
41
39
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
42
40
  var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
43
41
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
@@ -66,7 +64,7 @@ const DateInput = props => {
66
64
  process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'DateInput: `onChange` is required when input is not read only.') : void 0;
67
65
  }
68
66
  const onChange = props.onChange;
69
- const emit = react.useCallback(value => onChange === null || onChange === void 0 ? void 0 : onChange({
67
+ const emit = react.useCallback(value => onChange?.({
70
68
  target: {
71
69
  id: props.id,
72
70
  name: props.name,
@@ -76,8 +74,7 @@ const DateInput = props => {
76
74
  }
77
75
  }), [onChange, props.id, props.name]);
78
76
  const handleChange = react.useCallback(date => {
79
- var _inputRef$current;
80
- (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.setSelectionRange(0, 100);
77
+ inputRef.current?.setSelectionRange(0, 100);
81
78
  emit(date);
82
79
  }, [inputRef, emit]);
83
80
  const onBlur = props.onBlur;
@@ -90,11 +87,10 @@ const DateInput = props => {
90
87
  });
91
88
  }, [onBlur, props.id, props.name]);
92
89
  const showToday = () => {
93
- var _inputRef$current2;
94
90
  const today = calendarUtils.getToday();
95
91
  setCalendarDate(today);
96
92
  setHighlightedIndex(suggestedItems.length + calendarUtils.getDateInMonth(today) - 1);
97
- (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
93
+ inputRef.current?.focus();
98
94
  };
99
95
  const jumpMonth = function (amount) {
100
96
  let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -102,6 +98,19 @@ const DateInput = props => {
102
98
  setCalendarDate(nextDate);
103
99
  setHighlightedIndex(dayToHighlight);
104
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
+ };
105
114
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
106
115
  max: props.horizontalConstraint,
107
116
  children: jsxRuntime.jsx(Downshift__default["default"], {
@@ -182,7 +191,7 @@ const DateInput = props => {
182
191
  preventDownshiftDefault(event);
183
192
  return;
184
193
  }
185
- if (event.key === 'Enter' && (inputValue === null || inputValue === void 0 ? void 0 : _trimInstanceProperty__default["default"](inputValue).call(inputValue)) === '') {
194
+ if (event.key === 'Enter' && inputValue?.trim() === '') {
186
195
  clearSelection();
187
196
  }
188
197
  // ArrowDown
@@ -221,6 +230,7 @@ const DateInput = props => {
221
230
  }
222
231
  }
223
232
  },
233
+ onBlur: onInputBlur,
224
234
  // we only do this for readOnly because the input
225
235
  // doesn't ignore these events, unlike when its disabled
226
236
  onClick: props.isReadOnly ? undefined : openMenu
@@ -296,7 +306,7 @@ DateInput.isEmpty = value => value === '';
296
306
  var DateInput$1 = DateInput;
297
307
 
298
308
  // NOTE: This string will be replaced on build time with the package version.
299
- var version = "19.11.0";
309
+ var version = "19.12.1";
300
310
 
301
311
  exports["default"] = DateInput$1;
302
312
  exports.version = version;
package/dist/commercetools-uikit-date-input.cjs.prod.js CHANGED
@@ -14,7 +14,6 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
14
  var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
15
15
  require('prop-types');
16
16
  var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
17
- var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
18
17
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
19
18
  var react = require('react');
20
19
  var Downshift = require('downshift');
@@ -36,7 +35,6 @@ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_O
36
35
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
37
36
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
38
37
  var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
39
- var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
40
38
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
41
39
  var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
42
40
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
@@ -63,7 +61,7 @@ const DateInput = props => {
63
61
  const inputRef = react.useRef(null);
64
62
  if (!props.isReadOnly) ;
65
63
  const onChange = props.onChange;
66
- const emit = react.useCallback(value => onChange === null || onChange === void 0 ? void 0 : onChange({
64
+ const emit = react.useCallback(value => onChange?.({
67
65
  target: {
68
66
  id: props.id,
69
67
  name: props.name,
@@ -73,8 +71,7 @@ const DateInput = props => {
73
71
  }
74
72
  }), [onChange, props.id, props.name]);
75
73
  const handleChange = react.useCallback(date => {
76
- var _inputRef$current;
77
- (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.setSelectionRange(0, 100);
74
+ inputRef.current?.setSelectionRange(0, 100);
78
75
  emit(date);
79
76
  }, [inputRef, emit]);
80
77
  const onBlur = props.onBlur;
@@ -87,11 +84,10 @@ const DateInput = props => {
87
84
  });
88
85
  }, [onBlur, props.id, props.name]);
89
86
  const showToday = () => {
90
- var _inputRef$current2;
91
87
  const today = calendarUtils.getToday();
92
88
  setCalendarDate(today);
93
89
  setHighlightedIndex(suggestedItems.length + calendarUtils.getDateInMonth(today) - 1);
94
- (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
90
+ inputRef.current?.focus();
95
91
  };
96
92
  const jumpMonth = function (amount) {
97
93
  let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -99,6 +95,19 @@ const DateInput = props => {
99
95
  setCalendarDate(nextDate);
100
96
  setHighlightedIndex(dayToHighlight);
101
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
+ };
102
111
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
103
112
  max: props.horizontalConstraint,
104
113
  children: jsxRuntime.jsx(Downshift__default["default"], {
@@ -179,7 +188,7 @@ const DateInput = props => {
179
188
  preventDownshiftDefault(event);
180
189
  return;
181
190
  }
182
- if (event.key === 'Enter' && (inputValue === null || inputValue === void 0 ? void 0 : _trimInstanceProperty__default["default"](inputValue).call(inputValue)) === '') {
191
+ if (event.key === 'Enter' && inputValue?.trim() === '') {
183
192
  clearSelection();
184
193
  }
185
194
  // ArrowDown
@@ -218,6 +227,7 @@ const DateInput = props => {
218
227
  }
219
228
  }
220
229
  },
230
+ onBlur: onInputBlur,
221
231
  // we only do this for readOnly because the input
222
232
  // doesn't ignore these events, unlike when its disabled
223
233
  onClick: props.isReadOnly ? undefined : openMenu
@@ -275,7 +285,7 @@ DateInput.isEmpty = value => value === '';
275
285
  var DateInput$1 = DateInput;
276
286
 
277
287
  // NOTE: This string will be replaced on build time with the package version.
278
- var version = "19.11.0";
288
+ var version = "19.12.1";
279
289
 
280
290
  exports["default"] = DateInput$1;
281
291
  exports.version = version;
package/dist/commercetools-uikit-date-input.esm.js CHANGED
@@ -10,7 +10,6 @@ import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
10
10
  import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
11
11
  import _pt from 'prop-types';
12
12
  import _fillInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/fill';
13
- import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
14
13
  import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
15
14
  import { useState, useRef, useCallback } from 'react';
16
15
  import Downshift from 'downshift';
@@ -45,7 +44,7 @@ const DateInput = props => {
45
44
  process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'DateInput: `onChange` is required when input is not read only.') : void 0;
46
45
  }
47
46
  const onChange = props.onChange;
48
- const emit = useCallback(value => onChange === null || onChange === void 0 ? void 0 : onChange({
47
+ const emit = useCallback(value => onChange?.({
49
48
  target: {
50
49
  id: props.id,
51
50
  name: props.name,
@@ -55,8 +54,7 @@ const DateInput = props => {
55
54
  }
56
55
  }), [onChange, props.id, props.name]);
57
56
  const handleChange = useCallback(date => {
58
- var _inputRef$current;
59
- (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.setSelectionRange(0, 100);
57
+ inputRef.current?.setSelectionRange(0, 100);
60
58
  emit(date);
61
59
  }, [inputRef, emit]);
62
60
  const onBlur = props.onBlur;
@@ -69,11 +67,10 @@ const DateInput = props => {
69
67
  });
70
68
  }, [onBlur, props.id, props.name]);
71
69
  const showToday = () => {
72
- var _inputRef$current2;
73
70
  const today = getToday();
74
71
  setCalendarDate(today);
75
72
  setHighlightedIndex(suggestedItems.length + getDateInMonth(today) - 1);
76
- (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
73
+ inputRef.current?.focus();
77
74
  };
78
75
  const jumpMonth = function (amount) {
79
76
  let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -81,6 +78,19 @@ const DateInput = props => {
81
78
  setCalendarDate(nextDate);
82
79
  setHighlightedIndex(dayToHighlight);
83
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
+ };
84
94
  return jsx(Constraints.Horizontal, {
85
95
  max: props.horizontalConstraint,
86
96
  children: jsx(Downshift, {
@@ -161,7 +171,7 @@ const DateInput = props => {
161
171
  preventDownshiftDefault(event);
162
172
  return;
163
173
  }
164
- if (event.key === 'Enter' && (inputValue === null || inputValue === void 0 ? void 0 : _trimInstanceProperty(inputValue).call(inputValue)) === '') {
174
+ if (event.key === 'Enter' && inputValue?.trim() === '') {
165
175
  clearSelection();
166
176
  }
167
177
  // ArrowDown
@@ -200,6 +210,7 @@ const DateInput = props => {
200
210
  }
201
211
  }
202
212
  },
213
+ onBlur: onInputBlur,
203
214
  // we only do this for readOnly because the input
204
215
  // doesn't ignore these events, unlike when its disabled
205
216
  onClick: props.isReadOnly ? undefined : openMenu
@@ -275,6 +286,6 @@ DateInput.isEmpty = value => value === '';
275
286
  var DateInput$1 = DateInput;
276
287
 
277
288
  // NOTE: This string will be replaced on build time with the package version.
278
- var version = "19.11.0";
289
+ var version = "19.12.1";
279
290
 
280
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.11.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.11.0",
25
- "@commercetools-uikit/calendar-time-utils": "19.11.0",
26
- "@commercetools-uikit/calendar-utils": "19.11.0",
27
- "@commercetools-uikit/constraints": "19.11.0",
28
- "@commercetools-uikit/design-system": "19.11.0",
29
- "@commercetools-uikit/hooks": "19.11.0",
30
- "@commercetools-uikit/icons": "19.11.0",
31
- "@commercetools-uikit/secondary-icon-button": "19.11.0",
32
- "@commercetools-uikit/select-utils": "19.11.0",
33
- "@commercetools-uikit/spacings-inline": "19.11.0",
34
- "@commercetools-uikit/text": "19.11.0",
35
- "@commercetools-uikit/tooltip": "19.11.0",
36
- "@commercetools-uikit/utils": "19.11.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",