@commercetools-uikit/date-range-input 14.0.0 → 14.0.3

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 +20 -20
  2. package/dist/commercetools-uikit-date-range-input.cjs.dev.js +20 -18
  3. package/dist/commercetools-uikit-date-range-input.cjs.prod.js +19 -17
  4. package/dist/commercetools-uikit-date-range-input.esm.js +20 -18
  5. package/dist/declarations/src/date-range-input.d.ts +7 -7
  6. package/package.json +12 -12
package/README.md CHANGED
@@ -45,42 +45,42 @@ export default Example;
45
45
 
46
46
  ## Properties
47
47
 
48
- | Props | Type | Required | Default | Description |
49
- | ---------------------- | -------------------------------------------------------------------------------------------- | :------: | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
50
- | `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. |
51
- | `value` | `Array: MomentInput[]` | ✅ | | The selected date range, must either be an empty array or an array of two strings holding dates formatted as "YYYY-MM-DD". |
52
- | `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. |
53
- | `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. |
54
- | `onChange` | `Function`<br/>[See signature.](#signature-onChange) | ✅ | | Called when the date range changes. Called with an event containing either an empty array (no value) or an array holding two string in this format: "YYYY-MM-DD".&#xA;<br />&#xA;Signature: `(event) => void` |
55
- | `isClearable` | `boolean` | | `true` | Allows the range to be cleared |
56
- | `onFocus` | `Function`<br/>[See signature.](#signature-onFocus) | | | Called when the date input gains focus. |
57
- | `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when the date input loses focus. |
58
- | `id` | `string` | | | Used as the HTML `id` attribute. |
59
- | `name` | `string` | | | Used as the HTML `name` attribute. |
60
- | `placeholder` | `string` | | | Placeholder value to show in the input field |
61
- | `isDisabled` | `boolean` | | | Disables the date picker |
62
- | `isReadOnly` | `boolean` | | | Disables the date picker menu and makes input field read-only |
63
- | `hasError` | `boolean` | | | Indicates the input field has an error |
64
- | `hasWarning` | `boolean` | | | Indicates the input field has warning |
48
+ | Props | Type | Required | Default | Description |
49
+ | ---------------------- | -------------------------------------------------------------------------------------------- | :------: | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
50
+ | `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. |
51
+ | `value` | `Array: MomentInput[]` | ✅ | | The selected date range, must either be an empty array or an array of two strings holding dates formatted as "YYYY-MM-DD". |
52
+ | `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. |
53
+ | `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. |
54
+ | `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Called when the date range changes. Called with an event containing either an empty array (no value) or an array holding two string in this format: "YYYY-MM-DD". |
55
+ | `isClearable` | `boolean` | | `true` | Allows the range to be cleared |
56
+ | `onFocus` | `Function`<br/>[See signature.](#signature-onFocus) | | | Called when the date input gains focus. |
57
+ | `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when the date input loses focus. |
58
+ | `id` | `string` | | | Used as the HTML `id` attribute. |
59
+ | `name` | `string` | | | Used as the HTML `name` attribute. |
60
+ | `placeholder` | `string` | | | Placeholder value to show in the input field |
61
+ | `isDisabled` | `boolean` | | | Disables the date picker |
62
+ | `isReadOnly` | `boolean` | | | Disables the date picker menu and makes input field read-only |
63
+ | `hasError` | `boolean` | | | Indicates the input field has an error |
64
+ | `hasWarning` | `boolean` | | | Indicates the input field has warning |
65
65
 
66
66
  ## Signatures
67
67
 
68
68
  ### Signature `onChange`
69
69
 
70
70
  ```ts
71
- (event: TEvent) => void
71
+ (event: TCustomEvent) => void
72
72
  ```
73
73
 
74
74
  ### Signature `onFocus`
75
75
 
76
76
  ```ts
77
- (event: TEvent) => void
77
+ (event: TCustomEvent) => void
78
78
  ```
79
79
 
80
80
  ### Signature `onBlur`
81
81
 
82
82
  ```ts
83
- (event: TEvent) => void
83
+ (event: TCustomEvent) => void
84
84
  ```
85
85
 
86
86
  ## `data-*` props
package/dist/commercetools-uikit-date-range-input.cjs.dev.js CHANGED
@@ -130,17 +130,17 @@ var getRange = function getRange(_ref) {
130
130
  };
131
131
  };
132
132
 
133
- var DateRangeCalendar = /*#__PURE__*/function (_Component) {
134
- _inherits(DateRangeCalendar, _Component);
133
+ var DateRangeInput = /*#__PURE__*/function (_Component) {
134
+ _inherits(DateRangeInput, _Component);
135
135
 
136
- var _super = _createSuper(DateRangeCalendar);
136
+ var _super = _createSuper(DateRangeInput);
137
137
 
138
- function DateRangeCalendar() {
138
+ function DateRangeInput() {
139
139
  var _context3;
140
140
 
141
141
  var _this;
142
142
 
143
- _classCallCheck(this, DateRangeCalendar);
143
+ _classCallCheck(this, DateRangeInput);
144
144
 
145
145
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
146
146
  args[_key] = arguments[_key];
@@ -196,7 +196,9 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
196
196
  };
197
197
 
198
198
  _this.emit = function (unsortedRange) {
199
- _this.props.onChange({
199
+ var _this$props$onChange, _this$props;
200
+
201
+ (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
200
202
  target: {
201
203
  id: _this.props.id,
202
204
  name: _this.props.name,
@@ -208,7 +210,7 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
208
210
  return _this;
209
211
  }
210
212
 
211
- _createClass(DateRangeCalendar, [{
213
+ _createClass(DateRangeInput, [{
212
214
  key: "render",
213
215
  value: function render() {
214
216
  var _this2 = this;
@@ -382,7 +384,7 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
382
384
  } // ArrowDown
383
385
 
384
386
 
385
- if (event.keyCode === 40) {
387
+ if (event.key === 'ArrowDown') {
386
388
  if (highlightedIndex + 1 >= calendarItems.length) {
387
389
  // if it's the end of the month
388
390
  // then bypass normal arrow navigation
@@ -393,7 +395,7 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
393
395
  } // ArrowUp
394
396
 
395
397
 
396
- if (event.keyCode === 38) {
398
+ if (event.key === 'ArrowUp') {
397
399
  var previousDay = calendarUtils.getPreviousDay(calendarItems[highlightedIndex]);
398
400
 
399
401
  if (highlightedIndex <= 0) {
@@ -504,31 +506,31 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
504
506
  return {
505
507
  prevLocale: props.intl.locale,
506
508
  // This is not the input value but the actual value passed to
507
- // DateRangeCalendar
509
+ // DateRangeInput
508
510
  prevValue: props.value,
509
511
  inputValue: calendarUtils.formatRange(props.value, props.intl.locale)
510
512
  };
511
513
  }
512
514
  }]);
513
515
 
514
- return DateRangeCalendar;
516
+ return DateRangeInput;
515
517
  }(react.Component);
516
518
 
517
- DateRangeCalendar.displayName = 'DateRangeCalendar';
518
- DateRangeCalendar.defaultProps = {
519
+ DateRangeInput.displayName = 'DateRangeInput';
520
+ DateRangeInput.defaultProps = {
519
521
  isClearable: true
520
522
  };
521
523
 
522
- DateRangeCalendar.isEmpty = function (range) {
524
+ DateRangeInput.isEmpty = function (range) {
523
525
  return range.length === 0;
524
526
  };
525
527
 
526
- DateRangeCalendar.propTypes = process.env.NODE_ENV !== "production" ? {
528
+ DateRangeInput.propTypes = process.env.NODE_ENV !== "production" ? {
527
529
  horizontalConstraint: _pt__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
528
530
  value: _pt__default["default"].arrayOf(_pt__default["default"].any).isRequired,
529
531
  'aria-invalid': _pt__default["default"].bool,
530
532
  'aria-errormessage': _pt__default["default"].string,
531
- onChange: _pt__default["default"].func.isRequired,
533
+ onChange: _pt__default["default"].func,
532
534
  isClearable: _pt__default["default"].bool,
533
535
  onFocus: _pt__default["default"].func,
534
536
  onBlur: _pt__default["default"].func,
@@ -540,10 +542,10 @@ DateRangeCalendar.propTypes = process.env.NODE_ENV !== "production" ? {
540
542
  hasError: _pt__default["default"].bool,
541
543
  hasWarning: _pt__default["default"].bool
542
544
  } : {};
543
- var dateRangeInput = reactIntl.injectIntl(DateRangeCalendar);
545
+ var dateRangeInput = reactIntl.injectIntl(DateRangeInput);
544
546
 
545
547
  // NOTE: This string will be replaced on build time with the package version.
546
- var version = "14.0.0";
548
+ var version = "14.0.3";
547
549
 
548
550
  exports["default"] = dateRangeInput;
549
551
  exports.version = version;
package/dist/commercetools-uikit-date-range-input.cjs.prod.js CHANGED
@@ -129,17 +129,17 @@ var getRange = function getRange(_ref) {
129
129
  };
130
130
  };
131
131
 
132
- var DateRangeCalendar = /*#__PURE__*/function (_Component) {
133
- _inherits(DateRangeCalendar, _Component);
132
+ var DateRangeInput = /*#__PURE__*/function (_Component) {
133
+ _inherits(DateRangeInput, _Component);
134
134
 
135
- var _super = _createSuper(DateRangeCalendar);
135
+ var _super = _createSuper(DateRangeInput);
136
136
 
137
- function DateRangeCalendar() {
137
+ function DateRangeInput() {
138
138
  var _context3;
139
139
 
140
140
  var _this;
141
141
 
142
- _classCallCheck(this, DateRangeCalendar);
142
+ _classCallCheck(this, DateRangeInput);
143
143
 
144
144
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
145
145
  args[_key] = arguments[_key];
@@ -195,7 +195,9 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
195
195
  };
196
196
 
197
197
  _this.emit = function (unsortedRange) {
198
- _this.props.onChange({
198
+ var _this$props$onChange, _this$props;
199
+
200
+ (_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,
@@ -207,7 +209,7 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
207
209
  return _this;
208
210
  }
209
211
 
210
- _createClass(DateRangeCalendar, [{
212
+ _createClass(DateRangeInput, [{
211
213
  key: "render",
212
214
  value: function render() {
213
215
  var _this2 = this;
@@ -381,7 +383,7 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
381
383
  } // ArrowDown
382
384
 
383
385
 
384
- if (event.keyCode === 40) {
386
+ if (event.key === 'ArrowDown') {
385
387
  if (highlightedIndex + 1 >= calendarItems.length) {
386
388
  // if it's the end of the month
387
389
  // then bypass normal arrow navigation
@@ -392,7 +394,7 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
392
394
  } // ArrowUp
393
395
 
394
396
 
395
- if (event.keyCode === 38) {
397
+ if (event.key === 'ArrowUp') {
396
398
  var previousDay = calendarUtils.getPreviousDay(calendarItems[highlightedIndex]);
397
399
 
398
400
  if (highlightedIndex <= 0) {
@@ -503,30 +505,30 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
503
505
  return {
504
506
  prevLocale: props.intl.locale,
505
507
  // This is not the input value but the actual value passed to
506
- // DateRangeCalendar
508
+ // DateRangeInput
507
509
  prevValue: props.value,
508
510
  inputValue: calendarUtils.formatRange(props.value, props.intl.locale)
509
511
  };
510
512
  }
511
513
  }]);
512
514
 
513
- return DateRangeCalendar;
515
+ return DateRangeInput;
514
516
  }(react.Component);
515
517
 
516
- DateRangeCalendar.displayName = 'DateRangeCalendar';
517
- DateRangeCalendar.defaultProps = {
518
+ DateRangeInput.displayName = 'DateRangeInput';
519
+ DateRangeInput.defaultProps = {
518
520
  isClearable: true
519
521
  };
520
522
 
521
- DateRangeCalendar.isEmpty = function (range) {
523
+ DateRangeInput.isEmpty = function (range) {
522
524
  return range.length === 0;
523
525
  };
524
526
 
525
- DateRangeCalendar.propTypes = {};
526
- var dateRangeInput = reactIntl.injectIntl(DateRangeCalendar);
527
+ DateRangeInput.propTypes = {};
528
+ var dateRangeInput = reactIntl.injectIntl(DateRangeInput);
527
529
 
528
530
  // NOTE: This string will be replaced on build time with the package version.
529
- var version = "14.0.0";
531
+ var version = "14.0.3";
530
532
 
531
533
  exports["default"] = dateRangeInput;
532
534
  exports.version = version;
package/dist/commercetools-uikit-date-range-input.esm.js CHANGED
@@ -106,17 +106,17 @@ var getRange = function getRange(_ref) {
106
106
  };
107
107
  };
108
108
 
109
- var DateRangeCalendar = /*#__PURE__*/function (_Component) {
110
- _inherits(DateRangeCalendar, _Component);
109
+ var DateRangeInput = /*#__PURE__*/function (_Component) {
110
+ _inherits(DateRangeInput, _Component);
111
111
 
112
- var _super = _createSuper(DateRangeCalendar);
112
+ var _super = _createSuper(DateRangeInput);
113
113
 
114
- function DateRangeCalendar() {
114
+ function DateRangeInput() {
115
115
  var _context3;
116
116
 
117
117
  var _this;
118
118
 
119
- _classCallCheck(this, DateRangeCalendar);
119
+ _classCallCheck(this, DateRangeInput);
120
120
 
121
121
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
122
122
  args[_key] = arguments[_key];
@@ -172,7 +172,9 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
172
172
  };
173
173
 
174
174
  _this.emit = function (unsortedRange) {
175
- _this.props.onChange({
175
+ var _this$props$onChange, _this$props;
176
+
177
+ (_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,
@@ -184,7 +186,7 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
184
186
  return _this;
185
187
  }
186
188
 
187
- _createClass(DateRangeCalendar, [{
189
+ _createClass(DateRangeInput, [{
188
190
  key: "render",
189
191
  value: function render() {
190
192
  var _this2 = this;
@@ -358,7 +360,7 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
358
360
  } // ArrowDown
359
361
 
360
362
 
361
- if (event.keyCode === 40) {
363
+ if (event.key === 'ArrowDown') {
362
364
  if (highlightedIndex + 1 >= calendarItems.length) {
363
365
  // if it's the end of the month
364
366
  // then bypass normal arrow navigation
@@ -369,7 +371,7 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
369
371
  } // ArrowUp
370
372
 
371
373
 
372
- if (event.keyCode === 38) {
374
+ if (event.key === 'ArrowUp') {
373
375
  var previousDay = getPreviousDay(calendarItems[highlightedIndex]);
374
376
 
375
377
  if (highlightedIndex <= 0) {
@@ -480,31 +482,31 @@ var DateRangeCalendar = /*#__PURE__*/function (_Component) {
480
482
  return {
481
483
  prevLocale: props.intl.locale,
482
484
  // This is not the input value but the actual value passed to
483
- // DateRangeCalendar
485
+ // DateRangeInput
484
486
  prevValue: props.value,
485
487
  inputValue: formatRange(props.value, props.intl.locale)
486
488
  };
487
489
  }
488
490
  }]);
489
491
 
490
- return DateRangeCalendar;
492
+ return DateRangeInput;
491
493
  }(Component);
492
494
 
493
- DateRangeCalendar.displayName = 'DateRangeCalendar';
494
- DateRangeCalendar.defaultProps = {
495
+ DateRangeInput.displayName = 'DateRangeInput';
496
+ DateRangeInput.defaultProps = {
495
497
  isClearable: true
496
498
  };
497
499
 
498
- DateRangeCalendar.isEmpty = function (range) {
500
+ DateRangeInput.isEmpty = function (range) {
499
501
  return range.length === 0;
500
502
  };
501
503
 
502
- DateRangeCalendar.propTypes = process.env.NODE_ENV !== "production" ? {
504
+ DateRangeInput.propTypes = process.env.NODE_ENV !== "production" ? {
503
505
  horizontalConstraint: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
504
506
  value: _pt.arrayOf(_pt.any).isRequired,
505
507
  'aria-invalid': _pt.bool,
506
508
  'aria-errormessage': _pt.string,
507
- onChange: _pt.func.isRequired,
509
+ onChange: _pt.func,
508
510
  isClearable: _pt.bool,
509
511
  onFocus: _pt.func,
510
512
  onBlur: _pt.func,
@@ -516,9 +518,9 @@ DateRangeCalendar.propTypes = process.env.NODE_ENV !== "production" ? {
516
518
  hasError: _pt.bool,
517
519
  hasWarning: _pt.bool
518
520
  } : {};
519
- var dateRangeInput = injectIntl(DateRangeCalendar);
521
+ var dateRangeInput = injectIntl(DateRangeInput);
520
522
 
521
523
  // NOTE: This string will be replaced on build time with the package version.
522
- var version = "14.0.0";
524
+ var version = "14.0.3";
523
525
 
524
526
  export { dateRangeInput as default, version };
package/dist/declarations/src/date-range-input.d.ts CHANGED
@@ -1,22 +1,22 @@
1
1
  /// <reference types="react" />
2
2
  import { type WrappedComponentProps } from 'react-intl';
3
3
  import type { MomentInput } from 'moment';
4
- declare type TEvent = {
4
+ declare type TCustomEvent = {
5
5
  target: {
6
6
  id?: string;
7
7
  name?: string;
8
8
  value?: MomentInput[];
9
9
  };
10
10
  };
11
- declare type TDateRangeCalendarProps = {
11
+ declare type TDateRangeInputProps = {
12
12
  horizontalConstraint?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
13
13
  value: MomentInput[];
14
14
  'aria-invalid'?: boolean;
15
15
  'aria-errormessage'?: string;
16
- onChange: (event: TEvent) => void;
16
+ onChange?: (event: TCustomEvent) => void;
17
17
  isClearable?: boolean;
18
- onFocus?: (event: TEvent) => void;
19
- onBlur?: (event: TEvent) => void;
18
+ onFocus?: (event: TCustomEvent) => void;
19
+ onBlur?: (event: TCustomEvent) => void;
20
20
  id?: string;
21
21
  name?: string;
22
22
  placeholder?: string;
@@ -25,7 +25,7 @@ declare type TDateRangeCalendarProps = {
25
25
  hasError?: boolean;
26
26
  hasWarning?: boolean;
27
27
  } & WrappedComponentProps;
28
- declare const _default: import("react").FC<import("react-intl").WithIntlProps<TDateRangeCalendarProps>> & {
29
- WrappedComponent: import("react").ComponentType<TDateRangeCalendarProps>;
28
+ declare const _default: import("react").FC<import("react-intl").WithIntlProps<TDateRangeInputProps>> & {
29
+ WrappedComponent: import("react").ComponentType<TDateRangeInputProps>;
30
30
  };
31
31
  export default _default;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/date-range-input",
3
3
  "description": "The `DateRangeInput` component allows the user to select a date range.",
4
- "version": "14.0.0",
4
+ "version": "14.0.3",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,18 +21,18 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.17.2",
23
23
  "@babel/runtime-corejs3": "^7.17.2",
24
- "@commercetools-uikit/accessible-button": "14.0.0",
25
- "@commercetools-uikit/calendar-utils": "14.0.0",
26
- "@commercetools-uikit/constraints": "14.0.0",
24
+ "@commercetools-uikit/accessible-button": "14.0.1",
25
+ "@commercetools-uikit/calendar-utils": "14.0.3",
26
+ "@commercetools-uikit/constraints": "14.0.1",
27
27
  "@commercetools-uikit/design-system": "14.0.0",
28
- "@commercetools-uikit/hooks": "14.0.0",
29
- "@commercetools-uikit/icons": "14.0.0",
30
- "@commercetools-uikit/secondary-icon-button": "14.0.0",
31
- "@commercetools-uikit/select-utils": "14.0.0",
32
- "@commercetools-uikit/spacings-inline": "14.0.0",
33
- "@commercetools-uikit/text": "14.0.0",
34
- "@commercetools-uikit/tooltip": "14.0.0",
35
- "@commercetools-uikit/utils": "14.0.0",
28
+ "@commercetools-uikit/hooks": "14.0.3",
29
+ "@commercetools-uikit/icons": "14.0.1",
30
+ "@commercetools-uikit/secondary-icon-button": "14.0.2",
31
+ "@commercetools-uikit/select-utils": "14.0.1",
32
+ "@commercetools-uikit/spacings-inline": "14.0.1",
33
+ "@commercetools-uikit/text": "14.0.1",
34
+ "@commercetools-uikit/tooltip": "14.0.3",
35
+ "@commercetools-uikit/utils": "14.0.1",
36
36
  "@emotion/react": "^11.4.0",
37
37
  "@emotion/styled": "^11.3.0",
38
38
  "downshift": "6.1.7",