@commercetools-uikit/async-select-field 12.2.2 → 12.2.6
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
CHANGED
|
@@ -3,7 +3,15 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
|
|
6
|
-
var
|
|
6
|
+
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
|
|
7
|
+
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
|
|
8
|
+
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
|
|
9
|
+
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
|
|
10
|
+
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
|
|
11
|
+
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
12
|
+
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
13
|
+
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
14
|
+
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
7
15
|
var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
|
|
8
16
|
var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
|
|
9
17
|
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
|
|
@@ -12,7 +20,7 @@ var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
|
|
|
12
20
|
var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
|
|
13
21
|
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
|
|
14
22
|
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
15
|
-
var
|
|
23
|
+
var react = require('react');
|
|
16
24
|
var PropTypes = require('prop-types');
|
|
17
25
|
var requiredIf = require('react-required-if');
|
|
18
26
|
var utils = require('@commercetools-uikit/utils');
|
|
@@ -21,15 +29,22 @@ var Spacings = require('@commercetools-uikit/spacings');
|
|
|
21
29
|
var FieldLabel = require('@commercetools-uikit/field-label');
|
|
22
30
|
var AsyncSelectInput = require('@commercetools-uikit/async-select-input');
|
|
23
31
|
var FieldErrors = require('@commercetools-uikit/field-errors');
|
|
24
|
-
var
|
|
32
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
25
33
|
|
|
26
34
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
27
35
|
|
|
28
36
|
var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
|
|
37
|
+
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
|
|
38
|
+
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
|
|
39
|
+
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
|
|
40
|
+
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
|
|
41
|
+
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
|
|
42
|
+
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
43
|
+
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
44
|
+
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
29
45
|
var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
|
|
30
46
|
var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
|
|
31
47
|
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
32
|
-
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
33
48
|
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
34
49
|
var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
|
|
35
50
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
@@ -38,19 +53,23 @@ var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
|
|
|
38
53
|
var AsyncSelectInput__default = /*#__PURE__*/_interopDefault(AsyncSelectInput);
|
|
39
54
|
var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
40
55
|
|
|
41
|
-
function
|
|
56
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
|
|
42
57
|
|
|
43
|
-
function
|
|
58
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context8; _forEachInstanceProperty__default["default"](_context8 = ownKeys(Object(source), true)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context9; _forEachInstanceProperty__default["default"](_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
59
|
+
|
|
60
|
+
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); }; }
|
|
61
|
+
|
|
62
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
44
63
|
var sequentialId = utils.createSequentialId('async-select-field-');
|
|
45
64
|
|
|
46
65
|
var hasErrors = function hasErrors(errors) {
|
|
47
66
|
var _context;
|
|
48
67
|
|
|
49
|
-
return errors && _someInstanceProperty__default[
|
|
68
|
+
return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
|
|
50
69
|
};
|
|
51
70
|
|
|
52
|
-
var AsyncSelectField = /*#__PURE__*/function (
|
|
53
|
-
_inherits(AsyncSelectField,
|
|
71
|
+
var AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
72
|
+
_inherits(AsyncSelectField, _Component);
|
|
54
73
|
|
|
55
74
|
var _super = _createSuper(AsyncSelectField);
|
|
56
75
|
|
|
@@ -65,7 +84,7 @@ var AsyncSelectField = /*#__PURE__*/function (_React$Component) {
|
|
|
65
84
|
args[_key] = arguments[_key];
|
|
66
85
|
}
|
|
67
86
|
|
|
68
|
-
_this = _super.call.apply(_super, _concatInstanceProperty__default[
|
|
87
|
+
_this = _super.call.apply(_super, _concatInstanceProperty__default["default"](_context2 = [this]).call(_context2, args));
|
|
69
88
|
_this.state = {
|
|
70
89
|
// We generate an id in case no id is provided by the parent to attach the
|
|
71
90
|
// label to the input component.
|
|
@@ -77,69 +96,71 @@ var AsyncSelectField = /*#__PURE__*/function (_React$Component) {
|
|
|
77
96
|
_createClass(AsyncSelectField, [{
|
|
78
97
|
key: "render",
|
|
79
98
|
value: function render() {
|
|
80
|
-
var hasError = AsyncSelectInput__default[
|
|
81
|
-
return
|
|
82
|
-
max: this.props.horizontalConstraint
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
99
|
+
var hasError = AsyncSelectInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
|
|
100
|
+
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
101
|
+
max: this.props.horizontalConstraint,
|
|
102
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
103
|
+
scale: "xs",
|
|
104
|
+
children: [jsxRuntime.jsx(FieldLabel__default["default"], {
|
|
105
|
+
title: this.props.title,
|
|
106
|
+
hint: this.props.hint,
|
|
107
|
+
description: this.props.description,
|
|
108
|
+
onInfoButtonClick: this.props.onInfoButtonClick,
|
|
109
|
+
hintIcon: this.props.hintIcon,
|
|
110
|
+
badge: this.props.badge,
|
|
111
|
+
hasRequiredIndicator: this.props.isRequired,
|
|
112
|
+
htmlFor: this.state.id
|
|
113
|
+
}), jsxRuntime.jsx(AsyncSelectInput__default["default"], _objectSpread({
|
|
114
|
+
horizontalConstraint: "scale",
|
|
115
|
+
hasError: hasError,
|
|
116
|
+
"aria-label": this.props['aria-label'],
|
|
117
|
+
"aria-labelledby": this.props['aria-labelledby'],
|
|
118
|
+
isAutofocussed: this.props.isAutofocussed,
|
|
119
|
+
backspaceRemovesValue: this.props.backspaceRemovesValue,
|
|
120
|
+
components: this.props.components,
|
|
121
|
+
filterOption: this.props.filterOption,
|
|
122
|
+
id: this.state.id,
|
|
123
|
+
containerId: this.props.containerId,
|
|
124
|
+
isClearable: this.props.isClearable,
|
|
125
|
+
isDisabled: this.props.isDisabled,
|
|
126
|
+
isReadOnly: this.props.isReadOnly,
|
|
127
|
+
isOptionDisabled: this.props.isOptionDisabled,
|
|
128
|
+
isMulti: this.props.isMulti,
|
|
129
|
+
isSearchable: this.props.isSearchable,
|
|
130
|
+
hasWarning: this.props.hasWarning,
|
|
131
|
+
maxMenuHeight: this.props.maxMenuHeight,
|
|
132
|
+
menuPortalTarget: this.props.menuPortalTarget,
|
|
133
|
+
menuPortalZIndex: this.props.menuPortalZIndex,
|
|
134
|
+
menuShouldBlockScroll: this.props.menuShouldBlockScroll,
|
|
135
|
+
name: this.props.name,
|
|
136
|
+
noOptionsMessage: this.props.noOptionsMessage,
|
|
137
|
+
loadingMessage: this.props.loadingMessage,
|
|
138
|
+
onBlur: this.props.onBlur,
|
|
139
|
+
onChange: this.props.onChange,
|
|
140
|
+
onFocus: this.props.onFocus,
|
|
141
|
+
onInputChange: this.props.onInputChange,
|
|
142
|
+
placeholder: this.props.placeholder,
|
|
143
|
+
tabIndex: this.props.tabIndex,
|
|
144
|
+
tabSelectsValue: this.props.tabSelectsValue,
|
|
145
|
+
value: this.props.value // Async react-select props
|
|
146
|
+
,
|
|
147
|
+
defaultOptions: this.props.defaultOptions,
|
|
148
|
+
loadOptions: this.props.loadOptions,
|
|
149
|
+
cacheOptions: this.props.cacheOptions,
|
|
150
|
+
showOptionGroupDivider: this.props.showOptionGroupDivider,
|
|
151
|
+
iconLeft: this.props.iconLeft
|
|
152
|
+
}, utils.filterDataAttributes(this.props))), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
153
|
+
errors: this.props.errors,
|
|
154
|
+
isVisible: hasError,
|
|
155
|
+
renderError: this.props.renderError
|
|
156
|
+
})]
|
|
157
|
+
})
|
|
158
|
+
});
|
|
138
159
|
}
|
|
139
160
|
}]);
|
|
140
161
|
|
|
141
162
|
return AsyncSelectField;
|
|
142
|
-
}(
|
|
163
|
+
}(react.Component);
|
|
143
164
|
|
|
144
165
|
AsyncSelectField.displayName = 'AsyncSelectField';
|
|
145
166
|
AsyncSelectField.defaultProps = {
|
|
@@ -157,20 +178,20 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
157
178
|
/**
|
|
158
179
|
* Used as HTML id property. An id is auto-generated when it is not specified.
|
|
159
180
|
*/
|
|
160
|
-
id: PropTypes__default[
|
|
181
|
+
id: PropTypes__default["default"].string,
|
|
161
182
|
|
|
162
183
|
/**
|
|
163
184
|
* Horizontal size limit of the input fields.
|
|
164
185
|
*/
|
|
165
|
-
horizontalConstraint: PropTypes__default[
|
|
186
|
+
horizontalConstraint: PropTypes__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
166
187
|
|
|
167
188
|
/**
|
|
168
189
|
* A map of errors. Error messages for known errors are rendered automatically.
|
|
169
190
|
* <br />
|
|
170
191
|
* Unknown errors will be forwarded to `renderError`
|
|
171
192
|
*/
|
|
172
|
-
errors: PropTypes__default[
|
|
173
|
-
missing: PropTypes__default[
|
|
193
|
+
errors: PropTypes__default["default"].shape({
|
|
194
|
+
missing: PropTypes__default["default"].bool
|
|
174
195
|
}),
|
|
175
196
|
|
|
176
197
|
/**
|
|
@@ -178,12 +199,12 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
178
199
|
* <br />
|
|
179
200
|
* Signature: `(key, error) => React.node`
|
|
180
201
|
*/
|
|
181
|
-
renderError: PropTypes__default[
|
|
202
|
+
renderError: PropTypes__default["default"].func,
|
|
182
203
|
|
|
183
204
|
/**
|
|
184
205
|
* Indicates if the value is required. Shows an the "required asterisk" if so.
|
|
185
206
|
*/
|
|
186
|
-
isRequired: PropTypes__default[
|
|
207
|
+
isRequired: PropTypes__default["default"].bool,
|
|
187
208
|
|
|
188
209
|
/**
|
|
189
210
|
* Indicates whether the field was touched. Errors will only be shown when the field was touched.
|
|
@@ -195,102 +216,102 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
195
216
|
rest[_key2 - 1] = arguments[_key2];
|
|
196
217
|
}
|
|
197
218
|
|
|
198
|
-
return props.isMulti ? PropTypes__default[
|
|
219
|
+
return props.isMulti ? PropTypes__default["default"].arrayOf.apply(PropTypes__default["default"], _concatInstanceProperty__default["default"](_context3 = [PropTypes__default["default"].bool]).call(_context3, rest)).apply(void 0, _concatInstanceProperty__default["default"](_context4 = [props]).call(_context4, rest)) : PropTypes__default["default"].bool.apply(PropTypes__default["default"], _concatInstanceProperty__default["default"](_context5 = [props]).call(_context5, rest));
|
|
199
220
|
},
|
|
200
221
|
// AsyncSelectInput
|
|
201
222
|
|
|
202
223
|
/**
|
|
203
224
|
* Aria label (for assistive tech)
|
|
204
225
|
*/
|
|
205
|
-
'aria-label': PropTypes__default[
|
|
226
|
+
'aria-label': PropTypes__default["default"].string,
|
|
206
227
|
|
|
207
228
|
/**
|
|
208
229
|
* HTML ID of an element that should be used as the label (for assistive tech)
|
|
209
230
|
*/
|
|
210
|
-
'aria-labelledby': PropTypes__default[
|
|
231
|
+
'aria-labelledby': PropTypes__default["default"].string,
|
|
211
232
|
|
|
212
233
|
/**
|
|
213
234
|
* Focus the control when it is mounted
|
|
214
235
|
*/
|
|
215
|
-
isAutofocussed: PropTypes__default[
|
|
236
|
+
isAutofocussed: PropTypes__default["default"].bool,
|
|
216
237
|
|
|
217
238
|
/**
|
|
218
239
|
* Remove the currently focused option when the user presses backspace
|
|
219
240
|
*/
|
|
220
|
-
backspaceRemovesValue: PropTypes__default[
|
|
241
|
+
backspaceRemovesValue: PropTypes__default["default"].bool,
|
|
221
242
|
|
|
222
243
|
/**
|
|
223
244
|
* Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
|
|
224
245
|
*/
|
|
225
|
-
components: PropTypes__default[
|
|
246
|
+
components: PropTypes__default["default"].objectOf(PropTypes__default["default"].func),
|
|
226
247
|
|
|
227
248
|
/**
|
|
228
249
|
* Custom method to filter whether an option should be displayed in the menu
|
|
229
250
|
*/
|
|
230
|
-
filterOption: PropTypes__default[
|
|
251
|
+
filterOption: PropTypes__default["default"].func,
|
|
231
252
|
|
|
232
253
|
/**
|
|
233
254
|
* The id to set on the SelectContainer component
|
|
234
255
|
*/
|
|
235
|
-
containerId: PropTypes__default[
|
|
256
|
+
containerId: PropTypes__default["default"].string,
|
|
236
257
|
|
|
237
258
|
/**
|
|
238
259
|
* Is the select value clearable
|
|
239
260
|
*/
|
|
240
|
-
isClearable: PropTypes__default[
|
|
261
|
+
isClearable: PropTypes__default["default"].bool,
|
|
241
262
|
|
|
242
263
|
/**
|
|
243
264
|
* Is the select disabled
|
|
244
265
|
*/
|
|
245
|
-
isDisabled: PropTypes__default[
|
|
266
|
+
isDisabled: PropTypes__default["default"].bool,
|
|
246
267
|
|
|
247
268
|
/**
|
|
248
269
|
* Is the select read-only
|
|
249
270
|
*/
|
|
250
|
-
isReadOnly: PropTypes__default[
|
|
271
|
+
isReadOnly: PropTypes__default["default"].bool,
|
|
251
272
|
|
|
252
273
|
/**
|
|
253
274
|
* Override the built-in logic to detect whether an option is disabled
|
|
254
275
|
* <br />
|
|
255
276
|
* Signature: `(option, options) => boolean`
|
|
256
277
|
*/
|
|
257
|
-
isOptionDisabled: PropTypes__default[
|
|
278
|
+
isOptionDisabled: PropTypes__default["default"].func,
|
|
258
279
|
|
|
259
280
|
/**
|
|
260
281
|
* Support multiple selected options
|
|
261
282
|
*/
|
|
262
|
-
isMulti: PropTypes__default[
|
|
283
|
+
isMulti: PropTypes__default["default"].bool,
|
|
263
284
|
|
|
264
285
|
/**
|
|
265
286
|
* Whether to enable search functionality
|
|
266
287
|
*/
|
|
267
|
-
isSearchable: PropTypes__default[
|
|
268
|
-
hasWarning: PropTypes__default[
|
|
288
|
+
isSearchable: PropTypes__default["default"].bool,
|
|
289
|
+
hasWarning: PropTypes__default["default"].bool,
|
|
269
290
|
|
|
270
291
|
/**
|
|
271
292
|
* Maximum height of the menu before scrolling
|
|
272
293
|
*/
|
|
273
|
-
maxMenuHeight: PropTypes__default[
|
|
294
|
+
maxMenuHeight: PropTypes__default["default"].number,
|
|
274
295
|
|
|
275
296
|
/**
|
|
276
297
|
* Dom element to portal the select menu to
|
|
277
298
|
*/
|
|
278
|
-
menuPortalTarget: PropTypes__default[
|
|
299
|
+
menuPortalTarget: PropTypes__default["default"].instanceOf(utils.SafeHTMLElement),
|
|
279
300
|
|
|
280
301
|
/**
|
|
281
302
|
* z-index value for the menu portal
|
|
282
303
|
*/
|
|
283
|
-
menuPortalZIndex: PropTypes__default[
|
|
304
|
+
menuPortalZIndex: PropTypes__default["default"].number,
|
|
284
305
|
|
|
285
306
|
/**
|
|
286
307
|
* whether the menu should block scroll while open
|
|
287
308
|
*/
|
|
288
|
-
menuShouldBlockScroll: PropTypes__default[
|
|
309
|
+
menuShouldBlockScroll: PropTypes__default["default"].bool,
|
|
289
310
|
|
|
290
311
|
/**
|
|
291
312
|
* Name of the HTML Input (optional - without this, no input will be rendered)
|
|
292
313
|
*/
|
|
293
|
-
name: PropTypes__default[
|
|
314
|
+
name: PropTypes__default["default"].string,
|
|
294
315
|
|
|
295
316
|
/**
|
|
296
317
|
* Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place).
|
|
@@ -298,12 +319,12 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
298
319
|
* Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
|
|
299
320
|
* Signature: `({ inputValue }) => React.node `
|
|
300
321
|
*/
|
|
301
|
-
noOptionsMessage: PropTypes__default[
|
|
322
|
+
noOptionsMessage: PropTypes__default["default"].func,
|
|
302
323
|
|
|
303
324
|
/**
|
|
304
325
|
* Handle blur events on the control
|
|
305
326
|
*/
|
|
306
|
-
onBlur: PropTypes__default[
|
|
327
|
+
onBlur: PropTypes__default["default"].func,
|
|
307
328
|
|
|
308
329
|
/**
|
|
309
330
|
* Called with a fake event when value changes.
|
|
@@ -312,37 +333,37 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
312
333
|
* <br />
|
|
313
334
|
* Signature: `(event) => void`
|
|
314
335
|
*/
|
|
315
|
-
onChange: PropTypes__default[
|
|
336
|
+
onChange: PropTypes__default["default"].func,
|
|
316
337
|
|
|
317
338
|
/**
|
|
318
339
|
* Handle focus events on the control
|
|
319
340
|
*/
|
|
320
|
-
onFocus: PropTypes__default[
|
|
341
|
+
onFocus: PropTypes__default["default"].func,
|
|
321
342
|
|
|
322
343
|
/**
|
|
323
344
|
* Handle change events on the input
|
|
324
345
|
*/
|
|
325
|
-
onInputChange: PropTypes__default[
|
|
346
|
+
onInputChange: PropTypes__default["default"].func,
|
|
326
347
|
|
|
327
348
|
/**
|
|
328
349
|
* Placeholder text for the select value
|
|
329
350
|
*/
|
|
330
|
-
placeholder: PropTypes__default[
|
|
351
|
+
placeholder: PropTypes__default["default"].string,
|
|
331
352
|
|
|
332
353
|
/**
|
|
333
354
|
* loading message shown while the options are being loaded
|
|
334
355
|
*/
|
|
335
|
-
loadingMessage: PropTypes__default[
|
|
356
|
+
loadingMessage: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].func]),
|
|
336
357
|
|
|
337
358
|
/**
|
|
338
359
|
* Sets the tabIndex attribute on the input
|
|
339
360
|
*/
|
|
340
|
-
tabIndex: PropTypes__default[
|
|
361
|
+
tabIndex: PropTypes__default["default"].string,
|
|
341
362
|
|
|
342
363
|
/**
|
|
343
364
|
* Select the currently focused option when the user presses tab
|
|
344
365
|
*/
|
|
345
|
-
tabSelectsValue: PropTypes__default[
|
|
366
|
+
tabSelectsValue: PropTypes__default["default"].bool,
|
|
346
367
|
|
|
347
368
|
/**
|
|
348
369
|
* The value of the select; reflected by the selected option
|
|
@@ -354,13 +375,13 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
354
375
|
rest[_key3 - 1] = arguments[_key3];
|
|
355
376
|
}
|
|
356
377
|
|
|
357
|
-
return props.isMulti ? PropTypes__default[
|
|
358
|
-
value: PropTypes__default[
|
|
359
|
-
})).apply(void 0, _concatInstanceProperty__default[
|
|
360
|
-
value: PropTypes__default[
|
|
361
|
-
}).apply(void 0, _concatInstanceProperty__default[
|
|
378
|
+
return props.isMulti ? PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
|
|
379
|
+
value: PropTypes__default["default"].string.isRequired
|
|
380
|
+
})).apply(void 0, _concatInstanceProperty__default["default"](_context6 = [props]).call(_context6, rest)) : PropTypes__default["default"].shape({
|
|
381
|
+
value: PropTypes__default["default"].string.isRequired
|
|
382
|
+
}).apply(void 0, _concatInstanceProperty__default["default"](_context7 = [props]).call(_context7, rest));
|
|
362
383
|
},
|
|
363
|
-
showOptionGroupDivider: PropTypes__default[
|
|
384
|
+
showOptionGroupDivider: PropTypes__default["default"].bool,
|
|
364
385
|
// Async props
|
|
365
386
|
|
|
366
387
|
/**
|
|
@@ -368,37 +389,37 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
368
389
|
* <br />
|
|
369
390
|
* When set to `true`, the results for `loadOptions('')` will be autoloaded.
|
|
370
391
|
*/
|
|
371
|
-
defaultOptions: PropTypes__default[
|
|
372
|
-
value: PropTypes__default[
|
|
392
|
+
defaultOptions: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
|
|
393
|
+
value: PropTypes__default["default"].string.isRequired
|
|
373
394
|
}))]),
|
|
374
395
|
|
|
375
396
|
/**
|
|
376
397
|
* Function that returns a promise, which is the set of options to be used once the promise resolves.
|
|
377
398
|
*/
|
|
378
|
-
loadOptions: PropTypes__default[
|
|
399
|
+
loadOptions: PropTypes__default["default"].func.isRequired,
|
|
379
400
|
|
|
380
401
|
/**
|
|
381
402
|
* If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
|
|
382
403
|
*/
|
|
383
|
-
cacheOptions: PropTypes__default[
|
|
404
|
+
cacheOptions: PropTypes__default["default"].any,
|
|
384
405
|
// LabelField
|
|
385
406
|
|
|
386
407
|
/**
|
|
387
408
|
* Title of the label
|
|
388
409
|
*/
|
|
389
|
-
title: PropTypes__default[
|
|
410
|
+
title: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]).isRequired,
|
|
390
411
|
|
|
391
412
|
/**
|
|
392
413
|
* 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`.
|
|
393
414
|
*/
|
|
394
|
-
hint: requiredIf__default[
|
|
415
|
+
hint: requiredIf__default["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]), function (props) {
|
|
395
416
|
return props.hintIcon;
|
|
396
417
|
}),
|
|
397
418
|
|
|
398
419
|
/**
|
|
399
420
|
* Provides a description for the title.
|
|
400
421
|
*/
|
|
401
|
-
description: PropTypes__default[
|
|
422
|
+
description: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
|
|
402
423
|
|
|
403
424
|
/**
|
|
404
425
|
* Function called when info button is pressed.
|
|
@@ -407,30 +428,30 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
407
428
|
* <br />
|
|
408
429
|
* Signature: `(event) => void`
|
|
409
430
|
*/
|
|
410
|
-
onInfoButtonClick: PropTypes__default[
|
|
431
|
+
onInfoButtonClick: PropTypes__default["default"].func,
|
|
411
432
|
|
|
412
433
|
/**
|
|
413
434
|
* Icon to be displayed beside the hint text.
|
|
414
435
|
* <br />
|
|
415
436
|
* Will only get rendered when `hint` is passed as well.
|
|
416
437
|
*/
|
|
417
|
-
hintIcon: PropTypes__default[
|
|
438
|
+
hintIcon: PropTypes__default["default"].node,
|
|
418
439
|
|
|
419
440
|
/**
|
|
420
441
|
* Badge to be displayed beside the label.
|
|
421
442
|
* <br />
|
|
422
443
|
* Might be used to display additional information about the content of the field (E.g verified email)
|
|
423
444
|
*/
|
|
424
|
-
badge: PropTypes__default[
|
|
445
|
+
badge: PropTypes__default["default"].node,
|
|
425
446
|
|
|
426
447
|
/**
|
|
427
448
|
* Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled.
|
|
428
449
|
*/
|
|
429
|
-
iconLeft: PropTypes__default[
|
|
450
|
+
iconLeft: PropTypes__default["default"].node
|
|
430
451
|
} : {};
|
|
431
452
|
|
|
432
|
-
// NOTE: This string will be replaced
|
|
433
|
-
var version =
|
|
453
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
454
|
+
var version = "12.2.6";
|
|
434
455
|
|
|
435
|
-
exports[
|
|
456
|
+
exports["default"] = AsyncSelectField;
|
|
436
457
|
exports.version = version;
|
|
@@ -3,7 +3,15 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
|
|
6
|
-
var
|
|
6
|
+
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
|
|
7
|
+
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
|
|
8
|
+
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
|
|
9
|
+
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
|
|
10
|
+
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
|
|
11
|
+
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
12
|
+
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
13
|
+
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
14
|
+
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
7
15
|
var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
|
|
8
16
|
var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
|
|
9
17
|
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
|
|
@@ -12,7 +20,7 @@ var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
|
|
|
12
20
|
var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
|
|
13
21
|
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
|
|
14
22
|
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
15
|
-
var
|
|
23
|
+
var react = require('react');
|
|
16
24
|
require('prop-types');
|
|
17
25
|
require('react-required-if');
|
|
18
26
|
var utils = require('@commercetools-uikit/utils');
|
|
@@ -21,34 +29,45 @@ var Spacings = require('@commercetools-uikit/spacings');
|
|
|
21
29
|
var FieldLabel = require('@commercetools-uikit/field-label');
|
|
22
30
|
var AsyncSelectInput = require('@commercetools-uikit/async-select-input');
|
|
23
31
|
var FieldErrors = require('@commercetools-uikit/field-errors');
|
|
24
|
-
var
|
|
32
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
25
33
|
|
|
26
34
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
27
35
|
|
|
28
36
|
var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
|
|
37
|
+
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
|
|
38
|
+
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
|
|
39
|
+
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
|
|
40
|
+
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
|
|
41
|
+
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
|
|
42
|
+
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
43
|
+
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
44
|
+
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
29
45
|
var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
|
|
30
46
|
var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
|
|
31
47
|
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
32
|
-
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
33
48
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
34
49
|
var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
|
|
35
50
|
var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
|
|
36
51
|
var AsyncSelectInput__default = /*#__PURE__*/_interopDefault(AsyncSelectInput);
|
|
37
52
|
var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
38
53
|
|
|
39
|
-
function
|
|
54
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
|
|
40
55
|
|
|
41
|
-
function
|
|
56
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context8; _forEachInstanceProperty__default["default"](_context8 = ownKeys(Object(source), true)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context9; _forEachInstanceProperty__default["default"](_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
57
|
+
|
|
58
|
+
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); }; }
|
|
59
|
+
|
|
60
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
42
61
|
var sequentialId = utils.createSequentialId('async-select-field-');
|
|
43
62
|
|
|
44
63
|
var hasErrors = function hasErrors(errors) {
|
|
45
64
|
var _context;
|
|
46
65
|
|
|
47
|
-
return errors && _someInstanceProperty__default[
|
|
66
|
+
return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
|
|
48
67
|
};
|
|
49
68
|
|
|
50
|
-
var AsyncSelectField = /*#__PURE__*/function (
|
|
51
|
-
_inherits(AsyncSelectField,
|
|
69
|
+
var AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
70
|
+
_inherits(AsyncSelectField, _Component);
|
|
52
71
|
|
|
53
72
|
var _super = _createSuper(AsyncSelectField);
|
|
54
73
|
|
|
@@ -63,7 +82,7 @@ var AsyncSelectField = /*#__PURE__*/function (_React$Component) {
|
|
|
63
82
|
args[_key] = arguments[_key];
|
|
64
83
|
}
|
|
65
84
|
|
|
66
|
-
_this = _super.call.apply(_super, _concatInstanceProperty__default[
|
|
85
|
+
_this = _super.call.apply(_super, _concatInstanceProperty__default["default"](_context2 = [this]).call(_context2, args));
|
|
67
86
|
_this.state = {
|
|
68
87
|
// We generate an id in case no id is provided by the parent to attach the
|
|
69
88
|
// label to the input component.
|
|
@@ -75,69 +94,71 @@ var AsyncSelectField = /*#__PURE__*/function (_React$Component) {
|
|
|
75
94
|
_createClass(AsyncSelectField, [{
|
|
76
95
|
key: "render",
|
|
77
96
|
value: function render() {
|
|
78
|
-
var hasError = AsyncSelectInput__default[
|
|
79
|
-
return
|
|
80
|
-
max: this.props.horizontalConstraint
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
97
|
+
var hasError = AsyncSelectInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
|
|
98
|
+
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
99
|
+
max: this.props.horizontalConstraint,
|
|
100
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
101
|
+
scale: "xs",
|
|
102
|
+
children: [jsxRuntime.jsx(FieldLabel__default["default"], {
|
|
103
|
+
title: this.props.title,
|
|
104
|
+
hint: this.props.hint,
|
|
105
|
+
description: this.props.description,
|
|
106
|
+
onInfoButtonClick: this.props.onInfoButtonClick,
|
|
107
|
+
hintIcon: this.props.hintIcon,
|
|
108
|
+
badge: this.props.badge,
|
|
109
|
+
hasRequiredIndicator: this.props.isRequired,
|
|
110
|
+
htmlFor: this.state.id
|
|
111
|
+
}), jsxRuntime.jsx(AsyncSelectInput__default["default"], _objectSpread({
|
|
112
|
+
horizontalConstraint: "scale",
|
|
113
|
+
hasError: hasError,
|
|
114
|
+
"aria-label": this.props['aria-label'],
|
|
115
|
+
"aria-labelledby": this.props['aria-labelledby'],
|
|
116
|
+
isAutofocussed: this.props.isAutofocussed,
|
|
117
|
+
backspaceRemovesValue: this.props.backspaceRemovesValue,
|
|
118
|
+
components: this.props.components,
|
|
119
|
+
filterOption: this.props.filterOption,
|
|
120
|
+
id: this.state.id,
|
|
121
|
+
containerId: this.props.containerId,
|
|
122
|
+
isClearable: this.props.isClearable,
|
|
123
|
+
isDisabled: this.props.isDisabled,
|
|
124
|
+
isReadOnly: this.props.isReadOnly,
|
|
125
|
+
isOptionDisabled: this.props.isOptionDisabled,
|
|
126
|
+
isMulti: this.props.isMulti,
|
|
127
|
+
isSearchable: this.props.isSearchable,
|
|
128
|
+
hasWarning: this.props.hasWarning,
|
|
129
|
+
maxMenuHeight: this.props.maxMenuHeight,
|
|
130
|
+
menuPortalTarget: this.props.menuPortalTarget,
|
|
131
|
+
menuPortalZIndex: this.props.menuPortalZIndex,
|
|
132
|
+
menuShouldBlockScroll: this.props.menuShouldBlockScroll,
|
|
133
|
+
name: this.props.name,
|
|
134
|
+
noOptionsMessage: this.props.noOptionsMessage,
|
|
135
|
+
loadingMessage: this.props.loadingMessage,
|
|
136
|
+
onBlur: this.props.onBlur,
|
|
137
|
+
onChange: this.props.onChange,
|
|
138
|
+
onFocus: this.props.onFocus,
|
|
139
|
+
onInputChange: this.props.onInputChange,
|
|
140
|
+
placeholder: this.props.placeholder,
|
|
141
|
+
tabIndex: this.props.tabIndex,
|
|
142
|
+
tabSelectsValue: this.props.tabSelectsValue,
|
|
143
|
+
value: this.props.value // Async react-select props
|
|
144
|
+
,
|
|
145
|
+
defaultOptions: this.props.defaultOptions,
|
|
146
|
+
loadOptions: this.props.loadOptions,
|
|
147
|
+
cacheOptions: this.props.cacheOptions,
|
|
148
|
+
showOptionGroupDivider: this.props.showOptionGroupDivider,
|
|
149
|
+
iconLeft: this.props.iconLeft
|
|
150
|
+
}, utils.filterDataAttributes(this.props))), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
151
|
+
errors: this.props.errors,
|
|
152
|
+
isVisible: hasError,
|
|
153
|
+
renderError: this.props.renderError
|
|
154
|
+
})]
|
|
155
|
+
})
|
|
156
|
+
});
|
|
136
157
|
}
|
|
137
158
|
}]);
|
|
138
159
|
|
|
139
160
|
return AsyncSelectField;
|
|
140
|
-
}(
|
|
161
|
+
}(react.Component);
|
|
141
162
|
|
|
142
163
|
AsyncSelectField.displayName = 'AsyncSelectField';
|
|
143
164
|
AsyncSelectField.defaultProps = {
|
|
@@ -151,8 +172,8 @@ AsyncSelectField.getDerivedStateFromProps = function (props, state) {
|
|
|
151
172
|
};
|
|
152
173
|
AsyncSelectField.propTypes = {};
|
|
153
174
|
|
|
154
|
-
// NOTE: This string will be replaced
|
|
155
|
-
var version =
|
|
175
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
176
|
+
var version = "12.2.6";
|
|
156
177
|
|
|
157
|
-
exports[
|
|
178
|
+
exports["default"] = AsyncSelectField;
|
|
158
179
|
exports.version = version;
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import _Reflect$construct from '@babel/runtime-corejs3/core-js-stable/reflect/construct';
|
|
2
|
-
import
|
|
2
|
+
import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
|
|
3
|
+
import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
|
|
4
|
+
import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
|
|
5
|
+
import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
|
|
6
|
+
import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
|
|
7
|
+
import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
|
|
8
|
+
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
|
|
9
|
+
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
|
|
10
|
+
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
|
|
3
11
|
import _classCallCheck from '@babel/runtime-corejs3/helpers/esm/classCallCheck';
|
|
4
12
|
import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
|
|
5
13
|
import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
|
|
@@ -8,7 +16,7 @@ import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
|
|
|
8
16
|
import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
|
|
9
17
|
import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
|
|
10
18
|
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
|
|
11
|
-
import
|
|
19
|
+
import { Component } from 'react';
|
|
12
20
|
import PropTypes from 'prop-types';
|
|
13
21
|
import requiredIf from 'react-required-if';
|
|
14
22
|
import { createSequentialId, filterDataAttributes, getFieldId, SafeHTMLElement } from '@commercetools-uikit/utils';
|
|
@@ -17,7 +25,11 @@ import Spacings from '@commercetools-uikit/spacings';
|
|
|
17
25
|
import FieldLabel from '@commercetools-uikit/field-label';
|
|
18
26
|
import AsyncSelectInput from '@commercetools-uikit/async-select-input';
|
|
19
27
|
import FieldErrors from '@commercetools-uikit/field-errors';
|
|
20
|
-
import { jsx } from '@emotion/react';
|
|
28
|
+
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
29
|
+
|
|
30
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
31
|
+
|
|
32
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context8; _forEachInstanceProperty(_context8 = ownKeys(Object(source), true)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context9; _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
21
33
|
|
|
22
34
|
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); }; }
|
|
23
35
|
|
|
@@ -30,8 +42,8 @@ var hasErrors = function hasErrors(errors) {
|
|
|
30
42
|
return errors && _someInstanceProperty(_context = _Object$values(errors)).call(_context, Boolean);
|
|
31
43
|
};
|
|
32
44
|
|
|
33
|
-
var AsyncSelectField = /*#__PURE__*/function (
|
|
34
|
-
_inherits(AsyncSelectField,
|
|
45
|
+
var AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
46
|
+
_inherits(AsyncSelectField, _Component);
|
|
35
47
|
|
|
36
48
|
var _super = _createSuper(AsyncSelectField);
|
|
37
49
|
|
|
@@ -60,67 +72,69 @@ var AsyncSelectField = /*#__PURE__*/function (_React$Component) {
|
|
|
60
72
|
value: function render() {
|
|
61
73
|
var hasError = AsyncSelectInput.isTouched(this.props.touched) && hasErrors(this.props.errors);
|
|
62
74
|
return jsx(Constraints.Horizontal, {
|
|
63
|
-
max: this.props.horizontalConstraint
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
75
|
+
max: this.props.horizontalConstraint,
|
|
76
|
+
children: jsxs(Spacings.Stack, {
|
|
77
|
+
scale: "xs",
|
|
78
|
+
children: [jsx(FieldLabel, {
|
|
79
|
+
title: this.props.title,
|
|
80
|
+
hint: this.props.hint,
|
|
81
|
+
description: this.props.description,
|
|
82
|
+
onInfoButtonClick: this.props.onInfoButtonClick,
|
|
83
|
+
hintIcon: this.props.hintIcon,
|
|
84
|
+
badge: this.props.badge,
|
|
85
|
+
hasRequiredIndicator: this.props.isRequired,
|
|
86
|
+
htmlFor: this.state.id
|
|
87
|
+
}), jsx(AsyncSelectInput, _objectSpread({
|
|
88
|
+
horizontalConstraint: "scale",
|
|
89
|
+
hasError: hasError,
|
|
90
|
+
"aria-label": this.props['aria-label'],
|
|
91
|
+
"aria-labelledby": this.props['aria-labelledby'],
|
|
92
|
+
isAutofocussed: this.props.isAutofocussed,
|
|
93
|
+
backspaceRemovesValue: this.props.backspaceRemovesValue,
|
|
94
|
+
components: this.props.components,
|
|
95
|
+
filterOption: this.props.filterOption,
|
|
96
|
+
id: this.state.id,
|
|
97
|
+
containerId: this.props.containerId,
|
|
98
|
+
isClearable: this.props.isClearable,
|
|
99
|
+
isDisabled: this.props.isDisabled,
|
|
100
|
+
isReadOnly: this.props.isReadOnly,
|
|
101
|
+
isOptionDisabled: this.props.isOptionDisabled,
|
|
102
|
+
isMulti: this.props.isMulti,
|
|
103
|
+
isSearchable: this.props.isSearchable,
|
|
104
|
+
hasWarning: this.props.hasWarning,
|
|
105
|
+
maxMenuHeight: this.props.maxMenuHeight,
|
|
106
|
+
menuPortalTarget: this.props.menuPortalTarget,
|
|
107
|
+
menuPortalZIndex: this.props.menuPortalZIndex,
|
|
108
|
+
menuShouldBlockScroll: this.props.menuShouldBlockScroll,
|
|
109
|
+
name: this.props.name,
|
|
110
|
+
noOptionsMessage: this.props.noOptionsMessage,
|
|
111
|
+
loadingMessage: this.props.loadingMessage,
|
|
112
|
+
onBlur: this.props.onBlur,
|
|
113
|
+
onChange: this.props.onChange,
|
|
114
|
+
onFocus: this.props.onFocus,
|
|
115
|
+
onInputChange: this.props.onInputChange,
|
|
116
|
+
placeholder: this.props.placeholder,
|
|
117
|
+
tabIndex: this.props.tabIndex,
|
|
118
|
+
tabSelectsValue: this.props.tabSelectsValue,
|
|
119
|
+
value: this.props.value // Async react-select props
|
|
120
|
+
,
|
|
121
|
+
defaultOptions: this.props.defaultOptions,
|
|
122
|
+
loadOptions: this.props.loadOptions,
|
|
123
|
+
cacheOptions: this.props.cacheOptions,
|
|
124
|
+
showOptionGroupDivider: this.props.showOptionGroupDivider,
|
|
125
|
+
iconLeft: this.props.iconLeft
|
|
126
|
+
}, filterDataAttributes(this.props))), jsx(FieldErrors, {
|
|
127
|
+
errors: this.props.errors,
|
|
128
|
+
isVisible: hasError,
|
|
129
|
+
renderError: this.props.renderError
|
|
130
|
+
})]
|
|
131
|
+
})
|
|
132
|
+
});
|
|
119
133
|
}
|
|
120
134
|
}]);
|
|
121
135
|
|
|
122
136
|
return AsyncSelectField;
|
|
123
|
-
}(
|
|
137
|
+
}(Component);
|
|
124
138
|
|
|
125
139
|
AsyncSelectField.displayName = 'AsyncSelectField';
|
|
126
140
|
AsyncSelectField.defaultProps = {
|
|
@@ -410,7 +424,7 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
410
424
|
iconLeft: PropTypes.node
|
|
411
425
|
} : {};
|
|
412
426
|
|
|
413
|
-
// NOTE: This string will be replaced
|
|
414
|
-
var version =
|
|
427
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
428
|
+
var version = "12.2.6";
|
|
415
429
|
|
|
416
430
|
export { AsyncSelectField as default, version };
|
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": "12.2.
|
|
4
|
+
"version": "12.2.6",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
"homepage": "https://uikit.commercetools.com",
|
|
12
12
|
"keywords": ["javascript", "design system", "react", "uikit"],
|
|
13
13
|
"license": "MIT",
|
|
14
|
-
"private": false,
|
|
15
14
|
"publishConfig": {
|
|
16
15
|
"access": "public"
|
|
17
16
|
},
|
|
@@ -19,19 +18,16 @@
|
|
|
19
18
|
"main": "dist/commercetools-uikit-async-select-field.cjs.js",
|
|
20
19
|
"module": "dist/commercetools-uikit-async-select-field.esm.js",
|
|
21
20
|
"files": ["dist"],
|
|
22
|
-
"scripts": {
|
|
23
|
-
"prepare": "../../../../scripts/version.js replace"
|
|
24
|
-
},
|
|
25
21
|
"dependencies": {
|
|
26
|
-
"@babel/runtime": "7.
|
|
27
|
-
"@babel/runtime-corejs3": "7.
|
|
28
|
-
"@commercetools-uikit/async-select-input": "12.2.
|
|
29
|
-
"@commercetools-uikit/constraints": "12.2.
|
|
30
|
-
"@commercetools-uikit/design-system": "12.2.
|
|
31
|
-
"@commercetools-uikit/field-errors": "12.2.
|
|
32
|
-
"@commercetools-uikit/field-label": "12.2.
|
|
33
|
-
"@commercetools-uikit/spacings": "12.2.
|
|
34
|
-
"@commercetools-uikit/utils": "12.2.
|
|
22
|
+
"@babel/runtime": "7.16.3",
|
|
23
|
+
"@babel/runtime-corejs3": "7.16.3",
|
|
24
|
+
"@commercetools-uikit/async-select-input": "12.2.6",
|
|
25
|
+
"@commercetools-uikit/constraints": "12.2.5",
|
|
26
|
+
"@commercetools-uikit/design-system": "12.2.5",
|
|
27
|
+
"@commercetools-uikit/field-errors": "12.2.5",
|
|
28
|
+
"@commercetools-uikit/field-label": "12.2.6",
|
|
29
|
+
"@commercetools-uikit/spacings": "12.2.5",
|
|
30
|
+
"@commercetools-uikit/utils": "12.2.5",
|
|
35
31
|
"@emotion/react": "^11.4.0",
|
|
36
32
|
"@emotion/styled": "^11.3.0",
|
|
37
33
|
"prop-types": "15.7.2",
|