@commercetools-uikit/date-range-field 13.0.2 → 14.0.1

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 +18 -0
  2. package/dist/commercetools-uikit-date-range-field.cjs.dev.js +19 -3
  3. package/dist/commercetools-uikit-date-range-field.cjs.prod.js +19 -3
  4. package/dist/commercetools-uikit-date-range-field.esm.js +19 -3
  5. package/dist/declarations/src/date-range-field.d.ts +4 -0
  6. package/package.json +12 -12
package/README.md CHANGED
@@ -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
@@ -59,6 +59,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
59
59
 
60
60
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
61
61
  var sequentialId = utils.createSequentialId('date-range-field-');
62
+ var sequentialErrorsId = utils.createSequentialId('date-range-field-error-')();
62
63
 
63
64
  var hasErrors = function hasErrors(errors) {
64
65
  var _context;
@@ -117,7 +118,7 @@ var DateRangeField = /*#__PURE__*/function (_Component) {
117
118
  badge: this.props.badge,
118
119
  hasRequiredIndicator: this.props.isRequired,
119
120
  htmlFor: this.state.id
120
- }), jsxRuntime.jsx(DateRangeInput__default["default"], _objectSpread({
121
+ }), jsxRuntime.jsx(DateRangeInput__default["default"], _objectSpread(_objectSpread({
121
122
  id: this.state.id,
122
123
  name: this.props.name,
123
124
  value: this.props.value,
@@ -129,7 +130,11 @@ var DateRangeField = /*#__PURE__*/function (_Component) {
129
130
  hasError: hasError,
130
131
  placeholder: this.props.placeholder,
131
132
  horizontalConstraint: "scale"
132
- }, utils.filterDataAttributes(this.props))), jsxRuntime.jsx(FieldErrors__default["default"], {
133
+ }, utils.filterDataAttributes(this.props)), {}, {
134
+ "aria-invalid": hasError,
135
+ "aria-errormessage": sequentialErrorsId
136
+ })), jsxRuntime.jsx(FieldErrors__default["default"], {
137
+ id: sequentialErrorsId,
133
138
  errors: this.props.errors,
134
139
  isVisible: hasError,
135
140
  renderError: this.props.renderError
@@ -137,6 +142,17 @@ var DateRangeField = /*#__PURE__*/function (_Component) {
137
142
  })
138
143
  });
139
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
+ }
140
156
  }]);
141
157
 
142
158
  return DateRangeField;
@@ -178,7 +194,7 @@ DateRangeField.propTypes = process.env.NODE_ENV !== "production" ? {
178
194
  var DateRangeField$1 = DateRangeField;
179
195
 
180
196
  // NOTE: This string will be replaced on build time with the package version.
181
- var version = "13.0.2";
197
+ var version = "14.0.1";
182
198
 
183
199
  exports["default"] = DateRangeField$1;
184
200
  exports.version = version;
package/dist/commercetools-uikit-date-range-field.cjs.prod.js CHANGED
@@ -58,6 +58,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
58
58
 
59
59
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
60
60
  var sequentialId = utils.createSequentialId('date-range-field-');
61
+ var sequentialErrorsId = utils.createSequentialId('date-range-field-error-')();
61
62
 
62
63
  var hasErrors = function hasErrors(errors) {
63
64
  var _context;
@@ -112,7 +113,7 @@ var DateRangeField = /*#__PURE__*/function (_Component) {
112
113
  badge: this.props.badge,
113
114
  hasRequiredIndicator: this.props.isRequired,
114
115
  htmlFor: this.state.id
115
- }), jsxRuntime.jsx(DateRangeInput__default["default"], _objectSpread({
116
+ }), jsxRuntime.jsx(DateRangeInput__default["default"], _objectSpread(_objectSpread({
116
117
  id: this.state.id,
117
118
  name: this.props.name,
118
119
  value: this.props.value,
@@ -124,7 +125,11 @@ var DateRangeField = /*#__PURE__*/function (_Component) {
124
125
  hasError: hasError,
125
126
  placeholder: this.props.placeholder,
126
127
  horizontalConstraint: "scale"
127
- }, utils.filterDataAttributes(this.props))), jsxRuntime.jsx(FieldErrors__default["default"], {
128
+ }, utils.filterDataAttributes(this.props)), {}, {
129
+ "aria-invalid": hasError,
130
+ "aria-errormessage": sequentialErrorsId
131
+ })), jsxRuntime.jsx(FieldErrors__default["default"], {
132
+ id: sequentialErrorsId,
128
133
  errors: this.props.errors,
129
134
  isVisible: hasError,
130
135
  renderError: this.props.renderError
@@ -132,6 +137,17 @@ var DateRangeField = /*#__PURE__*/function (_Component) {
132
137
  })
133
138
  });
134
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
+ }
135
151
  }]);
136
152
 
137
153
  return DateRangeField;
@@ -152,7 +168,7 @@ DateRangeField.propTypes = {};
152
168
  var DateRangeField$1 = DateRangeField;
153
169
 
154
170
  // NOTE: This string will be replaced on build time with the package version.
155
- var version = "13.0.2";
171
+ var version = "14.0.1";
156
172
 
157
173
  exports["default"] = DateRangeField$1;
158
174
  exports.version = version;
package/dist/commercetools-uikit-date-range-field.esm.js CHANGED
@@ -34,6 +34,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
34
34
 
35
35
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
36
36
  var sequentialId = createSequentialId('date-range-field-');
37
+ var sequentialErrorsId = createSequentialId('date-range-field-error-')();
37
38
 
38
39
  var hasErrors = function hasErrors(errors) {
39
40
  var _context;
@@ -92,7 +93,7 @@ var DateRangeField = /*#__PURE__*/function (_Component) {
92
93
  badge: this.props.badge,
93
94
  hasRequiredIndicator: this.props.isRequired,
94
95
  htmlFor: this.state.id
95
- }), jsx(DateRangeInput, _objectSpread({
96
+ }), jsx(DateRangeInput, _objectSpread(_objectSpread({
96
97
  id: this.state.id,
97
98
  name: this.props.name,
98
99
  value: this.props.value,
@@ -104,7 +105,11 @@ var DateRangeField = /*#__PURE__*/function (_Component) {
104
105
  hasError: hasError,
105
106
  placeholder: this.props.placeholder,
106
107
  horizontalConstraint: "scale"
107
- }, filterDataAttributes(this.props))), jsx(FieldErrors, {
108
+ }, filterDataAttributes(this.props)), {}, {
109
+ "aria-invalid": hasError,
110
+ "aria-errormessage": sequentialErrorsId
111
+ })), jsx(FieldErrors, {
112
+ id: sequentialErrorsId,
108
113
  errors: this.props.errors,
109
114
  isVisible: hasError,
110
115
  renderError: this.props.renderError
@@ -112,6 +117,17 @@ var DateRangeField = /*#__PURE__*/function (_Component) {
112
117
  })
113
118
  });
114
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
+ }
115
131
  }]);
116
132
 
117
133
  return DateRangeField;
@@ -153,6 +169,6 @@ DateRangeField.propTypes = process.env.NODE_ENV !== "production" ? {
153
169
  var DateRangeField$1 = DateRangeField;
154
170
 
155
171
  // NOTE: This string will be replaced on build time with the package version.
156
- var version = "13.0.2";
172
+ var version = "14.0.1";
157
173
 
158
174
  export { DateRangeField$1 as default, version };
package/dist/declarations/src/date-range-field.d.ts CHANGED
@@ -2,6 +2,9 @@ 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 TCustomFormErrors<Values> = {
6
+ [K in keyof Values]?: TFieldErrors;
7
+ };
5
8
  declare type TEvent = {
6
9
  target: {
7
10
  id?: 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.2",
4
+ "version": "14.0.1",
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,19 +19,19 @@
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.2",
26
- "@commercetools-uikit/design-system": "13.0.0",
27
- "@commercetools-uikit/field-errors": "13.0.2",
28
- "@commercetools-uikit/field-label": "13.0.2",
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.1",
26
+ "@commercetools-uikit/design-system": "14.0.0",
27
+ "@commercetools-uikit/field-errors": "14.0.1",
28
+ "@commercetools-uikit/field-label": "14.0.1",
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",
34
- "react-required-if": "1.0.3"
34
+ "react-intl": "^5.24.6"
35
35
  },
36
36
  "devDependencies": {
37
37
  "react": "17.0.2"