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