@commercetools-uikit/creatable-select-input 16.0.0 → 16.1.0
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.
|
@@ -38,7 +38,6 @@ var CreatableSelect__default = /*#__PURE__*/_interopDefault(CreatableSelect);
|
|
|
38
38
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
39
39
|
|
|
40
40
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); 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; }
|
|
41
|
-
|
|
42
41
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
43
42
|
const customizedComponents = {
|
|
44
43
|
DropdownIndicator: selectUtils.DropdownIndicator,
|
|
@@ -58,17 +57,13 @@ const defaultProps = {
|
|
|
58
57
|
isSearchable: true,
|
|
59
58
|
menuPortalZIndex: 1
|
|
60
59
|
};
|
|
61
|
-
|
|
62
60
|
const CreatableSelectInput = props => {
|
|
63
61
|
const intl = reactIntl.useIntl();
|
|
64
|
-
|
|
65
62
|
const _useTheme = designSystem.useTheme(),
|
|
66
|
-
|
|
67
|
-
|
|
63
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
68
64
|
if (!props.isReadOnly) {
|
|
69
65
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'CreatableSelectInput: `onChange` is required when input is not read only.') : void 0;
|
|
70
66
|
}
|
|
71
|
-
|
|
72
67
|
const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
73
68
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
74
69
|
max: props.horizontalConstraint,
|
|
@@ -98,7 +93,8 @@ const CreatableSelectInput = props => {
|
|
|
98
93
|
hasValue: !isEmpty__default["default"](props.value),
|
|
99
94
|
isNewTheme
|
|
100
95
|
}),
|
|
101
|
-
filterOption: props.filterOption
|
|
96
|
+
filterOption: props.filterOption
|
|
97
|
+
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
102
98
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
103
99
|
// instead.
|
|
104
100
|
// This makes it easier to less confusing to use with <label />s.
|
|
@@ -127,11 +123,11 @@ const CreatableSelectInput = props => {
|
|
|
127
123
|
target: {
|
|
128
124
|
id: props.id,
|
|
129
125
|
name: (() => {
|
|
130
|
-
if (!props.isMulti) return props.name;
|
|
126
|
+
if (!props.isMulti) return props.name;
|
|
127
|
+
// We append the ".0" to make Formik set the touched
|
|
131
128
|
// state as an array instead of a boolean only.
|
|
132
129
|
// Otherwise the shapes would clash on submission, as
|
|
133
130
|
// Formik will create an array on submission anyways.
|
|
134
|
-
|
|
135
131
|
return props.name ? "".concat(props.name, ".0") : undefined;
|
|
136
132
|
})()
|
|
137
133
|
},
|
|
@@ -141,15 +137,13 @@ const CreatableSelectInput = props => {
|
|
|
141
137
|
} : undefined,
|
|
142
138
|
onChange: (value, info) => {
|
|
143
139
|
var _props$onChange;
|
|
144
|
-
|
|
145
140
|
// selectedOptions is either an array, or a single option, or null
|
|
146
141
|
// depending on whether we're in multi-mode or not (isMulti)
|
|
147
|
-
let newValue = value;
|
|
148
142
|
|
|
143
|
+
let newValue = value;
|
|
149
144
|
if (props.isMulti && !newValue) {
|
|
150
145
|
newValue = [];
|
|
151
146
|
}
|
|
152
|
-
|
|
153
147
|
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
|
|
154
148
|
target: {
|
|
155
149
|
id: props.id,
|
|
@@ -165,7 +159,8 @@ const CreatableSelectInput = props => {
|
|
|
165
159
|
placeholder: placeholder,
|
|
166
160
|
tabIndex: props.tabIndex,
|
|
167
161
|
tabSelectsValue: props.tabSelectsValue,
|
|
168
|
-
value: props.value
|
|
162
|
+
value: props.value
|
|
163
|
+
// Creatable props
|
|
169
164
|
,
|
|
170
165
|
allowCreateWhileLoading: props.allowCreateWhileLoading,
|
|
171
166
|
formatCreateLabel: props.formatCreateLabel || (inputValue => intl.formatMessage(selectUtils.messages.createLabel, {
|
|
@@ -174,14 +169,14 @@ const CreatableSelectInput = props => {
|
|
|
174
169
|
isValidNewOption: props.isValidNewOption,
|
|
175
170
|
getNewOptionData: props.getNewOptionData,
|
|
176
171
|
onCreateOption: props.onCreateOption,
|
|
177
|
-
createOptionPosition: props.createOptionPosition
|
|
172
|
+
createOptionPosition: props.createOptionPosition
|
|
173
|
+
//@ts-ignore
|
|
178
174
|
,
|
|
179
175
|
iconLeft: props.iconLeft
|
|
180
176
|
})
|
|
181
177
|
}))
|
|
182
178
|
});
|
|
183
179
|
};
|
|
184
|
-
|
|
185
180
|
CreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
186
181
|
horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
187
182
|
hasError: _pt__default["default"].bool,
|
|
@@ -205,24 +200,25 @@ CreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
205
200
|
} : {};
|
|
206
201
|
CreatableSelectInput.displayName = 'CreatableSelectInput';
|
|
207
202
|
CreatableSelectInput.defaultProps = defaultProps;
|
|
203
|
+
|
|
208
204
|
/**
|
|
209
205
|
* Expose static helper methods.
|
|
210
206
|
*/
|
|
207
|
+
|
|
211
208
|
// Both "true" and an empty array [] represent a touched state. The Boolean
|
|
212
209
|
// conveniently handles both cases
|
|
213
|
-
|
|
214
210
|
CreatableSelectInput.isTouched = touched => Boolean(touched);
|
|
211
|
+
|
|
215
212
|
/**
|
|
216
213
|
* Expose react-select components for customization purposes.
|
|
217
214
|
*/
|
|
218
|
-
// custom
|
|
219
|
-
|
|
220
215
|
|
|
216
|
+
// custom
|
|
221
217
|
CreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
222
218
|
CreatableSelectInput.Control = reactSelect.components.Control;
|
|
223
219
|
CreatableSelectInput.CrossIcon = reactSelect.components.CrossIcon;
|
|
224
|
-
CreatableSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
225
|
-
|
|
220
|
+
CreatableSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
221
|
+
// custom
|
|
226
222
|
CreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
227
223
|
CreatableSelectInput.Group = reactSelect.components.Group;
|
|
228
224
|
CreatableSelectInput.GroupHeading = reactSelect.components.GroupHeading;
|
|
@@ -236,8 +232,8 @@ CreatableSelectInput.MenuList = reactSelect.components.MenuList;
|
|
|
236
232
|
CreatableSelectInput.MenuPortal = reactSelect.components.MenuPortal;
|
|
237
233
|
CreatableSelectInput.MultiValue = reactSelect.components.MultiValue;
|
|
238
234
|
CreatableSelectInput.MultiValueContainer = reactSelect.components.MultiValueContainer;
|
|
239
|
-
CreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
240
|
-
|
|
235
|
+
CreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
236
|
+
// custom
|
|
241
237
|
CreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
242
238
|
CreatableSelectInput.NoOptionsMessage = reactSelect.components.NoOptionsMessage;
|
|
243
239
|
CreatableSelectInput.Option = reactSelect.components.Option;
|
|
@@ -248,7 +244,7 @@ CreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer;
|
|
|
248
244
|
var CreatableSelectInput$1 = CreatableSelectInput;
|
|
249
245
|
|
|
250
246
|
// NOTE: This string will be replaced on build time with the package version.
|
|
251
|
-
var version = "16.
|
|
247
|
+
var version = "16.1.0";
|
|
252
248
|
|
|
253
249
|
exports["default"] = CreatableSelectInput$1;
|
|
254
250
|
exports.version = version;
|
|
@@ -37,7 +37,6 @@ var CreatableSelect__default = /*#__PURE__*/_interopDefault(CreatableSelect);
|
|
|
37
37
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
38
38
|
|
|
39
39
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); 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
|
-
|
|
41
40
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
42
41
|
const customizedComponents = {
|
|
43
42
|
DropdownIndicator: selectUtils.DropdownIndicator,
|
|
@@ -57,15 +56,11 @@ const defaultProps = {
|
|
|
57
56
|
isSearchable: true,
|
|
58
57
|
menuPortalZIndex: 1
|
|
59
58
|
};
|
|
60
|
-
|
|
61
59
|
const CreatableSelectInput = props => {
|
|
62
60
|
const intl = reactIntl.useIntl();
|
|
63
|
-
|
|
64
61
|
const _useTheme = designSystem.useTheme(),
|
|
65
|
-
|
|
66
|
-
|
|
62
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
67
63
|
if (!props.isReadOnly) ;
|
|
68
|
-
|
|
69
64
|
const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
70
65
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
71
66
|
max: props.horizontalConstraint,
|
|
@@ -95,7 +90,8 @@ const CreatableSelectInput = props => {
|
|
|
95
90
|
hasValue: !isEmpty__default["default"](props.value),
|
|
96
91
|
isNewTheme
|
|
97
92
|
}),
|
|
98
|
-
filterOption: props.filterOption
|
|
93
|
+
filterOption: props.filterOption
|
|
94
|
+
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
99
95
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
100
96
|
// instead.
|
|
101
97
|
// This makes it easier to less confusing to use with <label />s.
|
|
@@ -124,11 +120,11 @@ const CreatableSelectInput = props => {
|
|
|
124
120
|
target: {
|
|
125
121
|
id: props.id,
|
|
126
122
|
name: (() => {
|
|
127
|
-
if (!props.isMulti) return props.name;
|
|
123
|
+
if (!props.isMulti) return props.name;
|
|
124
|
+
// We append the ".0" to make Formik set the touched
|
|
128
125
|
// state as an array instead of a boolean only.
|
|
129
126
|
// Otherwise the shapes would clash on submission, as
|
|
130
127
|
// Formik will create an array on submission anyways.
|
|
131
|
-
|
|
132
128
|
return props.name ? "".concat(props.name, ".0") : undefined;
|
|
133
129
|
})()
|
|
134
130
|
},
|
|
@@ -138,15 +134,13 @@ const CreatableSelectInput = props => {
|
|
|
138
134
|
} : undefined,
|
|
139
135
|
onChange: (value, info) => {
|
|
140
136
|
var _props$onChange;
|
|
141
|
-
|
|
142
137
|
// selectedOptions is either an array, or a single option, or null
|
|
143
138
|
// depending on whether we're in multi-mode or not (isMulti)
|
|
144
|
-
let newValue = value;
|
|
145
139
|
|
|
140
|
+
let newValue = value;
|
|
146
141
|
if (props.isMulti && !newValue) {
|
|
147
142
|
newValue = [];
|
|
148
143
|
}
|
|
149
|
-
|
|
150
144
|
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
|
|
151
145
|
target: {
|
|
152
146
|
id: props.id,
|
|
@@ -162,7 +156,8 @@ const CreatableSelectInput = props => {
|
|
|
162
156
|
placeholder: placeholder,
|
|
163
157
|
tabIndex: props.tabIndex,
|
|
164
158
|
tabSelectsValue: props.tabSelectsValue,
|
|
165
|
-
value: props.value
|
|
159
|
+
value: props.value
|
|
160
|
+
// Creatable props
|
|
166
161
|
,
|
|
167
162
|
allowCreateWhileLoading: props.allowCreateWhileLoading,
|
|
168
163
|
formatCreateLabel: props.formatCreateLabel || (inputValue => intl.formatMessage(selectUtils.messages.createLabel, {
|
|
@@ -171,35 +166,36 @@ const CreatableSelectInput = props => {
|
|
|
171
166
|
isValidNewOption: props.isValidNewOption,
|
|
172
167
|
getNewOptionData: props.getNewOptionData,
|
|
173
168
|
onCreateOption: props.onCreateOption,
|
|
174
|
-
createOptionPosition: props.createOptionPosition
|
|
169
|
+
createOptionPosition: props.createOptionPosition
|
|
170
|
+
//@ts-ignore
|
|
175
171
|
,
|
|
176
172
|
iconLeft: props.iconLeft
|
|
177
173
|
})
|
|
178
174
|
}))
|
|
179
175
|
});
|
|
180
176
|
};
|
|
181
|
-
|
|
182
177
|
CreatableSelectInput.propTypes = {};
|
|
183
178
|
CreatableSelectInput.displayName = 'CreatableSelectInput';
|
|
184
179
|
CreatableSelectInput.defaultProps = defaultProps;
|
|
180
|
+
|
|
185
181
|
/**
|
|
186
182
|
* Expose static helper methods.
|
|
187
183
|
*/
|
|
184
|
+
|
|
188
185
|
// Both "true" and an empty array [] represent a touched state. The Boolean
|
|
189
186
|
// conveniently handles both cases
|
|
190
|
-
|
|
191
187
|
CreatableSelectInput.isTouched = touched => Boolean(touched);
|
|
188
|
+
|
|
192
189
|
/**
|
|
193
190
|
* Expose react-select components for customization purposes.
|
|
194
191
|
*/
|
|
195
|
-
// custom
|
|
196
|
-
|
|
197
192
|
|
|
193
|
+
// custom
|
|
198
194
|
CreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
199
195
|
CreatableSelectInput.Control = reactSelect.components.Control;
|
|
200
196
|
CreatableSelectInput.CrossIcon = reactSelect.components.CrossIcon;
|
|
201
|
-
CreatableSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
202
|
-
|
|
197
|
+
CreatableSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
198
|
+
// custom
|
|
203
199
|
CreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
204
200
|
CreatableSelectInput.Group = reactSelect.components.Group;
|
|
205
201
|
CreatableSelectInput.GroupHeading = reactSelect.components.GroupHeading;
|
|
@@ -213,8 +209,8 @@ CreatableSelectInput.MenuList = reactSelect.components.MenuList;
|
|
|
213
209
|
CreatableSelectInput.MenuPortal = reactSelect.components.MenuPortal;
|
|
214
210
|
CreatableSelectInput.MultiValue = reactSelect.components.MultiValue;
|
|
215
211
|
CreatableSelectInput.MultiValueContainer = reactSelect.components.MultiValueContainer;
|
|
216
|
-
CreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
217
|
-
|
|
212
|
+
CreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
213
|
+
// custom
|
|
218
214
|
CreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
219
215
|
CreatableSelectInput.NoOptionsMessage = reactSelect.components.NoOptionsMessage;
|
|
220
216
|
CreatableSelectInput.Option = reactSelect.components.Option;
|
|
@@ -225,7 +221,7 @@ CreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer;
|
|
|
225
221
|
var CreatableSelectInput$1 = CreatableSelectInput;
|
|
226
222
|
|
|
227
223
|
// NOTE: This string will be replaced on build time with the package version.
|
|
228
|
-
var version = "16.
|
|
224
|
+
var version = "16.1.0";
|
|
229
225
|
|
|
230
226
|
exports["default"] = CreatableSelectInput$1;
|
|
231
227
|
exports.version = version;
|
|
@@ -19,7 +19,6 @@ import { useTheme } from '@commercetools-uikit/design-system';
|
|
|
19
19
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
20
20
|
|
|
21
21
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
22
|
-
|
|
23
22
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
24
23
|
const customizedComponents = {
|
|
25
24
|
DropdownIndicator,
|
|
@@ -39,17 +38,13 @@ const defaultProps = {
|
|
|
39
38
|
isSearchable: true,
|
|
40
39
|
menuPortalZIndex: 1
|
|
41
40
|
};
|
|
42
|
-
|
|
43
41
|
const CreatableSelectInput = props => {
|
|
44
42
|
const intl = useIntl();
|
|
45
|
-
|
|
46
43
|
const _useTheme = useTheme(),
|
|
47
|
-
|
|
48
|
-
|
|
44
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
49
45
|
if (!props.isReadOnly) {
|
|
50
46
|
process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'CreatableSelectInput: `onChange` is required when input is not read only.') : void 0;
|
|
51
47
|
}
|
|
52
|
-
|
|
53
48
|
const placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
|
|
54
49
|
return jsx(Constraints.Horizontal, {
|
|
55
50
|
max: props.horizontalConstraint,
|
|
@@ -79,7 +74,8 @@ const CreatableSelectInput = props => {
|
|
|
79
74
|
hasValue: !isEmpty(props.value),
|
|
80
75
|
isNewTheme
|
|
81
76
|
}),
|
|
82
|
-
filterOption: props.filterOption
|
|
77
|
+
filterOption: props.filterOption
|
|
78
|
+
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
83
79
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
84
80
|
// instead.
|
|
85
81
|
// This makes it easier to less confusing to use with <label />s.
|
|
@@ -108,11 +104,11 @@ const CreatableSelectInput = props => {
|
|
|
108
104
|
target: {
|
|
109
105
|
id: props.id,
|
|
110
106
|
name: (() => {
|
|
111
|
-
if (!props.isMulti) return props.name;
|
|
107
|
+
if (!props.isMulti) return props.name;
|
|
108
|
+
// We append the ".0" to make Formik set the touched
|
|
112
109
|
// state as an array instead of a boolean only.
|
|
113
110
|
// Otherwise the shapes would clash on submission, as
|
|
114
111
|
// Formik will create an array on submission anyways.
|
|
115
|
-
|
|
116
112
|
return props.name ? "".concat(props.name, ".0") : undefined;
|
|
117
113
|
})()
|
|
118
114
|
},
|
|
@@ -122,15 +118,13 @@ const CreatableSelectInput = props => {
|
|
|
122
118
|
} : undefined,
|
|
123
119
|
onChange: (value, info) => {
|
|
124
120
|
var _props$onChange;
|
|
125
|
-
|
|
126
121
|
// selectedOptions is either an array, or a single option, or null
|
|
127
122
|
// depending on whether we're in multi-mode or not (isMulti)
|
|
128
|
-
let newValue = value;
|
|
129
123
|
|
|
124
|
+
let newValue = value;
|
|
130
125
|
if (props.isMulti && !newValue) {
|
|
131
126
|
newValue = [];
|
|
132
127
|
}
|
|
133
|
-
|
|
134
128
|
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
|
|
135
129
|
target: {
|
|
136
130
|
id: props.id,
|
|
@@ -146,7 +140,8 @@ const CreatableSelectInput = props => {
|
|
|
146
140
|
placeholder: placeholder,
|
|
147
141
|
tabIndex: props.tabIndex,
|
|
148
142
|
tabSelectsValue: props.tabSelectsValue,
|
|
149
|
-
value: props.value
|
|
143
|
+
value: props.value
|
|
144
|
+
// Creatable props
|
|
150
145
|
,
|
|
151
146
|
allowCreateWhileLoading: props.allowCreateWhileLoading,
|
|
152
147
|
formatCreateLabel: props.formatCreateLabel || (inputValue => intl.formatMessage(messages.createLabel, {
|
|
@@ -155,14 +150,14 @@ const CreatableSelectInput = props => {
|
|
|
155
150
|
isValidNewOption: props.isValidNewOption,
|
|
156
151
|
getNewOptionData: props.getNewOptionData,
|
|
157
152
|
onCreateOption: props.onCreateOption,
|
|
158
|
-
createOptionPosition: props.createOptionPosition
|
|
153
|
+
createOptionPosition: props.createOptionPosition
|
|
154
|
+
//@ts-ignore
|
|
159
155
|
,
|
|
160
156
|
iconLeft: props.iconLeft
|
|
161
157
|
})
|
|
162
158
|
}))
|
|
163
159
|
});
|
|
164
160
|
};
|
|
165
|
-
|
|
166
161
|
CreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
167
162
|
horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
168
163
|
hasError: _pt.bool,
|
|
@@ -186,24 +181,25 @@ CreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
186
181
|
} : {};
|
|
187
182
|
CreatableSelectInput.displayName = 'CreatableSelectInput';
|
|
188
183
|
CreatableSelectInput.defaultProps = defaultProps;
|
|
184
|
+
|
|
189
185
|
/**
|
|
190
186
|
* Expose static helper methods.
|
|
191
187
|
*/
|
|
188
|
+
|
|
192
189
|
// Both "true" and an empty array [] represent a touched state. The Boolean
|
|
193
190
|
// conveniently handles both cases
|
|
194
|
-
|
|
195
191
|
CreatableSelectInput.isTouched = touched => Boolean(touched);
|
|
192
|
+
|
|
196
193
|
/**
|
|
197
194
|
* Expose react-select components for customization purposes.
|
|
198
195
|
*/
|
|
199
|
-
// custom
|
|
200
|
-
|
|
201
196
|
|
|
197
|
+
// custom
|
|
202
198
|
CreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
203
199
|
CreatableSelectInput.Control = components.Control;
|
|
204
200
|
CreatableSelectInput.CrossIcon = components.CrossIcon;
|
|
205
|
-
CreatableSelectInput.DownChevron = components.DownChevron;
|
|
206
|
-
|
|
201
|
+
CreatableSelectInput.DownChevron = components.DownChevron;
|
|
202
|
+
// custom
|
|
207
203
|
CreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
208
204
|
CreatableSelectInput.Group = components.Group;
|
|
209
205
|
CreatableSelectInput.GroupHeading = components.GroupHeading;
|
|
@@ -217,8 +213,8 @@ CreatableSelectInput.MenuList = components.MenuList;
|
|
|
217
213
|
CreatableSelectInput.MenuPortal = components.MenuPortal;
|
|
218
214
|
CreatableSelectInput.MultiValue = components.MultiValue;
|
|
219
215
|
CreatableSelectInput.MultiValueContainer = components.MultiValueContainer;
|
|
220
|
-
CreatableSelectInput.MultiValueLabel = components.MultiValueLabel;
|
|
221
|
-
|
|
216
|
+
CreatableSelectInput.MultiValueLabel = components.MultiValueLabel;
|
|
217
|
+
// custom
|
|
222
218
|
CreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
223
219
|
CreatableSelectInput.NoOptionsMessage = components.NoOptionsMessage;
|
|
224
220
|
CreatableSelectInput.Option = components.Option;
|
|
@@ -229,6 +225,6 @@ CreatableSelectInput.ValueContainer = components.ValueContainer;
|
|
|
229
225
|
var CreatableSelectInput$1 = CreatableSelectInput;
|
|
230
226
|
|
|
231
227
|
// NOTE: This string will be replaced on build time with the package version.
|
|
232
|
-
var version = "16.
|
|
228
|
+
var version = "16.1.0";
|
|
233
229
|
|
|
234
230
|
export { CreatableSelectInput$1 as default, version };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/creatable-select-input",
|
|
3
3
|
"description": "An input component getting a selection from the user, and where options can also be created by the user.",
|
|
4
|
-
"version": "16.
|
|
4
|
+
"version": "16.1.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,18 +21,18 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/constraints": "16.
|
|
25
|
-
"@commercetools-uikit/design-system": "16.
|
|
26
|
-
"@commercetools-uikit/icons": "16.
|
|
27
|
-
"@commercetools-uikit/select-utils": "16.
|
|
28
|
-
"@commercetools-uikit/spacings": "16.
|
|
29
|
-
"@commercetools-uikit/text": "16.
|
|
30
|
-
"@commercetools-uikit/utils": "16.
|
|
24
|
+
"@commercetools-uikit/constraints": "16.1.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "16.1.0",
|
|
26
|
+
"@commercetools-uikit/icons": "16.1.0",
|
|
27
|
+
"@commercetools-uikit/select-utils": "16.1.0",
|
|
28
|
+
"@commercetools-uikit/spacings": "16.1.0",
|
|
29
|
+
"@commercetools-uikit/text": "16.1.0",
|
|
30
|
+
"@commercetools-uikit/utils": "16.1.0",
|
|
31
31
|
"@emotion/react": "^11.10.5",
|
|
32
32
|
"@emotion/styled": "^11.10.5",
|
|
33
33
|
"lodash": "4.17.21",
|
|
34
34
|
"prop-types": "15.8.1",
|
|
35
|
-
"react-select": "5.7.
|
|
35
|
+
"react-select": "5.7.3"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"react": "17.0.2",
|