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