@commercetools-uikit/select-input 16.0.0 → 16.1.1

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.
Files changed (6) hide show
  1. package/README.md +1 -1
  2. package/dist/commercetools-uikit-select-input.cjs.dev.js +15 -28
  3. package/dist/commercetools-uikit-select-input.cjs.prod.js +15 -28
  4. package/dist/commercetools-uikit-select-input.esm.js +15 -28
  5. package/dist/declarations/src/select-input.d.ts +1 -1
  6. package/package.json +8 -8
package/README.md CHANGED
@@ -72,7 +72,7 @@ export default Example;
72
72
  | `isAutofocussed` | `boolean` | | | Focus the control when it is mounted |
73
73
  | `backspaceRemovesValue` | `ReactSelectProps['backspaceRemovesValue']` | | | Remove the currently focused option when the user presses backspace&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
74
74
  | `components` | `ReactSelectProps['components']` | | | Map of components to overwrite the default ones, see what components you can override&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
75
- | `controlShouldRenderValue` | `ReactSelectProps['controlShouldRenderValue']` | | `true` | Control whether the selected values should be rendered in the control&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
75
+ | `controlShouldRenderValue` | `ReactSelectProps['controlShouldRenderValue']` | | | Control whether the selected values should be rendered in the control&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
76
76
  | `filterOption` | `ReactSelectProps['filterOption']` | | | Custom method to filter whether an option should be displayed in the menu&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
77
77
  | `id` | `ReactSelectProps['inputId']` | | | Used as HTML id property. An id is generated automatically when not provided.&#xA;This forwarded as react-select's "inputId"&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
78
78
  | `inputValue` | `ReactSelectProps['inputValue']` | | | The value of the search input&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
package/dist/commercetools-uikit-select-input.cjs.dev.js CHANGED
@@ -22,7 +22,6 @@ var Select = require('react-select');
22
22
  var Constraints = require('@commercetools-uikit/constraints');
23
23
  var selectUtils = require('@commercetools-uikit/select-utils');
24
24
  var utils = require('@commercetools-uikit/utils');
25
- var designSystem = require('@commercetools-uikit/design-system');
26
25
  var jsxRuntime = require('@emotion/react/jsx-runtime');
27
26
 
28
27
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -45,7 +44,6 @@ var Select__default = /*#__PURE__*/_interopDefault(Select);
45
44
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
46
45
 
47
46
  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; }
48
-
49
47
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
50
48
  const customizedComponents = {
51
49
  DropdownIndicator: selectUtils.DropdownIndicator,
@@ -55,26 +53,19 @@ const customizedComponents = {
55
53
  const defaultProps = {
56
54
  maxMenuHeight: 220,
57
55
  menuPortalZIndex: 1,
58
- controlShouldRenderValue: true,
59
56
  options: []
60
57
  };
61
-
62
58
  const isOptionObject = option => option.options !== undefined;
63
-
64
59
  const SelectInput = props => {
65
60
  var _context, _context2, _context3;
66
-
67
61
  const intl = reactIntl.useIntl();
68
-
69
- const _useTheme = designSystem.useTheme(),
70
- isNewTheme = _useTheme.isNewTheme;
71
-
72
62
  selectUtils.warnIfMenuPortalPropsAreMissing({
73
63
  menuPortalZIndex: props.menuPortalZIndex,
74
64
  menuPortalTarget: props.menuPortalTarget,
75
65
  componentName: 'SelectInput'
76
66
  });
77
- const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder); // Options can be grouped as
67
+ const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
68
+ // Options can be grouped as
78
69
  // const colourOptions = [{ value: 'green', label: 'Green' }];
79
70
  // const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
80
71
  // const groupedOptions = [
@@ -82,16 +73,14 @@ const SelectInput = props => {
82
73
  // { label: 'Flavours', options: flavourOptions },
83
74
  // ];
84
75
  // So we "ungroup" the options by merging them all into one list first.
85
-
86
76
  const optionsWithoutGroups = _flatMapInstanceProperty__default["default"](_context = props.options).call(_context, option => {
87
77
  if (isOptionObject(option)) {
88
78
  return option.options;
89
79
  }
90
-
91
80
  return option;
92
81
  });
93
-
94
- const selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context2 = _mapInstanceProperty__default["default"](_context3 = props.value || [] // Pass the options in the order selected by the use, so that the
82
+ const selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context2 = _mapInstanceProperty__default["default"](_context3 = props.value || []
83
+ // Pass the options in the order selected by the use, so that the
95
84
  // sorting is not lost
96
85
  ).call(_context3, value => _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === value))).call(_context2, Boolean) : _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => has__default["default"](option, 'value') && option.value === props.value) || null;
97
86
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
@@ -120,10 +109,10 @@ const SelectInput = props => {
120
109
  iconLeft: props.iconLeft,
121
110
  isMulti: props.isMulti,
122
111
  hasValue: !isEmpty__default["default"](selectedOptions),
123
- controlShouldRenderValue: props.controlShouldRenderValue,
124
- isNewTheme
112
+ controlShouldRenderValue: props.controlShouldRenderValue
125
113
  }),
126
- filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
114
+ filterOption: props.filterOption
115
+ // react-select uses "id" (for the container) and "inputId" (for the input),
127
116
  // but we use "id" (for the input) and "containerId" (for the container)
128
117
  // instead.
129
118
  // This makes it easier to less confusing to use with <label />s.
@@ -133,7 +122,8 @@ const SelectInput = props => {
133
122
  inputValue: props.inputValue,
134
123
  isClearable: props.isReadOnly ? false : props.isClearable,
135
124
  isDisabled: props.isDisabled,
136
- isOptionDisabled: props.isOptionDisabled // @ts-ignore
125
+ isOptionDisabled: props.isOptionDisabled
126
+ // @ts-ignore
137
127
  ,
138
128
  isReadOnly: props.isReadOnly,
139
129
  isMulti: props.isMulti,
@@ -154,11 +144,11 @@ const SelectInput = props => {
154
144
  target: {
155
145
  id: props.id,
156
146
  name: (() => {
157
- if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
147
+ if (!props.isMulti) return props.name;
148
+ // We append the ".0" to make Formik set the touched
158
149
  // state as an array instead of a boolean only.
159
150
  // Otherwise the shapes would clash on submission, as
160
151
  // Formik will create an array on submission anyways.
161
-
162
152
  return props.name ? "".concat(props.name, ".0") : undefined;
163
153
  })()
164
154
  },
@@ -170,11 +160,9 @@ const SelectInput = props => {
170
160
  // nextSelectedOptions is either an array, or a single option, or null
171
161
  // depending on whether we're in multi-mode or not (isMulti)
172
162
  let value = null;
173
-
174
163
  if (props.isMulti) {
175
164
  if (nextSelectedOptions) {
176
165
  var _context4;
177
-
178
166
  value = _mapInstanceProperty__default["default"](_context4 = nextSelectedOptions).call(_context4, option => option.value);
179
167
  } else {
180
168
  value = [];
@@ -182,7 +170,6 @@ const SelectInput = props => {
182
170
  } else if (nextSelectedOptions) {
183
171
  value = nextSelectedOptions.value;
184
172
  }
185
-
186
173
  props.onChange && props.onChange({
187
174
  target: {
188
175
  id: props.id,
@@ -205,7 +192,6 @@ const SelectInput = props => {
205
192
  }))
206
193
  });
207
194
  };
208
-
209
195
  SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
210
196
  horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
211
197
  hasError: _pt__default["default"].bool,
@@ -229,17 +215,18 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
229
215
  } : {};
230
216
  SelectInput.displayName = 'SelectInput';
231
217
  SelectInput.defaultProps = defaultProps;
218
+
232
219
  /**
233
220
  * Expose static helper methods.
234
221
  */
235
- // Both "true" and an empty array [] represent a touched state.
236
222
 
223
+ // Both "true" and an empty array [] represent a touched state.
237
224
  SelectInput.isTouched = touched => Boolean(touched);
225
+
238
226
  /**
239
227
  * Expose react-select components for customization purposes.
240
228
  */
241
229
 
242
-
243
230
  SelectInput.ClearIndicator = customizedComponents.ClearIndicator;
244
231
  SelectInput.Control = Select.components.Control;
245
232
  SelectInput.CrossIcon = Select.components.CrossIcon;
@@ -268,7 +255,7 @@ SelectInput.ValueContainer = Select.components.ValueContainer;
268
255
  var SelectInput$1 = SelectInput;
269
256
 
270
257
  // NOTE: This string will be replaced on build time with the package version.
271
- var version = "16.0.0";
258
+ var version = "16.1.1";
272
259
 
273
260
  exports["default"] = SelectInput$1;
274
261
  exports.version = version;
package/dist/commercetools-uikit-select-input.cjs.prod.js CHANGED
@@ -22,7 +22,6 @@ var Select = require('react-select');
22
22
  var Constraints = require('@commercetools-uikit/constraints');
23
23
  var selectUtils = require('@commercetools-uikit/select-utils');
24
24
  var utils = require('@commercetools-uikit/utils');
25
- var designSystem = require('@commercetools-uikit/design-system');
26
25
  var jsxRuntime = require('@emotion/react/jsx-runtime');
27
26
 
28
27
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -44,7 +43,6 @@ var Select__default = /*#__PURE__*/_interopDefault(Select);
44
43
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
45
44
 
46
45
  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; }
47
-
48
46
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
49
47
  const customizedComponents = {
50
48
  DropdownIndicator: selectUtils.DropdownIndicator,
@@ -54,26 +52,19 @@ const customizedComponents = {
54
52
  const defaultProps = {
55
53
  maxMenuHeight: 220,
56
54
  menuPortalZIndex: 1,
57
- controlShouldRenderValue: true,
58
55
  options: []
59
56
  };
60
-
61
57
  const isOptionObject = option => option.options !== undefined;
62
-
63
58
  const SelectInput = props => {
64
59
  var _context, _context2, _context3;
65
-
66
60
  const intl = reactIntl.useIntl();
67
-
68
- const _useTheme = designSystem.useTheme(),
69
- isNewTheme = _useTheme.isNewTheme;
70
-
71
61
  selectUtils.warnIfMenuPortalPropsAreMissing({
72
62
  menuPortalZIndex: props.menuPortalZIndex,
73
63
  menuPortalTarget: props.menuPortalTarget,
74
64
  componentName: 'SelectInput'
75
65
  });
76
- const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder); // Options can be grouped as
66
+ const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
67
+ // Options can be grouped as
77
68
  // const colourOptions = [{ value: 'green', label: 'Green' }];
78
69
  // const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
79
70
  // const groupedOptions = [
@@ -81,16 +72,14 @@ const SelectInput = props => {
81
72
  // { label: 'Flavours', options: flavourOptions },
82
73
  // ];
83
74
  // So we "ungroup" the options by merging them all into one list first.
84
-
85
75
  const optionsWithoutGroups = _flatMapInstanceProperty__default["default"](_context = props.options).call(_context, option => {
86
76
  if (isOptionObject(option)) {
87
77
  return option.options;
88
78
  }
89
-
90
79
  return option;
91
80
  });
92
-
93
- const selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context2 = _mapInstanceProperty__default["default"](_context3 = props.value || [] // Pass the options in the order selected by the use, so that the
81
+ const selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context2 = _mapInstanceProperty__default["default"](_context3 = props.value || []
82
+ // Pass the options in the order selected by the use, so that the
94
83
  // sorting is not lost
95
84
  ).call(_context3, value => _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === value))).call(_context2, Boolean) : _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => has__default["default"](option, 'value') && option.value === props.value) || null;
96
85
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
@@ -119,10 +108,10 @@ const SelectInput = props => {
119
108
  iconLeft: props.iconLeft,
120
109
  isMulti: props.isMulti,
121
110
  hasValue: !isEmpty__default["default"](selectedOptions),
122
- controlShouldRenderValue: props.controlShouldRenderValue,
123
- isNewTheme
111
+ controlShouldRenderValue: props.controlShouldRenderValue
124
112
  }),
125
- filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
113
+ filterOption: props.filterOption
114
+ // react-select uses "id" (for the container) and "inputId" (for the input),
126
115
  // but we use "id" (for the input) and "containerId" (for the container)
127
116
  // instead.
128
117
  // This makes it easier to less confusing to use with <label />s.
@@ -132,7 +121,8 @@ const SelectInput = props => {
132
121
  inputValue: props.inputValue,
133
122
  isClearable: props.isReadOnly ? false : props.isClearable,
134
123
  isDisabled: props.isDisabled,
135
- isOptionDisabled: props.isOptionDisabled // @ts-ignore
124
+ isOptionDisabled: props.isOptionDisabled
125
+ // @ts-ignore
136
126
  ,
137
127
  isReadOnly: props.isReadOnly,
138
128
  isMulti: props.isMulti,
@@ -153,11 +143,11 @@ const SelectInput = props => {
153
143
  target: {
154
144
  id: props.id,
155
145
  name: (() => {
156
- if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
146
+ if (!props.isMulti) return props.name;
147
+ // We append the ".0" to make Formik set the touched
157
148
  // state as an array instead of a boolean only.
158
149
  // Otherwise the shapes would clash on submission, as
159
150
  // Formik will create an array on submission anyways.
160
-
161
151
  return props.name ? "".concat(props.name, ".0") : undefined;
162
152
  })()
163
153
  },
@@ -169,11 +159,9 @@ const SelectInput = props => {
169
159
  // nextSelectedOptions is either an array, or a single option, or null
170
160
  // depending on whether we're in multi-mode or not (isMulti)
171
161
  let value = null;
172
-
173
162
  if (props.isMulti) {
174
163
  if (nextSelectedOptions) {
175
164
  var _context4;
176
-
177
165
  value = _mapInstanceProperty__default["default"](_context4 = nextSelectedOptions).call(_context4, option => option.value);
178
166
  } else {
179
167
  value = [];
@@ -181,7 +169,6 @@ const SelectInput = props => {
181
169
  } else if (nextSelectedOptions) {
182
170
  value = nextSelectedOptions.value;
183
171
  }
184
-
185
172
  props.onChange && props.onChange({
186
173
  target: {
187
174
  id: props.id,
@@ -204,21 +191,21 @@ const SelectInput = props => {
204
191
  }))
205
192
  });
206
193
  };
207
-
208
194
  SelectInput.propTypes = {};
209
195
  SelectInput.displayName = 'SelectInput';
210
196
  SelectInput.defaultProps = defaultProps;
197
+
211
198
  /**
212
199
  * Expose static helper methods.
213
200
  */
214
- // Both "true" and an empty array [] represent a touched state.
215
201
 
202
+ // Both "true" and an empty array [] represent a touched state.
216
203
  SelectInput.isTouched = touched => Boolean(touched);
204
+
217
205
  /**
218
206
  * Expose react-select components for customization purposes.
219
207
  */
220
208
 
221
-
222
209
  SelectInput.ClearIndicator = customizedComponents.ClearIndicator;
223
210
  SelectInput.Control = Select.components.Control;
224
211
  SelectInput.CrossIcon = Select.components.CrossIcon;
@@ -247,7 +234,7 @@ SelectInput.ValueContainer = Select.components.ValueContainer;
247
234
  var SelectInput$1 = SelectInput;
248
235
 
249
236
  // NOTE: This string will be replaced on build time with the package version.
250
- var version = "16.0.0";
237
+ var version = "16.1.1";
251
238
 
252
239
  exports["default"] = SelectInput$1;
253
240
  exports.version = version;
package/dist/commercetools-uikit-select-input.esm.js CHANGED
@@ -18,11 +18,9 @@ import Select, { components } from 'react-select';
18
18
  import Constraints from '@commercetools-uikit/constraints';
19
19
  import { warnIfMenuPortalPropsAreMissing, messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
20
20
  import { filterDataAttributes } from '@commercetools-uikit/utils';
21
- import { useTheme } from '@commercetools-uikit/design-system';
22
21
  import { jsx } from '@emotion/react/jsx-runtime';
23
22
 
24
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; }
25
-
26
24
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
27
25
  const customizedComponents = {
28
26
  DropdownIndicator,
@@ -32,26 +30,19 @@ const customizedComponents = {
32
30
  const defaultProps = {
33
31
  maxMenuHeight: 220,
34
32
  menuPortalZIndex: 1,
35
- controlShouldRenderValue: true,
36
33
  options: []
37
34
  };
38
-
39
35
  const isOptionObject = option => option.options !== undefined;
40
-
41
36
  const SelectInput = props => {
42
37
  var _context, _context2, _context3;
43
-
44
38
  const intl = useIntl();
45
-
46
- const _useTheme = useTheme(),
47
- isNewTheme = _useTheme.isNewTheme;
48
-
49
39
  warnIfMenuPortalPropsAreMissing({
50
40
  menuPortalZIndex: props.menuPortalZIndex,
51
41
  menuPortalTarget: props.menuPortalTarget,
52
42
  componentName: 'SelectInput'
53
43
  });
54
- const placeholder = props.placeholder || intl.formatMessage(messages.placeholder); // Options can be grouped as
44
+ const placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
45
+ // Options can be grouped as
55
46
  // const colourOptions = [{ value: 'green', label: 'Green' }];
56
47
  // const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
57
48
  // const groupedOptions = [
@@ -59,16 +50,14 @@ const SelectInput = props => {
59
50
  // { label: 'Flavours', options: flavourOptions },
60
51
  // ];
61
52
  // So we "ungroup" the options by merging them all into one list first.
62
-
63
53
  const optionsWithoutGroups = _flatMapInstanceProperty(_context = props.options).call(_context, option => {
64
54
  if (isOptionObject(option)) {
65
55
  return option.options;
66
56
  }
67
-
68
57
  return option;
69
58
  });
70
-
71
- const selectedOptions = props.isMulti ? _filterInstanceProperty(_context2 = _mapInstanceProperty(_context3 = props.value || [] // Pass the options in the order selected by the use, so that the
59
+ const selectedOptions = props.isMulti ? _filterInstanceProperty(_context2 = _mapInstanceProperty(_context3 = props.value || []
60
+ // Pass the options in the order selected by the use, so that the
72
61
  // sorting is not lost
73
62
  ).call(_context3, value => _findInstanceProperty(optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === value))).call(_context2, Boolean) : _findInstanceProperty(optionsWithoutGroups).call(optionsWithoutGroups, option => has(option, 'value') && option.value === props.value) || null;
74
63
  return jsx(Constraints.Horizontal, {
@@ -97,10 +86,10 @@ const SelectInput = props => {
97
86
  iconLeft: props.iconLeft,
98
87
  isMulti: props.isMulti,
99
88
  hasValue: !isEmpty(selectedOptions),
100
- controlShouldRenderValue: props.controlShouldRenderValue,
101
- isNewTheme
89
+ controlShouldRenderValue: props.controlShouldRenderValue
102
90
  }),
103
- filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
91
+ filterOption: props.filterOption
92
+ // react-select uses "id" (for the container) and "inputId" (for the input),
104
93
  // but we use "id" (for the input) and "containerId" (for the container)
105
94
  // instead.
106
95
  // This makes it easier to less confusing to use with <label />s.
@@ -110,7 +99,8 @@ const SelectInput = props => {
110
99
  inputValue: props.inputValue,
111
100
  isClearable: props.isReadOnly ? false : props.isClearable,
112
101
  isDisabled: props.isDisabled,
113
- isOptionDisabled: props.isOptionDisabled // @ts-ignore
102
+ isOptionDisabled: props.isOptionDisabled
103
+ // @ts-ignore
114
104
  ,
115
105
  isReadOnly: props.isReadOnly,
116
106
  isMulti: props.isMulti,
@@ -131,11 +121,11 @@ const SelectInput = props => {
131
121
  target: {
132
122
  id: props.id,
133
123
  name: (() => {
134
- if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
124
+ if (!props.isMulti) return props.name;
125
+ // We append the ".0" to make Formik set the touched
135
126
  // state as an array instead of a boolean only.
136
127
  // Otherwise the shapes would clash on submission, as
137
128
  // Formik will create an array on submission anyways.
138
-
139
129
  return props.name ? "".concat(props.name, ".0") : undefined;
140
130
  })()
141
131
  },
@@ -147,11 +137,9 @@ const SelectInput = props => {
147
137
  // nextSelectedOptions is either an array, or a single option, or null
148
138
  // depending on whether we're in multi-mode or not (isMulti)
149
139
  let value = null;
150
-
151
140
  if (props.isMulti) {
152
141
  if (nextSelectedOptions) {
153
142
  var _context4;
154
-
155
143
  value = _mapInstanceProperty(_context4 = nextSelectedOptions).call(_context4, option => option.value);
156
144
  } else {
157
145
  value = [];
@@ -159,7 +147,6 @@ const SelectInput = props => {
159
147
  } else if (nextSelectedOptions) {
160
148
  value = nextSelectedOptions.value;
161
149
  }
162
-
163
150
  props.onChange && props.onChange({
164
151
  target: {
165
152
  id: props.id,
@@ -182,7 +169,6 @@ const SelectInput = props => {
182
169
  }))
183
170
  });
184
171
  };
185
-
186
172
  SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
187
173
  horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
188
174
  hasError: _pt.bool,
@@ -206,17 +192,18 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
206
192
  } : {};
207
193
  SelectInput.displayName = 'SelectInput';
208
194
  SelectInput.defaultProps = defaultProps;
195
+
209
196
  /**
210
197
  * Expose static helper methods.
211
198
  */
212
- // Both "true" and an empty array [] represent a touched state.
213
199
 
200
+ // Both "true" and an empty array [] represent a touched state.
214
201
  SelectInput.isTouched = touched => Boolean(touched);
202
+
215
203
  /**
216
204
  * Expose react-select components for customization purposes.
217
205
  */
218
206
 
219
-
220
207
  SelectInput.ClearIndicator = customizedComponents.ClearIndicator;
221
208
  SelectInput.Control = components.Control;
222
209
  SelectInput.CrossIcon = components.CrossIcon;
@@ -245,6 +232,6 @@ SelectInput.ValueContainer = components.ValueContainer;
245
232
  var SelectInput$1 = SelectInput;
246
233
 
247
234
  // NOTE: This string will be replaced on build time with the package version.
248
- var version = "16.0.0";
235
+ var version = "16.1.1";
249
236
 
250
237
  export { SelectInput$1 as default, version };
package/dist/declarations/src/select-input.d.ts CHANGED
@@ -60,7 +60,7 @@ export type TSelectInputProps = {
60
60
  declare const SelectInput: {
61
61
  (props: TSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
62
62
  displayName: string;
63
- defaultProps: Pick<TSelectInputProps, "controlShouldRenderValue" | "maxMenuHeight" | "options" | "menuPortalZIndex">;
63
+ defaultProps: Pick<TSelectInputProps, "maxMenuHeight" | "options" | "menuPortalZIndex">;
64
64
  isTouched(touched: boolean | unknown[]): boolean;
65
65
  ClearIndicator: {
66
66
  (props: import("@commercetools-uikit/select-utils").TClearIndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/select-input",
3
3
  "description": "An input component getting a selection from the user.",
4
- "version": "16.0.0",
4
+ "version": "16.1.1",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,17 +21,17 @@
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/select-utils": "16.0.0",
28
- "@commercetools-uikit/utils": "16.0.0",
29
- "@emotion/is-prop-valid": "1.2.0",
24
+ "@commercetools-uikit/constraints": "16.1.1",
25
+ "@commercetools-uikit/design-system": "16.1.1",
26
+ "@commercetools-uikit/icons": "16.1.1",
27
+ "@commercetools-uikit/select-utils": "16.1.1",
28
+ "@commercetools-uikit/utils": "16.1.1",
29
+ "@emotion/is-prop-valid": "1.2.1",
30
30
  "@emotion/react": "^11.10.5",
31
31
  "@emotion/styled": "^11.10.5",
32
32
  "lodash": "4.17.21",
33
33
  "prop-types": "15.8.1",
34
- "react-select": "5.7.2"
34
+ "react-select": "5.7.3"
35
35
  },
36
36
  "devDependencies": {
37
37
  "react": "17.0.2",