@commercetools-uikit/money-field 13.0.3 → 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-money-field.cjs.dev.js +19 -3
  3. package/dist/commercetools-uikit-money-field.cjs.prod.js +19 -3
  4. package/dist/commercetools-uikit-money-field.esm.js +19 -3
  5. package/dist/declarations/src/money-field.d.ts +5 -1
  6. package/package.json +12 -12
package/README.md CHANGED
@@ -157,3 +157,21 @@ Known error keys are:
157
157
  ## Main Functions and use cases are:
158
158
 
159
159
  - Getting monetary value input with a currency from users (with cent precision or high precision)
160
+
161
+ ## Static methods
162
+
163
+ ### `MoneyField.toFieldErrors`
164
+
165
+ Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
166
+
167
+ ```ts
168
+ type FormValues = {
169
+ myField: string;
170
+ };
171
+
172
+ <MoneyField
173
+ // ...
174
+ name="my-field"
175
+ errors={MoneyField.toFieldErrors<FormValues>(formik.errors).myField}
176
+ />;
177
+ ```
package/dist/commercetools-uikit-money-field.cjs.dev.js CHANGED
@@ -61,6 +61,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
61
61
 
62
62
  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; } }
63
63
  var sequentialId = utils.createSequentialId('money-field-');
64
+ var sequentialErrorsId = utils.createSequentialId('money-field-error-')();
64
65
 
65
66
  var hasErrors = function hasErrors(errors) {
66
67
  var _context;
@@ -118,7 +119,7 @@ var MoneyField = /*#__PURE__*/function (_Component) {
118
119
  hintIcon: this.props.hintIcon,
119
120
  hasRequiredIndicator: this.props.isRequired,
120
121
  htmlFor: this.state.id
121
- }), jsxRuntime.jsx(MoneyInput__default["default"], _objectSpread({
122
+ }), jsxRuntime.jsx(MoneyInput__default["default"], _objectSpread(_objectSpread({
122
123
  id: this.state.id,
123
124
  name: this.props.name,
124
125
  autoComplete: this.props.autoComplete,
@@ -136,7 +137,11 @@ var MoneyField = /*#__PURE__*/function (_Component) {
136
137
  menuPortalTarget: this.props.menuPortalTarget,
137
138
  menuPortalZIndex: this.props.menuPortalZIndex,
138
139
  menuShouldBlockScroll: this.props.menuShouldBlockScroll
139
- }, utils.filterDataAttributes(this.props))), jsxRuntime.jsx(FieldErrors__default["default"], {
140
+ }, utils.filterDataAttributes(this.props)), {}, {
141
+ "aria-invalid": hasError,
142
+ "aria-errormessage": sequentialErrorsId
143
+ })), jsxRuntime.jsx(FieldErrors__default["default"], {
144
+ id: sequentialErrorsId,
140
145
  errors: this.props.errors,
141
146
  isVisible: hasError,
142
147
  renderError: this.props.renderError
@@ -144,6 +149,17 @@ var MoneyField = /*#__PURE__*/function (_Component) {
144
149
  })
145
150
  });
146
151
  }
152
+ }], [{
153
+ key: "toFieldErrors",
154
+ value:
155
+ /**
156
+ * Use this function to convert the Formik `errors` object type to
157
+ * our custom field errors type.
158
+ * This is primarly useful when using TypeScript.
159
+ */
160
+ function toFieldErrors(errors) {
161
+ return errors;
162
+ }
147
163
  }]);
148
164
 
149
165
  return MoneyField;
@@ -196,7 +212,7 @@ MoneyField.propTypes = process.env.NODE_ENV !== "production" ? {
196
212
  var MoneyField$1 = MoneyField;
197
213
 
198
214
  // NOTE: This string will be replaced on build time with the package version.
199
- var version = "13.0.3";
215
+ var version = "14.0.1";
200
216
 
201
217
  exports["default"] = MoneyField$1;
202
218
  exports.version = version;
package/dist/commercetools-uikit-money-field.cjs.prod.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('money-field-');
62
+ var sequentialErrorsId = utils.createSequentialId('money-field-error-')();
62
63
 
63
64
  var hasErrors = function hasErrors(errors) {
64
65
  var _context;
@@ -113,7 +114,7 @@ var MoneyField = /*#__PURE__*/function (_Component) {
113
114
  hintIcon: this.props.hintIcon,
114
115
  hasRequiredIndicator: this.props.isRequired,
115
116
  htmlFor: this.state.id
116
- }), jsxRuntime.jsx(MoneyInput__default["default"], _objectSpread({
117
+ }), jsxRuntime.jsx(MoneyInput__default["default"], _objectSpread(_objectSpread({
117
118
  id: this.state.id,
118
119
  name: this.props.name,
119
120
  autoComplete: this.props.autoComplete,
@@ -131,7 +132,11 @@ var MoneyField = /*#__PURE__*/function (_Component) {
131
132
  menuPortalTarget: this.props.menuPortalTarget,
132
133
  menuPortalZIndex: this.props.menuPortalZIndex,
133
134
  menuShouldBlockScroll: this.props.menuShouldBlockScroll
134
- }, utils.filterDataAttributes(this.props))), jsxRuntime.jsx(FieldErrors__default["default"], {
135
+ }, utils.filterDataAttributes(this.props)), {}, {
136
+ "aria-invalid": hasError,
137
+ "aria-errormessage": sequentialErrorsId
138
+ })), jsxRuntime.jsx(FieldErrors__default["default"], {
139
+ id: sequentialErrorsId,
135
140
  errors: this.props.errors,
136
141
  isVisible: hasError,
137
142
  renderError: this.props.renderError
@@ -139,6 +144,17 @@ var MoneyField = /*#__PURE__*/function (_Component) {
139
144
  })
140
145
  });
141
146
  }
147
+ }], [{
148
+ key: "toFieldErrors",
149
+ value:
150
+ /**
151
+ * Use this function to convert the Formik `errors` object type to
152
+ * our custom field errors type.
153
+ * This is primarly useful when using TypeScript.
154
+ */
155
+ function toFieldErrors(errors) {
156
+ return errors;
157
+ }
142
158
  }]);
143
159
 
144
160
  return MoneyField;
@@ -159,7 +175,7 @@ MoneyField.propTypes = {};
159
175
  var MoneyField$1 = MoneyField;
160
176
 
161
177
  // NOTE: This string will be replaced on build time with the package version.
162
- var version = "13.0.3";
178
+ var version = "14.0.1";
163
179
 
164
180
  exports["default"] = MoneyField$1;
165
181
  exports.version = version;
package/dist/commercetools-uikit-money-field.esm.js CHANGED
@@ -35,6 +35,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
35
35
 
36
36
  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; } }
37
37
  var sequentialId = createSequentialId('money-field-');
38
+ var sequentialErrorsId = createSequentialId('money-field-error-')();
38
39
 
39
40
  var hasErrors = function hasErrors(errors) {
40
41
  var _context;
@@ -92,7 +93,7 @@ var MoneyField = /*#__PURE__*/function (_Component) {
92
93
  hintIcon: this.props.hintIcon,
93
94
  hasRequiredIndicator: this.props.isRequired,
94
95
  htmlFor: this.state.id
95
- }), jsx(MoneyInput, _objectSpread({
96
+ }), jsx(MoneyInput, _objectSpread(_objectSpread({
96
97
  id: this.state.id,
97
98
  name: this.props.name,
98
99
  autoComplete: this.props.autoComplete,
@@ -110,7 +111,11 @@ var MoneyField = /*#__PURE__*/function (_Component) {
110
111
  menuPortalTarget: this.props.menuPortalTarget,
111
112
  menuPortalZIndex: this.props.menuPortalZIndex,
112
113
  menuShouldBlockScroll: this.props.menuShouldBlockScroll
113
- }, filterDataAttributes(this.props))), jsx(FieldErrors, {
114
+ }, filterDataAttributes(this.props)), {}, {
115
+ "aria-invalid": hasError,
116
+ "aria-errormessage": sequentialErrorsId
117
+ })), jsx(FieldErrors, {
118
+ id: sequentialErrorsId,
114
119
  errors: this.props.errors,
115
120
  isVisible: hasError,
116
121
  renderError: this.props.renderError
@@ -118,6 +123,17 @@ var MoneyField = /*#__PURE__*/function (_Component) {
118
123
  })
119
124
  });
120
125
  }
126
+ }], [{
127
+ key: "toFieldErrors",
128
+ value:
129
+ /**
130
+ * Use this function to convert the Formik `errors` object type to
131
+ * our custom field errors type.
132
+ * This is primarly useful when using TypeScript.
133
+ */
134
+ function toFieldErrors(errors) {
135
+ return errors;
136
+ }
121
137
  }]);
122
138
 
123
139
  return MoneyField;
@@ -170,6 +186,6 @@ MoneyField.propTypes = process.env.NODE_ENV !== "production" ? {
170
186
  var MoneyField$1 = MoneyField;
171
187
 
172
188
  // NOTE: This string will be replaced on build time with the package version.
173
- var version = "13.0.3";
189
+ var version = "14.0.1";
174
190
 
175
191
  export { MoneyField$1 as default, version };
package/dist/declarations/src/money-field.d.ts CHANGED
@@ -1,8 +1,11 @@
1
1
  import { Component, type ReactElement, type ReactNode } from 'react';
2
2
  import { type Props as ReactSelectProps } from 'react-select';
3
3
  import { type TCurrencyCode } from '@commercetools-uikit/money-input';
4
- declare type TFieldErrors = Record<string, boolean>;
5
4
  declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
5
+ declare type TFieldErrors = Record<string, boolean>;
6
+ declare type TCustomFormErrors<Values> = {
7
+ [K in keyof Values]?: TFieldErrors;
8
+ };
6
9
  declare type TTouched = {
7
10
  amount?: boolean;
8
11
  currencyCode?: boolean;
@@ -60,6 +63,7 @@ declare class MoneyField extends Component<TMoneyFieldProps, TMoneyFieldState> {
60
63
  static getDerivedStateFromProps: (props: TMoneyFieldProps, state: TMoneyFieldState) => {
61
64
  id: string;
62
65
  };
66
+ static toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
63
67
  render(): import("@emotion/react/jsx-runtime").JSX.Element;
64
68
  }
65
69
  export default MoneyField;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/money-field",
3
3
  "description": "A controlled input component for money values with validation states and a label.",
4
- "version": "13.0.3",
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/money-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,20 +19,20 @@
19
19
  "module": "dist/commercetools-uikit-money-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/design-system": "13.0.0",
26
- "@commercetools-uikit/field-errors": "13.0.2",
27
- "@commercetools-uikit/field-label": "13.0.2",
28
- "@commercetools-uikit/money-input": "13.0.3",
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/design-system": "14.0.0",
26
+ "@commercetools-uikit/field-errors": "14.0.1",
27
+ "@commercetools-uikit/field-label": "14.0.1",
28
+ "@commercetools-uikit/money-input": "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
  "lodash": "4.17.21",
34
34
  "prop-types": "15.8.1",
35
- "react-required-if": "1.0.3"
35
+ "react-intl": "^5.24.6"
36
36
  },
37
37
  "devDependencies": {
38
38
  "react": "17.0.2"