@commercetools-uikit/async-creatable-select-field 17.0.0 → 17.1.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.
- package/README.md +9 -1
- package/dist/commercetools-uikit-async-creatable-select-field.cjs.d.ts +1 -1
- package/dist/commercetools-uikit-async-creatable-select-field.cjs.dev.js +23 -9
- package/dist/commercetools-uikit-async-creatable-select-field.cjs.prod.js +21 -9
- package/dist/commercetools-uikit-async-creatable-select-field.esm.js +22 -9
- package/dist/declarations/src/async-creatable-select-field.d.ts +3 -0
- package/package.json +9 -8
- package/dist/commercetools-uikit-async-creatable-select-field.cjs.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -58,6 +58,8 @@ export default Example;
|
|
|
58
58
|
| `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. |
|
|
59
59
|
| `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
<br />
Unknown errors will be forwarded to `renderError` |
|
|
60
60
|
| `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. |
|
|
61
|
+
| `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
<br />
Unknown warnings will be forwarded to `renderWarning` |
|
|
62
|
+
| `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. |
|
|
61
63
|
| `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
|
|
62
64
|
| `touched` | `union`<br/>Possible values:<br/>`boolean[] , boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
|
|
63
65
|
| `aria-label` | `AsyncCreatableProps['aria-label']` | | | Aria label (for assistive tech)
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
@@ -73,7 +75,7 @@ export default Example;
|
|
|
73
75
|
| `isOptionDisabled` | `AsyncCreatableProps['isOptionDisabled']` | | | Override the built-in logic to detect whether an option is disabled
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
74
76
|
| `isMulti` | `AsyncCreatableProps['isMulti']` | | | Support multiple selected options
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
75
77
|
| `isSearchable` | `AsyncCreatableProps['isSearchable']` | | | Whether to enable search functionality
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
76
|
-
| `hasWarning` | `boolean` | | | Indicates the input field has a warning
|
|
78
|
+
| `hasWarning` | `boolean` | | | Indicates the input field has a warning
@deprecated Please use the `warnings` prop instead so users know the reason why the field is in warning state. |
|
|
77
79
|
| `maxMenuHeight` | `AsyncCreatableProps['maxMenuHeight']` | | | Maximum height of the menu before scrolling
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
78
80
|
| `menuPortalTarget` | `AsyncCreatableProps['menuPortalTarget']` | | | Dom element to portal the select menu to
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
79
81
|
| `menuPortalZIndex` | `number` | | | z-index value for the menu portal
<br>
Use in conjunction with `menuPortalTarget` |
|
|
@@ -114,6 +116,12 @@ export default Example;
|
|
|
114
116
|
(key: string, error?: boolean) => ReactNode;
|
|
115
117
|
```
|
|
116
118
|
|
|
119
|
+
### Signature `renderWarning`
|
|
120
|
+
|
|
121
|
+
```ts
|
|
122
|
+
(key: string, warning?: boolean) => ReactNode;
|
|
123
|
+
```
|
|
124
|
+
|
|
117
125
|
### Signature `onBlur`
|
|
118
126
|
|
|
119
127
|
```ts
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export * from "./declarations/src/index";
|
|
2
2
|
export { default } from "./declarations/src/index";
|
|
3
|
-
//# sourceMappingURL=
|
|
3
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbWVyY2V0b29scy11aWtpdC1hc3luYy1jcmVhdGFibGUtc2VsZWN0LWZpZWxkLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi9kZWNsYXJhdGlvbnMvc3JjL2luZGV4LmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==
|
|
@@ -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 AsyncCreatableSelectInput = require('@commercetools-uikit/async-creatable-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 AsyncCreatableSelectInput__default = /*#__PURE__*/_interopDefault(AsyncCreatableSelectInput);
|
|
52
53
|
var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
54
|
+
var FieldWarnings__default = /*#__PURE__*/_interopDefault(FieldWarnings);
|
|
53
55
|
|
|
54
|
-
function ownKeys(
|
|
55
|
-
function _objectSpread(
|
|
56
|
-
function
|
|
57
|
-
function _isNativeReflectConstruct() {
|
|
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-creatable-select-field-');
|
|
59
61
|
const sequentialErrorsId = utils.createSequentialId('async-creatable-select-field-error-')();
|
|
62
|
+
const sequentialWarningsId = utils.createSequentialId('async-creatable-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 AsyncCreatableSelectField = /*#__PURE__*/function (_Component) {
|
|
65
72
|
_inherits(AsyncCreatableSelectField, _Component);
|
|
66
|
-
var _super = _createSuper(AsyncCreatableSelectField);
|
|
67
73
|
function AsyncCreatableSelectField() {
|
|
68
74
|
var _this;
|
|
69
75
|
_classCallCheck(this, AsyncCreatableSelectField);
|
|
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 =
|
|
79
|
+
_this = _callSuper(this, AsyncCreatableSelectField, [...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 AsyncCreatableSelectField = /*#__PURE__*/function (_Component) {
|
|
|
82
88
|
key: "render",
|
|
83
89
|
value: function render() {
|
|
84
90
|
const hasError = AsyncCreatableSelectInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
|
|
91
|
+
const hasWarning = this.props.hasWarning || AsyncCreatableSelectInput__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', 'AsyncCreatableSelectField: `onChange` is required when field is not read only.') : void 0;
|
|
87
94
|
}
|
|
@@ -124,7 +131,7 @@ let AsyncCreatableSelectField = /*#__PURE__*/function (_Component) {
|
|
|
124
131
|
isOptionDisabled: this.props.isOptionDisabled,
|
|
125
132
|
isMulti: this.props.isMulti,
|
|
126
133
|
isSearchable: this.props.isSearchable,
|
|
127
|
-
hasWarning:
|
|
134
|
+
hasWarning: hasWarning,
|
|
128
135
|
maxMenuHeight: this.props.maxMenuHeight,
|
|
129
136
|
menuPortalTarget: this.props.menuPortalTarget,
|
|
130
137
|
menuPortalZIndex: this.props.menuPortalZIndex,
|
|
@@ -159,6 +166,11 @@ let AsyncCreatableSelectField = /*#__PURE__*/function (_Component) {
|
|
|
159
166
|
errors: this.props.errors,
|
|
160
167
|
isVisible: hasError,
|
|
161
168
|
renderError: this.props.renderError
|
|
169
|
+
}), jsxRuntime.jsx(FieldWarnings__default["default"], {
|
|
170
|
+
id: sequentialWarningsId,
|
|
171
|
+
warnings: this.props.warnings,
|
|
172
|
+
isVisible: hasWarning,
|
|
173
|
+
renderWarning: this.props.renderWarning
|
|
162
174
|
})]
|
|
163
175
|
})
|
|
164
176
|
});
|
|
@@ -188,6 +200,8 @@ AsyncCreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
188
200
|
horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
189
201
|
errors: _pt__default["default"].objectOf(_pt__default["default"].bool),
|
|
190
202
|
renderError: _pt__default["default"].func,
|
|
203
|
+
warnings: _pt__default["default"].objectOf(_pt__default["default"].bool),
|
|
204
|
+
renderWarning: _pt__default["default"].func,
|
|
191
205
|
isRequired: _pt__default["default"].bool,
|
|
192
206
|
touched: _pt__default["default"].oneOfType([_pt__default["default"].arrayOf(_pt__default["default"].bool), _pt__default["default"].bool]),
|
|
193
207
|
isAutofocussed: _pt__default["default"].bool,
|
|
@@ -207,7 +221,7 @@ AsyncCreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
207
221
|
} : {};
|
|
208
222
|
|
|
209
223
|
// NOTE: This string will be replaced on build time with the package version.
|
|
210
|
-
var version = "17.
|
|
224
|
+
var version = "17.1.0";
|
|
211
225
|
|
|
212
226
|
exports["default"] = AsyncCreatableSelectField;
|
|
213
227
|
exports.version = version;
|
|
@@ -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 AsyncCreatableSelectInput = require('@commercetools-uikit/async-creatable-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 AsyncCreatableSelectInput__default = /*#__PURE__*/_interopDefault(AsyncCreatableSelectInput);
|
|
50
51
|
var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
52
|
+
var FieldWarnings__default = /*#__PURE__*/_interopDefault(FieldWarnings);
|
|
51
53
|
|
|
52
|
-
function ownKeys(
|
|
53
|
-
function _objectSpread(
|
|
54
|
-
function
|
|
55
|
-
function _isNativeReflectConstruct() {
|
|
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-creatable-select-field-');
|
|
57
59
|
const sequentialErrorsId = utils.createSequentialId('async-creatable-select-field-error-')();
|
|
60
|
+
const sequentialWarningsId = utils.createSequentialId('async-creatable-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 AsyncCreatableSelectField = /*#__PURE__*/function (_Component) {
|
|
63
70
|
_inherits(AsyncCreatableSelectField, _Component);
|
|
64
|
-
var _super = _createSuper(AsyncCreatableSelectField);
|
|
65
71
|
function AsyncCreatableSelectField() {
|
|
66
72
|
var _this;
|
|
67
73
|
_classCallCheck(this, AsyncCreatableSelectField);
|
|
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 =
|
|
77
|
+
_this = _callSuper(this, AsyncCreatableSelectField, [...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 AsyncCreatableSelectField = /*#__PURE__*/function (_Component) {
|
|
|
80
86
|
key: "render",
|
|
81
87
|
value: function render() {
|
|
82
88
|
const hasError = AsyncCreatableSelectInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
|
|
89
|
+
const hasWarning = this.props.hasWarning || AsyncCreatableSelectInput__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 AsyncCreatableSelectField = /*#__PURE__*/function (_Component) {
|
|
|
115
122
|
isOptionDisabled: this.props.isOptionDisabled,
|
|
116
123
|
isMulti: this.props.isMulti,
|
|
117
124
|
isSearchable: this.props.isSearchable,
|
|
118
|
-
hasWarning:
|
|
125
|
+
hasWarning: hasWarning,
|
|
119
126
|
maxMenuHeight: this.props.maxMenuHeight,
|
|
120
127
|
menuPortalTarget: this.props.menuPortalTarget,
|
|
121
128
|
menuPortalZIndex: this.props.menuPortalZIndex,
|
|
@@ -150,6 +157,11 @@ let AsyncCreatableSelectField = /*#__PURE__*/function (_Component) {
|
|
|
150
157
|
errors: this.props.errors,
|
|
151
158
|
isVisible: hasError,
|
|
152
159
|
renderError: this.props.renderError
|
|
160
|
+
}), jsxRuntime.jsx(FieldWarnings__default["default"], {
|
|
161
|
+
id: sequentialWarningsId,
|
|
162
|
+
warnings: this.props.warnings,
|
|
163
|
+
isVisible: hasWarning,
|
|
164
|
+
renderWarning: this.props.renderWarning
|
|
153
165
|
})]
|
|
154
166
|
})
|
|
155
167
|
});
|
|
@@ -178,7 +190,7 @@ AsyncCreatableSelectField.getDerivedStateFromProps = (props, state) => ({
|
|
|
178
190
|
AsyncCreatableSelectField.propTypes = {};
|
|
179
191
|
|
|
180
192
|
// NOTE: This string will be replaced on build time with the package version.
|
|
181
|
-
var version = "17.
|
|
193
|
+
var version = "17.1.0";
|
|
182
194
|
|
|
183
195
|
exports["default"] = AsyncCreatableSelectField;
|
|
184
196
|
exports.version = version;
|
|
@@ -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 AsyncCreatableSelectInput from '@commercetools-uikit/async-creatable-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(
|
|
30
|
-
function _objectSpread(
|
|
31
|
-
function
|
|
32
|
-
function _isNativeReflectConstruct() {
|
|
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-creatable-select-field-');
|
|
34
35
|
const sequentialErrorsId = createSequentialId('async-creatable-select-field-error-')();
|
|
36
|
+
const sequentialWarningsId = createSequentialId('async-creatable-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 AsyncCreatableSelectField = /*#__PURE__*/function (_Component) {
|
|
40
46
|
_inherits(AsyncCreatableSelectField, _Component);
|
|
41
|
-
var _super = _createSuper(AsyncCreatableSelectField);
|
|
42
47
|
function AsyncCreatableSelectField() {
|
|
43
48
|
var _this;
|
|
44
49
|
_classCallCheck(this, AsyncCreatableSelectField);
|
|
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 =
|
|
53
|
+
_this = _callSuper(this, AsyncCreatableSelectField, [...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 AsyncCreatableSelectField = /*#__PURE__*/function (_Component) {
|
|
|
57
62
|
key: "render",
|
|
58
63
|
value: function render() {
|
|
59
64
|
const hasError = AsyncCreatableSelectInput.isTouched(this.props.touched) && hasErrors(this.props.errors);
|
|
65
|
+
const hasWarning = this.props.hasWarning || AsyncCreatableSelectInput.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', 'AsyncCreatableSelectField: `onChange` is required when field is not read only.') : void 0;
|
|
62
68
|
}
|
|
@@ -99,7 +105,7 @@ let AsyncCreatableSelectField = /*#__PURE__*/function (_Component) {
|
|
|
99
105
|
isOptionDisabled: this.props.isOptionDisabled,
|
|
100
106
|
isMulti: this.props.isMulti,
|
|
101
107
|
isSearchable: this.props.isSearchable,
|
|
102
|
-
hasWarning:
|
|
108
|
+
hasWarning: hasWarning,
|
|
103
109
|
maxMenuHeight: this.props.maxMenuHeight,
|
|
104
110
|
menuPortalTarget: this.props.menuPortalTarget,
|
|
105
111
|
menuPortalZIndex: this.props.menuPortalZIndex,
|
|
@@ -134,6 +140,11 @@ let AsyncCreatableSelectField = /*#__PURE__*/function (_Component) {
|
|
|
134
140
|
errors: this.props.errors,
|
|
135
141
|
isVisible: hasError,
|
|
136
142
|
renderError: this.props.renderError
|
|
143
|
+
}), jsx(FieldWarnings, {
|
|
144
|
+
id: sequentialWarningsId,
|
|
145
|
+
warnings: this.props.warnings,
|
|
146
|
+
isVisible: hasWarning,
|
|
147
|
+
renderWarning: this.props.renderWarning
|
|
137
148
|
})]
|
|
138
149
|
})
|
|
139
150
|
});
|
|
@@ -163,6 +174,8 @@ AsyncCreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
163
174
|
horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
164
175
|
errors: _pt.objectOf(_pt.bool),
|
|
165
176
|
renderError: _pt.func,
|
|
177
|
+
warnings: _pt.objectOf(_pt.bool),
|
|
178
|
+
renderWarning: _pt.func,
|
|
166
179
|
isRequired: _pt.bool,
|
|
167
180
|
touched: _pt.oneOfType([_pt.arrayOf(_pt.bool), _pt.bool]),
|
|
168
181
|
isAutofocussed: _pt.bool,
|
|
@@ -182,6 +195,6 @@ AsyncCreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
182
195
|
} : {};
|
|
183
196
|
|
|
184
197
|
// NOTE: This string will be replaced on build time with the package version.
|
|
185
|
-
var version = "17.
|
|
198
|
+
var version = "17.1.0";
|
|
186
199
|
|
|
187
200
|
export { AsyncCreatableSelectField as default, version };
|
|
@@ -4,6 +4,7 @@ import type { AsyncCreatableProps } from 'react-select/async-creatable';
|
|
|
4
4
|
type ReactSelectAsyncCreatableProps = AsyncCreatableProps<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 TAsyncCreatableSelectFieldProps = {
|
|
|
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'?: ReactSelectAsyncCreatableProps['aria-label'];
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/async-creatable-select-field",
|
|
3
3
|
"description": "An input component with validation states and a label getting a selection from an asynchronously loaded list from the user, and where options can be created by the user.",
|
|
4
|
-
"version": "17.
|
|
4
|
+
"version": "17.1.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-creatable-select-input": "17.
|
|
25
|
-
"@commercetools-uikit/constraints": "17.
|
|
26
|
-
"@commercetools-uikit/design-system": "17.
|
|
27
|
-
"@commercetools-uikit/field-errors": "17.
|
|
28
|
-
"@commercetools-uikit/field-label": "17.
|
|
29
|
-
"@commercetools-uikit/
|
|
30
|
-
"@commercetools-uikit/
|
|
24
|
+
"@commercetools-uikit/async-creatable-select-input": "17.1.0",
|
|
25
|
+
"@commercetools-uikit/constraints": "17.1.0",
|
|
26
|
+
"@commercetools-uikit/design-system": "17.1.0",
|
|
27
|
+
"@commercetools-uikit/field-errors": "17.1.0",
|
|
28
|
+
"@commercetools-uikit/field-label": "17.1.0",
|
|
29
|
+
"@commercetools-uikit/field-warnings": "17.1.0",
|
|
30
|
+
"@commercetools-uikit/spacings": "17.1.0",
|
|
31
|
+
"@commercetools-uikit/utils": "17.1.0",
|
|
31
32
|
"@emotion/react": "^11.10.5",
|
|
32
33
|
"@emotion/styled": "^11.10.5",
|
|
33
34
|
"prop-types": "15.8.1",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"commercetools-uikit-async-creatable-select-field.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
|