@commercetools-uikit/async-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.
|
@@ -42,13 +42,10 @@ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
|
42
42
|
var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
|
|
43
43
|
|
|
44
44
|
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; }
|
|
45
|
-
|
|
46
45
|
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; }
|
|
47
|
-
|
|
48
46
|
const LoadingIndicator = () => jsxRuntime.jsx(LoadingSpinner__default["default"], {
|
|
49
47
|
scale: "s"
|
|
50
48
|
});
|
|
51
|
-
|
|
52
49
|
LoadingIndicator.displayName = 'LoadingIndicator';
|
|
53
50
|
const customizedComponents = {
|
|
54
51
|
DropdownIndicator: selectUtils.DropdownIndicator,
|
|
@@ -63,23 +60,17 @@ const defaultProps = {
|
|
|
63
60
|
isSearchable: true,
|
|
64
61
|
menuPortalZIndex: 1
|
|
65
62
|
};
|
|
66
|
-
|
|
67
63
|
const AsyncCreatableSelectInput = props => {
|
|
68
64
|
const intl = reactIntl.useIntl();
|
|
69
|
-
|
|
70
65
|
const _useTheme = designSystem.useTheme(),
|
|
71
|
-
|
|
72
|
-
|
|
66
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
73
67
|
const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
74
|
-
|
|
75
68
|
if (!props.isReadOnly) {
|
|
76
69
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'AsyncCreatableSelectInput: `onChange` is required when input is not read only.') : void 0;
|
|
77
70
|
}
|
|
78
|
-
|
|
79
71
|
if (props.isMulti) {
|
|
80
72
|
process.env.NODE_ENV !== "production" ? utils.warning(_Array$isArray__default["default"](props.value), 'AsyncCreatableSelectInput: `value` is expected to be an array when isMulti is true') : void 0;
|
|
81
73
|
}
|
|
82
|
-
|
|
83
74
|
selectUtils.warnIfMenuPortalPropsAreMissing({
|
|
84
75
|
menuPortalZIndex: props.menuPortalZIndex,
|
|
85
76
|
menuPortalTarget: props.menuPortalTarget,
|
|
@@ -113,7 +104,8 @@ const AsyncCreatableSelectInput = props => {
|
|
|
113
104
|
hasValue: !isEmpty__default["default"](props.value),
|
|
114
105
|
isNewTheme
|
|
115
106
|
}),
|
|
116
|
-
filterOption: props.filterOption
|
|
107
|
+
filterOption: props.filterOption
|
|
108
|
+
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
117
109
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
118
110
|
// instead.
|
|
119
111
|
// This makes it easier to less confusing to use with <label />s.
|
|
@@ -143,11 +135,11 @@ const AsyncCreatableSelectInput = props => {
|
|
|
143
135
|
id: props.id,
|
|
144
136
|
name: (() => {
|
|
145
137
|
if (!props.name) return undefined;
|
|
146
|
-
if (!props.isMulti) return props.name;
|
|
138
|
+
if (!props.isMulti) return props.name;
|
|
139
|
+
// We append the ".0" to make Formik set the touched
|
|
147
140
|
// state as an array instead of a boolean only.
|
|
148
141
|
// Otherwise the shapes would clash on submission, as
|
|
149
142
|
// Formik will create an array on submission anyways.
|
|
150
|
-
|
|
151
143
|
return "".concat(props.name, ".0");
|
|
152
144
|
})()
|
|
153
145
|
},
|
|
@@ -157,14 +149,11 @@ const AsyncCreatableSelectInput = props => {
|
|
|
157
149
|
} : undefined,
|
|
158
150
|
onChange: (value, info) => {
|
|
159
151
|
var _props$onChange;
|
|
160
|
-
|
|
161
152
|
// wrapping breaking changes made in react-select v3
|
|
162
153
|
let newValue = value;
|
|
163
|
-
|
|
164
154
|
if (props.isMulti && !newValue) {
|
|
165
155
|
newValue = [];
|
|
166
156
|
}
|
|
167
|
-
|
|
168
157
|
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
|
|
169
158
|
target: {
|
|
170
159
|
id: props.id,
|
|
@@ -179,11 +168,13 @@ const AsyncCreatableSelectInput = props => {
|
|
|
179
168
|
placeholder: placeholder,
|
|
180
169
|
tabIndex: props.tabIndex,
|
|
181
170
|
tabSelectsValue: props.tabSelectsValue,
|
|
182
|
-
value: props.value
|
|
171
|
+
value: props.value
|
|
172
|
+
// Async react-select props
|
|
183
173
|
,
|
|
184
174
|
defaultOptions: props.defaultOptions,
|
|
185
175
|
loadOptions: props.loadOptions,
|
|
186
|
-
cacheOptions: props.cacheOptions
|
|
176
|
+
cacheOptions: props.cacheOptions
|
|
177
|
+
// Creatable props
|
|
187
178
|
,
|
|
188
179
|
allowCreateWhileLoading: props.allowCreateWhileLoading,
|
|
189
180
|
formatCreateLabel: props.formatCreateLabel || (inputValue => intl.formatMessage(selectUtils.messages.createLabel, {
|
|
@@ -192,14 +183,14 @@ const AsyncCreatableSelectInput = props => {
|
|
|
192
183
|
isValidNewOption: props.isValidNewOption,
|
|
193
184
|
getNewOptionData: props.getNewOptionData,
|
|
194
185
|
onCreateOption: props.onCreateOption,
|
|
195
|
-
createOptionPosition: props.createOptionPosition
|
|
186
|
+
createOptionPosition: props.createOptionPosition
|
|
187
|
+
// @ts-ignore
|
|
196
188
|
,
|
|
197
189
|
iconLeft: props.iconLeft
|
|
198
190
|
})
|
|
199
191
|
}))
|
|
200
192
|
});
|
|
201
193
|
};
|
|
202
|
-
|
|
203
194
|
AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
204
195
|
horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
205
196
|
hasError: _pt__default["default"].bool,
|
|
@@ -214,33 +205,34 @@ AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
214
205
|
} : {};
|
|
215
206
|
AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
|
|
216
207
|
AsyncCreatableSelectInput.defaultProps = defaultProps;
|
|
208
|
+
|
|
217
209
|
/**
|
|
218
210
|
* Expose static helper methods.
|
|
219
211
|
*/
|
|
212
|
+
|
|
220
213
|
// Formik will set the field to an array on submission, so we always have to
|
|
221
214
|
// deal with an array. The touched state ends up being an empty array in case
|
|
222
215
|
// values were removed only. So we have to treat any array we receive as
|
|
223
216
|
// a signal of the field having been touched.
|
|
224
|
-
|
|
225
217
|
AsyncCreatableSelectInput.isTouched = touched => Boolean(touched);
|
|
218
|
+
|
|
226
219
|
/**
|
|
227
220
|
* Expose react-select components for customization purposes.
|
|
228
221
|
*/
|
|
229
|
-
// custom
|
|
230
|
-
|
|
231
222
|
|
|
223
|
+
// custom
|
|
232
224
|
AsyncCreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
233
225
|
AsyncCreatableSelectInput.Control = reactSelect.components.Control;
|
|
234
226
|
AsyncCreatableSelectInput.CrossIcon = reactSelect.components.CrossIcon;
|
|
235
|
-
AsyncCreatableSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
236
|
-
|
|
227
|
+
AsyncCreatableSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
228
|
+
// custom
|
|
237
229
|
AsyncCreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
238
230
|
AsyncCreatableSelectInput.Group = reactSelect.components.Group;
|
|
239
231
|
AsyncCreatableSelectInput.GroupHeading = reactSelect.components.GroupHeading;
|
|
240
232
|
AsyncCreatableSelectInput.IndicatorSeparator = reactSelect.components.IndicatorSeparator;
|
|
241
233
|
AsyncCreatableSelectInput.IndicatorsContainer = reactSelect.components.IndicatorsContainer;
|
|
242
|
-
AsyncCreatableSelectInput.Input = reactSelect.components.Input;
|
|
243
|
-
|
|
234
|
+
AsyncCreatableSelectInput.Input = reactSelect.components.Input;
|
|
235
|
+
// custom
|
|
244
236
|
AsyncCreatableSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
|
|
245
237
|
AsyncCreatableSelectInput.LoadingMessage = reactSelect.components.LoadingMessage;
|
|
246
238
|
AsyncCreatableSelectInput.Menu = reactSelect.components.Menu;
|
|
@@ -248,8 +240,8 @@ AsyncCreatableSelectInput.MenuList = reactSelect.components.MenuList;
|
|
|
248
240
|
AsyncCreatableSelectInput.MenuPortal = reactSelect.components.MenuPortal;
|
|
249
241
|
AsyncCreatableSelectInput.MultiValue = reactSelect.components.MultiValue;
|
|
250
242
|
AsyncCreatableSelectInput.MultiValueContainer = reactSelect.components.MultiValueContainer;
|
|
251
|
-
AsyncCreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
252
|
-
|
|
243
|
+
AsyncCreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
244
|
+
// custom
|
|
253
245
|
AsyncCreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
254
246
|
AsyncCreatableSelectInput.NoOptionsMessage = reactSelect.components.NoOptionsMessage;
|
|
255
247
|
AsyncCreatableSelectInput.Option = reactSelect.components.Option;
|
|
@@ -260,7 +252,7 @@ AsyncCreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer
|
|
|
260
252
|
var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
|
|
261
253
|
|
|
262
254
|
// NOTE: This string will be replaced on build time with the package version.
|
|
263
|
-
var version = "16.
|
|
255
|
+
var version = "16.1.0";
|
|
264
256
|
|
|
265
257
|
exports["default"] = AsyncCreatableSelectInput$1;
|
|
266
258
|
exports.version = version;
|
|
@@ -40,13 +40,10 @@ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
|
40
40
|
var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
|
|
41
41
|
|
|
42
42
|
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; }
|
|
43
|
-
|
|
44
43
|
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; }
|
|
45
|
-
|
|
46
44
|
const LoadingIndicator = () => jsxRuntime.jsx(LoadingSpinner__default["default"], {
|
|
47
45
|
scale: "s"
|
|
48
46
|
});
|
|
49
|
-
|
|
50
47
|
LoadingIndicator.displayName = 'LoadingIndicator';
|
|
51
48
|
const customizedComponents = {
|
|
52
49
|
DropdownIndicator: selectUtils.DropdownIndicator,
|
|
@@ -61,19 +58,13 @@ const defaultProps = {
|
|
|
61
58
|
isSearchable: true,
|
|
62
59
|
menuPortalZIndex: 1
|
|
63
60
|
};
|
|
64
|
-
|
|
65
61
|
const AsyncCreatableSelectInput = props => {
|
|
66
62
|
const intl = reactIntl.useIntl();
|
|
67
|
-
|
|
68
63
|
const _useTheme = designSystem.useTheme(),
|
|
69
|
-
|
|
70
|
-
|
|
64
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
71
65
|
const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
72
|
-
|
|
73
66
|
if (!props.isReadOnly) ;
|
|
74
|
-
|
|
75
67
|
if (props.isMulti) ;
|
|
76
|
-
|
|
77
68
|
selectUtils.warnIfMenuPortalPropsAreMissing({
|
|
78
69
|
menuPortalZIndex: props.menuPortalZIndex,
|
|
79
70
|
menuPortalTarget: props.menuPortalTarget,
|
|
@@ -107,7 +98,8 @@ const AsyncCreatableSelectInput = props => {
|
|
|
107
98
|
hasValue: !isEmpty__default["default"](props.value),
|
|
108
99
|
isNewTheme
|
|
109
100
|
}),
|
|
110
|
-
filterOption: props.filterOption
|
|
101
|
+
filterOption: props.filterOption
|
|
102
|
+
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
111
103
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
112
104
|
// instead.
|
|
113
105
|
// This makes it easier to less confusing to use with <label />s.
|
|
@@ -137,11 +129,11 @@ const AsyncCreatableSelectInput = props => {
|
|
|
137
129
|
id: props.id,
|
|
138
130
|
name: (() => {
|
|
139
131
|
if (!props.name) return undefined;
|
|
140
|
-
if (!props.isMulti) return props.name;
|
|
132
|
+
if (!props.isMulti) return props.name;
|
|
133
|
+
// We append the ".0" to make Formik set the touched
|
|
141
134
|
// state as an array instead of a boolean only.
|
|
142
135
|
// Otherwise the shapes would clash on submission, as
|
|
143
136
|
// Formik will create an array on submission anyways.
|
|
144
|
-
|
|
145
137
|
return "".concat(props.name, ".0");
|
|
146
138
|
})()
|
|
147
139
|
},
|
|
@@ -151,14 +143,11 @@ const AsyncCreatableSelectInput = props => {
|
|
|
151
143
|
} : undefined,
|
|
152
144
|
onChange: (value, info) => {
|
|
153
145
|
var _props$onChange;
|
|
154
|
-
|
|
155
146
|
// wrapping breaking changes made in react-select v3
|
|
156
147
|
let newValue = value;
|
|
157
|
-
|
|
158
148
|
if (props.isMulti && !newValue) {
|
|
159
149
|
newValue = [];
|
|
160
150
|
}
|
|
161
|
-
|
|
162
151
|
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
|
|
163
152
|
target: {
|
|
164
153
|
id: props.id,
|
|
@@ -173,11 +162,13 @@ const AsyncCreatableSelectInput = props => {
|
|
|
173
162
|
placeholder: placeholder,
|
|
174
163
|
tabIndex: props.tabIndex,
|
|
175
164
|
tabSelectsValue: props.tabSelectsValue,
|
|
176
|
-
value: props.value
|
|
165
|
+
value: props.value
|
|
166
|
+
// Async react-select props
|
|
177
167
|
,
|
|
178
168
|
defaultOptions: props.defaultOptions,
|
|
179
169
|
loadOptions: props.loadOptions,
|
|
180
|
-
cacheOptions: props.cacheOptions
|
|
170
|
+
cacheOptions: props.cacheOptions
|
|
171
|
+
// Creatable props
|
|
181
172
|
,
|
|
182
173
|
allowCreateWhileLoading: props.allowCreateWhileLoading,
|
|
183
174
|
formatCreateLabel: props.formatCreateLabel || (inputValue => intl.formatMessage(selectUtils.messages.createLabel, {
|
|
@@ -186,44 +177,45 @@ const AsyncCreatableSelectInput = props => {
|
|
|
186
177
|
isValidNewOption: props.isValidNewOption,
|
|
187
178
|
getNewOptionData: props.getNewOptionData,
|
|
188
179
|
onCreateOption: props.onCreateOption,
|
|
189
|
-
createOptionPosition: props.createOptionPosition
|
|
180
|
+
createOptionPosition: props.createOptionPosition
|
|
181
|
+
// @ts-ignore
|
|
190
182
|
,
|
|
191
183
|
iconLeft: props.iconLeft
|
|
192
184
|
})
|
|
193
185
|
}))
|
|
194
186
|
});
|
|
195
187
|
};
|
|
196
|
-
|
|
197
188
|
AsyncCreatableSelectInput.propTypes = {};
|
|
198
189
|
AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
|
|
199
190
|
AsyncCreatableSelectInput.defaultProps = defaultProps;
|
|
191
|
+
|
|
200
192
|
/**
|
|
201
193
|
* Expose static helper methods.
|
|
202
194
|
*/
|
|
195
|
+
|
|
203
196
|
// Formik will set the field to an array on submission, so we always have to
|
|
204
197
|
// deal with an array. The touched state ends up being an empty array in case
|
|
205
198
|
// values were removed only. So we have to treat any array we receive as
|
|
206
199
|
// a signal of the field having been touched.
|
|
207
|
-
|
|
208
200
|
AsyncCreatableSelectInput.isTouched = touched => Boolean(touched);
|
|
201
|
+
|
|
209
202
|
/**
|
|
210
203
|
* Expose react-select components for customization purposes.
|
|
211
204
|
*/
|
|
212
|
-
// custom
|
|
213
|
-
|
|
214
205
|
|
|
206
|
+
// custom
|
|
215
207
|
AsyncCreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
216
208
|
AsyncCreatableSelectInput.Control = reactSelect.components.Control;
|
|
217
209
|
AsyncCreatableSelectInput.CrossIcon = reactSelect.components.CrossIcon;
|
|
218
|
-
AsyncCreatableSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
219
|
-
|
|
210
|
+
AsyncCreatableSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
211
|
+
// custom
|
|
220
212
|
AsyncCreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
221
213
|
AsyncCreatableSelectInput.Group = reactSelect.components.Group;
|
|
222
214
|
AsyncCreatableSelectInput.GroupHeading = reactSelect.components.GroupHeading;
|
|
223
215
|
AsyncCreatableSelectInput.IndicatorSeparator = reactSelect.components.IndicatorSeparator;
|
|
224
216
|
AsyncCreatableSelectInput.IndicatorsContainer = reactSelect.components.IndicatorsContainer;
|
|
225
|
-
AsyncCreatableSelectInput.Input = reactSelect.components.Input;
|
|
226
|
-
|
|
217
|
+
AsyncCreatableSelectInput.Input = reactSelect.components.Input;
|
|
218
|
+
// custom
|
|
227
219
|
AsyncCreatableSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
|
|
228
220
|
AsyncCreatableSelectInput.LoadingMessage = reactSelect.components.LoadingMessage;
|
|
229
221
|
AsyncCreatableSelectInput.Menu = reactSelect.components.Menu;
|
|
@@ -231,8 +223,8 @@ AsyncCreatableSelectInput.MenuList = reactSelect.components.MenuList;
|
|
|
231
223
|
AsyncCreatableSelectInput.MenuPortal = reactSelect.components.MenuPortal;
|
|
232
224
|
AsyncCreatableSelectInput.MultiValue = reactSelect.components.MultiValue;
|
|
233
225
|
AsyncCreatableSelectInput.MultiValueContainer = reactSelect.components.MultiValueContainer;
|
|
234
|
-
AsyncCreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
235
|
-
|
|
226
|
+
AsyncCreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
227
|
+
// custom
|
|
236
228
|
AsyncCreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
237
229
|
AsyncCreatableSelectInput.NoOptionsMessage = reactSelect.components.NoOptionsMessage;
|
|
238
230
|
AsyncCreatableSelectInput.Option = reactSelect.components.Option;
|
|
@@ -243,7 +235,7 @@ AsyncCreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer
|
|
|
243
235
|
var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
|
|
244
236
|
|
|
245
237
|
// NOTE: This string will be replaced on build time with the package version.
|
|
246
|
-
var version = "16.
|
|
238
|
+
var version = "16.1.0";
|
|
247
239
|
|
|
248
240
|
exports["default"] = AsyncCreatableSelectInput$1;
|
|
249
241
|
exports.version = version;
|
|
@@ -21,13 +21,10 @@ import { useTheme } from '@commercetools-uikit/design-system';
|
|
|
21
21
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
22
22
|
|
|
23
23
|
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; }
|
|
24
|
-
|
|
25
24
|
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; }
|
|
26
|
-
|
|
27
25
|
const LoadingIndicator = () => jsx(LoadingSpinner, {
|
|
28
26
|
scale: "s"
|
|
29
27
|
});
|
|
30
|
-
|
|
31
28
|
LoadingIndicator.displayName = 'LoadingIndicator';
|
|
32
29
|
const customizedComponents = {
|
|
33
30
|
DropdownIndicator,
|
|
@@ -42,23 +39,17 @@ const defaultProps = {
|
|
|
42
39
|
isSearchable: true,
|
|
43
40
|
menuPortalZIndex: 1
|
|
44
41
|
};
|
|
45
|
-
|
|
46
42
|
const AsyncCreatableSelectInput = props => {
|
|
47
43
|
const intl = useIntl();
|
|
48
|
-
|
|
49
44
|
const _useTheme = useTheme(),
|
|
50
|
-
|
|
51
|
-
|
|
45
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
52
46
|
const placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
|
|
53
|
-
|
|
54
47
|
if (!props.isReadOnly) {
|
|
55
48
|
process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'AsyncCreatableSelectInput: `onChange` is required when input is not read only.') : void 0;
|
|
56
49
|
}
|
|
57
|
-
|
|
58
50
|
if (props.isMulti) {
|
|
59
51
|
process.env.NODE_ENV !== "production" ? warning(_Array$isArray(props.value), 'AsyncCreatableSelectInput: `value` is expected to be an array when isMulti is true') : void 0;
|
|
60
52
|
}
|
|
61
|
-
|
|
62
53
|
warnIfMenuPortalPropsAreMissing({
|
|
63
54
|
menuPortalZIndex: props.menuPortalZIndex,
|
|
64
55
|
menuPortalTarget: props.menuPortalTarget,
|
|
@@ -92,7 +83,8 @@ const AsyncCreatableSelectInput = props => {
|
|
|
92
83
|
hasValue: !isEmpty(props.value),
|
|
93
84
|
isNewTheme
|
|
94
85
|
}),
|
|
95
|
-
filterOption: props.filterOption
|
|
86
|
+
filterOption: props.filterOption
|
|
87
|
+
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
96
88
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
97
89
|
// instead.
|
|
98
90
|
// This makes it easier to less confusing to use with <label />s.
|
|
@@ -122,11 +114,11 @@ const AsyncCreatableSelectInput = props => {
|
|
|
122
114
|
id: props.id,
|
|
123
115
|
name: (() => {
|
|
124
116
|
if (!props.name) return undefined;
|
|
125
|
-
if (!props.isMulti) return props.name;
|
|
117
|
+
if (!props.isMulti) return props.name;
|
|
118
|
+
// We append the ".0" to make Formik set the touched
|
|
126
119
|
// state as an array instead of a boolean only.
|
|
127
120
|
// Otherwise the shapes would clash on submission, as
|
|
128
121
|
// Formik will create an array on submission anyways.
|
|
129
|
-
|
|
130
122
|
return "".concat(props.name, ".0");
|
|
131
123
|
})()
|
|
132
124
|
},
|
|
@@ -136,14 +128,11 @@ const AsyncCreatableSelectInput = props => {
|
|
|
136
128
|
} : undefined,
|
|
137
129
|
onChange: (value, info) => {
|
|
138
130
|
var _props$onChange;
|
|
139
|
-
|
|
140
131
|
// wrapping breaking changes made in react-select v3
|
|
141
132
|
let newValue = value;
|
|
142
|
-
|
|
143
133
|
if (props.isMulti && !newValue) {
|
|
144
134
|
newValue = [];
|
|
145
135
|
}
|
|
146
|
-
|
|
147
136
|
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
|
|
148
137
|
target: {
|
|
149
138
|
id: props.id,
|
|
@@ -158,11 +147,13 @@ const AsyncCreatableSelectInput = props => {
|
|
|
158
147
|
placeholder: placeholder,
|
|
159
148
|
tabIndex: props.tabIndex,
|
|
160
149
|
tabSelectsValue: props.tabSelectsValue,
|
|
161
|
-
value: props.value
|
|
150
|
+
value: props.value
|
|
151
|
+
// Async react-select props
|
|
162
152
|
,
|
|
163
153
|
defaultOptions: props.defaultOptions,
|
|
164
154
|
loadOptions: props.loadOptions,
|
|
165
|
-
cacheOptions: props.cacheOptions
|
|
155
|
+
cacheOptions: props.cacheOptions
|
|
156
|
+
// Creatable props
|
|
166
157
|
,
|
|
167
158
|
allowCreateWhileLoading: props.allowCreateWhileLoading,
|
|
168
159
|
formatCreateLabel: props.formatCreateLabel || (inputValue => intl.formatMessage(messages.createLabel, {
|
|
@@ -171,14 +162,14 @@ const AsyncCreatableSelectInput = props => {
|
|
|
171
162
|
isValidNewOption: props.isValidNewOption,
|
|
172
163
|
getNewOptionData: props.getNewOptionData,
|
|
173
164
|
onCreateOption: props.onCreateOption,
|
|
174
|
-
createOptionPosition: props.createOptionPosition
|
|
165
|
+
createOptionPosition: props.createOptionPosition
|
|
166
|
+
// @ts-ignore
|
|
175
167
|
,
|
|
176
168
|
iconLeft: props.iconLeft
|
|
177
169
|
})
|
|
178
170
|
}))
|
|
179
171
|
});
|
|
180
172
|
};
|
|
181
|
-
|
|
182
173
|
AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
183
174
|
horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
184
175
|
hasError: _pt.bool,
|
|
@@ -193,33 +184,34 @@ AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
193
184
|
} : {};
|
|
194
185
|
AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
|
|
195
186
|
AsyncCreatableSelectInput.defaultProps = defaultProps;
|
|
187
|
+
|
|
196
188
|
/**
|
|
197
189
|
* Expose static helper methods.
|
|
198
190
|
*/
|
|
191
|
+
|
|
199
192
|
// Formik will set the field to an array on submission, so we always have to
|
|
200
193
|
// deal with an array. The touched state ends up being an empty array in case
|
|
201
194
|
// values were removed only. So we have to treat any array we receive as
|
|
202
195
|
// a signal of the field having been touched.
|
|
203
|
-
|
|
204
196
|
AsyncCreatableSelectInput.isTouched = touched => Boolean(touched);
|
|
197
|
+
|
|
205
198
|
/**
|
|
206
199
|
* Expose react-select components for customization purposes.
|
|
207
200
|
*/
|
|
208
|
-
// custom
|
|
209
|
-
|
|
210
201
|
|
|
202
|
+
// custom
|
|
211
203
|
AsyncCreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
212
204
|
AsyncCreatableSelectInput.Control = components.Control;
|
|
213
205
|
AsyncCreatableSelectInput.CrossIcon = components.CrossIcon;
|
|
214
|
-
AsyncCreatableSelectInput.DownChevron = components.DownChevron;
|
|
215
|
-
|
|
206
|
+
AsyncCreatableSelectInput.DownChevron = components.DownChevron;
|
|
207
|
+
// custom
|
|
216
208
|
AsyncCreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
217
209
|
AsyncCreatableSelectInput.Group = components.Group;
|
|
218
210
|
AsyncCreatableSelectInput.GroupHeading = components.GroupHeading;
|
|
219
211
|
AsyncCreatableSelectInput.IndicatorSeparator = components.IndicatorSeparator;
|
|
220
212
|
AsyncCreatableSelectInput.IndicatorsContainer = components.IndicatorsContainer;
|
|
221
|
-
AsyncCreatableSelectInput.Input = components.Input;
|
|
222
|
-
|
|
213
|
+
AsyncCreatableSelectInput.Input = components.Input;
|
|
214
|
+
// custom
|
|
223
215
|
AsyncCreatableSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
|
|
224
216
|
AsyncCreatableSelectInput.LoadingMessage = components.LoadingMessage;
|
|
225
217
|
AsyncCreatableSelectInput.Menu = components.Menu;
|
|
@@ -227,8 +219,8 @@ AsyncCreatableSelectInput.MenuList = components.MenuList;
|
|
|
227
219
|
AsyncCreatableSelectInput.MenuPortal = components.MenuPortal;
|
|
228
220
|
AsyncCreatableSelectInput.MultiValue = components.MultiValue;
|
|
229
221
|
AsyncCreatableSelectInput.MultiValueContainer = components.MultiValueContainer;
|
|
230
|
-
AsyncCreatableSelectInput.MultiValueLabel = components.MultiValueLabel;
|
|
231
|
-
|
|
222
|
+
AsyncCreatableSelectInput.MultiValueLabel = components.MultiValueLabel;
|
|
223
|
+
// custom
|
|
232
224
|
AsyncCreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
233
225
|
AsyncCreatableSelectInput.NoOptionsMessage = components.NoOptionsMessage;
|
|
234
226
|
AsyncCreatableSelectInput.Option = components.Option;
|
|
@@ -239,6 +231,6 @@ AsyncCreatableSelectInput.ValueContainer = components.ValueContainer;
|
|
|
239
231
|
var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
|
|
240
232
|
|
|
241
233
|
// NOTE: This string will be replaced on build time with the package version.
|
|
242
|
-
var version = "16.
|
|
234
|
+
var version = "16.1.0";
|
|
243
235
|
|
|
244
236
|
export { AsyncCreatableSelectInput$1 as default, version };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/async-creatable-select-input",
|
|
3
3
|
"description": "An input component getting a selection from an asynchronously loaded list from the user, and where options can be created by the user.",
|
|
4
|
-
"version": "16.
|
|
4
|
+
"version": "16.1.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,20 +21,20 @@
|
|
|
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/loading-spinner": "16.
|
|
28
|
-
"@commercetools-uikit/select-utils": "16.
|
|
29
|
-
"@commercetools-uikit/spacings": "16.
|
|
30
|
-
"@commercetools-uikit/text": "16.
|
|
31
|
-
"@commercetools-uikit/utils": "16.
|
|
32
|
-
"@emotion/is-prop-valid": "1.2.
|
|
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/loading-spinner": "16.1.0",
|
|
28
|
+
"@commercetools-uikit/select-utils": "16.1.0",
|
|
29
|
+
"@commercetools-uikit/spacings": "16.1.0",
|
|
30
|
+
"@commercetools-uikit/text": "16.1.0",
|
|
31
|
+
"@commercetools-uikit/utils": "16.1.0",
|
|
32
|
+
"@emotion/is-prop-valid": "1.2.1",
|
|
33
33
|
"@emotion/react": "^11.10.5",
|
|
34
34
|
"@emotion/styled": "^11.10.5",
|
|
35
35
|
"lodash": "4.17.21",
|
|
36
36
|
"prop-types": "15.8.1",
|
|
37
|
-
"react-select": "5.7.
|
|
37
|
+
"react-select": "5.7.3"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"react": "17.0.2",
|