@commercetools-uikit/async-select-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 +9 -1
  2. package/dist/commercetools-uikit-async-select-field.cjs.dev.js +23 -9
  3. package/dist/commercetools-uikit-async-select-field.cjs.prod.js +21 -9
  4. package/dist/commercetools-uikit-async-select-field.esm.js +22 -9
  5. package/dist/declarations/src/async-select-field.d.ts +3 -0
  6. package/package.json +9 -8
package/README.md CHANGED
@@ -56,6 +56,8 @@ export default Example;
56
56
  | `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. |
57
57
  | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.&#xA;<br />&#xA;Unknown errors will be forwarded to `renderError` |
58
58
  | `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. |
59
+ | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.&#xA;<br />&#xA;Unknown warnings will be forwarded to `renderWarning` |
60
+ | `renderWarning` | `Function`<br/>[See signature.](#signature-renderWarning) | | | Called with custom warnings. This function can return a message which will be wrapped in an WarningMessage. It can also return null to show no warning. |
59
61
  | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
60
62
  | `touched` | `union`<br/>Possible values:<br/>`boolean[] , boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
61
63
  | `aria-label` | `AsyncProps['aria-label']` | | | Aria label (for assistive tech)&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
@@ -72,7 +74,7 @@ export default Example;
72
74
  | `isOptionDisabled` | `AsyncProps['isOptionDisabled']` | | | Override the built-in logic to detect whether an option is disabled&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
73
75
  | `isMulti` | `AsyncProps['isMulti']` | | | Support multiple selected options&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
74
76
  | `isSearchable` | `AsyncProps['isSearchable']` | | | Whether to enable search functionality&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
75
- | `hasWarning` | `boolean` | | | Indicates the input field has a warning |
77
+ | `hasWarning` | `boolean` | | | Indicates the input field has a warning&#xA;@deprecated Please use the `warnings` prop instead so users know the reason why the field is in warning state. |
76
78
  | `maxMenuHeight` | `AsyncProps['maxMenuHeight']` | | | Maximum height of the menu before scrolling&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
77
79
  | `menuPortalTarget` | `AsyncProps['menuPortalTarget']` | | | Dom element to portal the select menu to&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
78
80
  | `menuPortalZIndex` | `number` | | | z-index value for the menu portal&#xA;<br>&#xA;Use in conjunction with `menuPortalTarget` |
@@ -108,6 +110,12 @@ export default Example;
108
110
  (key: string, error?: boolean) => ReactNode;
109
111
  ```
110
112
 
113
+ ### Signature `renderWarning`
114
+
115
+ ```ts
116
+ (key: string, warning?: boolean) => ReactNode;
117
+ ```
118
+
111
119
  ### Signature `onBlur`
112
120
 
113
121
  ```ts
package/dist/commercetools-uikit-async-select-field.cjs.dev.js CHANGED
@@ -14,9 +14,9 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
14
14
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
15
15
  var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
16
16
  var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
17
- var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
18
17
  var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
19
18
  var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
19
+ var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
20
20
  var _pt = require('prop-types');
21
21
  var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
22
22
  var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
@@ -28,6 +28,7 @@ var Spacings = require('@commercetools-uikit/spacings');
28
28
  var FieldLabel = require('@commercetools-uikit/field-label');
29
29
  var AsyncSelectInput = require('@commercetools-uikit/async-select-input');
30
30
  var FieldErrors = require('@commercetools-uikit/field-errors');
31
+ var FieldWarnings = require('@commercetools-uikit/field-warnings');
31
32
  var jsxRuntime = require('@emotion/react/jsx-runtime');
32
33
 
33
34
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -50,27 +51,32 @@ var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
50
51
  var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
51
52
  var AsyncSelectInput__default = /*#__PURE__*/_interopDefault(AsyncSelectInput);
52
53
  var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
54
+ var FieldWarnings__default = /*#__PURE__*/_interopDefault(FieldWarnings);
53
55
 
54
- 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; }
55
- 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; }
56
- 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); }; }
57
- 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; } }
56
+ 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; }
57
+ 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; }
58
+ 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)); }
59
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
58
60
  const sequentialId = utils.createSequentialId('async-select-field-');
59
61
  const sequentialErrorsId = utils.createSequentialId('async-select-field-error-')();
62
+ const sequentialWarningsId = utils.createSequentialId('async-select-field-warning-')();
60
63
  const hasErrors = errors => {
61
64
  var _context;
62
65
  return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
63
66
  };
67
+ const hasWarnings = warnings => {
68
+ var _context2;
69
+ return warnings && _someInstanceProperty__default["default"](_context2 = _Object$values__default["default"](warnings)).call(_context2, Boolean);
70
+ };
64
71
  let AsyncSelectField = /*#__PURE__*/function (_Component) {
65
72
  _inherits(AsyncSelectField, _Component);
66
- var _super = _createSuper(AsyncSelectField);
67
73
  function AsyncSelectField() {
68
74
  var _this;
69
75
  _classCallCheck(this, AsyncSelectField);
70
76
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
71
77
  args[_key] = arguments[_key];
72
78
  }
73
- _this = _super.call(this, ...args);
79
+ _this = _callSuper(this, AsyncSelectField, [...args]);
74
80
  _this.state = {
75
81
  // We generate an id in case no id is provided by the parent to attach the
76
82
  // label to the input component.
@@ -82,6 +88,7 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
82
88
  key: "render",
83
89
  value: function render() {
84
90
  const hasError = AsyncSelectInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
91
+ const hasWarning = this.props.hasWarning || AsyncSelectInput__default["default"].isTouched(this.props.touched) && hasWarnings(this.props.warnings);
85
92
  if (!this.props.isReadOnly) {
86
93
  process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'AsyncSelectField: `onChange` is required when field is not read only.') : void 0;
87
94
  }
@@ -124,7 +131,7 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
124
131
  isOptionDisabled: this.props.isOptionDisabled,
125
132
  isMulti: this.props.isMulti,
126
133
  isSearchable: this.props.isSearchable,
127
- hasWarning: this.props.hasWarning,
134
+ hasWarning: hasWarning,
128
135
  maxMenuHeight: this.props.maxMenuHeight,
129
136
  menuPortalTarget: this.props.menuPortalTarget,
130
137
  menuPortalZIndex: this.props.menuPortalZIndex,
@@ -154,6 +161,11 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
154
161
  errors: this.props.errors,
155
162
  isVisible: hasError,
156
163
  renderError: this.props.renderError
164
+ }), jsxRuntime.jsx(FieldWarnings__default["default"], {
165
+ id: sequentialWarningsId,
166
+ warnings: this.props.warnings,
167
+ isVisible: hasWarning,
168
+ renderWarning: this.props.renderWarning
157
169
  })]
158
170
  })
159
171
  });
@@ -184,6 +196,8 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
184
196
  horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
185
197
  errors: _pt__default["default"].objectOf(_pt__default["default"].bool),
186
198
  renderError: _pt__default["default"].func,
199
+ warnings: _pt__default["default"].objectOf(_pt__default["default"].bool),
200
+ renderWarning: _pt__default["default"].func,
187
201
  isRequired: _pt__default["default"].bool,
188
202
  touched: _pt__default["default"].oneOfType([_pt__default["default"].arrayOf(_pt__default["default"].bool), _pt__default["default"].bool]),
189
203
  isAutofocussed: _pt__default["default"].bool,
@@ -206,7 +220,7 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
206
220
  } : {};
207
221
 
208
222
  // NOTE: This string will be replaced on build time with the package version.
209
- var version = "17.0.1";
223
+ var version = "18.0.0";
210
224
 
211
225
  exports["default"] = AsyncSelectField;
212
226
  exports.version = version;
package/dist/commercetools-uikit-async-select-field.cjs.prod.js CHANGED
@@ -14,9 +14,9 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
14
14
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
15
15
  var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
16
16
  var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
17
- var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
18
17
  var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
19
18
  var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
19
+ var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
20
20
  require('prop-types');
21
21
  var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
22
22
  var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
@@ -28,6 +28,7 @@ var Spacings = require('@commercetools-uikit/spacings');
28
28
  var FieldLabel = require('@commercetools-uikit/field-label');
29
29
  var AsyncSelectInput = require('@commercetools-uikit/async-select-input');
30
30
  var FieldErrors = require('@commercetools-uikit/field-errors');
31
+ var FieldWarnings = require('@commercetools-uikit/field-warnings');
31
32
  var jsxRuntime = require('@emotion/react/jsx-runtime');
32
33
 
33
34
  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 AsyncSelectInput__default = /*#__PURE__*/_interopDefault(AsyncSelectInput);
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('async-select-field-');
57
59
  const sequentialErrorsId = utils.createSequentialId('async-select-field-error-')();
60
+ const sequentialWarningsId = utils.createSequentialId('async-select-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 AsyncSelectField = /*#__PURE__*/function (_Component) {
63
70
  _inherits(AsyncSelectField, _Component);
64
- var _super = _createSuper(AsyncSelectField);
65
71
  function AsyncSelectField() {
66
72
  var _this;
67
73
  _classCallCheck(this, AsyncSelectField);
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, AsyncSelectField, [...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 AsyncSelectField = /*#__PURE__*/function (_Component) {
80
86
  key: "render",
81
87
  value: function render() {
82
88
  const hasError = AsyncSelectInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
89
+ const hasWarning = this.props.hasWarning || AsyncSelectInput__default["default"].isTouched(this.props.touched) && hasWarnings(this.props.warnings);
83
90
  if (!this.props.isReadOnly) ;
84
91
  if (this.props.hintIcon) ;
85
92
  if (this.props.isMulti) ;
@@ -115,7 +122,7 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
115
122
  isOptionDisabled: this.props.isOptionDisabled,
116
123
  isMulti: this.props.isMulti,
117
124
  isSearchable: this.props.isSearchable,
118
- hasWarning: this.props.hasWarning,
125
+ hasWarning: hasWarning,
119
126
  maxMenuHeight: this.props.maxMenuHeight,
120
127
  menuPortalTarget: this.props.menuPortalTarget,
121
128
  menuPortalZIndex: this.props.menuPortalZIndex,
@@ -145,6 +152,11 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
145
152
  errors: this.props.errors,
146
153
  isVisible: hasError,
147
154
  renderError: this.props.renderError
155
+ }), jsxRuntime.jsx(FieldWarnings__default["default"], {
156
+ id: sequentialWarningsId,
157
+ warnings: this.props.warnings,
158
+ isVisible: hasWarning,
159
+ renderWarning: this.props.renderWarning
148
160
  })]
149
161
  })
150
162
  });
@@ -174,7 +186,7 @@ AsyncSelectField.getDerivedStateFromProps = (props, state) => ({
174
186
  AsyncSelectField.propTypes = {};
175
187
 
176
188
  // NOTE: This string will be replaced on build time with the package version.
177
- var version = "17.0.1";
189
+ var version = "18.0.0";
178
190
 
179
191
  exports["default"] = AsyncSelectField;
180
192
  exports.version = version;
package/dist/commercetools-uikit-async-select-field.esm.js CHANGED
@@ -10,9 +10,9 @@ import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object
10
10
  import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
11
11
  import _classCallCheck from '@babel/runtime-corejs3/helpers/esm/classCallCheck';
12
12
  import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
13
- import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
14
13
  import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
15
14
  import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
15
+ import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
16
16
  import _pt from 'prop-types';
17
17
  import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
18
18
  import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
@@ -24,28 +24,33 @@ import Spacings from '@commercetools-uikit/spacings';
24
24
  import FieldLabel from '@commercetools-uikit/field-label';
25
25
  import AsyncSelectInput from '@commercetools-uikit/async-select-input';
26
26
  import FieldErrors from '@commercetools-uikit/field-errors';
27
+ import FieldWarnings from '@commercetools-uikit/field-warnings';
27
28
  import { jsx, jsxs } from '@emotion/react/jsx-runtime';
28
29
 
29
- 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; }
30
- 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; }
31
- 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); }; }
32
- 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; } }
30
+ 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; }
31
+ 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; }
32
+ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
33
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
33
34
  const sequentialId = createSequentialId('async-select-field-');
34
35
  const sequentialErrorsId = createSequentialId('async-select-field-error-')();
36
+ const sequentialWarningsId = createSequentialId('async-select-field-warning-')();
35
37
  const hasErrors = errors => {
36
38
  var _context;
37
39
  return errors && _someInstanceProperty(_context = _Object$values(errors)).call(_context, Boolean);
38
40
  };
41
+ const hasWarnings = warnings => {
42
+ var _context2;
43
+ return warnings && _someInstanceProperty(_context2 = _Object$values(warnings)).call(_context2, Boolean);
44
+ };
39
45
  let AsyncSelectField = /*#__PURE__*/function (_Component) {
40
46
  _inherits(AsyncSelectField, _Component);
41
- var _super = _createSuper(AsyncSelectField);
42
47
  function AsyncSelectField() {
43
48
  var _this;
44
49
  _classCallCheck(this, AsyncSelectField);
45
50
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
46
51
  args[_key] = arguments[_key];
47
52
  }
48
- _this = _super.call(this, ...args);
53
+ _this = _callSuper(this, AsyncSelectField, [...args]);
49
54
  _this.state = {
50
55
  // We generate an id in case no id is provided by the parent to attach the
51
56
  // label to the input component.
@@ -57,6 +62,7 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
57
62
  key: "render",
58
63
  value: function render() {
59
64
  const hasError = AsyncSelectInput.isTouched(this.props.touched) && hasErrors(this.props.errors);
65
+ const hasWarning = this.props.hasWarning || AsyncSelectInput.isTouched(this.props.touched) && hasWarnings(this.props.warnings);
60
66
  if (!this.props.isReadOnly) {
61
67
  process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'AsyncSelectField: `onChange` is required when field is not read only.') : void 0;
62
68
  }
@@ -99,7 +105,7 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
99
105
  isOptionDisabled: this.props.isOptionDisabled,
100
106
  isMulti: this.props.isMulti,
101
107
  isSearchable: this.props.isSearchable,
102
- hasWarning: this.props.hasWarning,
108
+ hasWarning: hasWarning,
103
109
  maxMenuHeight: this.props.maxMenuHeight,
104
110
  menuPortalTarget: this.props.menuPortalTarget,
105
111
  menuPortalZIndex: this.props.menuPortalZIndex,
@@ -129,6 +135,11 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
129
135
  errors: this.props.errors,
130
136
  isVisible: hasError,
131
137
  renderError: this.props.renderError
138
+ }), jsx(FieldWarnings, {
139
+ id: sequentialWarningsId,
140
+ warnings: this.props.warnings,
141
+ isVisible: hasWarning,
142
+ renderWarning: this.props.renderWarning
132
143
  })]
133
144
  })
134
145
  });
@@ -159,6 +170,8 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
159
170
  horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
160
171
  errors: _pt.objectOf(_pt.bool),
161
172
  renderError: _pt.func,
173
+ warnings: _pt.objectOf(_pt.bool),
174
+ renderWarning: _pt.func,
162
175
  isRequired: _pt.bool,
163
176
  touched: _pt.oneOfType([_pt.arrayOf(_pt.bool), _pt.bool]),
164
177
  isAutofocussed: _pt.bool,
@@ -181,6 +194,6 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
181
194
  } : {};
182
195
 
183
196
  // NOTE: This string will be replaced on build time with the package version.
184
- var version = "17.0.1";
197
+ var version = "18.0.0";
185
198
 
186
199
  export { AsyncSelectField as default, version };
package/dist/declarations/src/async-select-field.d.ts CHANGED
@@ -4,6 +4,7 @@ import type { GroupBase, OptionsOrGroups, ActionMeta } from 'react-select';
4
4
  type ReactSelectAsyncProps = AsyncProps<unknown, boolean, GroupBase<unknown>>;
5
5
  type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
6
6
  type TFieldErrors = Record<string, boolean>;
7
+ type TFieldWarnings = Record<string, boolean>;
7
8
  type TCustomFormErrors<Values> = {
8
9
  [K in keyof Values]?: TFieldErrors;
9
10
  };
@@ -20,6 +21,8 @@ export type TAsyncSelectFieldProps = {
20
21
  horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
21
22
  errors?: TFieldErrors;
22
23
  renderError?: TErrorRenderer;
24
+ warnings?: TFieldWarnings;
25
+ renderWarning?: (key: string, warning?: boolean) => ReactNode;
23
26
  isRequired?: boolean;
24
27
  touched?: boolean[] | boolean;
25
28
  'aria-label'?: ReactSelectAsyncProps['aria-label'];
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/async-select-field",
3
3
  "description": "A controlled input component with validation states and a label getting a selection from an asynchronously loaded list from the user.",
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/async-select-input": "17.0.1",
25
- "@commercetools-uikit/constraints": "17.0.1",
26
- "@commercetools-uikit/design-system": "17.0.1",
27
- "@commercetools-uikit/field-errors": "17.0.1",
28
- "@commercetools-uikit/field-label": "17.0.1",
29
- "@commercetools-uikit/spacings": "17.0.1",
30
- "@commercetools-uikit/utils": "17.0.1",
24
+ "@commercetools-uikit/async-select-input": "18.0.0",
25
+ "@commercetools-uikit/constraints": "18.0.0",
26
+ "@commercetools-uikit/design-system": "18.0.0",
27
+ "@commercetools-uikit/field-errors": "18.0.0",
28
+ "@commercetools-uikit/field-label": "18.0.0",
29
+ "@commercetools-uikit/field-warnings": "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",