@commercetools-uikit/date-time-input 13.0.4 → 14.0.2

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/README.md +3 -3
  2. package/dist/commercetools-uikit-date-time-input.cjs.dev.js +12 -6
  3. package/dist/commercetools-uikit-date-time-input.cjs.prod.js +9 -5
  4. package/dist/commercetools-uikit-date-time-input.esm.js +13 -7
  5. package/dist/declarations/src/date-time-input.d.ts +4 -4
  6. package/package.json +17 -17
package/README.md CHANGED
@@ -54,7 +54,7 @@ export default Example;
54
54
  | `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. |
55
55
  | `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input field. |
56
56
  | `value` | `string` | ✅ | | The selected date, must either be an empty string or a date formatted in ISO 8601 (e.g. "2018-10-04T09:00:00.000Z"). |
57
- | `onChange` | `Function`<br/>[See signature.](#signature-onChange) | ✅ | | Called when the date changes. Called with an event containing an empty string (no value) or a string in this format: "YYYY-MM-DD".&#xA;<br /> |
57
+ | `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Called when the date changes. Called with an event containing an empty string (no value) or a string in this format: "YYYY-MM-DD". |
58
58
  | `onFocus` | `FocusEventHandler` | | | Called when the date input gains focus. |
59
59
  | `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when the date input loses focus. |
60
60
  | `timeZone` | `string` | ✅ | | Specifies the time zone in which the calendar and selected values are shown. It also influences how entered dates and times are parsed.&#xA;Get list of timezone with `moment.tz.names()` [See moment docs](https://momentjs.com/timezone/docs/#/data-loading/getting-zone-names/) |
@@ -71,13 +71,13 @@ export default Example;
71
71
  ### Signature `onChange`
72
72
 
73
73
  ```ts
74
- (event: TEvent) => void
74
+ (event: TCustomEvent) => void
75
75
  ```
76
76
 
77
77
  ### Signature `onBlur`
78
78
 
79
79
  ```ts
80
- (event: TEvent) => void
80
+ (event: TCustomEvent) => void
81
81
  ```
82
82
 
83
83
  ### `props.timeZone`
package/dist/commercetools-uikit-date-time-input.cjs.dev.js CHANGED
@@ -195,7 +195,9 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
195
195
  };
196
196
 
197
197
  _this.emit = function (value) {
198
- return _this.props.onChange({
198
+ var _this$props$onChange, _this$props;
199
+
200
+ return (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
199
201
  target: {
200
202
  id: _this.props.id,
201
203
  name: _this.props.name,
@@ -215,6 +217,10 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
215
217
  var _context2,
216
218
  _this2 = this;
217
219
 
220
+ if (!this.props.isReadOnly) {
221
+ process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'DateTimeInput: `onChange` is required when input is not read only.') : void 0;
222
+ }
223
+
218
224
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
219
225
  max: this.props.horizontalConstraint,
220
226
  children: jsxRuntime.jsx(Downshift__default["default"] // Setting the key to the timeZone conveniently forces a rerender
@@ -299,7 +305,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
299
305
  inputValue = _ref.inputValue,
300
306
  isOpen = _ref.isOpen;
301
307
  var suggestedItems = _this2.state.suggestedItems;
302
- var calendarItems = calendarTimeUtils.createCalendarItems(_this2.state.calendarDate, _this2.state.timeString, _this2.props.intl, _this2.props.timeZone);
308
+ var calendarItems = calendarTimeUtils.createCalendarItems(_this2.state.calendarDate, _this2.state.timeString, _this2.props.timeZone);
303
309
  var paddingDayCount = calendarTimeUtils.getPaddingDayCount(_this2.state.calendarDate, _this2.props.intl.locale, _this2.props.timeZone);
304
310
 
305
311
  var paddingDays = _fillInstanceProperty__default["default"](_context3 = Array(paddingDayCount)).call(_context3, undefined);
@@ -344,7 +350,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
344
350
  } // ArrowDown
345
351
 
346
352
 
347
- if (event.keyCode === 40) {
353
+ if (event.key === 'ArrowDown') {
348
354
  if (Number(highlightedIndex) + 1 >= calendarItems.length) {
349
355
  // if it's the end of the month
350
356
  // then bypass normal arrow navigation
@@ -355,7 +361,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
355
361
  } // ArrowUp
356
362
 
357
363
 
358
- if (event.keyCode === 38) {
364
+ if (event.key === 'ArrowUp') {
359
365
  var previousDay = calendarTimeUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
360
366
 
361
367
  if (Number(highlightedIndex) <= 0) {
@@ -493,7 +499,7 @@ DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
493
499
  'aria-errormessage': _pt__default["default"].string,
494
500
  horizontalConstraint: _pt__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
495
501
  value: _pt__default["default"].string.isRequired,
496
- onChange: _pt__default["default"].func.isRequired,
502
+ onChange: _pt__default["default"].func,
497
503
  onFocus: _pt__default["default"].func,
498
504
  onBlur: _pt__default["default"].func,
499
505
  timeZone: _pt__default["default"].string.isRequired,
@@ -508,7 +514,7 @@ DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
508
514
  var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
509
515
 
510
516
  // NOTE: This string will be replaced on build time with the package version.
511
- var version = "13.0.4";
517
+ var version = "14.0.2";
512
518
 
513
519
  exports["default"] = dateTimeInput;
514
520
  exports.version = version;
package/dist/commercetools-uikit-date-time-input.cjs.prod.js CHANGED
@@ -191,7 +191,9 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
191
191
  };
192
192
 
193
193
  _this.emit = function (value) {
194
- return _this.props.onChange({
194
+ var _this$props$onChange, _this$props;
195
+
196
+ return (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
195
197
  target: {
196
198
  id: _this.props.id,
197
199
  name: _this.props.name,
@@ -211,6 +213,8 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
211
213
  var _context2,
212
214
  _this2 = this;
213
215
 
216
+ if (!this.props.isReadOnly) ;
217
+
214
218
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
215
219
  max: this.props.horizontalConstraint,
216
220
  children: jsxRuntime.jsx(Downshift__default["default"] // Setting the key to the timeZone conveniently forces a rerender
@@ -295,7 +299,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
295
299
  inputValue = _ref.inputValue,
296
300
  isOpen = _ref.isOpen;
297
301
  var suggestedItems = _this2.state.suggestedItems;
298
- var calendarItems = calendarTimeUtils.createCalendarItems(_this2.state.calendarDate, _this2.state.timeString, _this2.props.intl, _this2.props.timeZone);
302
+ var calendarItems = calendarTimeUtils.createCalendarItems(_this2.state.calendarDate, _this2.state.timeString, _this2.props.timeZone);
299
303
  var paddingDayCount = calendarTimeUtils.getPaddingDayCount(_this2.state.calendarDate, _this2.props.intl.locale, _this2.props.timeZone);
300
304
 
301
305
  var paddingDays = _fillInstanceProperty__default["default"](_context3 = Array(paddingDayCount)).call(_context3, undefined);
@@ -340,7 +344,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
340
344
  } // ArrowDown
341
345
 
342
346
 
343
- if (event.keyCode === 40) {
347
+ if (event.key === 'ArrowDown') {
344
348
  if (Number(highlightedIndex) + 1 >= calendarItems.length) {
345
349
  // if it's the end of the month
346
350
  // then bypass normal arrow navigation
@@ -351,7 +355,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
351
355
  } // ArrowUp
352
356
 
353
357
 
354
- if (event.keyCode === 38) {
358
+ if (event.key === 'ArrowUp') {
355
359
  var previousDay = calendarTimeUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
356
360
 
357
361
  if (Number(highlightedIndex) <= 0) {
@@ -488,7 +492,7 @@ DateTimeInput.propTypes = {};
488
492
  var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
489
493
 
490
494
  // NOTE: This string will be replaced on build time with the package version.
491
- var version = "13.0.4";
495
+ var version = "14.0.2";
492
496
 
493
497
  exports["default"] = dateTimeInput;
494
498
  exports.version = version;
package/dist/commercetools-uikit-date-time-input.esm.js CHANGED
@@ -22,7 +22,7 @@ import { createRef, Component } from 'react';
22
22
  import Downshift from 'downshift';
23
23
  import { defineMessages, injectIntl } from 'react-intl';
24
24
  import Constraints from '@commercetools-uikit/constraints';
25
- import { parseTime, filterDataAttributes } from '@commercetools-uikit/utils';
25
+ import { parseTime, warning, filterDataAttributes } from '@commercetools-uikit/utils';
26
26
  import { getToday, getDateInMonth, changeMonth, getStartOf, changeTime, createItemDateTimeToString, formatTime, createSuggestedItems, createCalendarItems, getPaddingDayCount, getWeekdayNames, parseInputText, getPreviousDay, getDaysInMonth, getMonthCalendarLabel, getYearCalendarLabel, isSameDay, getCalendarDayLabel } from '@commercetools-uikit/calendar-time-utils';
27
27
  import { CalendarBody, CalendarMenu, CalendarHeader, CalendarContent, CalendarDay } from '@commercetools-uikit/calendar-utils';
28
28
  import { css } from '@emotion/react';
@@ -172,7 +172,9 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
172
172
  };
173
173
 
174
174
  _this.emit = function (value) {
175
- return _this.props.onChange({
175
+ var _this$props$onChange, _this$props;
176
+
177
+ return (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
176
178
  target: {
177
179
  id: _this.props.id,
178
180
  name: _this.props.name,
@@ -192,6 +194,10 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
192
194
  var _context2,
193
195
  _this2 = this;
194
196
 
197
+ if (!this.props.isReadOnly) {
198
+ process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'DateTimeInput: `onChange` is required when input is not read only.') : void 0;
199
+ }
200
+
195
201
  return jsx(Constraints.Horizontal, {
196
202
  max: this.props.horizontalConstraint,
197
203
  children: jsx(Downshift // Setting the key to the timeZone conveniently forces a rerender
@@ -276,7 +282,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
276
282
  inputValue = _ref.inputValue,
277
283
  isOpen = _ref.isOpen;
278
284
  var suggestedItems = _this2.state.suggestedItems;
279
- var calendarItems = createCalendarItems(_this2.state.calendarDate, _this2.state.timeString, _this2.props.intl, _this2.props.timeZone);
285
+ var calendarItems = createCalendarItems(_this2.state.calendarDate, _this2.state.timeString, _this2.props.timeZone);
280
286
  var paddingDayCount = getPaddingDayCount(_this2.state.calendarDate, _this2.props.intl.locale, _this2.props.timeZone);
281
287
 
282
288
  var paddingDays = _fillInstanceProperty(_context3 = Array(paddingDayCount)).call(_context3, undefined);
@@ -321,7 +327,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
321
327
  } // ArrowDown
322
328
 
323
329
 
324
- if (event.keyCode === 40) {
330
+ if (event.key === 'ArrowDown') {
325
331
  if (Number(highlightedIndex) + 1 >= calendarItems.length) {
326
332
  // if it's the end of the month
327
333
  // then bypass normal arrow navigation
@@ -332,7 +338,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
332
338
  } // ArrowUp
333
339
 
334
340
 
335
- if (event.keyCode === 38) {
341
+ if (event.key === 'ArrowUp') {
336
342
  var previousDay = getPreviousDay(calendarItems[Number(highlightedIndex)]);
337
343
 
338
344
  if (Number(highlightedIndex) <= 0) {
@@ -470,7 +476,7 @@ DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
470
476
  'aria-errormessage': _pt.string,
471
477
  horizontalConstraint: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
472
478
  value: _pt.string.isRequired,
473
- onChange: _pt.func.isRequired,
479
+ onChange: _pt.func,
474
480
  onFocus: _pt.func,
475
481
  onBlur: _pt.func,
476
482
  timeZone: _pt.string.isRequired,
@@ -485,6 +491,6 @@ DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
485
491
  var dateTimeInput = injectIntl(DateTimeInput);
486
492
 
487
493
  // NOTE: This string will be replaced on build time with the package version.
488
- var version = "13.0.4";
494
+ var version = "14.0.2";
489
495
 
490
496
  export { dateTimeInput as default, version };
package/dist/declarations/src/date-time-input.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { type FocusEventHandler } from 'react';
2
2
  import { type WrappedComponentProps } from 'react-intl';
3
- declare type TEvent = {
3
+ declare type TCustomEvent = {
4
4
  target: {
5
5
  id?: string;
6
6
  name?: string;
@@ -12,9 +12,9 @@ export declare type TDateTimeInputProps = {
12
12
  'aria-errormessage'?: string;
13
13
  horizontalConstraint?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
14
14
  value: string;
15
- onChange: (event: TEvent) => void;
16
- onFocus?: FocusEventHandler;
17
- onBlur?: (event: TEvent) => void;
15
+ onChange?: (event: TCustomEvent) => void;
16
+ onFocus?: FocusEventHandler<HTMLDivElement>;
17
+ onBlur?: (event: TCustomEvent) => void;
18
18
  timeZone: string;
19
19
  id?: string;
20
20
  name?: string;
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": "13.0.4",
4
+ "version": "14.0.2",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -9,7 +9,7 @@
9
9
  "directory": "packages/components/inputs/date-time-input"
10
10
  },
11
11
  "homepage": "https://uikit.commercetools.com",
12
- "keywords": ["javascript", "design system", "react", "uikit"],
12
+ "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
13
13
  "license": "MIT",
14
14
  "publishConfig": {
15
15
  "access": "public"
@@ -19,21 +19,21 @@
19
19
  "module": "dist/commercetools-uikit-date-time-input.esm.js",
20
20
  "files": ["dist"],
21
21
  "dependencies": {
22
- "@babel/runtime": "7.17.2",
23
- "@babel/runtime-corejs3": "7.17.2",
24
- "@commercetools-uikit/accessible-button": "13.0.4",
25
- "@commercetools-uikit/calendar-time-utils": "13.0.2",
26
- "@commercetools-uikit/calendar-utils": "13.0.4",
27
- "@commercetools-uikit/constraints": "13.0.2",
28
- "@commercetools-uikit/design-system": "13.0.0",
29
- "@commercetools-uikit/hooks": "13.0.2",
30
- "@commercetools-uikit/icons": "13.0.2",
31
- "@commercetools-uikit/secondary-icon-button": "13.0.4",
32
- "@commercetools-uikit/select-utils": "13.0.4",
33
- "@commercetools-uikit/spacings-inline": "13.0.2",
34
- "@commercetools-uikit/text": "13.0.4",
35
- "@commercetools-uikit/tooltip": "13.0.2",
36
- "@commercetools-uikit/utils": "13.0.2",
22
+ "@babel/runtime": "^7.17.2",
23
+ "@babel/runtime-corejs3": "^7.17.2",
24
+ "@commercetools-uikit/accessible-button": "14.0.1",
25
+ "@commercetools-uikit/calendar-time-utils": "14.0.2",
26
+ "@commercetools-uikit/calendar-utils": "14.0.2",
27
+ "@commercetools-uikit/constraints": "14.0.1",
28
+ "@commercetools-uikit/design-system": "14.0.0",
29
+ "@commercetools-uikit/hooks": "14.0.1",
30
+ "@commercetools-uikit/icons": "14.0.1",
31
+ "@commercetools-uikit/secondary-icon-button": "14.0.2",
32
+ "@commercetools-uikit/select-utils": "14.0.1",
33
+ "@commercetools-uikit/spacings-inline": "14.0.1",
34
+ "@commercetools-uikit/text": "14.0.1",
35
+ "@commercetools-uikit/tooltip": "14.0.1",
36
+ "@commercetools-uikit/utils": "14.0.1",
37
37
  "@emotion/react": "^11.4.0",
38
38
  "@emotion/styled": "^11.3.0",
39
39
  "downshift": "6.1.7",