@commercetools-uikit/select-input 12.2.2 → 12.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -9,13 +9,11 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
|
|
|
9
9
|
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
10
10
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
11
11
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
12
|
-
var _extends = require('@babel/runtime-corejs3/helpers/extends');
|
|
13
12
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
14
13
|
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
|
|
15
14
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
16
15
|
var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
|
|
17
16
|
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
18
|
-
require('react');
|
|
19
17
|
var PropTypes = require('prop-types');
|
|
20
18
|
var reactIntl = require('react-intl');
|
|
21
19
|
var react = require('@emotion/react');
|
|
@@ -25,6 +23,7 @@ var Select = require('react-select');
|
|
|
25
23
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
26
24
|
var selectUtils = require('@commercetools-uikit/select-utils');
|
|
27
25
|
var utils = require('@commercetools-uikit/utils');
|
|
26
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
28
27
|
|
|
29
28
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
30
29
|
|
|
@@ -45,9 +44,9 @@ var flatMap__default = /*#__PURE__*/_interopDefault(flatMap);
|
|
|
45
44
|
var Select__default = /*#__PURE__*/_interopDefault(Select);
|
|
46
45
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
47
46
|
|
|
48
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default[
|
|
47
|
+
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; }
|
|
49
48
|
|
|
50
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context5; _forEachInstanceProperty__default[
|
|
49
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context5; _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source), true)).call(_context5, 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 _context6; _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
51
50
|
var customizedComponents = {
|
|
52
51
|
DropdownIndicator: selectUtils.DropdownIndicator,
|
|
53
52
|
ClearIndicator: selectUtils.ClearIndicator,
|
|
@@ -68,118 +67,121 @@ var SelectInput = function SelectInput(props) {
|
|
|
68
67
|
// ];
|
|
69
68
|
// So we "ungroup" the options by merging them all into one list first.
|
|
70
69
|
|
|
71
|
-
var optionsWithoutGroups = flatMap__default[
|
|
72
|
-
return has__default[
|
|
70
|
+
var optionsWithoutGroups = flatMap__default["default"](props.options, function (option) {
|
|
71
|
+
return has__default["default"](option, 'value') ? option : option.options;
|
|
73
72
|
});
|
|
74
|
-
var selectedOptions = props.isMulti ? _filterInstanceProperty__default[
|
|
73
|
+
var selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = props.value // Pass the options in the order selected by the use, so that the
|
|
75
74
|
// sorting is not lost
|
|
76
75
|
).call(_context2, function (value) {
|
|
77
|
-
return _findInstanceProperty__default[
|
|
76
|
+
return _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
|
|
78
77
|
return option.value === value;
|
|
79
78
|
});
|
|
80
|
-
})).call(_context, Boolean) : _findInstanceProperty__default[
|
|
81
|
-
return has__default[
|
|
79
|
+
})).call(_context, Boolean) : _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
|
|
80
|
+
return has__default["default"](option, 'value') && option.value === props.value;
|
|
82
81
|
}) || null;
|
|
83
|
-
return
|
|
84
|
-
max: props.horizontalConstraint
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
onBlur: typeof props.onBlur === 'function' ? function () {
|
|
132
|
-
var event = {
|
|
133
|
-
target: {
|
|
134
|
-
name: function () {
|
|
135
|
-
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
136
|
-
// state as an array instead of a boolean only.
|
|
137
|
-
// Otherwise the shapes would clash on submission, as
|
|
138
|
-
// Formik will create an array on submission anyways.
|
|
139
|
-
|
|
140
|
-
return props.name ? "".concat(props.name, ".0") : undefined;
|
|
141
|
-
}()
|
|
82
|
+
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
83
|
+
max: props.horizontalConstraint,
|
|
84
|
+
children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
|
|
85
|
+
children: jsxRuntime.jsx(Select__default["default"], {
|
|
86
|
+
"aria-label": props['aria-label'],
|
|
87
|
+
"aria-labelledby": props['aria-labelledby'],
|
|
88
|
+
autoFocus: props.isAutofocussed,
|
|
89
|
+
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
90
|
+
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
91
|
+
// eslint-disable-next-line react/display-name
|
|
92
|
+
Input: function Input(ownProps) {
|
|
93
|
+
return jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
94
|
+
readOnly: true
|
|
95
|
+
}));
|
|
96
|
+
}
|
|
97
|
+
} : {}), props.components),
|
|
98
|
+
menuIsOpen: props.isReadOnly ? false : undefined,
|
|
99
|
+
styles: selectUtils.createSelectStyles({
|
|
100
|
+
hasWarning: props.hasWarning,
|
|
101
|
+
hasError: props.hasError,
|
|
102
|
+
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
103
|
+
menuPortalZIndex: props.menuPortalZIndex,
|
|
104
|
+
isDisabled: props.isDisabled,
|
|
105
|
+
isReadOnly: props.isReadOnly
|
|
106
|
+
}, theme),
|
|
107
|
+
filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
|
|
108
|
+
// but we use "id" (for the input) and "containerId" (for the container)
|
|
109
|
+
// instead.
|
|
110
|
+
// This makes it easier to less confusing to use with <label />s.
|
|
111
|
+
,
|
|
112
|
+
id: props.containerId,
|
|
113
|
+
inputId: props.id,
|
|
114
|
+
inputValue: props.inputValue,
|
|
115
|
+
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
116
|
+
isDisabled: props.isDisabled,
|
|
117
|
+
isReadOnly: props.isReadOnly,
|
|
118
|
+
isOptionDisabled: props.isOptionDisabled,
|
|
119
|
+
isMulti: props.isMulti,
|
|
120
|
+
isSearchable: props.isSearchable,
|
|
121
|
+
maxMenuHeight: props.maxMenuHeight,
|
|
122
|
+
menuPortalTarget: props.menuPortalTarget,
|
|
123
|
+
menuShouldBlockScroll: props.menuShouldBlockScroll,
|
|
124
|
+
name: props.name,
|
|
125
|
+
noOptionsMessage: props.noOptionsMessage || function (_ref) {
|
|
126
|
+
var inputValue = _ref.inputValue;
|
|
127
|
+
return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
|
|
128
|
+
inputValue: inputValue
|
|
129
|
+
});
|
|
142
130
|
},
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
131
|
+
onBlur: typeof props.onBlur === 'function' ? function () {
|
|
132
|
+
var event = {
|
|
133
|
+
target: {
|
|
134
|
+
name: function () {
|
|
135
|
+
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
136
|
+
// state as an array instead of a boolean only.
|
|
137
|
+
// Otherwise the shapes would clash on submission, as
|
|
138
|
+
// Formik will create an array on submission anyways.
|
|
139
|
+
|
|
140
|
+
return props.name ? "".concat(props.name, ".0") : undefined;
|
|
141
|
+
}()
|
|
142
|
+
},
|
|
143
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
144
|
+
persist: function persist() {}
|
|
145
|
+
};
|
|
146
|
+
props.onBlur(event);
|
|
147
|
+
} : undefined,
|
|
148
|
+
onChange: function onChange(nextSelectedOptions) {
|
|
149
|
+
// nextSelectedOptions is either an array, or a single option, or null
|
|
150
|
+
// depending on whether we're in multi-mode or not (isMulti)
|
|
151
|
+
var value = null;
|
|
152
|
+
|
|
153
|
+
if (props.isMulti) {
|
|
154
|
+
if (nextSelectedOptions) {
|
|
155
|
+
value = _mapInstanceProperty__default["default"](nextSelectedOptions).call(nextSelectedOptions, function (option) {
|
|
156
|
+
return option.value;
|
|
157
|
+
});
|
|
158
|
+
} else {
|
|
159
|
+
value = [];
|
|
160
|
+
}
|
|
161
|
+
} else if (nextSelectedOptions) {
|
|
162
|
+
value = nextSelectedOptions.value;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
props.onChange({
|
|
166
|
+
target: {
|
|
167
|
+
name: props.name,
|
|
168
|
+
value: value
|
|
169
|
+
},
|
|
170
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
171
|
+
persist: function persist() {}
|
|
157
172
|
});
|
|
158
|
-
} else {
|
|
159
|
-
value = [];
|
|
160
|
-
}
|
|
161
|
-
} else if (nextSelectedOptions) {
|
|
162
|
-
value = nextSelectedOptions.value;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
props.onChange({
|
|
166
|
-
target: {
|
|
167
|
-
name: props.name,
|
|
168
|
-
value: value
|
|
169
173
|
},
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
iconLeft: props.iconLeft
|
|
182
|
-
})));
|
|
174
|
+
onFocus: props.onFocus,
|
|
175
|
+
onInputChange: props.onInputChange,
|
|
176
|
+
options: props.options,
|
|
177
|
+
placeholder: placeholder,
|
|
178
|
+
tabIndex: props.tabIndex,
|
|
179
|
+
tabSelectsValue: props.tabSelectsValue,
|
|
180
|
+
value: selectedOptions,
|
|
181
|
+
iconLeft: props.iconLeft
|
|
182
|
+
})
|
|
183
|
+
}))
|
|
184
|
+
});
|
|
183
185
|
};
|
|
184
186
|
|
|
185
187
|
SelectInput.displayName = 'SelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
|
|
@@ -194,27 +196,27 @@ SelectInput.defaultProps = {
|
|
|
194
196
|
menuPortalZIndex: 1
|
|
195
197
|
};
|
|
196
198
|
SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
197
|
-
horizontalConstraint: PropTypes__default[
|
|
199
|
+
horizontalConstraint: PropTypes__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
198
200
|
|
|
199
201
|
/**
|
|
200
202
|
* Indicates that input has errors
|
|
201
203
|
*/
|
|
202
|
-
hasError: PropTypes__default[
|
|
204
|
+
hasError: 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
|
* Control to indicate on the input if there are selected values that are potentially invalid
|
|
211
213
|
*/
|
|
212
|
-
hasWarning: PropTypes__default[
|
|
214
|
+
hasWarning: PropTypes__default["default"].bool,
|
|
213
215
|
|
|
214
216
|
/**
|
|
215
217
|
* Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled.
|
|
216
218
|
*/
|
|
217
|
-
iconLeft: PropTypes__default[
|
|
219
|
+
iconLeft: PropTypes__default["default"].node,
|
|
218
220
|
// react-select base props
|
|
219
221
|
//
|
|
220
222
|
// Currently unsupported props are commented out. In case you need one of
|
|
@@ -227,22 +229,22 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
227
229
|
/**
|
|
228
230
|
* Aria label (for assistive tech)
|
|
229
231
|
*/
|
|
230
|
-
'aria-label': PropTypes__default[
|
|
232
|
+
'aria-label': PropTypes__default["default"].string,
|
|
231
233
|
|
|
232
234
|
/**
|
|
233
235
|
* HTML ID of an element that should be used as the label (for assistive tech)
|
|
234
236
|
*/
|
|
235
|
-
'aria-labelledby': PropTypes__default[
|
|
237
|
+
'aria-labelledby': PropTypes__default["default"].string,
|
|
236
238
|
|
|
237
239
|
/**
|
|
238
240
|
* Focus the control when it is mounted
|
|
239
241
|
*/
|
|
240
|
-
isAutofocussed: PropTypes__default[
|
|
242
|
+
isAutofocussed: PropTypes__default["default"].bool,
|
|
241
243
|
|
|
242
244
|
/**
|
|
243
245
|
* Remove the currently focused option when the user presses backspace
|
|
244
246
|
*/
|
|
245
|
-
backspaceRemovesValue: PropTypes__default[
|
|
247
|
+
backspaceRemovesValue: PropTypes__default["default"].bool,
|
|
246
248
|
// blurInputOnSelect: PropTypes.bool,
|
|
247
249
|
// captureMenuScroll: PropTypes.bool,
|
|
248
250
|
// className: PropTypes.string,
|
|
@@ -253,7 +255,7 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
253
255
|
/**
|
|
254
256
|
* Map of components to overwrite the default ones, see what components you can override
|
|
255
257
|
*/
|
|
256
|
-
components: PropTypes__default[
|
|
258
|
+
components: PropTypes__default["default"].objectOf(PropTypes__default["default"].func),
|
|
257
259
|
// controlShouldRenderValue: PropTypes.bool,
|
|
258
260
|
// delimiter: PropTypes.string,
|
|
259
261
|
// escapeClearsValue: PropTypes.bool,
|
|
@@ -263,7 +265,7 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
263
265
|
* <br />
|
|
264
266
|
* Signature: `(option, rawInput) => boolean`
|
|
265
267
|
*/
|
|
266
|
-
filterOption: PropTypes__default[
|
|
268
|
+
filterOption: PropTypes__default["default"].func,
|
|
267
269
|
// formatGroupLabel: PropTypes.func,
|
|
268
270
|
// formatOptionLabel: PropTypes.func,
|
|
269
271
|
// getOptionLabel: PropTypes.func,
|
|
@@ -274,50 +276,50 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
274
276
|
* Used as HTML id property. An id is generated automatically when not provided.
|
|
275
277
|
*This forwarded as react-select's "inputId"
|
|
276
278
|
*/
|
|
277
|
-
id: PropTypes__default[
|
|
278
|
-
inputValue: PropTypes__default[
|
|
279
|
+
id: PropTypes__default["default"].string,
|
|
280
|
+
inputValue: PropTypes__default["default"].string,
|
|
279
281
|
|
|
280
282
|
/**
|
|
281
283
|
* The id to set on the SelectContainer component
|
|
282
284
|
* This is forwarded as react-select's "id"
|
|
283
285
|
*/
|
|
284
|
-
containerId: PropTypes__default[
|
|
286
|
+
containerId: PropTypes__default["default"].string,
|
|
285
287
|
// instanceId: PropTypes.string,
|
|
286
288
|
|
|
287
289
|
/**
|
|
288
290
|
* Is the select value clearable
|
|
289
291
|
*/
|
|
290
|
-
isClearable: PropTypes__default[
|
|
292
|
+
isClearable: PropTypes__default["default"].bool,
|
|
291
293
|
|
|
292
294
|
/**
|
|
293
295
|
* Is the select disabled
|
|
294
296
|
*/
|
|
295
|
-
isDisabled: PropTypes__default[
|
|
297
|
+
isDisabled: PropTypes__default["default"].bool,
|
|
296
298
|
// isLoading: PropTypes.bool,
|
|
297
299
|
|
|
298
300
|
/**
|
|
299
301
|
* Override the built-in logic to detect whether an option is disabled
|
|
300
302
|
*/
|
|
301
|
-
isOptionDisabled: PropTypes__default[
|
|
303
|
+
isOptionDisabled: PropTypes__default["default"].func,
|
|
302
304
|
// isOptionSelected: PropTypes.func,
|
|
303
305
|
|
|
304
306
|
/**
|
|
305
307
|
* Support multiple selected options
|
|
306
308
|
*/
|
|
307
|
-
isMulti: PropTypes__default[
|
|
309
|
+
isMulti: PropTypes__default["default"].bool,
|
|
308
310
|
// isRtl: PropTypes.bool,
|
|
309
311
|
|
|
310
312
|
/**
|
|
311
313
|
* Whether to enable search functionality
|
|
312
314
|
*/
|
|
313
|
-
isSearchable: PropTypes__default[
|
|
315
|
+
isSearchable: PropTypes__default["default"].bool,
|
|
314
316
|
// loadingMessage: PropTypes.func,
|
|
315
317
|
// minMenuHeight: PropTypes.number,
|
|
316
318
|
|
|
317
319
|
/**
|
|
318
320
|
* Maximum height of the menu before scrolling
|
|
319
321
|
*/
|
|
320
|
-
maxMenuHeight: PropTypes__default[
|
|
322
|
+
maxMenuHeight: PropTypes__default["default"].number,
|
|
321
323
|
// menuIsOpen: PropTypes.bool,
|
|
322
324
|
// menuPlacement: PropTypes.oneOf(['auto', 'bottom', 'top']),
|
|
323
325
|
// menuPosition: PropTypes.oneOf(['absolute', 'fixed']),
|
|
@@ -325,23 +327,23 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
325
327
|
/**
|
|
326
328
|
* Dom element to portal the select menu to
|
|
327
329
|
*/
|
|
328
|
-
menuPortalTarget: PropTypes__default[
|
|
330
|
+
menuPortalTarget: PropTypes__default["default"].instanceOf(utils.SafeHTMLElement),
|
|
329
331
|
|
|
330
332
|
/**
|
|
331
333
|
* z-index value for the menu portal
|
|
332
334
|
*/
|
|
333
|
-
menuPortalZIndex: PropTypes__default[
|
|
335
|
+
menuPortalZIndex: PropTypes__default["default"].number,
|
|
334
336
|
|
|
335
337
|
/**
|
|
336
338
|
* whether the menu should block scroll while open
|
|
337
339
|
*/
|
|
338
|
-
menuShouldBlockScroll: PropTypes__default[
|
|
340
|
+
menuShouldBlockScroll: PropTypes__default["default"].bool,
|
|
339
341
|
// menuShouldScrollIntoView: PropTypes.bool,
|
|
340
342
|
|
|
341
343
|
/**
|
|
342
344
|
* Name of the HTML Input (optional - without this, no input will be rendered)
|
|
343
345
|
*/
|
|
344
|
-
name: PropTypes__default[
|
|
346
|
+
name: PropTypes__default["default"].string,
|
|
345
347
|
|
|
346
348
|
/**
|
|
347
349
|
* 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 }.
|
|
@@ -350,14 +352,14 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
350
352
|
* <br />
|
|
351
353
|
* Signature: `({ inputValue}) => string`
|
|
352
354
|
*/
|
|
353
|
-
noOptionsMessage: PropTypes__default[
|
|
355
|
+
noOptionsMessage: PropTypes__default["default"].func,
|
|
354
356
|
|
|
355
357
|
/**
|
|
356
358
|
* Handle blur events on the control
|
|
357
359
|
* <br />
|
|
358
360
|
* Signature: `(event) => void`
|
|
359
361
|
*/
|
|
360
|
-
onBlur: PropTypes__default[
|
|
362
|
+
onBlur: PropTypes__default["default"].func,
|
|
361
363
|
|
|
362
364
|
/**
|
|
363
365
|
* 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.
|
|
@@ -366,21 +368,21 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
366
368
|
* <br />
|
|
367
369
|
* Signature: `(event) => void`
|
|
368
370
|
*/
|
|
369
|
-
onChange: PropTypes__default[
|
|
371
|
+
onChange: PropTypes__default["default"].func,
|
|
370
372
|
|
|
371
373
|
/**
|
|
372
374
|
* Handle focus events on the control
|
|
373
375
|
* <br />
|
|
374
376
|
* Signature: `(event) => void`
|
|
375
377
|
*/
|
|
376
|
-
onFocus: PropTypes__default[
|
|
378
|
+
onFocus: PropTypes__default["default"].func,
|
|
377
379
|
|
|
378
380
|
/**
|
|
379
381
|
* Handle change events on the input
|
|
380
382
|
* <br />
|
|
381
383
|
* Signature: `(newValue, actionMeta) => void`
|
|
382
384
|
*/
|
|
383
|
-
onInputChange: PropTypes__default[
|
|
385
|
+
onInputChange: PropTypes__default["default"].func,
|
|
384
386
|
// onKeyDown: PropTypes.func,
|
|
385
387
|
// onMenuOpen: PropTypes.func,
|
|
386
388
|
// onMenuClose: PropTypes.func,
|
|
@@ -392,20 +394,20 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
392
394
|
/**
|
|
393
395
|
* Array of options that populate the select menu
|
|
394
396
|
*/
|
|
395
|
-
options: PropTypes__default[
|
|
396
|
-
value: PropTypes__default[
|
|
397
|
-
}), PropTypes__default[
|
|
398
|
-
options: PropTypes__default[
|
|
399
|
-
value: PropTypes__default[
|
|
397
|
+
options: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
|
|
398
|
+
value: PropTypes__default["default"].string.isRequired
|
|
399
|
+
}), PropTypes__default["default"].shape({
|
|
400
|
+
options: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
|
|
401
|
+
value: PropTypes__default["default"].string.isRequired
|
|
400
402
|
}))
|
|
401
403
|
})])),
|
|
402
|
-
showOptionGroupDivider: PropTypes__default[
|
|
404
|
+
showOptionGroupDivider: PropTypes__default["default"].bool,
|
|
403
405
|
// pageSize: PropTypes.number,
|
|
404
406
|
|
|
405
407
|
/**
|
|
406
408
|
* Placeholder text for the select value
|
|
407
409
|
*/
|
|
408
|
-
placeholder: PropTypes__default[
|
|
410
|
+
placeholder: PropTypes__default["default"].string,
|
|
409
411
|
// screenReaderStatus: PropTypes.func,
|
|
410
412
|
// styles: PropTypes.objectOf(PropTypes.func),
|
|
411
413
|
// theme: PropTypes.object,
|
|
@@ -413,12 +415,12 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
413
415
|
/**
|
|
414
416
|
* Sets the tabIndex attribute on the input
|
|
415
417
|
*/
|
|
416
|
-
tabIndex: PropTypes__default[
|
|
418
|
+
tabIndex: PropTypes__default["default"].string,
|
|
417
419
|
|
|
418
420
|
/**
|
|
419
421
|
* Select the currently focused option when the user presses tab
|
|
420
422
|
*/
|
|
421
|
-
tabSelectsValue: PropTypes__default[
|
|
423
|
+
tabSelectsValue: PropTypes__default["default"].bool,
|
|
422
424
|
|
|
423
425
|
/**
|
|
424
426
|
* The value of the select; reflected by the selected option
|
|
@@ -430,7 +432,7 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
430
432
|
rest[_key - 1] = arguments[_key];
|
|
431
433
|
}
|
|
432
434
|
|
|
433
|
-
return props.isMulti ? (_PropTypes$arrayOf = PropTypes__default[
|
|
435
|
+
return props.isMulti ? (_PropTypes$arrayOf = PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)).isRequired.apply(_PropTypes$arrayOf, _concatInstanceProperty__default["default"](_context3 = [props]).call(_context3, rest)) : PropTypes__default["default"].string.apply(PropTypes__default["default"], _concatInstanceProperty__default["default"](_context4 = [props]).call(_context4, rest));
|
|
434
436
|
}
|
|
435
437
|
} : {};
|
|
436
438
|
utils.addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({}, Select.components), customizedComponents), {}, {
|
|
@@ -438,8 +440,8 @@ utils.addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({},
|
|
|
438
440
|
}));
|
|
439
441
|
var SelectInput$1 = SelectInput;
|
|
440
442
|
|
|
441
|
-
// NOTE: This string will be replaced
|
|
442
|
-
var version =
|
|
443
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
444
|
+
var version = "12.2.6";
|
|
443
445
|
|
|
444
|
-
exports[
|
|
446
|
+
exports["default"] = SelectInput$1;
|
|
445
447
|
exports.version = version;
|
|
@@ -9,13 +9,11 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
|
|
|
9
9
|
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
10
10
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
11
11
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
12
|
-
var _extends = require('@babel/runtime-corejs3/helpers/extends');
|
|
13
12
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
14
13
|
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
|
|
15
14
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
16
15
|
var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
|
|
17
16
|
require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
18
|
-
require('react');
|
|
19
17
|
require('prop-types');
|
|
20
18
|
var reactIntl = require('react-intl');
|
|
21
19
|
var react = require('@emotion/react');
|
|
@@ -25,6 +23,7 @@ var Select = require('react-select');
|
|
|
25
23
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
26
24
|
var selectUtils = require('@commercetools-uikit/select-utils');
|
|
27
25
|
var utils = require('@commercetools-uikit/utils');
|
|
26
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
28
27
|
|
|
29
28
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
30
29
|
|
|
@@ -43,9 +42,9 @@ var flatMap__default = /*#__PURE__*/_interopDefault(flatMap);
|
|
|
43
42
|
var Select__default = /*#__PURE__*/_interopDefault(Select);
|
|
44
43
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
45
44
|
|
|
46
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default[
|
|
45
|
+
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; }
|
|
47
46
|
|
|
48
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context5; _forEachInstanceProperty__default[
|
|
47
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context5; _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source), true)).call(_context5, 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 _context6; _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
49
48
|
var customizedComponents = {
|
|
50
49
|
DropdownIndicator: selectUtils.DropdownIndicator,
|
|
51
50
|
ClearIndicator: selectUtils.ClearIndicator,
|
|
@@ -66,118 +65,121 @@ var SelectInput = function SelectInput(props) {
|
|
|
66
65
|
// ];
|
|
67
66
|
// So we "ungroup" the options by merging them all into one list first.
|
|
68
67
|
|
|
69
|
-
var optionsWithoutGroups = flatMap__default[
|
|
70
|
-
return has__default[
|
|
68
|
+
var optionsWithoutGroups = flatMap__default["default"](props.options, function (option) {
|
|
69
|
+
return has__default["default"](option, 'value') ? option : option.options;
|
|
71
70
|
});
|
|
72
|
-
var selectedOptions = props.isMulti ? _filterInstanceProperty__default[
|
|
71
|
+
var selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = props.value // Pass the options in the order selected by the use, so that the
|
|
73
72
|
// sorting is not lost
|
|
74
73
|
).call(_context2, function (value) {
|
|
75
|
-
return _findInstanceProperty__default[
|
|
74
|
+
return _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
|
|
76
75
|
return option.value === value;
|
|
77
76
|
});
|
|
78
|
-
})).call(_context, Boolean) : _findInstanceProperty__default[
|
|
79
|
-
return has__default[
|
|
77
|
+
})).call(_context, Boolean) : _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
|
|
78
|
+
return has__default["default"](option, 'value') && option.value === props.value;
|
|
80
79
|
}) || null;
|
|
81
|
-
return
|
|
82
|
-
max: props.horizontalConstraint
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
onBlur: typeof props.onBlur === 'function' ? function () {
|
|
130
|
-
var event = {
|
|
131
|
-
target: {
|
|
132
|
-
name: function () {
|
|
133
|
-
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
134
|
-
// state as an array instead of a boolean only.
|
|
135
|
-
// Otherwise the shapes would clash on submission, as
|
|
136
|
-
// Formik will create an array on submission anyways.
|
|
137
|
-
|
|
138
|
-
return props.name ? "".concat(props.name, ".0") : undefined;
|
|
139
|
-
}()
|
|
80
|
+
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
81
|
+
max: props.horizontalConstraint,
|
|
82
|
+
children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
|
|
83
|
+
children: jsxRuntime.jsx(Select__default["default"], {
|
|
84
|
+
"aria-label": props['aria-label'],
|
|
85
|
+
"aria-labelledby": props['aria-labelledby'],
|
|
86
|
+
autoFocus: props.isAutofocussed,
|
|
87
|
+
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
88
|
+
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
89
|
+
// eslint-disable-next-line react/display-name
|
|
90
|
+
Input: function Input(ownProps) {
|
|
91
|
+
return jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
92
|
+
readOnly: true
|
|
93
|
+
}));
|
|
94
|
+
}
|
|
95
|
+
} : {}), props.components),
|
|
96
|
+
menuIsOpen: props.isReadOnly ? false : undefined,
|
|
97
|
+
styles: selectUtils.createSelectStyles({
|
|
98
|
+
hasWarning: props.hasWarning,
|
|
99
|
+
hasError: props.hasError,
|
|
100
|
+
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
101
|
+
menuPortalZIndex: props.menuPortalZIndex,
|
|
102
|
+
isDisabled: props.isDisabled,
|
|
103
|
+
isReadOnly: props.isReadOnly
|
|
104
|
+
}, theme),
|
|
105
|
+
filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
|
|
106
|
+
// but we use "id" (for the input) and "containerId" (for the container)
|
|
107
|
+
// instead.
|
|
108
|
+
// This makes it easier to less confusing to use with <label />s.
|
|
109
|
+
,
|
|
110
|
+
id: props.containerId,
|
|
111
|
+
inputId: props.id,
|
|
112
|
+
inputValue: props.inputValue,
|
|
113
|
+
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
114
|
+
isDisabled: props.isDisabled,
|
|
115
|
+
isReadOnly: props.isReadOnly,
|
|
116
|
+
isOptionDisabled: props.isOptionDisabled,
|
|
117
|
+
isMulti: props.isMulti,
|
|
118
|
+
isSearchable: props.isSearchable,
|
|
119
|
+
maxMenuHeight: props.maxMenuHeight,
|
|
120
|
+
menuPortalTarget: props.menuPortalTarget,
|
|
121
|
+
menuShouldBlockScroll: props.menuShouldBlockScroll,
|
|
122
|
+
name: props.name,
|
|
123
|
+
noOptionsMessage: props.noOptionsMessage || function (_ref) {
|
|
124
|
+
var inputValue = _ref.inputValue;
|
|
125
|
+
return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
|
|
126
|
+
inputValue: inputValue
|
|
127
|
+
});
|
|
140
128
|
},
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
129
|
+
onBlur: typeof props.onBlur === 'function' ? function () {
|
|
130
|
+
var event = {
|
|
131
|
+
target: {
|
|
132
|
+
name: function () {
|
|
133
|
+
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
134
|
+
// state as an array instead of a boolean only.
|
|
135
|
+
// Otherwise the shapes would clash on submission, as
|
|
136
|
+
// Formik will create an array on submission anyways.
|
|
137
|
+
|
|
138
|
+
return props.name ? "".concat(props.name, ".0") : undefined;
|
|
139
|
+
}()
|
|
140
|
+
},
|
|
141
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
142
|
+
persist: function persist() {}
|
|
143
|
+
};
|
|
144
|
+
props.onBlur(event);
|
|
145
|
+
} : undefined,
|
|
146
|
+
onChange: function onChange(nextSelectedOptions) {
|
|
147
|
+
// nextSelectedOptions is either an array, or a single option, or null
|
|
148
|
+
// depending on whether we're in multi-mode or not (isMulti)
|
|
149
|
+
var value = null;
|
|
150
|
+
|
|
151
|
+
if (props.isMulti) {
|
|
152
|
+
if (nextSelectedOptions) {
|
|
153
|
+
value = _mapInstanceProperty__default["default"](nextSelectedOptions).call(nextSelectedOptions, function (option) {
|
|
154
|
+
return option.value;
|
|
155
|
+
});
|
|
156
|
+
} else {
|
|
157
|
+
value = [];
|
|
158
|
+
}
|
|
159
|
+
} else if (nextSelectedOptions) {
|
|
160
|
+
value = nextSelectedOptions.value;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
props.onChange({
|
|
164
|
+
target: {
|
|
165
|
+
name: props.name,
|
|
166
|
+
value: value
|
|
167
|
+
},
|
|
168
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
169
|
+
persist: function persist() {}
|
|
155
170
|
});
|
|
156
|
-
} else {
|
|
157
|
-
value = [];
|
|
158
|
-
}
|
|
159
|
-
} else if (nextSelectedOptions) {
|
|
160
|
-
value = nextSelectedOptions.value;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
props.onChange({
|
|
164
|
-
target: {
|
|
165
|
-
name: props.name,
|
|
166
|
-
value: value
|
|
167
171
|
},
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
iconLeft: props.iconLeft
|
|
180
|
-
})));
|
|
172
|
+
onFocus: props.onFocus,
|
|
173
|
+
onInputChange: props.onInputChange,
|
|
174
|
+
options: props.options,
|
|
175
|
+
placeholder: placeholder,
|
|
176
|
+
tabIndex: props.tabIndex,
|
|
177
|
+
tabSelectsValue: props.tabSelectsValue,
|
|
178
|
+
value: selectedOptions,
|
|
179
|
+
iconLeft: props.iconLeft
|
|
180
|
+
})
|
|
181
|
+
}))
|
|
182
|
+
});
|
|
181
183
|
};
|
|
182
184
|
|
|
183
185
|
SelectInput.displayName = 'SelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
|
|
@@ -197,8 +199,8 @@ utils.addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({},
|
|
|
197
199
|
}));
|
|
198
200
|
var SelectInput$1 = SelectInput;
|
|
199
201
|
|
|
200
|
-
// NOTE: This string will be replaced
|
|
201
|
-
var version =
|
|
202
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
203
|
+
var version = "12.2.6";
|
|
202
204
|
|
|
203
|
-
exports[
|
|
205
|
+
exports["default"] = SelectInput$1;
|
|
204
206
|
exports.version = version;
|
|
@@ -5,22 +5,21 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
|
|
|
5
5
|
import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
|
|
6
6
|
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
|
|
7
7
|
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
|
|
8
|
-
import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
|
|
9
8
|
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
|
|
10
9
|
import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
|
|
11
10
|
import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
|
|
12
11
|
import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
|
|
13
12
|
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
|
|
14
|
-
import 'react';
|
|
15
13
|
import PropTypes from 'prop-types';
|
|
16
14
|
import { useIntl } from 'react-intl';
|
|
17
|
-
import { useTheme
|
|
15
|
+
import { useTheme } from '@emotion/react';
|
|
18
16
|
import has from 'lodash/has';
|
|
19
17
|
import flatMap from 'lodash/flatMap';
|
|
20
18
|
import Select, { components } from 'react-select';
|
|
21
19
|
import Constraints from '@commercetools-uikit/constraints';
|
|
22
20
|
import { messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
|
|
23
21
|
import { filterDataAttributes, SafeHTMLElement, addStaticFields } from '@commercetools-uikit/utils';
|
|
22
|
+
import { jsx } from '@emotion/react/jsx-runtime';
|
|
24
23
|
|
|
25
24
|
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; }
|
|
26
25
|
|
|
@@ -58,105 +57,108 @@ var SelectInput = function SelectInput(props) {
|
|
|
58
57
|
return has(option, 'value') && option.value === props.value;
|
|
59
58
|
}) || null;
|
|
60
59
|
return jsx(Constraints.Horizontal, {
|
|
61
|
-
max: props.horizontalConstraint
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
onBlur: typeof props.onBlur === 'function' ? function () {
|
|
109
|
-
var event = {
|
|
110
|
-
target: {
|
|
111
|
-
name: function () {
|
|
112
|
-
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
113
|
-
// state as an array instead of a boolean only.
|
|
114
|
-
// Otherwise the shapes would clash on submission, as
|
|
115
|
-
// Formik will create an array on submission anyways.
|
|
116
|
-
|
|
117
|
-
return props.name ? "".concat(props.name, ".0") : undefined;
|
|
118
|
-
}()
|
|
60
|
+
max: props.horizontalConstraint,
|
|
61
|
+
children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
|
|
62
|
+
children: jsx(Select, {
|
|
63
|
+
"aria-label": props['aria-label'],
|
|
64
|
+
"aria-labelledby": props['aria-labelledby'],
|
|
65
|
+
autoFocus: props.isAutofocussed,
|
|
66
|
+
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
67
|
+
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
68
|
+
// eslint-disable-next-line react/display-name
|
|
69
|
+
Input: function Input(ownProps) {
|
|
70
|
+
return jsx(components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
71
|
+
readOnly: true
|
|
72
|
+
}));
|
|
73
|
+
}
|
|
74
|
+
} : {}), props.components),
|
|
75
|
+
menuIsOpen: props.isReadOnly ? false : undefined,
|
|
76
|
+
styles: createSelectStyles({
|
|
77
|
+
hasWarning: props.hasWarning,
|
|
78
|
+
hasError: props.hasError,
|
|
79
|
+
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
80
|
+
menuPortalZIndex: props.menuPortalZIndex,
|
|
81
|
+
isDisabled: props.isDisabled,
|
|
82
|
+
isReadOnly: props.isReadOnly
|
|
83
|
+
}, theme),
|
|
84
|
+
filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
|
|
85
|
+
// but we use "id" (for the input) and "containerId" (for the container)
|
|
86
|
+
// instead.
|
|
87
|
+
// This makes it easier to less confusing to use with <label />s.
|
|
88
|
+
,
|
|
89
|
+
id: props.containerId,
|
|
90
|
+
inputId: props.id,
|
|
91
|
+
inputValue: props.inputValue,
|
|
92
|
+
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
93
|
+
isDisabled: props.isDisabled,
|
|
94
|
+
isReadOnly: props.isReadOnly,
|
|
95
|
+
isOptionDisabled: props.isOptionDisabled,
|
|
96
|
+
isMulti: props.isMulti,
|
|
97
|
+
isSearchable: props.isSearchable,
|
|
98
|
+
maxMenuHeight: props.maxMenuHeight,
|
|
99
|
+
menuPortalTarget: props.menuPortalTarget,
|
|
100
|
+
menuShouldBlockScroll: props.menuShouldBlockScroll,
|
|
101
|
+
name: props.name,
|
|
102
|
+
noOptionsMessage: props.noOptionsMessage || function (_ref) {
|
|
103
|
+
var inputValue = _ref.inputValue;
|
|
104
|
+
return inputValue === '' ? intl.formatMessage(messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(messages.noOptionsMessageWithInputValue, {
|
|
105
|
+
inputValue: inputValue
|
|
106
|
+
});
|
|
119
107
|
},
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
108
|
+
onBlur: typeof props.onBlur === 'function' ? function () {
|
|
109
|
+
var event = {
|
|
110
|
+
target: {
|
|
111
|
+
name: function () {
|
|
112
|
+
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
113
|
+
// state as an array instead of a boolean only.
|
|
114
|
+
// Otherwise the shapes would clash on submission, as
|
|
115
|
+
// Formik will create an array on submission anyways.
|
|
116
|
+
|
|
117
|
+
return props.name ? "".concat(props.name, ".0") : undefined;
|
|
118
|
+
}()
|
|
119
|
+
},
|
|
120
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
121
|
+
persist: function persist() {}
|
|
122
|
+
};
|
|
123
|
+
props.onBlur(event);
|
|
124
|
+
} : undefined,
|
|
125
|
+
onChange: function onChange(nextSelectedOptions) {
|
|
126
|
+
// nextSelectedOptions is either an array, or a single option, or null
|
|
127
|
+
// depending on whether we're in multi-mode or not (isMulti)
|
|
128
|
+
var value = null;
|
|
129
|
+
|
|
130
|
+
if (props.isMulti) {
|
|
131
|
+
if (nextSelectedOptions) {
|
|
132
|
+
value = _mapInstanceProperty(nextSelectedOptions).call(nextSelectedOptions, function (option) {
|
|
133
|
+
return option.value;
|
|
134
|
+
});
|
|
135
|
+
} else {
|
|
136
|
+
value = [];
|
|
137
|
+
}
|
|
138
|
+
} else if (nextSelectedOptions) {
|
|
139
|
+
value = nextSelectedOptions.value;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
props.onChange({
|
|
143
|
+
target: {
|
|
144
|
+
name: props.name,
|
|
145
|
+
value: value
|
|
146
|
+
},
|
|
147
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
148
|
+
persist: function persist() {}
|
|
134
149
|
});
|
|
135
|
-
} else {
|
|
136
|
-
value = [];
|
|
137
|
-
}
|
|
138
|
-
} else if (nextSelectedOptions) {
|
|
139
|
-
value = nextSelectedOptions.value;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
props.onChange({
|
|
143
|
-
target: {
|
|
144
|
-
name: props.name,
|
|
145
|
-
value: value
|
|
146
150
|
},
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
iconLeft: props.iconLeft
|
|
159
|
-
})));
|
|
151
|
+
onFocus: props.onFocus,
|
|
152
|
+
onInputChange: props.onInputChange,
|
|
153
|
+
options: props.options,
|
|
154
|
+
placeholder: placeholder,
|
|
155
|
+
tabIndex: props.tabIndex,
|
|
156
|
+
tabSelectsValue: props.tabSelectsValue,
|
|
157
|
+
value: selectedOptions,
|
|
158
|
+
iconLeft: props.iconLeft
|
|
159
|
+
})
|
|
160
|
+
}))
|
|
161
|
+
});
|
|
160
162
|
};
|
|
161
163
|
|
|
162
164
|
SelectInput.displayName = 'SelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
|
|
@@ -415,7 +417,7 @@ addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({}, compo
|
|
|
415
417
|
}));
|
|
416
418
|
var SelectInput$1 = SelectInput;
|
|
417
419
|
|
|
418
|
-
// NOTE: This string will be replaced
|
|
419
|
-
var version =
|
|
420
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
421
|
+
var version = "12.2.6";
|
|
420
422
|
|
|
421
423
|
export { SelectInput$1 as default, version };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/select-input",
|
|
3
3
|
"description": "An input component getting a selection from the user.",
|
|
4
|
-
"version": "12.2.
|
|
4
|
+
"version": "12.2.6",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
"homepage": "https://uikit.commercetools.com",
|
|
12
12
|
"keywords": ["javascript", "design system", "react", "uikit"],
|
|
13
13
|
"license": "MIT",
|
|
14
|
-
"private": false,
|
|
15
14
|
"publishConfig": {
|
|
16
15
|
"access": "public"
|
|
17
16
|
},
|
|
@@ -19,18 +18,15 @@
|
|
|
19
18
|
"main": "dist/commercetools-uikit-select-input.cjs.js",
|
|
20
19
|
"module": "dist/commercetools-uikit-select-input.esm.js",
|
|
21
20
|
"files": ["dist"],
|
|
22
|
-
"scripts": {
|
|
23
|
-
"prepare": "../../../../scripts/version.js replace"
|
|
24
|
-
},
|
|
25
21
|
"dependencies": {
|
|
26
|
-
"@babel/runtime": "7.
|
|
27
|
-
"@babel/runtime-corejs3": "7.
|
|
28
|
-
"@commercetools-uikit/constraints": "12.2.
|
|
29
|
-
"@commercetools-uikit/design-system": "12.2.
|
|
30
|
-
"@commercetools-uikit/icons": "12.2.
|
|
31
|
-
"@commercetools-uikit/select-utils": "12.2.
|
|
32
|
-
"@commercetools-uikit/utils": "12.2.
|
|
33
|
-
"@emotion/is-prop-valid": "1.1.
|
|
22
|
+
"@babel/runtime": "7.16.3",
|
|
23
|
+
"@babel/runtime-corejs3": "7.16.3",
|
|
24
|
+
"@commercetools-uikit/constraints": "12.2.5",
|
|
25
|
+
"@commercetools-uikit/design-system": "12.2.5",
|
|
26
|
+
"@commercetools-uikit/icons": "12.2.6",
|
|
27
|
+
"@commercetools-uikit/select-utils": "12.2.6",
|
|
28
|
+
"@commercetools-uikit/utils": "12.2.5",
|
|
29
|
+
"@emotion/is-prop-valid": "1.1.1",
|
|
34
30
|
"@emotion/react": "^11.4.0",
|
|
35
31
|
"@emotion/styled": "^11.3.0",
|
|
36
32
|
"lodash": "4.17.21",
|
|
@@ -39,7 +35,7 @@
|
|
|
39
35
|
},
|
|
40
36
|
"devDependencies": {
|
|
41
37
|
"react": "17.0.2",
|
|
42
|
-
"react-intl": "5.
|
|
38
|
+
"react-intl": "5.21.2"
|
|
43
39
|
},
|
|
44
40
|
"peerDependencies": {
|
|
45
41
|
"react": "17.x",
|