@commercetools-uikit/date-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 +20 -20
  2. package/dist/commercetools-uikit-date-input.cjs.dev.js +10 -5
  3. package/dist/commercetools-uikit-date-input.cjs.prod.js +7 -4
  4. package/dist/commercetools-uikit-date-input.esm.js +11 -6
  5. package/dist/declarations/src/date-input.d.ts +4 -4
  6. package/package.json +16 -16
package/README.md CHANGED
@@ -45,37 +45,37 @@ 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` | `string` | ✅ | | The selected date, must either be an empty string or a date formatted as "YYYY-MM-DD". |
52
- | `onChange` | `Function`<br/>[See signature.](#signature-onChange) | ✅ | | Called when the date changes. Called with an event containing either an empty string (no value) or a string in this format: "YYYY-MM-DD".&#xA;<br />&#xA;Signature: `(event) => void` |
53
- | `onFocus` | `FocusEventHandler` | | | Called when the date input gains focus. |
54
- | `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when the date input loses focus. |
55
- | `id` | `string` | | | Used as the HTML `id` attribute. |
56
- | `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. |
57
- | `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. |
58
- | `name` | `string` | | | Used as the HTML `name` attribute. |
59
- | `placeholder` | `string` | | | Placeholder value to show in the input field |
60
- | `isDisabled` | `boolean` | | | Disables the date picker |
61
- | `isReadOnly` | `boolean` | | | Disables the date picker menu and makes input field read-only |
62
- | `hasError` | `boolean` | | | Indicates the input field has an error |
63
- | `hasWarning` | `boolean` | | | Indicates the input field has a warning |
64
- | `minValue` | `string` | | | A minimum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD". |
65
- | `maxValue` | `string` | | | A maximum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD". |
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` | `string` | ✅ | | The selected date, must either be an empty string or a date formatted as "YYYY-MM-DD". |
52
+ | `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Called when the date changes. Called with an event containing either an empty string (no value) or a string in this format: "YYYY-MM-DD". |
53
+ | `onFocus` | `FocusEventHandler` | | | Called when the date input gains focus. |
54
+ | `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when the date input loses focus. |
55
+ | `id` | `string` | | | Used as the HTML `id` attribute. |
56
+ | `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. |
57
+ | `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. |
58
+ | `name` | `string` | | | Used as the HTML `name` attribute. |
59
+ | `placeholder` | `string` | | | Placeholder value to show in the input field |
60
+ | `isDisabled` | `boolean` | | | Disables the date picker |
61
+ | `isReadOnly` | `boolean` | | | Disables the date picker menu and makes input field read-only |
62
+ | `hasError` | `boolean` | | | Indicates the input field has an error |
63
+ | `hasWarning` | `boolean` | | | Indicates the input field has a warning |
64
+ | `minValue` | `string` | | | A minimum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD". |
65
+ | `maxValue` | `string` | | | A maximum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD". |
66
66
 
67
67
  ## Signatures
68
68
 
69
69
  ### Signature `onChange`
70
70
 
71
71
  ```ts
72
- (event: TEvent) => void
72
+ (event: TCustomEvent) => void
73
73
  ```
74
74
 
75
75
  ### Signature `onBlur`
76
76
 
77
77
  ```ts
78
- (event: TEvent) => void
78
+ (event: TCustomEvent) => void
79
79
  ```
80
80
 
81
81
  ## Static methods
package/dist/commercetools-uikit-date-input.cjs.dev.js CHANGED
@@ -76,9 +76,14 @@ var DateInput = function DateInput(props) {
76
76
  setHighlightedIndex = _useState6[1];
77
77
 
78
78
  var inputRef = react.useRef(null);
79
+
80
+ if (!props.isReadOnly) {
81
+ process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'DateInput: `onChange` is required when input is not read only.') : void 0;
82
+ }
83
+
79
84
  var onChange = props.onChange;
80
85
  var emit = react.useCallback(function (value) {
81
- return onChange({
86
+ return onChange === null || onChange === void 0 ? void 0 : onChange({
82
87
  target: {
83
88
  id: props.id,
84
89
  name: props.name,
@@ -209,7 +214,7 @@ var DateInput = function DateInput(props) {
209
214
  } // ArrowDown
210
215
 
211
216
 
212
- if (event.keyCode === 40) {
217
+ if (event.key === 'ArrowDown') {
213
218
  var nextDayToHighlight = calendarUtils.getNextDay(calendarItems[Number(highlightedIndex)]);
214
219
 
215
220
  if (!calendarUtils.getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
@@ -229,7 +234,7 @@ var DateInput = function DateInput(props) {
229
234
  } // ArrowUp
230
235
 
231
236
 
232
- if (event.keyCode === 38) {
237
+ if (event.key === 'ArrowUp') {
233
238
  var previousDay = calendarUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
234
239
 
235
240
  if (!calendarUtils.getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
@@ -317,7 +322,7 @@ var DateInput = function DateInput(props) {
317
322
  DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
318
323
  horizontalConstraint: _pt__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
319
324
  value: _pt__default["default"].string.isRequired,
320
- onChange: _pt__default["default"].func.isRequired,
325
+ onChange: _pt__default["default"].func,
321
326
  onFocus: _pt__default["default"].func,
322
327
  onBlur: _pt__default["default"].func,
323
328
  id: _pt__default["default"].string,
@@ -341,7 +346,7 @@ DateInput.isEmpty = function (value) {
341
346
  var DateInput$1 = DateInput;
342
347
 
343
348
  // NOTE: This string will be replaced on build time with the package version.
344
- var version = "13.0.4";
349
+ var version = "14.0.2";
345
350
 
346
351
  exports["default"] = DateInput$1;
347
352
  exports.version = version;
package/dist/commercetools-uikit-date-input.cjs.prod.js CHANGED
@@ -75,9 +75,12 @@ var DateInput = function DateInput(props) {
75
75
  setHighlightedIndex = _useState6[1];
76
76
 
77
77
  var inputRef = react.useRef(null);
78
+
79
+ if (!props.isReadOnly) ;
80
+
78
81
  var onChange = props.onChange;
79
82
  var emit = react.useCallback(function (value) {
80
- return onChange({
83
+ return onChange === null || onChange === void 0 ? void 0 : onChange({
81
84
  target: {
82
85
  id: props.id,
83
86
  name: props.name,
@@ -208,7 +211,7 @@ var DateInput = function DateInput(props) {
208
211
  } // ArrowDown
209
212
 
210
213
 
211
- if (event.keyCode === 40) {
214
+ if (event.key === 'ArrowDown') {
212
215
  var nextDayToHighlight = calendarUtils.getNextDay(calendarItems[Number(highlightedIndex)]);
213
216
 
214
217
  if (!calendarUtils.getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
@@ -228,7 +231,7 @@ var DateInput = function DateInput(props) {
228
231
  } // ArrowUp
229
232
 
230
233
 
231
- if (event.keyCode === 38) {
234
+ if (event.key === 'ArrowUp') {
232
235
  var previousDay = calendarUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
233
236
 
234
237
  if (!calendarUtils.getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
@@ -323,7 +326,7 @@ DateInput.isEmpty = function (value) {
323
326
  var DateInput$1 = DateInput;
324
327
 
325
328
  // NOTE: This string will be replaced on build time with the package version.
326
- var version = "13.0.4";
329
+ var version = "14.0.2";
327
330
 
328
331
  exports["default"] = DateInput$1;
329
332
  exports.version = version;
package/dist/commercetools-uikit-date-input.esm.js CHANGED
@@ -16,7 +16,7 @@ import { useState, useRef, useCallback } from 'react';
16
16
  import Downshift from 'downshift';
17
17
  import { defineMessages, useIntl } from 'react-intl';
18
18
  import Constraints from '@commercetools-uikit/constraints';
19
- import { filterDataAttributes } from '@commercetools-uikit/utils';
19
+ import { warning, filterDataAttributes } from '@commercetools-uikit/utils';
20
20
  import { getToday, getDateInMonth, createItemToString, parseInputToDate, getIsDateInRange, createCalendarItems, getPaddingDayCount, getWeekdayNames, CalendarBody, getNextDay, getPreviousDay, getDaysInMonth, CalendarMenu, CalendarHeader, getMonthCalendarLabel, getYearCalendarLabel, CalendarContent, CalendarDay, isSameDay, getCalendarDayLabel, changeMonth } from '@commercetools-uikit/calendar-utils';
21
21
  import { jsx, jsxs } from '@emotion/react/jsx-runtime';
22
22
 
@@ -55,9 +55,14 @@ var DateInput = function DateInput(props) {
55
55
  setHighlightedIndex = _useState6[1];
56
56
 
57
57
  var inputRef = useRef(null);
58
+
59
+ if (!props.isReadOnly) {
60
+ process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'DateInput: `onChange` is required when input is not read only.') : void 0;
61
+ }
62
+
58
63
  var onChange = props.onChange;
59
64
  var emit = useCallback(function (value) {
60
- return onChange({
65
+ return onChange === null || onChange === void 0 ? void 0 : onChange({
61
66
  target: {
62
67
  id: props.id,
63
68
  name: props.name,
@@ -188,7 +193,7 @@ var DateInput = function DateInput(props) {
188
193
  } // ArrowDown
189
194
 
190
195
 
191
- if (event.keyCode === 40) {
196
+ if (event.key === 'ArrowDown') {
192
197
  var nextDayToHighlight = getNextDay(calendarItems[Number(highlightedIndex)]);
193
198
 
194
199
  if (!getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
@@ -208,7 +213,7 @@ var DateInput = function DateInput(props) {
208
213
  } // ArrowUp
209
214
 
210
215
 
211
- if (event.keyCode === 38) {
216
+ if (event.key === 'ArrowUp') {
212
217
  var previousDay = getPreviousDay(calendarItems[Number(highlightedIndex)]);
213
218
 
214
219
  if (!getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
@@ -296,7 +301,7 @@ var DateInput = function DateInput(props) {
296
301
  DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
297
302
  horizontalConstraint: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
298
303
  value: _pt.string.isRequired,
299
- onChange: _pt.func.isRequired,
304
+ onChange: _pt.func,
300
305
  onFocus: _pt.func,
301
306
  onBlur: _pt.func,
302
307
  id: _pt.string,
@@ -320,6 +325,6 @@ DateInput.isEmpty = function (value) {
320
325
  var DateInput$1 = DateInput;
321
326
 
322
327
  // NOTE: This string will be replaced on build time with the package version.
323
- var version = "13.0.4";
328
+ var version = "14.0.2";
324
329
 
325
330
  export { DateInput$1 as default, version };
package/dist/declarations/src/date-input.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { type FocusEventHandler } from 'react';
2
- declare type TEvent = {
2
+ declare type TCustomEvent = {
3
3
  target: {
4
4
  id?: string;
5
5
  name?: string;
@@ -9,9 +9,9 @@ declare type TEvent = {
9
9
  declare type TDateInput = {
10
10
  horizontalConstraint?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
11
11
  value: string;
12
- onChange: (event: TEvent) => void;
13
- onFocus?: FocusEventHandler;
14
- onBlur?: (event: TEvent) => void;
12
+ onChange?: (event: TCustomEvent) => void;
13
+ onFocus?: FocusEventHandler<HTMLDivElement>;
14
+ onBlur?: (event: TCustomEvent) => void;
15
15
  id?: string;
16
16
  'aria-invalid'?: boolean;
17
17
  'aria-errormessage'?: string;
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": "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-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,20 +19,20 @@
19
19
  "module": "dist/commercetools-uikit-date-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-utils": "13.0.4",
26
- "@commercetools-uikit/constraints": "13.0.2",
27
- "@commercetools-uikit/design-system": "13.0.0",
28
- "@commercetools-uikit/hooks": "13.0.2",
29
- "@commercetools-uikit/icons": "13.0.2",
30
- "@commercetools-uikit/secondary-icon-button": "13.0.4",
31
- "@commercetools-uikit/select-utils": "13.0.4",
32
- "@commercetools-uikit/spacings-inline": "13.0.2",
33
- "@commercetools-uikit/text": "13.0.4",
34
- "@commercetools-uikit/tooltip": "13.0.2",
35
- "@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-utils": "14.0.2",
26
+ "@commercetools-uikit/constraints": "14.0.1",
27
+ "@commercetools-uikit/design-system": "14.0.0",
28
+ "@commercetools-uikit/hooks": "14.0.1",
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.1",
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",