@commercetools-uikit/multiline-text-field 17.0.1 → 18.0.0

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 +8 -0
  2. package/dist/commercetools-uikit-multiline-text-field.cjs.dev.js +23 -8
  3. package/dist/commercetools-uikit-multiline-text-field.cjs.prod.js +21 -8
  4. package/dist/commercetools-uikit-multiline-text-field.esm.js +22 -8
  5. package/dist/declarations/src/multiline-text-field.d.ts +3 -0
  6. package/package.json +9 -8
package/README.md CHANGED
@@ -50,6 +50,7 @@ export default Example;
50
50
  | `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
51
51
  | `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. |
52
52
  | `renderError` | `Function`<br/>[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. |
53
+ | `renderWarning` | `Function`<br/>[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.&#xA;<br />&#xA;It can also return null to show no warning. |
53
54
  | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
54
55
  | `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
55
56
  | `autoComplete` | `string` | | | Used as HTML `autocomplete` property |
@@ -64,6 +65,7 @@ export default Example;
64
65
  | `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
65
66
  | `placeholder` | `string` | | | Placeholder text for the input |
66
67
  | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.&#xA;<br />&#xA;Unknown errors will be forwarded to `renderError` |
68
+ | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.&#xA;<br/>&#xA;Unknown warnings will be forwarded to renderWarning. |
67
69
  | `title` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Title of the label |
68
70
  | `hint` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. |
69
71
  | `description` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Provides a description for the title. |
@@ -79,6 +81,12 @@ export default Example;
79
81
  (key: string, error?: boolean) => ReactNode;
80
82
  ```
81
83
 
84
+ ### Signature `renderWarning`
85
+
86
+ ```ts
87
+ (key: string, warning?: boolean) => ReactNode;
88
+ ```
89
+
82
90
  ### Signature `onInfoButtonClick`
83
91
 
84
92
  ```ts
package/dist/commercetools-uikit-multiline-text-field.cjs.dev.js CHANGED
@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
6
6
  var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
7
7
  var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
8
- var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
9
8
  var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
10
9
  var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
10
+ var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
11
11
  var _pt = require('prop-types');
12
12
  var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
13
13
  var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
@@ -27,6 +27,7 @@ var Spacings = require('@commercetools-uikit/spacings');
27
27
  var FieldLabel = require('@commercetools-uikit/field-label');
28
28
  var MultilineTextInput = require('@commercetools-uikit/multiline-text-input');
29
29
  var FieldErrors = require('@commercetools-uikit/field-errors');
30
+ var FieldWarnings = require('@commercetools-uikit/field-warnings');
30
31
  var jsxRuntime = require('@emotion/react/jsx-runtime');
31
32
 
32
33
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -48,27 +49,32 @@ var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
48
49
  var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
49
50
  var MultilineTextInput__default = /*#__PURE__*/_interopDefault(MultilineTextInput);
50
51
  var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
52
+ var FieldWarnings__default = /*#__PURE__*/_interopDefault(FieldWarnings);
51
53
 
52
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
53
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
54
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
55
- 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; } }
54
+ function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
55
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
56
+ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
57
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
56
58
  const sequentialId = utils.createSequentialId('multiline-text-field-');
57
59
  const sequentialErrorsId = utils.createSequentialId('multiline-text-field-error-')();
60
+ const sequentialWarningsId = utils.createSequentialId('multiline-text-field-warning-')();
58
61
  const hasErrors = errors => {
59
62
  var _context;
60
63
  return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
61
64
  };
65
+ const hasWarnings = warnings => {
66
+ var _context2;
67
+ return warnings && _someInstanceProperty__default["default"](_context2 = _Object$values__default["default"](warnings)).call(_context2, Boolean);
68
+ };
62
69
  let MultilineTextField = /*#__PURE__*/function (_Component) {
63
70
  _inherits(MultilineTextField, _Component);
64
- var _super = _createSuper(MultilineTextField);
65
71
  function MultilineTextField() {
66
72
  var _this;
67
73
  _classCallCheck(this, MultilineTextField);
68
74
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
69
75
  args[_key] = arguments[_key];
70
76
  }
71
- _this = _super.call(this, ...args);
77
+ _this = _callSuper(this, MultilineTextField, [...args]);
72
78
  _this.state = {
73
79
  // We generate an id in case no id is provided by the parent to attach the
74
80
  // label to the input component.
@@ -80,6 +86,7 @@ let MultilineTextField = /*#__PURE__*/function (_Component) {
80
86
  key: "render",
81
87
  value: function render() {
82
88
  const hasError = this.props.touched && hasErrors(this.props.errors);
89
+ const hasWarning = this.props.touched && hasWarnings(this.props.warnings);
83
90
  if (!this.props.isReadOnly) {
84
91
  process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'MultilineField: "onChange" is required when field is not read only.') : void 0;
85
92
  }
@@ -112,6 +119,7 @@ let MultilineTextField = /*#__PURE__*/function (_Component) {
112
119
  isDisabled: this.props.isDisabled,
113
120
  isReadOnly: this.props.isReadOnly,
114
121
  hasError: hasError,
122
+ hasWarning: hasWarning,
115
123
  placeholder: this.props.placeholder,
116
124
  horizontalConstraint: "scale"
117
125
  }, utils.filterDataAttributes(this.props)), {}, {
@@ -122,6 +130,11 @@ let MultilineTextField = /*#__PURE__*/function (_Component) {
122
130
  errors: this.props.errors,
123
131
  isVisible: hasError,
124
132
  renderError: this.props.renderError
133
+ }), jsxRuntime.jsx(FieldWarnings__default["default"], {
134
+ id: sequentialWarningsId,
135
+ warnings: this.props.warnings,
136
+ isVisible: hasWarning,
137
+ renderWarning: this.props.renderWarning
125
138
  })]
126
139
  })
127
140
  });
@@ -151,6 +164,7 @@ MultilineTextField.propTypes = process.env.NODE_ENV !== "production" ? {
151
164
  id: _pt__default["default"].string,
152
165
  horizontalConstraint: _pt__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
153
166
  renderError: _pt__default["default"].func,
167
+ renderWarning: _pt__default["default"].func,
154
168
  isRequired: _pt__default["default"].bool,
155
169
  touched: _pt__default["default"].bool,
156
170
  autoComplete: _pt__default["default"].string,
@@ -165,6 +179,7 @@ MultilineTextField.propTypes = process.env.NODE_ENV !== "production" ? {
165
179
  isReadOnly: _pt__default["default"].bool,
166
180
  placeholder: _pt__default["default"].string,
167
181
  errors: _pt__default["default"].objectOf(_pt__default["default"].bool),
182
+ warnings: _pt__default["default"].objectOf(_pt__default["default"].bool),
168
183
  title: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]),
169
184
  hint: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]),
170
185
  description: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]),
@@ -175,7 +190,7 @@ MultilineTextField.propTypes = process.env.NODE_ENV !== "production" ? {
175
190
  var MultilineTextField$1 = MultilineTextField;
176
191
 
177
192
  // NOTE: This string will be replaced on build time with the package version.
178
- var version = "17.0.1";
193
+ var version = "18.0.0";
179
194
 
180
195
  exports["default"] = MultilineTextField$1;
181
196
  exports.version = version;
package/dist/commercetools-uikit-multiline-text-field.cjs.prod.js CHANGED
@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
6
6
  var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
7
7
  var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
8
- var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
9
8
  var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
10
9
  var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
10
+ var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
11
11
  require('prop-types');
12
12
  var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
13
13
  var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
@@ -27,6 +27,7 @@ var Spacings = require('@commercetools-uikit/spacings');
27
27
  var FieldLabel = require('@commercetools-uikit/field-label');
28
28
  var MultilineTextInput = require('@commercetools-uikit/multiline-text-input');
29
29
  var FieldErrors = require('@commercetools-uikit/field-errors');
30
+ var FieldWarnings = require('@commercetools-uikit/field-warnings');
30
31
  var jsxRuntime = require('@emotion/react/jsx-runtime');
31
32
 
32
33
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -47,27 +48,32 @@ var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
47
48
  var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
48
49
  var MultilineTextInput__default = /*#__PURE__*/_interopDefault(MultilineTextInput);
49
50
  var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
51
+ var FieldWarnings__default = /*#__PURE__*/_interopDefault(FieldWarnings);
50
52
 
51
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
52
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
53
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
54
- 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; } }
53
+ function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
54
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
55
+ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
56
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
55
57
  const sequentialId = utils.createSequentialId('multiline-text-field-');
56
58
  const sequentialErrorsId = utils.createSequentialId('multiline-text-field-error-')();
59
+ const sequentialWarningsId = utils.createSequentialId('multiline-text-field-warning-')();
57
60
  const hasErrors = errors => {
58
61
  var _context;
59
62
  return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
60
63
  };
64
+ const hasWarnings = warnings => {
65
+ var _context2;
66
+ return warnings && _someInstanceProperty__default["default"](_context2 = _Object$values__default["default"](warnings)).call(_context2, Boolean);
67
+ };
61
68
  let MultilineTextField = /*#__PURE__*/function (_Component) {
62
69
  _inherits(MultilineTextField, _Component);
63
- var _super = _createSuper(MultilineTextField);
64
70
  function MultilineTextField() {
65
71
  var _this;
66
72
  _classCallCheck(this, MultilineTextField);
67
73
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
68
74
  args[_key] = arguments[_key];
69
75
  }
70
- _this = _super.call(this, ...args);
76
+ _this = _callSuper(this, MultilineTextField, [...args]);
71
77
  _this.state = {
72
78
  // We generate an id in case no id is provided by the parent to attach the
73
79
  // label to the input component.
@@ -79,6 +85,7 @@ let MultilineTextField = /*#__PURE__*/function (_Component) {
79
85
  key: "render",
80
86
  value: function render() {
81
87
  const hasError = this.props.touched && hasErrors(this.props.errors);
88
+ const hasWarning = this.props.touched && hasWarnings(this.props.warnings);
82
89
  if (!this.props.isReadOnly) ;
83
90
  if (this.props.hint) ;
84
91
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
@@ -107,6 +114,7 @@ let MultilineTextField = /*#__PURE__*/function (_Component) {
107
114
  isDisabled: this.props.isDisabled,
108
115
  isReadOnly: this.props.isReadOnly,
109
116
  hasError: hasError,
117
+ hasWarning: hasWarning,
110
118
  placeholder: this.props.placeholder,
111
119
  horizontalConstraint: "scale"
112
120
  }, utils.filterDataAttributes(this.props)), {}, {
@@ -117,6 +125,11 @@ let MultilineTextField = /*#__PURE__*/function (_Component) {
117
125
  errors: this.props.errors,
118
126
  isVisible: hasError,
119
127
  renderError: this.props.renderError
128
+ }), jsxRuntime.jsx(FieldWarnings__default["default"], {
129
+ id: sequentialWarningsId,
130
+ warnings: this.props.warnings,
131
+ isVisible: hasWarning,
132
+ renderWarning: this.props.renderWarning
120
133
  })]
121
134
  })
122
135
  });
@@ -146,7 +159,7 @@ MultilineTextField.propTypes = {};
146
159
  var MultilineTextField$1 = MultilineTextField;
147
160
 
148
161
  // NOTE: This string will be replaced on build time with the package version.
149
- var version = "17.0.1";
162
+ var version = "18.0.0";
150
163
 
151
164
  exports["default"] = MultilineTextField$1;
152
165
  exports.version = version;
package/dist/commercetools-uikit-multiline-text-field.esm.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
2
2
  import _classCallCheck from '@babel/runtime-corejs3/helpers/esm/classCallCheck';
3
3
  import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
4
- import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
5
4
  import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
6
5
  import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
6
+ import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
7
7
  import _pt from 'prop-types';
8
8
  import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
9
9
  import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
@@ -23,28 +23,33 @@ import Spacings from '@commercetools-uikit/spacings';
23
23
  import FieldLabel from '@commercetools-uikit/field-label';
24
24
  import MultilineTextInput from '@commercetools-uikit/multiline-text-input';
25
25
  import FieldErrors from '@commercetools-uikit/field-errors';
26
+ import FieldWarnings from '@commercetools-uikit/field-warnings';
26
27
  import { jsx, jsxs } from '@emotion/react/jsx-runtime';
27
28
 
28
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
29
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
30
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
31
- 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; } }
29
+ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
30
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
31
+ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
32
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
32
33
  const sequentialId = createSequentialId('multiline-text-field-');
33
34
  const sequentialErrorsId = createSequentialId('multiline-text-field-error-')();
35
+ const sequentialWarningsId = createSequentialId('multiline-text-field-warning-')();
34
36
  const hasErrors = errors => {
35
37
  var _context;
36
38
  return errors && _someInstanceProperty(_context = _Object$values(errors)).call(_context, Boolean);
37
39
  };
40
+ const hasWarnings = warnings => {
41
+ var _context2;
42
+ return warnings && _someInstanceProperty(_context2 = _Object$values(warnings)).call(_context2, Boolean);
43
+ };
38
44
  let MultilineTextField = /*#__PURE__*/function (_Component) {
39
45
  _inherits(MultilineTextField, _Component);
40
- var _super = _createSuper(MultilineTextField);
41
46
  function MultilineTextField() {
42
47
  var _this;
43
48
  _classCallCheck(this, MultilineTextField);
44
49
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
45
50
  args[_key] = arguments[_key];
46
51
  }
47
- _this = _super.call(this, ...args);
52
+ _this = _callSuper(this, MultilineTextField, [...args]);
48
53
  _this.state = {
49
54
  // We generate an id in case no id is provided by the parent to attach the
50
55
  // label to the input component.
@@ -56,6 +61,7 @@ let MultilineTextField = /*#__PURE__*/function (_Component) {
56
61
  key: "render",
57
62
  value: function render() {
58
63
  const hasError = this.props.touched && hasErrors(this.props.errors);
64
+ const hasWarning = this.props.touched && hasWarnings(this.props.warnings);
59
65
  if (!this.props.isReadOnly) {
60
66
  process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'MultilineField: "onChange" is required when field is not read only.') : void 0;
61
67
  }
@@ -88,6 +94,7 @@ let MultilineTextField = /*#__PURE__*/function (_Component) {
88
94
  isDisabled: this.props.isDisabled,
89
95
  isReadOnly: this.props.isReadOnly,
90
96
  hasError: hasError,
97
+ hasWarning: hasWarning,
91
98
  placeholder: this.props.placeholder,
92
99
  horizontalConstraint: "scale"
93
100
  }, filterDataAttributes(this.props)), {}, {
@@ -98,6 +105,11 @@ let MultilineTextField = /*#__PURE__*/function (_Component) {
98
105
  errors: this.props.errors,
99
106
  isVisible: hasError,
100
107
  renderError: this.props.renderError
108
+ }), jsx(FieldWarnings, {
109
+ id: sequentialWarningsId,
110
+ warnings: this.props.warnings,
111
+ isVisible: hasWarning,
112
+ renderWarning: this.props.renderWarning
101
113
  })]
102
114
  })
103
115
  });
@@ -127,6 +139,7 @@ MultilineTextField.propTypes = process.env.NODE_ENV !== "production" ? {
127
139
  id: _pt.string,
128
140
  horizontalConstraint: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
129
141
  renderError: _pt.func,
142
+ renderWarning: _pt.func,
130
143
  isRequired: _pt.bool,
131
144
  touched: _pt.bool,
132
145
  autoComplete: _pt.string,
@@ -141,6 +154,7 @@ MultilineTextField.propTypes = process.env.NODE_ENV !== "production" ? {
141
154
  isReadOnly: _pt.bool,
142
155
  placeholder: _pt.string,
143
156
  errors: _pt.objectOf(_pt.bool),
157
+ warnings: _pt.objectOf(_pt.bool),
144
158
  title: _pt.oneOfType([_pt.string, _pt.node]),
145
159
  hint: _pt.oneOfType([_pt.string, _pt.node]),
146
160
  description: _pt.oneOfType([_pt.string, _pt.node]),
@@ -151,6 +165,6 @@ MultilineTextField.propTypes = process.env.NODE_ENV !== "production" ? {
151
165
  var MultilineTextField$1 = MultilineTextField;
152
166
 
153
167
  // NOTE: This string will be replaced on build time with the package version.
154
- var version = "17.0.1";
168
+ var version = "18.0.0";
155
169
 
156
170
  export { MultilineTextField$1 as default, version };
package/dist/declarations/src/multiline-text-field.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { type ChangeEventHandler, type FocusEventHandler, type ReactElement, type ReactNode, Component } from 'react';
2
2
  export type TFieldErrors = Record<string, boolean>;
3
+ type TFieldWarnings = Record<string, boolean>;
3
4
  type TCustomFormErrors<Values> = {
4
5
  [K in keyof Values]?: TFieldErrors;
5
6
  };
@@ -7,6 +8,7 @@ export type TMultiTextFieldProps = {
7
8
  id?: string;
8
9
  horizontalConstraint?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
9
10
  renderError?: TErrorRenderer;
11
+ renderWarning?: (key: string, warning?: boolean) => ReactNode;
10
12
  isRequired?: boolean;
11
13
  touched?: boolean;
12
14
  autoComplete?: string;
@@ -21,6 +23,7 @@ export type TMultiTextFieldProps = {
21
23
  isReadOnly?: boolean;
22
24
  placeholder?: string;
23
25
  errors?: TFieldErrors;
26
+ warnings?: TFieldWarnings;
24
27
  title?: string | ReactNode;
25
28
  hint?: string | ReactNode;
26
29
  description?: string | ReactNode;
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": "17.0.1",
4
+ "version": "18.0.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,13 +21,14 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/constraints": "17.0.1",
25
- "@commercetools-uikit/design-system": "17.0.1",
26
- "@commercetools-uikit/field-errors": "17.0.1",
27
- "@commercetools-uikit/field-label": "17.0.1",
28
- "@commercetools-uikit/multiline-text-input": "17.0.1",
29
- "@commercetools-uikit/spacings": "17.0.1",
30
- "@commercetools-uikit/utils": "17.0.1",
24
+ "@commercetools-uikit/constraints": "18.0.0",
25
+ "@commercetools-uikit/design-system": "18.0.0",
26
+ "@commercetools-uikit/field-errors": "18.0.0",
27
+ "@commercetools-uikit/field-label": "18.0.0",
28
+ "@commercetools-uikit/field-warnings": "18.0.0",
29
+ "@commercetools-uikit/multiline-text-input": "18.0.0",
30
+ "@commercetools-uikit/spacings": "18.0.0",
31
+ "@commercetools-uikit/utils": "18.0.0",
31
32
  "@emotion/react": "^11.10.5",
32
33
  "@emotion/styled": "^11.10.5",
33
34
  "prop-types": "15.8.1",