@commercetools-uikit/date-range-field 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 +22 -4
  2. package/dist/commercetools-uikit-date-range-field.cjs.dev.js +13 -2
  3. package/dist/commercetools-uikit-date-range-field.cjs.prod.js +12 -1
  4. package/dist/commercetools-uikit-date-range-field.esm.js +13 -2
  5. package/dist/declarations/src/date-range-field.d.ts +8 -4
  6. package/package.json +11 -11
package/README.md CHANGED
@@ -55,7 +55,7 @@ export default Example;
55
55
  | `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
56
56
  | `name` | `string` | | | Used as HTML name of the input component. |
57
57
  | `value` | `Array: string[]` | ✅ | | The selected date range. Must either be an empty array or an array of two strings holding dates formatted as "YYYY-MM-DD". |
58
- | `onChange` | `Function`<br/>[See signature.](#signature-onChange) | ✅ | | Called when the date range changes, 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;Required when input is not read only. |
58
+ | `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Called when the date range changes, 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;Required when input is not read only. |
59
59
  | `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when input is blurred |
60
60
  | `onFocus` | `Function`<br/>[See signature.](#signature-onFocus) | | | Called when input is focused |
61
61
  | `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
@@ -79,19 +79,19 @@ export default Example;
79
79
  ### Signature `onChange`
80
80
 
81
81
  ```ts
82
- (event: TEvent) => void
82
+ (event: TCustomEvent) => void
83
83
  ```
84
84
 
85
85
  ### Signature `onBlur`
86
86
 
87
87
  ```ts
88
- (event: TEvent) => void
88
+ (event: TCustomEvent) => void
89
89
  ```
90
90
 
91
91
  ### Signature `onFocus`
92
92
 
93
93
  ```ts
94
- (event: TEvent) => void
94
+ (event: TCustomEvent) => void
95
95
  ```
96
96
 
97
97
  ### Signature `onInfoButtonClick`
@@ -119,3 +119,21 @@ Known error keys are:
119
119
  ## Main Functions and use cases are:
120
120
 
121
121
  - Input field for a single date
122
+
123
+ ## Static methods
124
+
125
+ ### `DateRangeField.toFieldErrors`
126
+
127
+ Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
128
+
129
+ ```ts
130
+ type FormValues = {
131
+ myField: string;
132
+ };
133
+
134
+ <DateRangeField
135
+ // ...
136
+ name="my-field"
137
+ errors={DateRangeField.toFieldErrors<FormValues>(formik.errors).myField}
138
+ />;
139
+ ```
package/dist/commercetools-uikit-date-range-field.cjs.dev.js CHANGED
@@ -142,6 +142,17 @@ var DateRangeField = /*#__PURE__*/function (_Component) {
142
142
  })
143
143
  });
144
144
  }
145
+ }], [{
146
+ key: "toFieldErrors",
147
+ value:
148
+ /**
149
+ * Use this function to convert the Formik `errors` object type to
150
+ * our custom field errors type.
151
+ * This is primarly useful when using TypeScript.
152
+ */
153
+ function toFieldErrors(errors) {
154
+ return errors;
155
+ }
145
156
  }]);
146
157
 
147
158
  return DateRangeField;
@@ -167,7 +178,7 @@ DateRangeField.propTypes = process.env.NODE_ENV !== "production" ? {
167
178
  touched: _pt__default["default"].bool,
168
179
  name: _pt__default["default"].string,
169
180
  value: _pt__default["default"].arrayOf(_pt__default["default"].string).isRequired,
170
- onChange: _pt__default["default"].func.isRequired,
181
+ onChange: _pt__default["default"].func,
171
182
  onBlur: _pt__default["default"].func,
172
183
  onFocus: _pt__default["default"].func,
173
184
  isDisabled: _pt__default["default"].bool,
@@ -183,7 +194,7 @@ DateRangeField.propTypes = process.env.NODE_ENV !== "production" ? {
183
194
  var DateRangeField$1 = DateRangeField;
184
195
 
185
196
  // NOTE: This string will be replaced on build time with the package version.
186
- var version = "13.0.4";
197
+ var version = "14.0.2";
187
198
 
188
199
  exports["default"] = DateRangeField$1;
189
200
  exports.version = version;
package/dist/commercetools-uikit-date-range-field.cjs.prod.js CHANGED
@@ -137,6 +137,17 @@ var DateRangeField = /*#__PURE__*/function (_Component) {
137
137
  })
138
138
  });
139
139
  }
140
+ }], [{
141
+ key: "toFieldErrors",
142
+ value:
143
+ /**
144
+ * Use this function to convert the Formik `errors` object type to
145
+ * our custom field errors type.
146
+ * This is primarly useful when using TypeScript.
147
+ */
148
+ function toFieldErrors(errors) {
149
+ return errors;
150
+ }
140
151
  }]);
141
152
 
142
153
  return DateRangeField;
@@ -157,7 +168,7 @@ DateRangeField.propTypes = {};
157
168
  var DateRangeField$1 = DateRangeField;
158
169
 
159
170
  // NOTE: This string will be replaced on build time with the package version.
160
- var version = "13.0.4";
171
+ var version = "14.0.2";
161
172
 
162
173
  exports["default"] = DateRangeField$1;
163
174
  exports.version = version;
package/dist/commercetools-uikit-date-range-field.esm.js CHANGED
@@ -117,6 +117,17 @@ var DateRangeField = /*#__PURE__*/function (_Component) {
117
117
  })
118
118
  });
119
119
  }
120
+ }], [{
121
+ key: "toFieldErrors",
122
+ value:
123
+ /**
124
+ * Use this function to convert the Formik `errors` object type to
125
+ * our custom field errors type.
126
+ * This is primarly useful when using TypeScript.
127
+ */
128
+ function toFieldErrors(errors) {
129
+ return errors;
130
+ }
120
131
  }]);
121
132
 
122
133
  return DateRangeField;
@@ -142,7 +153,7 @@ DateRangeField.propTypes = process.env.NODE_ENV !== "production" ? {
142
153
  touched: _pt.bool,
143
154
  name: _pt.string,
144
155
  value: _pt.arrayOf(_pt.string).isRequired,
145
- onChange: _pt.func.isRequired,
156
+ onChange: _pt.func,
146
157
  onBlur: _pt.func,
147
158
  onFocus: _pt.func,
148
159
  isDisabled: _pt.bool,
@@ -158,6 +169,6 @@ DateRangeField.propTypes = process.env.NODE_ENV !== "production" ? {
158
169
  var DateRangeField$1 = DateRangeField;
159
170
 
160
171
  // NOTE: This string will be replaced on build time with the package version.
161
- var version = "13.0.4";
172
+ var version = "14.0.2";
162
173
 
163
174
  export { DateRangeField$1 as default, version };
package/dist/declarations/src/date-range-field.d.ts CHANGED
@@ -2,7 +2,10 @@ import { Component, type ReactElement, type ReactNode } from 'react';
2
2
  import type { MomentInput } from 'moment';
3
3
  declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
4
4
  declare type TFieldErrors = Record<string, boolean>;
5
- declare type TEvent = {
5
+ declare type TCustomFormErrors<Values> = {
6
+ [K in keyof Values]?: TFieldErrors;
7
+ };
8
+ declare type TCustomEvent = {
6
9
  target: {
7
10
  id?: string;
8
11
  name?: string;
@@ -18,9 +21,9 @@ declare type TDateRangeFieldProps = {
18
21
  touched?: boolean;
19
22
  name?: string;
20
23
  value: string[];
21
- onChange: (event: TEvent) => void;
22
- onBlur?: (event: TEvent) => void;
23
- onFocus?: (event: TEvent) => void;
24
+ onChange?: (event: TCustomEvent) => void;
25
+ onBlur?: (event: TCustomEvent) => void;
26
+ onFocus?: (event: TCustomEvent) => void;
24
27
  isDisabled?: boolean;
25
28
  isReadOnly?: boolean;
26
29
  placeholder?: string;
@@ -41,6 +44,7 @@ declare class DateRangeField extends Component<TDateRangeFieldProps, TDateRangeF
41
44
  static getDerivedStateFromProps: (props: TDateRangeFieldProps, state: TDateRangeFieldState) => {
42
45
  id: string;
43
46
  };
47
+ static toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
44
48
  render(): import("@emotion/react/jsx-runtime").JSX.Element;
45
49
  }
46
50
  export default DateRangeField;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/date-range-field",
3
3
  "description": "A controlled date input component for a date range, with validation states and a label.",
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/fields/date-range-field"
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,15 +19,15 @@
19
19
  "module": "dist/commercetools-uikit-date-range-field.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/constraints": "13.0.2",
25
- "@commercetools-uikit/date-range-input": "13.0.4",
26
- "@commercetools-uikit/design-system": "13.0.0",
27
- "@commercetools-uikit/field-errors": "13.0.4",
28
- "@commercetools-uikit/field-label": "13.0.4",
29
- "@commercetools-uikit/spacings": "13.0.2",
30
- "@commercetools-uikit/utils": "13.0.2",
22
+ "@babel/runtime": "^7.17.2",
23
+ "@babel/runtime-corejs3": "^7.17.2",
24
+ "@commercetools-uikit/constraints": "14.0.1",
25
+ "@commercetools-uikit/date-range-input": "14.0.2",
26
+ "@commercetools-uikit/design-system": "14.0.0",
27
+ "@commercetools-uikit/field-errors": "14.0.1",
28
+ "@commercetools-uikit/field-label": "14.0.2",
29
+ "@commercetools-uikit/spacings": "14.0.1",
30
+ "@commercetools-uikit/utils": "14.0.1",
31
31
  "@emotion/react": "^11.4.0",
32
32
  "@emotion/styled": "^11.3.0",
33
33
  "prop-types": "15.8.1",