@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
- isNewTheme = _useTheme.isNewTheme;
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 // react-select uses "id" (for the container) and "inputId" (for the input),
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; // We append the ".0" to make Formik set the touched
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 // Async react-select props
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 // Creatable props
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 // @ts-ignore
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; // custom
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; // custom
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; // custom
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.0.0";
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
- isNewTheme = _useTheme.isNewTheme;
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 // react-select uses "id" (for the container) and "inputId" (for the input),
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; // We append the ".0" to make Formik set the touched
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 // Async react-select props
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 // Creatable props
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 // @ts-ignore
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; // custom
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; // custom
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; // custom
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.0.0";
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
- isNewTheme = _useTheme.isNewTheme;
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 // react-select uses "id" (for the container) and "inputId" (for the input),
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; // We append the ".0" to make Formik set the touched
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 // Async react-select props
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 // Creatable props
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 // @ts-ignore
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; // custom
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; // custom
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; // custom
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.0.0";
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.0.0",
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.0.0",
25
- "@commercetools-uikit/design-system": "16.0.0",
26
- "@commercetools-uikit/icons": "16.0.0",
27
- "@commercetools-uikit/loading-spinner": "16.0.0",
28
- "@commercetools-uikit/select-utils": "16.0.0",
29
- "@commercetools-uikit/spacings": "16.0.0",
30
- "@commercetools-uikit/text": "16.0.0",
31
- "@commercetools-uikit/utils": "16.0.0",
32
- "@emotion/is-prop-valid": "1.2.0",
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.2"
37
+ "react-select": "5.7.3"
38
38
  },
39
39
  "devDependencies": {
40
40
  "react": "17.0.2",