@commercetools-uikit/async-select-input 12.2.1 → 12.2.5
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
|
@@ -10,10 +10,8 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
|
|
|
10
10
|
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
11
11
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
12
12
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
13
|
-
var _extends = require('@babel/runtime-corejs3/helpers/extends');
|
|
14
13
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
15
14
|
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
16
|
-
require('react');
|
|
17
15
|
var PropTypes = require('prop-types');
|
|
18
16
|
var reactIntl = require('react-intl');
|
|
19
17
|
var react = require('@emotion/react');
|
|
@@ -23,6 +21,7 @@ var utils = require('@commercetools-uikit/utils');
|
|
|
23
21
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
24
22
|
var LoadingSpinner = require('@commercetools-uikit/loading-spinner');
|
|
25
23
|
var selectUtils = require('@commercetools-uikit/select-utils');
|
|
24
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
26
25
|
|
|
27
26
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
28
27
|
|
|
@@ -40,12 +39,12 @@ var AsyncSelect__default = /*#__PURE__*/_interopDefault(AsyncSelect);
|
|
|
40
39
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
41
40
|
var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
|
|
42
41
|
|
|
43
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default[
|
|
42
|
+
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; }
|
|
44
43
|
|
|
45
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default[
|
|
44
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source), true)).call(_context3, 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 _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
46
45
|
|
|
47
46
|
var LoadingIndicator = function LoadingIndicator() {
|
|
48
|
-
return
|
|
47
|
+
return jsxRuntime.jsx(LoadingSpinner__default["default"], {
|
|
49
48
|
scale: "s"
|
|
50
49
|
});
|
|
51
50
|
};
|
|
@@ -71,100 +70,103 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
71
70
|
return props.loadingMessage || intl.formatMessage(selectUtils.messages.loadingOptions);
|
|
72
71
|
};
|
|
73
72
|
|
|
74
|
-
return
|
|
75
|
-
max: props.horizontalConstraint
|
|
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
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
onBlur: props.onBlur ? function () {
|
|
123
|
-
var event = {
|
|
124
|
-
target: {
|
|
125
|
-
name: function () {
|
|
126
|
-
if (!props.name) return undefined;
|
|
127
|
-
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
128
|
-
// state as an array instead of a boolean only.
|
|
129
|
-
// Otherwise the shapes would clash on submission, as
|
|
130
|
-
// Formik will create an array on submission anyways.
|
|
131
|
-
|
|
132
|
-
return "".concat(props.name, ".0");
|
|
133
|
-
}()
|
|
73
|
+
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
74
|
+
max: props.horizontalConstraint,
|
|
75
|
+
children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
|
|
76
|
+
children: jsxRuntime.jsx(AsyncSelect__default["default"], {
|
|
77
|
+
"aria-label": props['aria-label'],
|
|
78
|
+
"aria-labelledby": props['aria-labelledby'],
|
|
79
|
+
autoFocus: props.isAutofocussed,
|
|
80
|
+
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
81
|
+
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
82
|
+
// eslint-disable-next-line react/display-name
|
|
83
|
+
Input: function Input(ownProps) {
|
|
84
|
+
return jsxRuntime.jsx(reactSelect.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
85
|
+
readOnly: true
|
|
86
|
+
}));
|
|
87
|
+
}
|
|
88
|
+
} : {}), props.components),
|
|
89
|
+
menuIsOpen: props.isReadOnly ? false : undefined,
|
|
90
|
+
styles: selectUtils.createSelectStyles({
|
|
91
|
+
hasWarning: props.hasWarning,
|
|
92
|
+
hasError: props.hasError,
|
|
93
|
+
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
94
|
+
menuPortalZIndex: props.menuPortalZIndex,
|
|
95
|
+
isDisabled: props.isDisabled,
|
|
96
|
+
isReadOnly: props.isReadOnly
|
|
97
|
+
}, theme),
|
|
98
|
+
filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
|
|
99
|
+
// but we use "id" (for the input) and "containerId" (for the container)
|
|
100
|
+
// instead.
|
|
101
|
+
// This makes it easier to less confusing to use with <label />s.
|
|
102
|
+
,
|
|
103
|
+
id: props.containerId,
|
|
104
|
+
inputId: props.id,
|
|
105
|
+
inputValue: props.inputValue,
|
|
106
|
+
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
107
|
+
isDisabled: props.isDisabled,
|
|
108
|
+
isOptionDisabled: props.isOptionDisabled,
|
|
109
|
+
isMulti: props.isMulti,
|
|
110
|
+
isSearchable: props.isSearchable,
|
|
111
|
+
maxMenuHeight: props.maxMenuHeight,
|
|
112
|
+
menuPortalTarget: props.menuPortalTarget,
|
|
113
|
+
menuShouldBlockScroll: props.menuShouldBlockScroll,
|
|
114
|
+
name: props.name,
|
|
115
|
+
loadingMessage: loadingMessage,
|
|
116
|
+
noOptionsMessage: props.noOptionsMessage || function (_ref) {
|
|
117
|
+
var inputValue = _ref.inputValue;
|
|
118
|
+
return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
|
|
119
|
+
inputValue: inputValue
|
|
120
|
+
});
|
|
134
121
|
},
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
122
|
+
onBlur: props.onBlur ? function () {
|
|
123
|
+
var event = {
|
|
124
|
+
target: {
|
|
125
|
+
name: function () {
|
|
126
|
+
if (!props.name) return undefined;
|
|
127
|
+
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
128
|
+
// state as an array instead of a boolean only.
|
|
129
|
+
// Otherwise the shapes would clash on submission, as
|
|
130
|
+
// Formik will create an array on submission anyways.
|
|
131
|
+
|
|
132
|
+
return "".concat(props.name, ".0");
|
|
133
|
+
}()
|
|
134
|
+
},
|
|
135
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
136
|
+
persist: function persist() {}
|
|
137
|
+
};
|
|
138
|
+
props.onBlur(event);
|
|
139
|
+
} : undefined,
|
|
140
|
+
onChange: function onChange(value, info) {
|
|
141
|
+
var newValue = value;
|
|
142
|
+
|
|
143
|
+
if (props.isMulti && !newValue) {
|
|
144
|
+
newValue = [];
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
props.onChange({
|
|
148
|
+
target: {
|
|
149
|
+
name: props.name,
|
|
150
|
+
value: newValue
|
|
151
|
+
},
|
|
152
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
153
|
+
persist: function persist() {}
|
|
154
|
+
}, info);
|
|
151
155
|
},
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
iconLeft: props.iconLeft
|
|
167
|
-
})));
|
|
156
|
+
onFocus: props.onFocus,
|
|
157
|
+
onInputChange: props.onInputChange,
|
|
158
|
+
placeholder: placeholder,
|
|
159
|
+
tabIndex: props.tabIndex,
|
|
160
|
+
tabSelectsValue: props.tabSelectsValue,
|
|
161
|
+
value: props.value // Async react-select props
|
|
162
|
+
,
|
|
163
|
+
defaultOptions: props.defaultOptions,
|
|
164
|
+
loadOptions: props.loadOptions,
|
|
165
|
+
cacheOptions: props.cacheOptions,
|
|
166
|
+
iconLeft: props.iconLeft
|
|
167
|
+
})
|
|
168
|
+
}))
|
|
169
|
+
});
|
|
168
170
|
}; // Formik will set the field to an array on submission, so we always have to
|
|
169
171
|
// deal with an array. The touched state ends up being an empty array in case
|
|
170
172
|
// values were removed only. So we have to treat any array we receive as
|
|
@@ -187,22 +189,22 @@ AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
187
189
|
/**
|
|
188
190
|
* Horizontal size limit of the input fields.
|
|
189
191
|
*/
|
|
190
|
-
horizontalConstraint: PropTypes__default[
|
|
192
|
+
horizontalConstraint: PropTypes__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
191
193
|
|
|
192
194
|
/**
|
|
193
195
|
* Indicates the input field has an error
|
|
194
196
|
*/
|
|
195
|
-
hasError: PropTypes__default[
|
|
197
|
+
hasError: PropTypes__default["default"].bool,
|
|
196
198
|
|
|
197
199
|
/**
|
|
198
200
|
* Indicates the input field has a warning
|
|
199
201
|
*/
|
|
200
|
-
hasWarning: PropTypes__default[
|
|
202
|
+
hasWarning: PropTypes__default["default"].bool,
|
|
201
203
|
|
|
202
204
|
/**
|
|
203
205
|
* Indicates that the field is displaying read-only content
|
|
204
206
|
*/
|
|
205
|
-
isReadOnly: PropTypes__default[
|
|
207
|
+
isReadOnly: PropTypes__default["default"].bool,
|
|
206
208
|
// react-select base props
|
|
207
209
|
//
|
|
208
210
|
// Currently unsupported props are commented out. In case you need one of
|
|
@@ -215,141 +217,141 @@ AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
215
217
|
/**
|
|
216
218
|
* Aria label (for assistive tech)
|
|
217
219
|
*/
|
|
218
|
-
'aria-label': PropTypes__default[
|
|
220
|
+
'aria-label': PropTypes__default["default"].string,
|
|
219
221
|
|
|
220
222
|
/**
|
|
221
223
|
* HTML ID of an element that should be used as the label (for assistive tech)
|
|
222
224
|
*/
|
|
223
|
-
'aria-labelledby': PropTypes__default[
|
|
225
|
+
'aria-labelledby': PropTypes__default["default"].string,
|
|
224
226
|
// renamed autoFocus of react-select
|
|
225
227
|
|
|
226
228
|
/**
|
|
227
229
|
* Focus the control when it is mounted
|
|
228
230
|
*/
|
|
229
|
-
isAutofocussed: PropTypes__default[
|
|
231
|
+
isAutofocussed: PropTypes__default["default"].bool,
|
|
230
232
|
|
|
231
233
|
/**
|
|
232
234
|
* Remove the currently focused option when the user presses backspace
|
|
233
235
|
*/
|
|
234
|
-
backspaceRemovesValue: PropTypes__default[
|
|
236
|
+
backspaceRemovesValue: PropTypes__default["default"].bool,
|
|
235
237
|
|
|
236
238
|
/**
|
|
237
239
|
* Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
|
|
238
240
|
*/
|
|
239
|
-
components: PropTypes__default[
|
|
241
|
+
components: PropTypes__default["default"].objectOf(PropTypes__default["default"].func),
|
|
240
242
|
|
|
241
243
|
/**
|
|
242
244
|
* Custom method to filter whether an option should be displayed in the menu
|
|
243
245
|
*/
|
|
244
|
-
filterOption: PropTypes__default[
|
|
246
|
+
filterOption: PropTypes__default["default"].func,
|
|
245
247
|
// This forwarded as react-select's "inputId"
|
|
246
248
|
|
|
247
249
|
/**
|
|
248
250
|
* The id of the search input
|
|
249
251
|
*/
|
|
250
|
-
id: PropTypes__default[
|
|
251
|
-
inputValue: PropTypes__default[
|
|
252
|
+
id: PropTypes__default["default"].string,
|
|
253
|
+
inputValue: PropTypes__default["default"].string,
|
|
252
254
|
// This is forwarded as react-select's "id"
|
|
253
255
|
|
|
254
256
|
/**
|
|
255
257
|
* The id to set on the SelectContainer component
|
|
256
258
|
*/
|
|
257
|
-
containerId: PropTypes__default[
|
|
259
|
+
containerId: PropTypes__default["default"].string,
|
|
258
260
|
|
|
259
261
|
/**
|
|
260
262
|
* Is the select value clearable
|
|
261
263
|
*/
|
|
262
|
-
isClearable: PropTypes__default[
|
|
264
|
+
isClearable: PropTypes__default["default"].bool,
|
|
263
265
|
|
|
264
266
|
/**
|
|
265
267
|
* Is the select disabled
|
|
266
268
|
*/
|
|
267
|
-
isDisabled: PropTypes__default[
|
|
269
|
+
isDisabled: PropTypes__default["default"].bool,
|
|
268
270
|
|
|
269
271
|
/**
|
|
270
272
|
* Override the built-in logic to detect whether an option is disabled
|
|
271
273
|
*/
|
|
272
|
-
isOptionDisabled: PropTypes__default[
|
|
274
|
+
isOptionDisabled: PropTypes__default["default"].func,
|
|
273
275
|
|
|
274
276
|
/**
|
|
275
277
|
* Support multiple selected options
|
|
276
278
|
*/
|
|
277
|
-
isMulti: PropTypes__default[
|
|
279
|
+
isMulti: PropTypes__default["default"].bool,
|
|
278
280
|
|
|
279
281
|
/**
|
|
280
282
|
* Whether to enable search functionality
|
|
281
283
|
*/
|
|
282
|
-
isSearchable: PropTypes__default[
|
|
284
|
+
isSearchable: PropTypes__default["default"].bool,
|
|
283
285
|
|
|
284
286
|
/**
|
|
285
287
|
* Maximum height of the menu before scrolling
|
|
286
288
|
*/
|
|
287
|
-
maxMenuHeight: PropTypes__default[
|
|
289
|
+
maxMenuHeight: PropTypes__default["default"].number,
|
|
288
290
|
|
|
289
291
|
/**
|
|
290
292
|
* Dom element to portal the select menu to
|
|
291
293
|
*/
|
|
292
|
-
menuPortalTarget: PropTypes__default[
|
|
294
|
+
menuPortalTarget: PropTypes__default["default"].instanceOf(utils.SafeHTMLElement),
|
|
293
295
|
|
|
294
296
|
/**
|
|
295
297
|
* z-index value for the menu portal
|
|
296
298
|
*/
|
|
297
|
-
menuPortalZIndex: PropTypes__default[
|
|
299
|
+
menuPortalZIndex: PropTypes__default["default"].number.isRequired,
|
|
298
300
|
|
|
299
301
|
/**
|
|
300
302
|
* whether the menu should block scroll while open
|
|
301
303
|
*/
|
|
302
|
-
menuShouldBlockScroll: PropTypes__default[
|
|
304
|
+
menuShouldBlockScroll: PropTypes__default["default"].bool,
|
|
303
305
|
|
|
304
306
|
/**
|
|
305
307
|
* Name of the HTML Input (optional - without this, no input will be rendered)
|
|
306
308
|
*/
|
|
307
|
-
name: PropTypes__default[
|
|
309
|
+
name: PropTypes__default["default"].string,
|
|
308
310
|
|
|
309
311
|
/**
|
|
310
312
|
* 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). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
|
|
311
313
|
*/
|
|
312
|
-
noOptionsMessage: PropTypes__default[
|
|
314
|
+
noOptionsMessage: PropTypes__default["default"].func,
|
|
313
315
|
|
|
314
316
|
/**
|
|
315
317
|
* Handle blur events on the control
|
|
316
318
|
*/
|
|
317
|
-
onBlur: PropTypes__default[
|
|
319
|
+
onBlur: PropTypes__default["default"].func,
|
|
318
320
|
|
|
319
321
|
/**
|
|
320
322
|
* Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
|
|
321
323
|
*/
|
|
322
|
-
onChange: PropTypes__default[
|
|
324
|
+
onChange: PropTypes__default["default"].func.isRequired,
|
|
323
325
|
|
|
324
326
|
/**
|
|
325
327
|
* Handle focus events on the control
|
|
326
328
|
*/
|
|
327
|
-
onFocus: PropTypes__default[
|
|
329
|
+
onFocus: PropTypes__default["default"].func,
|
|
328
330
|
|
|
329
331
|
/**
|
|
330
332
|
* Handle change events on the input
|
|
331
333
|
*/
|
|
332
|
-
onInputChange: PropTypes__default[
|
|
334
|
+
onInputChange: PropTypes__default["default"].func,
|
|
333
335
|
|
|
334
336
|
/**
|
|
335
337
|
* Placeholder text for the select value
|
|
336
338
|
*/
|
|
337
|
-
placeholder: PropTypes__default[
|
|
339
|
+
placeholder: PropTypes__default["default"].string,
|
|
338
340
|
|
|
339
341
|
/**
|
|
340
342
|
* loading message shown while the options are being loaded
|
|
341
343
|
*/
|
|
342
|
-
loadingMessage: PropTypes__default[
|
|
344
|
+
loadingMessage: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].func]),
|
|
343
345
|
|
|
344
346
|
/**
|
|
345
347
|
* Sets the tabIndex attribute on the input
|
|
346
348
|
*/
|
|
347
|
-
tabIndex: PropTypes__default[
|
|
349
|
+
tabIndex: PropTypes__default["default"].string,
|
|
348
350
|
|
|
349
351
|
/**
|
|
350
352
|
* Select the currently focused option when the user presses tab
|
|
351
353
|
*/
|
|
352
|
-
tabSelectsValue: PropTypes__default[
|
|
354
|
+
tabSelectsValue: PropTypes__default["default"].bool,
|
|
353
355
|
|
|
354
356
|
/**
|
|
355
357
|
* The value of the select; reflected by the selected option
|
|
@@ -361,47 +363,48 @@ AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
361
363
|
rest[_key - 1] = arguments[_key];
|
|
362
364
|
}
|
|
363
365
|
|
|
364
|
-
return props.isMulti ? PropTypes__default[
|
|
365
|
-
value: PropTypes__default[
|
|
366
|
-
})).apply(void 0, _concatInstanceProperty__default[
|
|
367
|
-
value: PropTypes__default[
|
|
368
|
-
}).apply(void 0, _concatInstanceProperty__default[
|
|
366
|
+
return props.isMulti ? PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
|
|
367
|
+
value: PropTypes__default["default"].string.isRequired
|
|
368
|
+
})).apply(void 0, _concatInstanceProperty__default["default"](_context = [props]).call(_context, rest)) : PropTypes__default["default"].shape({
|
|
369
|
+
value: PropTypes__default["default"].string.isRequired
|
|
370
|
+
}).apply(void 0, _concatInstanceProperty__default["default"](_context2 = [props]).call(_context2, rest));
|
|
369
371
|
},
|
|
370
372
|
// Async props
|
|
371
373
|
|
|
372
374
|
/**
|
|
373
375
|
* The default set of options to show before the user starts searching. When set to true, the results for loadOptions('') will be autoloaded.
|
|
374
376
|
*/
|
|
375
|
-
defaultOptions: PropTypes__default[
|
|
376
|
-
value: PropTypes__default[
|
|
377
|
+
defaultOptions: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
|
|
378
|
+
value: PropTypes__default["default"].string.isRequired
|
|
377
379
|
}))]),
|
|
378
380
|
|
|
379
381
|
/**
|
|
380
382
|
* Function that returns a promise, which is the set of options to be used once the promise resolves.
|
|
381
383
|
*/
|
|
382
|
-
loadOptions: PropTypes__default[
|
|
384
|
+
loadOptions: PropTypes__default["default"].func.isRequired,
|
|
383
385
|
|
|
384
386
|
/**
|
|
385
387
|
* If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
|
|
386
388
|
*/
|
|
387
|
-
cacheOptions: PropTypes__default[
|
|
389
|
+
cacheOptions: PropTypes__default["default"].any,
|
|
388
390
|
|
|
389
391
|
/**
|
|
390
392
|
* Determines if option groups will be separated by a divider
|
|
391
393
|
*/
|
|
392
|
-
showOptionGroupDivider: PropTypes__default[
|
|
394
|
+
showOptionGroupDivider: PropTypes__default["default"].bool,
|
|
393
395
|
|
|
394
396
|
/**
|
|
395
397
|
* Icon to display on the left of the placeholder text and selected value. Has no effect when `isMulti` is enabled.
|
|
396
398
|
*/
|
|
397
|
-
iconLeft: PropTypes__default[
|
|
399
|
+
iconLeft: PropTypes__default["default"].node
|
|
398
400
|
} : {};
|
|
399
401
|
utils.addStaticFields(AsyncSelectInput, _objectSpread(_objectSpread(_objectSpread({}, reactSelect.components), customizedComponents), {}, {
|
|
400
402
|
isTouched: AsyncSelectInput.isTouched
|
|
401
403
|
}));
|
|
404
|
+
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
402
405
|
|
|
403
|
-
// NOTE: This string will be replaced
|
|
404
|
-
var version =
|
|
406
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
407
|
+
var version = "12.2.5";
|
|
405
408
|
|
|
406
|
-
exports
|
|
409
|
+
exports["default"] = AsyncSelectInput$1;
|
|
407
410
|
exports.version = version;
|
|
@@ -10,10 +10,8 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
|
|
|
10
10
|
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
11
11
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
12
12
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
13
|
-
var _extends = require('@babel/runtime-corejs3/helpers/extends');
|
|
14
13
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
15
14
|
require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
16
|
-
require('react');
|
|
17
15
|
require('prop-types');
|
|
18
16
|
var reactIntl = require('react-intl');
|
|
19
17
|
var react = require('@emotion/react');
|
|
@@ -23,6 +21,7 @@ var utils = require('@commercetools-uikit/utils');
|
|
|
23
21
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
24
22
|
var LoadingSpinner = require('@commercetools-uikit/loading-spinner');
|
|
25
23
|
var selectUtils = require('@commercetools-uikit/select-utils');
|
|
24
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
26
25
|
|
|
27
26
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
28
27
|
|
|
@@ -38,12 +37,12 @@ var AsyncSelect__default = /*#__PURE__*/_interopDefault(AsyncSelect);
|
|
|
38
37
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
39
38
|
var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
|
|
40
39
|
|
|
41
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default[
|
|
40
|
+
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
41
|
|
|
43
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default[
|
|
42
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source), true)).call(_context3, 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 _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
44
43
|
|
|
45
44
|
var LoadingIndicator = function LoadingIndicator() {
|
|
46
|
-
return
|
|
45
|
+
return jsxRuntime.jsx(LoadingSpinner__default["default"], {
|
|
47
46
|
scale: "s"
|
|
48
47
|
});
|
|
49
48
|
};
|
|
@@ -69,100 +68,103 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
69
68
|
return props.loadingMessage || intl.formatMessage(selectUtils.messages.loadingOptions);
|
|
70
69
|
};
|
|
71
70
|
|
|
72
|
-
return
|
|
73
|
-
max: props.horizontalConstraint
|
|
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
|
-
|
|
119
|
-
|
|
120
|
-
onBlur: props.onBlur ? function () {
|
|
121
|
-
var event = {
|
|
122
|
-
target: {
|
|
123
|
-
name: function () {
|
|
124
|
-
if (!props.name) return undefined;
|
|
125
|
-
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
126
|
-
// state as an array instead of a boolean only.
|
|
127
|
-
// Otherwise the shapes would clash on submission, as
|
|
128
|
-
// Formik will create an array on submission anyways.
|
|
129
|
-
|
|
130
|
-
return "".concat(props.name, ".0");
|
|
131
|
-
}()
|
|
71
|
+
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
72
|
+
max: props.horizontalConstraint,
|
|
73
|
+
children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
|
|
74
|
+
children: jsxRuntime.jsx(AsyncSelect__default["default"], {
|
|
75
|
+
"aria-label": props['aria-label'],
|
|
76
|
+
"aria-labelledby": props['aria-labelledby'],
|
|
77
|
+
autoFocus: props.isAutofocussed,
|
|
78
|
+
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
79
|
+
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
80
|
+
// eslint-disable-next-line react/display-name
|
|
81
|
+
Input: function Input(ownProps) {
|
|
82
|
+
return jsxRuntime.jsx(reactSelect.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
83
|
+
readOnly: true
|
|
84
|
+
}));
|
|
85
|
+
}
|
|
86
|
+
} : {}), props.components),
|
|
87
|
+
menuIsOpen: props.isReadOnly ? false : undefined,
|
|
88
|
+
styles: selectUtils.createSelectStyles({
|
|
89
|
+
hasWarning: props.hasWarning,
|
|
90
|
+
hasError: props.hasError,
|
|
91
|
+
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
92
|
+
menuPortalZIndex: props.menuPortalZIndex,
|
|
93
|
+
isDisabled: props.isDisabled,
|
|
94
|
+
isReadOnly: props.isReadOnly
|
|
95
|
+
}, theme),
|
|
96
|
+
filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
|
|
97
|
+
// but we use "id" (for the input) and "containerId" (for the container)
|
|
98
|
+
// instead.
|
|
99
|
+
// This makes it easier to less confusing to use with <label />s.
|
|
100
|
+
,
|
|
101
|
+
id: props.containerId,
|
|
102
|
+
inputId: props.id,
|
|
103
|
+
inputValue: props.inputValue,
|
|
104
|
+
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
105
|
+
isDisabled: props.isDisabled,
|
|
106
|
+
isOptionDisabled: props.isOptionDisabled,
|
|
107
|
+
isMulti: props.isMulti,
|
|
108
|
+
isSearchable: props.isSearchable,
|
|
109
|
+
maxMenuHeight: props.maxMenuHeight,
|
|
110
|
+
menuPortalTarget: props.menuPortalTarget,
|
|
111
|
+
menuShouldBlockScroll: props.menuShouldBlockScroll,
|
|
112
|
+
name: props.name,
|
|
113
|
+
loadingMessage: loadingMessage,
|
|
114
|
+
noOptionsMessage: props.noOptionsMessage || function (_ref) {
|
|
115
|
+
var inputValue = _ref.inputValue;
|
|
116
|
+
return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
|
|
117
|
+
inputValue: inputValue
|
|
118
|
+
});
|
|
132
119
|
},
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
120
|
+
onBlur: props.onBlur ? function () {
|
|
121
|
+
var event = {
|
|
122
|
+
target: {
|
|
123
|
+
name: function () {
|
|
124
|
+
if (!props.name) return undefined;
|
|
125
|
+
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
126
|
+
// state as an array instead of a boolean only.
|
|
127
|
+
// Otherwise the shapes would clash on submission, as
|
|
128
|
+
// Formik will create an array on submission anyways.
|
|
129
|
+
|
|
130
|
+
return "".concat(props.name, ".0");
|
|
131
|
+
}()
|
|
132
|
+
},
|
|
133
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
134
|
+
persist: function persist() {}
|
|
135
|
+
};
|
|
136
|
+
props.onBlur(event);
|
|
137
|
+
} : undefined,
|
|
138
|
+
onChange: function onChange(value, info) {
|
|
139
|
+
var newValue = value;
|
|
140
|
+
|
|
141
|
+
if (props.isMulti && !newValue) {
|
|
142
|
+
newValue = [];
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
props.onChange({
|
|
146
|
+
target: {
|
|
147
|
+
name: props.name,
|
|
148
|
+
value: newValue
|
|
149
|
+
},
|
|
150
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
151
|
+
persist: function persist() {}
|
|
152
|
+
}, info);
|
|
149
153
|
},
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
iconLeft: props.iconLeft
|
|
165
|
-
})));
|
|
154
|
+
onFocus: props.onFocus,
|
|
155
|
+
onInputChange: props.onInputChange,
|
|
156
|
+
placeholder: placeholder,
|
|
157
|
+
tabIndex: props.tabIndex,
|
|
158
|
+
tabSelectsValue: props.tabSelectsValue,
|
|
159
|
+
value: props.value // Async react-select props
|
|
160
|
+
,
|
|
161
|
+
defaultOptions: props.defaultOptions,
|
|
162
|
+
loadOptions: props.loadOptions,
|
|
163
|
+
cacheOptions: props.cacheOptions,
|
|
164
|
+
iconLeft: props.iconLeft
|
|
165
|
+
})
|
|
166
|
+
}))
|
|
167
|
+
});
|
|
166
168
|
}; // Formik will set the field to an array on submission, so we always have to
|
|
167
169
|
// deal with an array. The touched state ends up being an empty array in case
|
|
168
170
|
// values were removed only. So we have to treat any array we receive as
|
|
@@ -185,9 +187,10 @@ AsyncSelectInput.propTypes = {};
|
|
|
185
187
|
utils.addStaticFields(AsyncSelectInput, _objectSpread(_objectSpread(_objectSpread({}, reactSelect.components), customizedComponents), {}, {
|
|
186
188
|
isTouched: AsyncSelectInput.isTouched
|
|
187
189
|
}));
|
|
190
|
+
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
188
191
|
|
|
189
|
-
// NOTE: This string will be replaced
|
|
190
|
-
var version =
|
|
192
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
193
|
+
var version = "12.2.5";
|
|
191
194
|
|
|
192
|
-
exports
|
|
195
|
+
exports["default"] = AsyncSelectInput$1;
|
|
193
196
|
exports.version = version;
|
|
@@ -6,21 +6,20 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
|
|
|
6
6
|
import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
|
|
7
7
|
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
|
|
8
8
|
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
|
|
9
|
-
import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
|
|
10
9
|
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
|
|
11
10
|
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
|
|
12
|
-
import 'react';
|
|
13
11
|
import PropTypes from 'prop-types';
|
|
14
12
|
import { useIntl } from 'react-intl';
|
|
15
|
-
import { useTheme
|
|
13
|
+
import { useTheme } from '@emotion/react';
|
|
16
14
|
import { components } from 'react-select';
|
|
17
15
|
import AsyncSelect from 'react-select/async';
|
|
18
16
|
import { filterDataAttributes, SafeHTMLElement, addStaticFields } from '@commercetools-uikit/utils';
|
|
19
17
|
import Constraints from '@commercetools-uikit/constraints';
|
|
20
18
|
import LoadingSpinner from '@commercetools-uikit/loading-spinner';
|
|
21
19
|
import { messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
|
|
20
|
+
import { jsx } from '@emotion/react/jsx-runtime';
|
|
22
21
|
|
|
23
|
-
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; }
|
|
22
|
+
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; }
|
|
24
23
|
|
|
25
24
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context4; _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
26
25
|
|
|
@@ -52,99 +51,102 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
52
51
|
};
|
|
53
52
|
|
|
54
53
|
return jsx(Constraints.Horizontal, {
|
|
55
|
-
max: props.horizontalConstraint
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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
|
-
onBlur: props.onBlur ? function () {
|
|
103
|
-
var event = {
|
|
104
|
-
target: {
|
|
105
|
-
name: function () {
|
|
106
|
-
if (!props.name) return undefined;
|
|
107
|
-
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
108
|
-
// state as an array instead of a boolean only.
|
|
109
|
-
// Otherwise the shapes would clash on submission, as
|
|
110
|
-
// Formik will create an array on submission anyways.
|
|
111
|
-
|
|
112
|
-
return "".concat(props.name, ".0");
|
|
113
|
-
}()
|
|
54
|
+
max: props.horizontalConstraint,
|
|
55
|
+
children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
|
|
56
|
+
children: jsx(AsyncSelect, {
|
|
57
|
+
"aria-label": props['aria-label'],
|
|
58
|
+
"aria-labelledby": props['aria-labelledby'],
|
|
59
|
+
autoFocus: props.isAutofocussed,
|
|
60
|
+
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
61
|
+
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
62
|
+
// eslint-disable-next-line react/display-name
|
|
63
|
+
Input: function Input(ownProps) {
|
|
64
|
+
return jsx(components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
65
|
+
readOnly: true
|
|
66
|
+
}));
|
|
67
|
+
}
|
|
68
|
+
} : {}), props.components),
|
|
69
|
+
menuIsOpen: props.isReadOnly ? false : undefined,
|
|
70
|
+
styles: createSelectStyles({
|
|
71
|
+
hasWarning: props.hasWarning,
|
|
72
|
+
hasError: props.hasError,
|
|
73
|
+
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
74
|
+
menuPortalZIndex: props.menuPortalZIndex,
|
|
75
|
+
isDisabled: props.isDisabled,
|
|
76
|
+
isReadOnly: props.isReadOnly
|
|
77
|
+
}, theme),
|
|
78
|
+
filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
|
|
79
|
+
// but we use "id" (for the input) and "containerId" (for the container)
|
|
80
|
+
// instead.
|
|
81
|
+
// This makes it easier to less confusing to use with <label />s.
|
|
82
|
+
,
|
|
83
|
+
id: props.containerId,
|
|
84
|
+
inputId: props.id,
|
|
85
|
+
inputValue: props.inputValue,
|
|
86
|
+
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
87
|
+
isDisabled: props.isDisabled,
|
|
88
|
+
isOptionDisabled: props.isOptionDisabled,
|
|
89
|
+
isMulti: props.isMulti,
|
|
90
|
+
isSearchable: props.isSearchable,
|
|
91
|
+
maxMenuHeight: props.maxMenuHeight,
|
|
92
|
+
menuPortalTarget: props.menuPortalTarget,
|
|
93
|
+
menuShouldBlockScroll: props.menuShouldBlockScroll,
|
|
94
|
+
name: props.name,
|
|
95
|
+
loadingMessage: loadingMessage,
|
|
96
|
+
noOptionsMessage: props.noOptionsMessage || function (_ref) {
|
|
97
|
+
var inputValue = _ref.inputValue;
|
|
98
|
+
return inputValue === '' ? intl.formatMessage(messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(messages.noOptionsMessageWithInputValue, {
|
|
99
|
+
inputValue: inputValue
|
|
100
|
+
});
|
|
114
101
|
},
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
102
|
+
onBlur: props.onBlur ? function () {
|
|
103
|
+
var event = {
|
|
104
|
+
target: {
|
|
105
|
+
name: function () {
|
|
106
|
+
if (!props.name) return undefined;
|
|
107
|
+
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
108
|
+
// state as an array instead of a boolean only.
|
|
109
|
+
// Otherwise the shapes would clash on submission, as
|
|
110
|
+
// Formik will create an array on submission anyways.
|
|
111
|
+
|
|
112
|
+
return "".concat(props.name, ".0");
|
|
113
|
+
}()
|
|
114
|
+
},
|
|
115
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
116
|
+
persist: function persist() {}
|
|
117
|
+
};
|
|
118
|
+
props.onBlur(event);
|
|
119
|
+
} : undefined,
|
|
120
|
+
onChange: function onChange(value, info) {
|
|
121
|
+
var newValue = value;
|
|
122
|
+
|
|
123
|
+
if (props.isMulti && !newValue) {
|
|
124
|
+
newValue = [];
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
props.onChange({
|
|
128
|
+
target: {
|
|
129
|
+
name: props.name,
|
|
130
|
+
value: newValue
|
|
131
|
+
},
|
|
132
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
133
|
+
persist: function persist() {}
|
|
134
|
+
}, info);
|
|
131
135
|
},
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
iconLeft: props.iconLeft
|
|
147
|
-
})));
|
|
136
|
+
onFocus: props.onFocus,
|
|
137
|
+
onInputChange: props.onInputChange,
|
|
138
|
+
placeholder: placeholder,
|
|
139
|
+
tabIndex: props.tabIndex,
|
|
140
|
+
tabSelectsValue: props.tabSelectsValue,
|
|
141
|
+
value: props.value // Async react-select props
|
|
142
|
+
,
|
|
143
|
+
defaultOptions: props.defaultOptions,
|
|
144
|
+
loadOptions: props.loadOptions,
|
|
145
|
+
cacheOptions: props.cacheOptions,
|
|
146
|
+
iconLeft: props.iconLeft
|
|
147
|
+
})
|
|
148
|
+
}))
|
|
149
|
+
});
|
|
148
150
|
}; // Formik will set the field to an array on submission, so we always have to
|
|
149
151
|
// deal with an array. The touched state ends up being an empty array in case
|
|
150
152
|
// values were removed only. So we have to treat any array we receive as
|
|
@@ -379,9 +381,9 @@ AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
379
381
|
addStaticFields(AsyncSelectInput, _objectSpread(_objectSpread(_objectSpread({}, components), customizedComponents), {}, {
|
|
380
382
|
isTouched: AsyncSelectInput.isTouched
|
|
381
383
|
}));
|
|
384
|
+
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
382
385
|
|
|
383
|
-
// NOTE: This string will be replaced
|
|
384
|
-
var version =
|
|
386
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
387
|
+
var version = "12.2.5";
|
|
385
388
|
|
|
386
|
-
export default
|
|
387
|
-
export { version };
|
|
389
|
+
export { AsyncSelectInput$1 as default, version };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/async-select-input",
|
|
3
3
|
"description": "An input component getting a selection from an asynchronously loaded list from the user.",
|
|
4
|
-
"version": "12.2.
|
|
4
|
+
"version": "12.2.5",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -9,30 +9,33 @@
|
|
|
9
9
|
"directory": "packages/components/inputs/async-select-input"
|
|
10
10
|
},
|
|
11
11
|
"homepage": "https://uikit.commercetools.com",
|
|
12
|
-
"keywords": [
|
|
12
|
+
"keywords": [
|
|
13
|
+
"javascript",
|
|
14
|
+
"design system",
|
|
15
|
+
"react",
|
|
16
|
+
"uikit"
|
|
17
|
+
],
|
|
13
18
|
"license": "MIT",
|
|
14
|
-
"private": false,
|
|
15
19
|
"publishConfig": {
|
|
16
20
|
"access": "public"
|
|
17
21
|
},
|
|
18
22
|
"sideEffects": false,
|
|
19
23
|
"main": "dist/commercetools-uikit-async-select-input.cjs.js",
|
|
20
24
|
"module": "dist/commercetools-uikit-async-select-input.esm.js",
|
|
21
|
-
"files": [
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
},
|
|
25
|
+
"files": [
|
|
26
|
+
"dist"
|
|
27
|
+
],
|
|
25
28
|
"dependencies": {
|
|
26
|
-
"@babel/runtime": "7.
|
|
27
|
-
"@babel/runtime-corejs3": "7.
|
|
28
|
-
"@commercetools-uikit/constraints": "12.2.
|
|
29
|
-
"@commercetools-uikit/design-system": "12.
|
|
30
|
-
"@commercetools-uikit/icons": "12.2.
|
|
31
|
-
"@commercetools-uikit/loading-spinner": "12.2.
|
|
32
|
-
"@commercetools-uikit/select-utils": "12.2.
|
|
33
|
-
"@commercetools-uikit/spacings": "12.2.
|
|
34
|
-
"@commercetools-uikit/text": "12.2.
|
|
35
|
-
"@commercetools-uikit/utils": "12.2.
|
|
29
|
+
"@babel/runtime": "7.16.3",
|
|
30
|
+
"@babel/runtime-corejs3": "7.16.3",
|
|
31
|
+
"@commercetools-uikit/constraints": "12.2.5",
|
|
32
|
+
"@commercetools-uikit/design-system": "12.2.5",
|
|
33
|
+
"@commercetools-uikit/icons": "12.2.5",
|
|
34
|
+
"@commercetools-uikit/loading-spinner": "12.2.5",
|
|
35
|
+
"@commercetools-uikit/select-utils": "12.2.5",
|
|
36
|
+
"@commercetools-uikit/spacings": "12.2.5",
|
|
37
|
+
"@commercetools-uikit/text": "12.2.5",
|
|
38
|
+
"@commercetools-uikit/utils": "12.2.5",
|
|
36
39
|
"@emotion/react": "^11.4.0",
|
|
37
40
|
"@emotion/styled": "^11.3.0",
|
|
38
41
|
"lodash": "4.17.21",
|
|
@@ -42,7 +45,7 @@
|
|
|
42
45
|
"devDependencies": {
|
|
43
46
|
"react": "17.0.2",
|
|
44
47
|
"react-dom": "17.0.2",
|
|
45
|
-
"react-intl": "5.
|
|
48
|
+
"react-intl": "5.21.2"
|
|
46
49
|
},
|
|
47
50
|
"peerDependencies": {
|
|
48
51
|
"react": "17.x",
|