@commercetools-uikit/date-input 15.15.0 → 16.0.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 (6) hide show
  1. package/dist/commercetools-uikit-date-input.cjs.d.ts +1 -0
  2. package/dist/commercetools-uikit-date-input.cjs.d.ts.map +1 -0
  3. package/dist/commercetools-uikit-date-input.cjs.dev.js +73 -91
  4. package/dist/commercetools-uikit-date-input.cjs.prod.js +73 -91
  5. package/dist/commercetools-uikit-date-input.esm.js +73 -91
  6. package/package.json +16 -16
package/dist/commercetools-uikit-date-input.cjs.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from "./declarations/src/index";
2
2
  export { default } from "./declarations/src/index";
3
+ //# sourceMappingURL=commercetools-uikit-date-input.cjs.d.ts.map
package/dist/commercetools-uikit-date-input.cjs.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"commercetools-uikit-date-input.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
package/dist/commercetools-uikit-date-input.cjs.dev.js CHANGED
@@ -46,54 +46,52 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
46
46
 
47
47
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
48
48
 
49
- var preventDownshiftDefault = function preventDownshiftDefault(event) {
49
+ const preventDownshiftDefault = event => {
50
50
  event.nativeEvent.preventDownshiftDefault = true;
51
51
  };
52
52
 
53
- var DateInput = function DateInput(props) {
54
- var intl = reactIntl.useIntl();
53
+ const DateInput = props => {
54
+ const intl = reactIntl.useIntl();
55
55
 
56
- var _useState = react.useState(props.value || calendarUtils.getToday()),
57
- _useState2 = _slicedToArray(_useState, 2),
58
- calendarDate = _useState2[0],
59
- setCalendarDate = _useState2[1];
56
+ const _useState = react.useState(props.value || calendarUtils.getToday()),
57
+ _useState2 = _slicedToArray(_useState, 2),
58
+ calendarDate = _useState2[0],
59
+ setCalendarDate = _useState2[1];
60
60
 
61
- var _useState3 = react.useState([]),
62
- _useState4 = _slicedToArray(_useState3, 2),
63
- suggestedItems = _useState4[0],
64
- setSuggestedItems = _useState4[1];
61
+ const _useState3 = react.useState([]),
62
+ _useState4 = _slicedToArray(_useState3, 2),
63
+ suggestedItems = _useState4[0],
64
+ setSuggestedItems = _useState4[1];
65
65
 
66
- var _useState5 = react.useState(props.value === '' ? null : calendarUtils.getDateInMonth(props.value) - 1),
67
- _useState6 = _slicedToArray(_useState5, 2),
68
- highlightedIndex = _useState6[0],
69
- setHighlightedIndex = _useState6[1];
66
+ const _useState5 = react.useState(props.value === '' ? null : calendarUtils.getDateInMonth(props.value) - 1),
67
+ _useState6 = _slicedToArray(_useState5, 2),
68
+ highlightedIndex = _useState6[0],
69
+ setHighlightedIndex = _useState6[1];
70
70
 
71
- var inputRef = react.useRef(null);
71
+ const inputRef = react.useRef(null);
72
72
 
73
73
  if (!props.isReadOnly) {
74
74
  process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'DateInput: `onChange` is required when input is not read only.') : void 0;
75
75
  }
76
76
 
77
- var onChange = props.onChange;
78
- var emit = react.useCallback(function (value) {
79
- return onChange === null || onChange === void 0 ? void 0 : onChange({
80
- target: {
81
- id: props.id,
82
- name: props.name,
83
- // when cleared the value is null, but we always want it to be an
84
- // empty string when there is no value.
85
- value: value || ''
86
- }
87
- });
88
- }, [onChange, props.id, props.name]);
89
- var handleChange = react.useCallback(function (date) {
77
+ const onChange = props.onChange;
78
+ const emit = react.useCallback(value => onChange === null || onChange === void 0 ? void 0 : onChange({
79
+ target: {
80
+ id: props.id,
81
+ name: props.name,
82
+ // when cleared the value is null, but we always want it to be an
83
+ // empty string when there is no value.
84
+ value: value || ''
85
+ }
86
+ }), [onChange, props.id, props.name]);
87
+ const handleChange = react.useCallback(date => {
90
88
  var _inputRef$current;
91
89
 
92
90
  (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setSelectionRange(0, 100);
93
91
  emit(date);
94
92
  }, [inputRef, emit]);
95
- var onBlur = props.onBlur;
96
- var handleBlur = react.useCallback(function () {
93
+ const onBlur = props.onBlur;
94
+ const handleBlur = react.useCallback(() => {
97
95
  if (onBlur) onBlur({
98
96
  target: {
99
97
  id: props.id,
@@ -102,18 +100,18 @@ var DateInput = function DateInput(props) {
102
100
  });
103
101
  }, [onBlur, props.id, props.name]);
104
102
 
105
- var showToday = function showToday() {
103
+ const showToday = () => {
106
104
  var _inputRef$current2;
107
105
 
108
- var today = calendarUtils.getToday();
106
+ const today = calendarUtils.getToday();
109
107
  setCalendarDate(today);
110
108
  setHighlightedIndex(suggestedItems.length + calendarUtils.getDateInMonth(today) - 1);
111
109
  (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
112
110
  };
113
111
 
114
- var jumpMonth = function jumpMonth(amount) {
115
- var dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
116
- var nextDate = calendarUtils.changeMonth(calendarDate, amount);
112
+ const jumpMonth = function (amount) {
113
+ let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
114
+ const nextDate = calendarUtils.changeMonth(calendarDate, amount);
117
115
  setCalendarDate(nextDate);
118
116
  setHighlightedIndex(dayToHighlight);
119
117
  };
@@ -126,11 +124,11 @@ var DateInput = function DateInput(props) {
126
124
  selectedItem: props.value === '' ? null : props.value,
127
125
  highlightedIndex: highlightedIndex,
128
126
  onChange: handleChange,
129
- onStateChange: function onStateChange(changes) {
127
+ onStateChange: changes => {
130
128
  if (changes.hasOwnProperty('inputValue')) {
131
129
  // input changed because user typed
132
130
  if (changes.type === Downshift__default["default"].stateChangeTypes.changeInput) {
133
- var date = calendarUtils.parseInputToDate(changes.inputValue, intl.locale);
131
+ const date = calendarUtils.parseInputToDate(changes.inputValue, intl.locale);
134
132
 
135
133
  if (date === '') {
136
134
  setSuggestedItems([]);
@@ -159,10 +157,10 @@ var DateInput = function DateInput(props) {
159
157
  setHighlightedIndex(changes.highlightedIndex);
160
158
  }
161
159
  },
162
- children: function children(_ref) {
160
+ children: _ref => {
163
161
  var _context;
164
162
 
165
- var getInputProps = _ref.getInputProps,
163
+ let getInputProps = _ref.getInputProps,
166
164
  getMenuProps = _ref.getMenuProps,
167
165
  getItemProps = _ref.getItemProps,
168
166
  getToggleButtonProps = _ref.getToggleButtonProps,
@@ -173,13 +171,13 @@ var DateInput = function DateInput(props) {
173
171
  selectedItem = _ref.selectedItem,
174
172
  isOpen = _ref.isOpen,
175
173
  inputValue = _ref.inputValue;
176
- var calendarItems = calendarUtils.createCalendarItems(calendarDate);
177
- var paddingDayCount = calendarUtils.getPaddingDayCount(calendarDate, intl.locale);
174
+ const calendarItems = calendarUtils.createCalendarItems(calendarDate);
175
+ const paddingDayCount = calendarUtils.getPaddingDayCount(calendarDate, intl.locale);
178
176
 
179
- var paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context, undefined);
177
+ const paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context, undefined);
180
178
 
181
- var weekdays = calendarUtils.getWeekdayNames(intl.locale);
182
- var today = calendarUtils.getToday();
179
+ const weekdays = calendarUtils.getWeekdayNames(intl.locale);
180
+ const today = calendarUtils.getToday();
183
181
  return jsxRuntime.jsxs("div", {
184
182
  onFocus: props.onFocus,
185
183
  onBlur: handleBlur,
@@ -194,13 +192,13 @@ var DateInput = function DateInput(props) {
194
192
  'aria-labelledby': undefined,
195
193
  name: props.name,
196
194
  placeholder: typeof props.placeholder === 'string' ? props.placeholder : calendarTimeUtils.getLocalizedDateTimeFormatPattern(intl.locale),
197
- onMouseEnter: function onMouseEnter() {
195
+ onMouseEnter: () => {
198
196
  // we remove the highlight so that the user can use the
199
197
  // arrow keys to move the cursor when hovering
200
198
  // @ts-ignore
201
199
  if (isOpen) setDownshiftHighlightedIndex(null);
202
200
  },
203
- onKeyDown: function onKeyDown(event) {
201
+ onKeyDown: event => {
204
202
  if (props.isReadOnly) {
205
203
  preventDownshiftDefault(event);
206
204
  return;
@@ -212,7 +210,7 @@ var DateInput = function DateInput(props) {
212
210
 
213
211
 
214
212
  if (event.key === 'ArrowDown') {
215
- var nextDayToHighlight = calendarUtils.getNextDay(calendarItems[Number(highlightedIndex)]);
213
+ const nextDayToHighlight = calendarUtils.getNextDay(calendarItems[Number(highlightedIndex)]);
216
214
 
217
215
  if (!calendarUtils.getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
218
216
  // if the date to highlight is disabled
@@ -232,7 +230,7 @@ var DateInput = function DateInput(props) {
232
230
 
233
231
 
234
232
  if (event.key === 'ArrowUp') {
235
- var previousDay = calendarUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
233
+ const previousDay = calendarUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
236
234
 
237
235
  if (!calendarUtils.getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
238
236
  // if the date to highlight is disabled
@@ -245,7 +243,7 @@ var DateInput = function DateInput(props) {
245
243
  // if it's the start of the month
246
244
  // then bypass normal arrow navigation
247
245
  preventDownshiftDefault(event);
248
- var numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay); // then jump to the last day of the previous month
246
+ const numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay); // then jump to the last day of the previous month
249
247
 
250
248
  jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
251
249
  }
@@ -269,45 +267,31 @@ var DateInput = function DateInput(props) {
269
267
  children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
270
268
  monthLabel: calendarUtils.getMonthCalendarLabel(calendarDate, intl.locale),
271
269
  yearLabel: calendarUtils.getYearCalendarLabel(calendarDate, intl.locale),
272
- onPrevMonthClick: function onPrevMonthClick() {
273
- return jumpMonth(-1);
274
- },
270
+ onPrevMonthClick: () => jumpMonth(-1),
275
271
  onTodayClick: showToday,
276
- onNextMonthClick: function onNextMonthClick() {
277
- return jumpMonth(1);
278
- },
279
- onPrevYearClick: function onPrevYearClick() {
280
- return jumpMonth(-12);
281
- },
282
- onNextYearClick: function onNextYearClick() {
283
- return jumpMonth(12);
284
- }
272
+ onNextMonthClick: () => jumpMonth(1),
273
+ onPrevYearClick: () => jumpMonth(-12),
274
+ onNextYearClick: () => jumpMonth(12)
285
275
  }), jsxRuntime.jsxs(calendarUtils.CalendarContent, {
286
- children: [_mapInstanceProperty__default["default"](weekdays).call(weekdays, function (weekday) {
287
- return jsxRuntime.jsx(calendarUtils.CalendarDay, {
288
- type: "heading",
289
- children: weekday
290
- }, weekday);
291
- }), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, function (_, index) {
292
- return jsxRuntime.jsx(calendarUtils.CalendarDay, {
293
- type: "spacing"
294
- }, index);
295
- }), _mapInstanceProperty__default["default"](calendarItems).call(calendarItems, function (item, index) {
296
- return jsxRuntime.jsx(calendarUtils.CalendarDay, _objectSpread(_objectSpread({
297
- isToday: calendarUtils.isSameDay(today, item)
298
- }, getItemProps({
299
- disabled: !calendarUtils.getIsDateInRange(item, props.minValue, props.maxValue),
300
- item: item,
301
- onMouseOut: function onMouseOut() {
302
- // @ts-ignore
303
- setDownshiftHighlightedIndex(null);
304
- }
305
- })), {}, {
306
- isHighlighted: index === downshiftHighlightedIndex,
307
- isSelected: calendarUtils.isSameDay(item, props.value),
308
- children: calendarUtils.getCalendarDayLabel(item)
309
- }), item);
310
- })]
276
+ children: [_mapInstanceProperty__default["default"](weekdays).call(weekdays, weekday => jsxRuntime.jsx(calendarUtils.CalendarDay, {
277
+ type: "heading",
278
+ children: weekday
279
+ }, weekday)), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, (_, index) => jsxRuntime.jsx(calendarUtils.CalendarDay, {
280
+ type: "spacing"
281
+ }, index)), _mapInstanceProperty__default["default"](calendarItems).call(calendarItems, (item, index) => jsxRuntime.jsx(calendarUtils.CalendarDay, _objectSpread(_objectSpread({
282
+ isToday: calendarUtils.isSameDay(today, item)
283
+ }, getItemProps({
284
+ disabled: !calendarUtils.getIsDateInRange(item, props.minValue, props.maxValue),
285
+ item,
286
+ onMouseOut: () => {
287
+ // @ts-ignore
288
+ setDownshiftHighlightedIndex(null);
289
+ }
290
+ })), {}, {
291
+ isHighlighted: index === downshiftHighlightedIndex,
292
+ isSelected: calendarUtils.isSameDay(item, props.value),
293
+ children: calendarUtils.getCalendarDayLabel(item)
294
+ }), item))]
311
295
  })]
312
296
  }))]
313
297
  });
@@ -336,14 +320,12 @@ DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
336
320
  } : {};
337
321
  DateInput.displayName = 'DateInput';
338
322
 
339
- DateInput.isEmpty = function (value) {
340
- return value === '';
341
- };
323
+ DateInput.isEmpty = value => value === '';
342
324
 
343
325
  var DateInput$1 = DateInput;
344
326
 
345
327
  // NOTE: This string will be replaced on build time with the package version.
346
- var version = "15.15.0";
328
+ var version = "16.0.0";
347
329
 
348
330
  exports["default"] = DateInput$1;
349
331
  exports.version = version;
package/dist/commercetools-uikit-date-input.cjs.prod.js CHANGED
@@ -45,52 +45,50 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
45
45
 
46
46
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
47
47
 
48
- var preventDownshiftDefault = function preventDownshiftDefault(event) {
48
+ const preventDownshiftDefault = event => {
49
49
  event.nativeEvent.preventDownshiftDefault = true;
50
50
  };
51
51
 
52
- var DateInput = function DateInput(props) {
53
- var intl = reactIntl.useIntl();
52
+ const DateInput = props => {
53
+ const intl = reactIntl.useIntl();
54
54
 
55
- var _useState = react.useState(props.value || calendarUtils.getToday()),
56
- _useState2 = _slicedToArray(_useState, 2),
57
- calendarDate = _useState2[0],
58
- setCalendarDate = _useState2[1];
55
+ const _useState = react.useState(props.value || calendarUtils.getToday()),
56
+ _useState2 = _slicedToArray(_useState, 2),
57
+ calendarDate = _useState2[0],
58
+ setCalendarDate = _useState2[1];
59
59
 
60
- var _useState3 = react.useState([]),
61
- _useState4 = _slicedToArray(_useState3, 2),
62
- suggestedItems = _useState4[0],
63
- setSuggestedItems = _useState4[1];
60
+ const _useState3 = react.useState([]),
61
+ _useState4 = _slicedToArray(_useState3, 2),
62
+ suggestedItems = _useState4[0],
63
+ setSuggestedItems = _useState4[1];
64
64
 
65
- var _useState5 = react.useState(props.value === '' ? null : calendarUtils.getDateInMonth(props.value) - 1),
66
- _useState6 = _slicedToArray(_useState5, 2),
67
- highlightedIndex = _useState6[0],
68
- setHighlightedIndex = _useState6[1];
65
+ const _useState5 = react.useState(props.value === '' ? null : calendarUtils.getDateInMonth(props.value) - 1),
66
+ _useState6 = _slicedToArray(_useState5, 2),
67
+ highlightedIndex = _useState6[0],
68
+ setHighlightedIndex = _useState6[1];
69
69
 
70
- var inputRef = react.useRef(null);
70
+ const inputRef = react.useRef(null);
71
71
 
72
72
  if (!props.isReadOnly) ;
73
73
 
74
- var onChange = props.onChange;
75
- var emit = react.useCallback(function (value) {
76
- return onChange === null || onChange === void 0 ? void 0 : onChange({
77
- target: {
78
- id: props.id,
79
- name: props.name,
80
- // when cleared the value is null, but we always want it to be an
81
- // empty string when there is no value.
82
- value: value || ''
83
- }
84
- });
85
- }, [onChange, props.id, props.name]);
86
- var handleChange = react.useCallback(function (date) {
74
+ const onChange = props.onChange;
75
+ const emit = react.useCallback(value => onChange === null || onChange === void 0 ? void 0 : onChange({
76
+ target: {
77
+ id: props.id,
78
+ name: props.name,
79
+ // when cleared the value is null, but we always want it to be an
80
+ // empty string when there is no value.
81
+ value: value || ''
82
+ }
83
+ }), [onChange, props.id, props.name]);
84
+ const handleChange = react.useCallback(date => {
87
85
  var _inputRef$current;
88
86
 
89
87
  (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setSelectionRange(0, 100);
90
88
  emit(date);
91
89
  }, [inputRef, emit]);
92
- var onBlur = props.onBlur;
93
- var handleBlur = react.useCallback(function () {
90
+ const onBlur = props.onBlur;
91
+ const handleBlur = react.useCallback(() => {
94
92
  if (onBlur) onBlur({
95
93
  target: {
96
94
  id: props.id,
@@ -99,18 +97,18 @@ var DateInput = function DateInput(props) {
99
97
  });
100
98
  }, [onBlur, props.id, props.name]);
101
99
 
102
- var showToday = function showToday() {
100
+ const showToday = () => {
103
101
  var _inputRef$current2;
104
102
 
105
- var today = calendarUtils.getToday();
103
+ const today = calendarUtils.getToday();
106
104
  setCalendarDate(today);
107
105
  setHighlightedIndex(suggestedItems.length + calendarUtils.getDateInMonth(today) - 1);
108
106
  (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
109
107
  };
110
108
 
111
- var jumpMonth = function jumpMonth(amount) {
112
- var dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
113
- var nextDate = calendarUtils.changeMonth(calendarDate, amount);
109
+ const jumpMonth = function (amount) {
110
+ let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
111
+ const nextDate = calendarUtils.changeMonth(calendarDate, amount);
114
112
  setCalendarDate(nextDate);
115
113
  setHighlightedIndex(dayToHighlight);
116
114
  };
@@ -123,11 +121,11 @@ var DateInput = function DateInput(props) {
123
121
  selectedItem: props.value === '' ? null : props.value,
124
122
  highlightedIndex: highlightedIndex,
125
123
  onChange: handleChange,
126
- onStateChange: function onStateChange(changes) {
124
+ onStateChange: changes => {
127
125
  if (changes.hasOwnProperty('inputValue')) {
128
126
  // input changed because user typed
129
127
  if (changes.type === Downshift__default["default"].stateChangeTypes.changeInput) {
130
- var date = calendarUtils.parseInputToDate(changes.inputValue, intl.locale);
128
+ const date = calendarUtils.parseInputToDate(changes.inputValue, intl.locale);
131
129
 
132
130
  if (date === '') {
133
131
  setSuggestedItems([]);
@@ -156,10 +154,10 @@ var DateInput = function DateInput(props) {
156
154
  setHighlightedIndex(changes.highlightedIndex);
157
155
  }
158
156
  },
159
- children: function children(_ref) {
157
+ children: _ref => {
160
158
  var _context;
161
159
 
162
- var getInputProps = _ref.getInputProps,
160
+ let getInputProps = _ref.getInputProps,
163
161
  getMenuProps = _ref.getMenuProps,
164
162
  getItemProps = _ref.getItemProps,
165
163
  getToggleButtonProps = _ref.getToggleButtonProps,
@@ -170,13 +168,13 @@ var DateInput = function DateInput(props) {
170
168
  selectedItem = _ref.selectedItem,
171
169
  isOpen = _ref.isOpen,
172
170
  inputValue = _ref.inputValue;
173
- var calendarItems = calendarUtils.createCalendarItems(calendarDate);
174
- var paddingDayCount = calendarUtils.getPaddingDayCount(calendarDate, intl.locale);
171
+ const calendarItems = calendarUtils.createCalendarItems(calendarDate);
172
+ const paddingDayCount = calendarUtils.getPaddingDayCount(calendarDate, intl.locale);
175
173
 
176
- var paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context, undefined);
174
+ const paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context, undefined);
177
175
 
178
- var weekdays = calendarUtils.getWeekdayNames(intl.locale);
179
- var today = calendarUtils.getToday();
176
+ const weekdays = calendarUtils.getWeekdayNames(intl.locale);
177
+ const today = calendarUtils.getToday();
180
178
  return jsxRuntime.jsxs("div", {
181
179
  onFocus: props.onFocus,
182
180
  onBlur: handleBlur,
@@ -191,13 +189,13 @@ var DateInput = function DateInput(props) {
191
189
  'aria-labelledby': undefined,
192
190
  name: props.name,
193
191
  placeholder: typeof props.placeholder === 'string' ? props.placeholder : calendarTimeUtils.getLocalizedDateTimeFormatPattern(intl.locale),
194
- onMouseEnter: function onMouseEnter() {
192
+ onMouseEnter: () => {
195
193
  // we remove the highlight so that the user can use the
196
194
  // arrow keys to move the cursor when hovering
197
195
  // @ts-ignore
198
196
  if (isOpen) setDownshiftHighlightedIndex(null);
199
197
  },
200
- onKeyDown: function onKeyDown(event) {
198
+ onKeyDown: event => {
201
199
  if (props.isReadOnly) {
202
200
  preventDownshiftDefault(event);
203
201
  return;
@@ -209,7 +207,7 @@ var DateInput = function DateInput(props) {
209
207
 
210
208
 
211
209
  if (event.key === 'ArrowDown') {
212
- var nextDayToHighlight = calendarUtils.getNextDay(calendarItems[Number(highlightedIndex)]);
210
+ const nextDayToHighlight = calendarUtils.getNextDay(calendarItems[Number(highlightedIndex)]);
213
211
 
214
212
  if (!calendarUtils.getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
215
213
  // if the date to highlight is disabled
@@ -229,7 +227,7 @@ var DateInput = function DateInput(props) {
229
227
 
230
228
 
231
229
  if (event.key === 'ArrowUp') {
232
- var previousDay = calendarUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
230
+ const previousDay = calendarUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
233
231
 
234
232
  if (!calendarUtils.getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
235
233
  // if the date to highlight is disabled
@@ -242,7 +240,7 @@ var DateInput = function DateInput(props) {
242
240
  // if it's the start of the month
243
241
  // then bypass normal arrow navigation
244
242
  preventDownshiftDefault(event);
245
- var numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay); // then jump to the last day of the previous month
243
+ const numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay); // then jump to the last day of the previous month
246
244
 
247
245
  jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
248
246
  }
@@ -266,45 +264,31 @@ var DateInput = function DateInput(props) {
266
264
  children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
267
265
  monthLabel: calendarUtils.getMonthCalendarLabel(calendarDate, intl.locale),
268
266
  yearLabel: calendarUtils.getYearCalendarLabel(calendarDate, intl.locale),
269
- onPrevMonthClick: function onPrevMonthClick() {
270
- return jumpMonth(-1);
271
- },
267
+ onPrevMonthClick: () => jumpMonth(-1),
272
268
  onTodayClick: showToday,
273
- onNextMonthClick: function onNextMonthClick() {
274
- return jumpMonth(1);
275
- },
276
- onPrevYearClick: function onPrevYearClick() {
277
- return jumpMonth(-12);
278
- },
279
- onNextYearClick: function onNextYearClick() {
280
- return jumpMonth(12);
281
- }
269
+ onNextMonthClick: () => jumpMonth(1),
270
+ onPrevYearClick: () => jumpMonth(-12),
271
+ onNextYearClick: () => jumpMonth(12)
282
272
  }), jsxRuntime.jsxs(calendarUtils.CalendarContent, {
283
- children: [_mapInstanceProperty__default["default"](weekdays).call(weekdays, function (weekday) {
284
- return jsxRuntime.jsx(calendarUtils.CalendarDay, {
285
- type: "heading",
286
- children: weekday
287
- }, weekday);
288
- }), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, function (_, index) {
289
- return jsxRuntime.jsx(calendarUtils.CalendarDay, {
290
- type: "spacing"
291
- }, index);
292
- }), _mapInstanceProperty__default["default"](calendarItems).call(calendarItems, function (item, index) {
293
- return jsxRuntime.jsx(calendarUtils.CalendarDay, _objectSpread(_objectSpread({
294
- isToday: calendarUtils.isSameDay(today, item)
295
- }, getItemProps({
296
- disabled: !calendarUtils.getIsDateInRange(item, props.minValue, props.maxValue),
297
- item: item,
298
- onMouseOut: function onMouseOut() {
299
- // @ts-ignore
300
- setDownshiftHighlightedIndex(null);
301
- }
302
- })), {}, {
303
- isHighlighted: index === downshiftHighlightedIndex,
304
- isSelected: calendarUtils.isSameDay(item, props.value),
305
- children: calendarUtils.getCalendarDayLabel(item)
306
- }), item);
307
- })]
273
+ children: [_mapInstanceProperty__default["default"](weekdays).call(weekdays, weekday => jsxRuntime.jsx(calendarUtils.CalendarDay, {
274
+ type: "heading",
275
+ children: weekday
276
+ }, weekday)), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, (_, index) => jsxRuntime.jsx(calendarUtils.CalendarDay, {
277
+ type: "spacing"
278
+ }, index)), _mapInstanceProperty__default["default"](calendarItems).call(calendarItems, (item, index) => jsxRuntime.jsx(calendarUtils.CalendarDay, _objectSpread(_objectSpread({
279
+ isToday: calendarUtils.isSameDay(today, item)
280
+ }, getItemProps({
281
+ disabled: !calendarUtils.getIsDateInRange(item, props.minValue, props.maxValue),
282
+ item,
283
+ onMouseOut: () => {
284
+ // @ts-ignore
285
+ setDownshiftHighlightedIndex(null);
286
+ }
287
+ })), {}, {
288
+ isHighlighted: index === downshiftHighlightedIndex,
289
+ isSelected: calendarUtils.isSameDay(item, props.value),
290
+ children: calendarUtils.getCalendarDayLabel(item)
291
+ }), item))]
308
292
  })]
309
293
  }))]
310
294
  });
@@ -316,14 +300,12 @@ var DateInput = function DateInput(props) {
316
300
  DateInput.propTypes = {};
317
301
  DateInput.displayName = 'DateInput';
318
302
 
319
- DateInput.isEmpty = function (value) {
320
- return value === '';
321
- };
303
+ DateInput.isEmpty = value => value === '';
322
304
 
323
305
  var DateInput$1 = DateInput;
324
306
 
325
307
  // NOTE: This string will be replaced on build time with the package version.
326
- var version = "15.15.0";
308
+ var version = "16.0.0";
327
309
 
328
310
  exports["default"] = DateInput$1;
329
311
  exports.version = version;
package/dist/commercetools-uikit-date-input.esm.js CHANGED
@@ -25,54 +25,52 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
25
25
 
26
26
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
27
27
 
28
- var preventDownshiftDefault = function preventDownshiftDefault(event) {
28
+ const preventDownshiftDefault = event => {
29
29
  event.nativeEvent.preventDownshiftDefault = true;
30
30
  };
31
31
 
32
- var DateInput = function DateInput(props) {
33
- var intl = useIntl();
32
+ const DateInput = props => {
33
+ const intl = useIntl();
34
34
 
35
- var _useState = useState(props.value || getToday()),
36
- _useState2 = _slicedToArray(_useState, 2),
37
- calendarDate = _useState2[0],
38
- setCalendarDate = _useState2[1];
35
+ const _useState = useState(props.value || getToday()),
36
+ _useState2 = _slicedToArray(_useState, 2),
37
+ calendarDate = _useState2[0],
38
+ setCalendarDate = _useState2[1];
39
39
 
40
- var _useState3 = useState([]),
41
- _useState4 = _slicedToArray(_useState3, 2),
42
- suggestedItems = _useState4[0],
43
- setSuggestedItems = _useState4[1];
40
+ const _useState3 = useState([]),
41
+ _useState4 = _slicedToArray(_useState3, 2),
42
+ suggestedItems = _useState4[0],
43
+ setSuggestedItems = _useState4[1];
44
44
 
45
- var _useState5 = useState(props.value === '' ? null : getDateInMonth(props.value) - 1),
46
- _useState6 = _slicedToArray(_useState5, 2),
47
- highlightedIndex = _useState6[0],
48
- setHighlightedIndex = _useState6[1];
45
+ const _useState5 = useState(props.value === '' ? null : getDateInMonth(props.value) - 1),
46
+ _useState6 = _slicedToArray(_useState5, 2),
47
+ highlightedIndex = _useState6[0],
48
+ setHighlightedIndex = _useState6[1];
49
49
 
50
- var inputRef = useRef(null);
50
+ const inputRef = useRef(null);
51
51
 
52
52
  if (!props.isReadOnly) {
53
53
  process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'DateInput: `onChange` is required when input is not read only.') : void 0;
54
54
  }
55
55
 
56
- var onChange = props.onChange;
57
- var emit = useCallback(function (value) {
58
- return onChange === null || onChange === void 0 ? void 0 : onChange({
59
- target: {
60
- id: props.id,
61
- name: props.name,
62
- // when cleared the value is null, but we always want it to be an
63
- // empty string when there is no value.
64
- value: value || ''
65
- }
66
- });
67
- }, [onChange, props.id, props.name]);
68
- var handleChange = useCallback(function (date) {
56
+ const onChange = props.onChange;
57
+ const emit = useCallback(value => onChange === null || onChange === void 0 ? void 0 : onChange({
58
+ target: {
59
+ id: props.id,
60
+ name: props.name,
61
+ // when cleared the value is null, but we always want it to be an
62
+ // empty string when there is no value.
63
+ value: value || ''
64
+ }
65
+ }), [onChange, props.id, props.name]);
66
+ const handleChange = useCallback(date => {
69
67
  var _inputRef$current;
70
68
 
71
69
  (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setSelectionRange(0, 100);
72
70
  emit(date);
73
71
  }, [inputRef, emit]);
74
- var onBlur = props.onBlur;
75
- var handleBlur = useCallback(function () {
72
+ const onBlur = props.onBlur;
73
+ const handleBlur = useCallback(() => {
76
74
  if (onBlur) onBlur({
77
75
  target: {
78
76
  id: props.id,
@@ -81,18 +79,18 @@ var DateInput = function DateInput(props) {
81
79
  });
82
80
  }, [onBlur, props.id, props.name]);
83
81
 
84
- var showToday = function showToday() {
82
+ const showToday = () => {
85
83
  var _inputRef$current2;
86
84
 
87
- var today = getToday();
85
+ const today = getToday();
88
86
  setCalendarDate(today);
89
87
  setHighlightedIndex(suggestedItems.length + getDateInMonth(today) - 1);
90
88
  (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
91
89
  };
92
90
 
93
- var jumpMonth = function jumpMonth(amount) {
94
- var dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
95
- var nextDate = changeMonth(calendarDate, amount);
91
+ const jumpMonth = function (amount) {
92
+ let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
93
+ const nextDate = changeMonth(calendarDate, amount);
96
94
  setCalendarDate(nextDate);
97
95
  setHighlightedIndex(dayToHighlight);
98
96
  };
@@ -105,11 +103,11 @@ var DateInput = function DateInput(props) {
105
103
  selectedItem: props.value === '' ? null : props.value,
106
104
  highlightedIndex: highlightedIndex,
107
105
  onChange: handleChange,
108
- onStateChange: function onStateChange(changes) {
106
+ onStateChange: changes => {
109
107
  if (changes.hasOwnProperty('inputValue')) {
110
108
  // input changed because user typed
111
109
  if (changes.type === Downshift.stateChangeTypes.changeInput) {
112
- var date = parseInputToDate(changes.inputValue, intl.locale);
110
+ const date = parseInputToDate(changes.inputValue, intl.locale);
113
111
 
114
112
  if (date === '') {
115
113
  setSuggestedItems([]);
@@ -138,10 +136,10 @@ var DateInput = function DateInput(props) {
138
136
  setHighlightedIndex(changes.highlightedIndex);
139
137
  }
140
138
  },
141
- children: function children(_ref) {
139
+ children: _ref => {
142
140
  var _context;
143
141
 
144
- var getInputProps = _ref.getInputProps,
142
+ let getInputProps = _ref.getInputProps,
145
143
  getMenuProps = _ref.getMenuProps,
146
144
  getItemProps = _ref.getItemProps,
147
145
  getToggleButtonProps = _ref.getToggleButtonProps,
@@ -152,13 +150,13 @@ var DateInput = function DateInput(props) {
152
150
  selectedItem = _ref.selectedItem,
153
151
  isOpen = _ref.isOpen,
154
152
  inputValue = _ref.inputValue;
155
- var calendarItems = createCalendarItems(calendarDate);
156
- var paddingDayCount = getPaddingDayCount(calendarDate, intl.locale);
153
+ const calendarItems = createCalendarItems(calendarDate);
154
+ const paddingDayCount = getPaddingDayCount(calendarDate, intl.locale);
157
155
 
158
- var paddingDays = _fillInstanceProperty(_context = Array(paddingDayCount)).call(_context, undefined);
156
+ const paddingDays = _fillInstanceProperty(_context = Array(paddingDayCount)).call(_context, undefined);
159
157
 
160
- var weekdays = getWeekdayNames(intl.locale);
161
- var today = getToday();
158
+ const weekdays = getWeekdayNames(intl.locale);
159
+ const today = getToday();
162
160
  return jsxs("div", {
163
161
  onFocus: props.onFocus,
164
162
  onBlur: handleBlur,
@@ -173,13 +171,13 @@ var DateInput = function DateInput(props) {
173
171
  'aria-labelledby': undefined,
174
172
  name: props.name,
175
173
  placeholder: typeof props.placeholder === 'string' ? props.placeholder : getLocalizedDateTimeFormatPattern(intl.locale),
176
- onMouseEnter: function onMouseEnter() {
174
+ onMouseEnter: () => {
177
175
  // we remove the highlight so that the user can use the
178
176
  // arrow keys to move the cursor when hovering
179
177
  // @ts-ignore
180
178
  if (isOpen) setDownshiftHighlightedIndex(null);
181
179
  },
182
- onKeyDown: function onKeyDown(event) {
180
+ onKeyDown: event => {
183
181
  if (props.isReadOnly) {
184
182
  preventDownshiftDefault(event);
185
183
  return;
@@ -191,7 +189,7 @@ var DateInput = function DateInput(props) {
191
189
 
192
190
 
193
191
  if (event.key === 'ArrowDown') {
194
- var nextDayToHighlight = getNextDay(calendarItems[Number(highlightedIndex)]);
192
+ const nextDayToHighlight = getNextDay(calendarItems[Number(highlightedIndex)]);
195
193
 
196
194
  if (!getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
197
195
  // if the date to highlight is disabled
@@ -211,7 +209,7 @@ var DateInput = function DateInput(props) {
211
209
 
212
210
 
213
211
  if (event.key === 'ArrowUp') {
214
- var previousDay = getPreviousDay(calendarItems[Number(highlightedIndex)]);
212
+ const previousDay = getPreviousDay(calendarItems[Number(highlightedIndex)]);
215
213
 
216
214
  if (!getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
217
215
  // if the date to highlight is disabled
@@ -224,7 +222,7 @@ var DateInput = function DateInput(props) {
224
222
  // if it's the start of the month
225
223
  // then bypass normal arrow navigation
226
224
  preventDownshiftDefault(event);
227
- var numberOfDaysOfPrevMonth = getDaysInMonth(previousDay); // then jump to the last day of the previous month
225
+ const numberOfDaysOfPrevMonth = getDaysInMonth(previousDay); // then jump to the last day of the previous month
228
226
 
229
227
  jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
230
228
  }
@@ -248,45 +246,31 @@ var DateInput = function DateInput(props) {
248
246
  children: [jsx(CalendarHeader, {
249
247
  monthLabel: getMonthCalendarLabel(calendarDate, intl.locale),
250
248
  yearLabel: getYearCalendarLabel(calendarDate, intl.locale),
251
- onPrevMonthClick: function onPrevMonthClick() {
252
- return jumpMonth(-1);
253
- },
249
+ onPrevMonthClick: () => jumpMonth(-1),
254
250
  onTodayClick: showToday,
255
- onNextMonthClick: function onNextMonthClick() {
256
- return jumpMonth(1);
257
- },
258
- onPrevYearClick: function onPrevYearClick() {
259
- return jumpMonth(-12);
260
- },
261
- onNextYearClick: function onNextYearClick() {
262
- return jumpMonth(12);
263
- }
251
+ onNextMonthClick: () => jumpMonth(1),
252
+ onPrevYearClick: () => jumpMonth(-12),
253
+ onNextYearClick: () => jumpMonth(12)
264
254
  }), jsxs(CalendarContent, {
265
- children: [_mapInstanceProperty(weekdays).call(weekdays, function (weekday) {
266
- return jsx(CalendarDay, {
267
- type: "heading",
268
- children: weekday
269
- }, weekday);
270
- }), _mapInstanceProperty(paddingDays).call(paddingDays, function (_, index) {
271
- return jsx(CalendarDay, {
272
- type: "spacing"
273
- }, index);
274
- }), _mapInstanceProperty(calendarItems).call(calendarItems, function (item, index) {
275
- return jsx(CalendarDay, _objectSpread(_objectSpread({
276
- isToday: isSameDay(today, item)
277
- }, getItemProps({
278
- disabled: !getIsDateInRange(item, props.minValue, props.maxValue),
279
- item: item,
280
- onMouseOut: function onMouseOut() {
281
- // @ts-ignore
282
- setDownshiftHighlightedIndex(null);
283
- }
284
- })), {}, {
285
- isHighlighted: index === downshiftHighlightedIndex,
286
- isSelected: isSameDay(item, props.value),
287
- children: getCalendarDayLabel(item)
288
- }), item);
289
- })]
255
+ children: [_mapInstanceProperty(weekdays).call(weekdays, weekday => jsx(CalendarDay, {
256
+ type: "heading",
257
+ children: weekday
258
+ }, weekday)), _mapInstanceProperty(paddingDays).call(paddingDays, (_, index) => jsx(CalendarDay, {
259
+ type: "spacing"
260
+ }, index)), _mapInstanceProperty(calendarItems).call(calendarItems, (item, index) => jsx(CalendarDay, _objectSpread(_objectSpread({
261
+ isToday: isSameDay(today, item)
262
+ }, getItemProps({
263
+ disabled: !getIsDateInRange(item, props.minValue, props.maxValue),
264
+ item,
265
+ onMouseOut: () => {
266
+ // @ts-ignore
267
+ setDownshiftHighlightedIndex(null);
268
+ }
269
+ })), {}, {
270
+ isHighlighted: index === downshiftHighlightedIndex,
271
+ isSelected: isSameDay(item, props.value),
272
+ children: getCalendarDayLabel(item)
273
+ }), item))]
290
274
  })]
291
275
  }))]
292
276
  });
@@ -315,13 +299,11 @@ DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
315
299
  } : {};
316
300
  DateInput.displayName = 'DateInput';
317
301
 
318
- DateInput.isEmpty = function (value) {
319
- return value === '';
320
- };
302
+ DateInput.isEmpty = value => value === '';
321
303
 
322
304
  var DateInput$1 = DateInput;
323
305
 
324
306
  // NOTE: This string will be replaced on build time with the package version.
325
- var version = "15.15.0";
307
+ var version = "16.0.0";
326
308
 
327
309
  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": "15.15.0",
4
+ "version": "16.0.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": "15.15.0",
25
- "@commercetools-uikit/calendar-time-utils": "15.15.0",
26
- "@commercetools-uikit/calendar-utils": "15.15.0",
27
- "@commercetools-uikit/constraints": "15.15.0",
28
- "@commercetools-uikit/design-system": "15.15.0",
29
- "@commercetools-uikit/hooks": "15.15.0",
30
- "@commercetools-uikit/icons": "15.15.0",
31
- "@commercetools-uikit/secondary-icon-button": "15.15.0",
32
- "@commercetools-uikit/select-utils": "15.15.0",
33
- "@commercetools-uikit/spacings-inline": "15.15.0",
34
- "@commercetools-uikit/text": "15.15.0",
35
- "@commercetools-uikit/tooltip": "15.15.0",
36
- "@commercetools-uikit/utils": "15.15.0",
24
+ "@commercetools-uikit/accessible-button": "16.0.0",
25
+ "@commercetools-uikit/calendar-time-utils": "16.0.0",
26
+ "@commercetools-uikit/calendar-utils": "16.0.0",
27
+ "@commercetools-uikit/constraints": "16.0.0",
28
+ "@commercetools-uikit/design-system": "16.0.0",
29
+ "@commercetools-uikit/hooks": "16.0.0",
30
+ "@commercetools-uikit/icons": "16.0.0",
31
+ "@commercetools-uikit/secondary-icon-button": "16.0.0",
32
+ "@commercetools-uikit/select-utils": "16.0.0",
33
+ "@commercetools-uikit/spacings-inline": "16.0.0",
34
+ "@commercetools-uikit/text": "16.0.0",
35
+ "@commercetools-uikit/tooltip": "16.0.0",
36
+ "@commercetools-uikit/utils": "16.0.0",
37
37
  "@emotion/react": "^11.10.5",
38
38
  "@emotion/styled": "^11.10.5",
39
39
  "downshift": "6.1.12",
@@ -44,11 +44,11 @@
44
44
  "devDependencies": {
45
45
  "moment": "2.29.4",
46
46
  "react": "17.0.2",
47
- "react-intl": "^5.25.1"
47
+ "react-intl": "^6.3.2"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "moment": "2.x",
51
51
  "react": "17.x",
52
- "react-intl": "5.x"
52
+ "react-intl": "6.x"
53
53
  }
54
54
  }