@commercetools-uikit/multiline-text-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-multiline-text-field.cjs.dev.js +21 -5
  3. package/dist/commercetools-uikit-multiline-text-field.cjs.prod.js +19 -3
  4. package/dist/commercetools-uikit-multiline-text-field.esm.js +21 -5
  5. package/dist/declarations/src/multiline-text-field.d.ts +4 -0
  6. package/package.json +12 -12
package/README.md CHANGED
@@ -104,3 +104,21 @@ Known error keys are:
104
104
  ## Main Functions and use cases are:
105
105
 
106
106
  - Input field for multi-line strings
107
+
108
+ ## Static methods
109
+
110
+ ### `MultilineTextField.toFieldErrors`
111
+
112
+ Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
113
+
114
+ ```ts
115
+ type FormValues = {
116
+ myField: string;
117
+ };
118
+
119
+ <MultilineTextField
120
+ // ...
121
+ name="my-field"
122
+ errors={MultilineTextField.toFieldErrors<FormValues>(formik.errors).myField}
123
+ />;
124
+ ```
package/dist/commercetools-uikit-multiline-text-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('multiline-text-field-');
62
+ var sequentialErrorsId = utils.createSequentialId('multiline-text-field-error-')();
62
63
 
63
64
  var hasErrors = function hasErrors(errors) {
64
65
  var _context;
@@ -97,11 +98,11 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
97
98
  var hasError = this.props.touched && hasErrors(this.props.errors);
98
99
 
99
100
  if (!this.props.isReadOnly) {
100
- process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'MultilineInput: "onChange" is required when is not read only.') : void 0;
101
+ process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'MultilineField: "onChange" is required when is not read only.') : void 0;
101
102
  }
102
103
 
103
104
  if (this.props.hint) {
104
- process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.hint === 'string' || /*#__PURE__*/react.isValidElement(this.props.hint), 'MultilineInput: "hint" should be string or ReactNode if `hintIcon` is present') : void 0;
105
+ process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.hint === 'string' || /*#__PURE__*/react.isValidElement(this.props.hint), 'MultilineField: "hint" should be string or ReactNode if `hintIcon` is present') : void 0;
105
106
  }
106
107
 
107
108
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
@@ -117,7 +118,7 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
117
118
  badge: this.props.badge,
118
119
  hasRequiredIndicator: this.props.isRequired,
119
120
  htmlFor: this.state.id
120
- }), jsxRuntime.jsx(MultilineTextInput__default["default"], _objectSpread({
121
+ }), jsxRuntime.jsx(MultilineTextInput__default["default"], _objectSpread(_objectSpread({
121
122
  id: this.state.id,
122
123
  name: this.props.name,
123
124
  autoComplete: this.props.autoComplete,
@@ -132,7 +133,11 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
132
133
  hasError: hasError,
133
134
  placeholder: this.props.placeholder,
134
135
  horizontalConstraint: "scale"
135
- }, utils.filterDataAttributes(this.props))), jsxRuntime.jsx(FieldErrors__default["default"], {
136
+ }, utils.filterDataAttributes(this.props)), {}, {
137
+ "aria-invalid": hasError,
138
+ "aria-errormessage": sequentialErrorsId
139
+ })), jsxRuntime.jsx(FieldErrors__default["default"], {
140
+ id: sequentialErrorsId,
136
141
  errors: this.props.errors,
137
142
  isVisible: hasError,
138
143
  renderError: this.props.renderError
@@ -140,6 +145,17 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
140
145
  })
141
146
  });
142
147
  }
148
+ }], [{
149
+ key: "toFieldErrors",
150
+ value:
151
+ /**
152
+ * Use this function to convert the Formik `errors` object type to
153
+ * our custom field errors type.
154
+ * This is primarly useful when using TypeScript.
155
+ */
156
+ function toFieldErrors(errors) {
157
+ return errors;
158
+ }
143
159
  }]);
144
160
 
145
161
  return MultilineTextField;
@@ -184,7 +200,7 @@ MultilineTextField.propTypes = process.env.NODE_ENV !== "production" ? {
184
200
  var MultilineTextField$1 = MultilineTextField;
185
201
 
186
202
  // NOTE: This string will be replaced on build time with the package version.
187
- var version = "13.0.2";
203
+ var version = "14.0.1";
188
204
 
189
205
  exports["default"] = MultilineTextField$1;
190
206
  exports.version = version;
package/dist/commercetools-uikit-multiline-text-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('multiline-text-field-');
61
+ var sequentialErrorsId = utils.createSequentialId('multiline-text-field-error-')();
61
62
 
62
63
  var hasErrors = function hasErrors(errors) {
63
64
  var _context;
@@ -112,7 +113,7 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
112
113
  badge: this.props.badge,
113
114
  hasRequiredIndicator: this.props.isRequired,
114
115
  htmlFor: this.state.id
115
- }), jsxRuntime.jsx(MultilineTextInput__default["default"], _objectSpread({
116
+ }), jsxRuntime.jsx(MultilineTextInput__default["default"], _objectSpread(_objectSpread({
116
117
  id: this.state.id,
117
118
  name: this.props.name,
118
119
  autoComplete: this.props.autoComplete,
@@ -127,7 +128,11 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
127
128
  hasError: hasError,
128
129
  placeholder: this.props.placeholder,
129
130
  horizontalConstraint: "scale"
130
- }, utils.filterDataAttributes(this.props))), jsxRuntime.jsx(FieldErrors__default["default"], {
131
+ }, utils.filterDataAttributes(this.props)), {}, {
132
+ "aria-invalid": hasError,
133
+ "aria-errormessage": sequentialErrorsId
134
+ })), jsxRuntime.jsx(FieldErrors__default["default"], {
135
+ id: sequentialErrorsId,
131
136
  errors: this.props.errors,
132
137
  isVisible: hasError,
133
138
  renderError: this.props.renderError
@@ -135,6 +140,17 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
135
140
  })
136
141
  });
137
142
  }
143
+ }], [{
144
+ key: "toFieldErrors",
145
+ value:
146
+ /**
147
+ * Use this function to convert the Formik `errors` object type to
148
+ * our custom field errors type.
149
+ * This is primarly useful when using TypeScript.
150
+ */
151
+ function toFieldErrors(errors) {
152
+ return errors;
153
+ }
138
154
  }]);
139
155
 
140
156
  return MultilineTextField;
@@ -155,7 +171,7 @@ MultilineTextField.propTypes = {};
155
171
  var MultilineTextField$1 = MultilineTextField;
156
172
 
157
173
  // NOTE: This string will be replaced on build time with the package version.
158
- var version = "13.0.2";
174
+ var version = "14.0.1";
159
175
 
160
176
  exports["default"] = MultilineTextField$1;
161
177
  exports.version = version;
package/dist/commercetools-uikit-multiline-text-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('multiline-text-field-');
37
+ var sequentialErrorsId = createSequentialId('multiline-text-field-error-')();
37
38
 
38
39
  var hasErrors = function hasErrors(errors) {
39
40
  var _context;
@@ -72,11 +73,11 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
72
73
  var hasError = this.props.touched && hasErrors(this.props.errors);
73
74
 
74
75
  if (!this.props.isReadOnly) {
75
- process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'MultilineInput: "onChange" is required when is not read only.') : void 0;
76
+ process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'MultilineField: "onChange" is required when is not read only.') : void 0;
76
77
  }
77
78
 
78
79
  if (this.props.hint) {
79
- process.env.NODE_ENV !== "production" ? warning(typeof this.props.hint === 'string' || /*#__PURE__*/isValidElement(this.props.hint), 'MultilineInput: "hint" should be string or ReactNode if `hintIcon` is present') : void 0;
80
+ process.env.NODE_ENV !== "production" ? warning(typeof this.props.hint === 'string' || /*#__PURE__*/isValidElement(this.props.hint), 'MultilineField: "hint" should be string or ReactNode if `hintIcon` is present') : void 0;
80
81
  }
81
82
 
82
83
  return jsx(Constraints.Horizontal, {
@@ -92,7 +93,7 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
92
93
  badge: this.props.badge,
93
94
  hasRequiredIndicator: this.props.isRequired,
94
95
  htmlFor: this.state.id
95
- }), jsx(MultilineTextInput, _objectSpread({
96
+ }), jsx(MultilineTextInput, _objectSpread(_objectSpread({
96
97
  id: this.state.id,
97
98
  name: this.props.name,
98
99
  autoComplete: this.props.autoComplete,
@@ -107,7 +108,11 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
107
108
  hasError: hasError,
108
109
  placeholder: this.props.placeholder,
109
110
  horizontalConstraint: "scale"
110
- }, filterDataAttributes(this.props))), jsx(FieldErrors, {
111
+ }, filterDataAttributes(this.props)), {}, {
112
+ "aria-invalid": hasError,
113
+ "aria-errormessage": sequentialErrorsId
114
+ })), jsx(FieldErrors, {
115
+ id: sequentialErrorsId,
111
116
  errors: this.props.errors,
112
117
  isVisible: hasError,
113
118
  renderError: this.props.renderError
@@ -115,6 +120,17 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
115
120
  })
116
121
  });
117
122
  }
123
+ }], [{
124
+ key: "toFieldErrors",
125
+ value:
126
+ /**
127
+ * Use this function to convert the Formik `errors` object type to
128
+ * our custom field errors type.
129
+ * This is primarly useful when using TypeScript.
130
+ */
131
+ function toFieldErrors(errors) {
132
+ return errors;
133
+ }
118
134
  }]);
119
135
 
120
136
  return MultilineTextField;
@@ -159,6 +175,6 @@ MultilineTextField.propTypes = process.env.NODE_ENV !== "production" ? {
159
175
  var MultilineTextField$1 = MultilineTextField;
160
176
 
161
177
  // NOTE: This string will be replaced on build time with the package version.
162
- var version = "13.0.2";
178
+ var version = "14.0.1";
163
179
 
164
180
  export { MultilineTextField$1 as default, version };
package/dist/declarations/src/multiline-text-field.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import { type ChangeEventHandler, type FocusEventHandler, type ReactElement, type ReactNode, Component } from 'react';
2
2
  export declare type TFieldErrors = Record<string, boolean>;
3
+ declare type TCustomFormErrors<Values> = {
4
+ [K in keyof Values]?: TFieldErrors;
5
+ };
3
6
  export declare type TMultiTextFieldProps = {
4
7
  id?: string;
5
8
  horizontalConstraint?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
@@ -38,6 +41,7 @@ declare class MultilineTextField extends Component<TMultiTextFieldProps, TState>
38
41
  static getDerivedStateFromProps: (props: TMultiTextFieldProps, state: TState) => {
39
42
  id: string;
40
43
  };
44
+ static toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
41
45
  render(): import("@emotion/react/jsx-runtime").JSX.Element;
42
46
  }
43
47
  export default MultilineTextField;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/multiline-text-field",
3
3
  "description": "A controlled text input component for multi-line strings 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/multiline-text-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-multiline-text-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/multiline-text-input": "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/design-system": "14.0.0",
26
+ "@commercetools-uikit/field-errors": "14.0.1",
27
+ "@commercetools-uikit/field-label": "14.0.1",
28
+ "@commercetools-uikit/multiline-text-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
  "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"