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