@commercetools-uikit/select-input 15.15.0 → 16.0.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.
Files changed (6) hide show
  1. package/dist/commercetools-uikit-select-input.cjs.d.ts +1 -0
  2. package/dist/commercetools-uikit-select-input.cjs.d.ts.map +1 -0
  3. package/dist/commercetools-uikit-select-input.cjs.dev.js +31 -45
  4. package/dist/commercetools-uikit-select-input.cjs.prod.js +31 -45
  5. package/dist/commercetools-uikit-select-input.esm.js +33 -47
  6. package/package.json +9 -9
package/dist/commercetools-uikit-select-input.cjs.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from "./declarations/src/index";
2
2
  export { default } from "./declarations/src/index";
3
+ //# sourceMappingURL=commercetools-uikit-select-input.cjs.d.ts.map
package/dist/commercetools-uikit-select-input.cjs.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"commercetools-uikit-select-input.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
package/dist/commercetools-uikit-select-input.cjs.dev.js CHANGED
@@ -47,36 +47,34 @@ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
47
47
  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
48
 
49
49
  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
- var customizedComponents = {
50
+ const customizedComponents = {
51
51
  DropdownIndicator: selectUtils.DropdownIndicator,
52
52
  ClearIndicator: selectUtils.ClearIndicator,
53
53
  MultiValueRemove: selectUtils.TagRemove
54
54
  };
55
- var defaultProps = {
55
+ const defaultProps = {
56
56
  maxMenuHeight: 220,
57
57
  menuPortalZIndex: 1,
58
58
  controlShouldRenderValue: true,
59
59
  options: []
60
60
  };
61
61
 
62
- var isOptionObject = function isOptionObject(option) {
63
- return option.options !== undefined;
64
- };
62
+ const isOptionObject = option => option.options !== undefined;
65
63
 
66
- var SelectInput = function SelectInput(props) {
64
+ const SelectInput = props => {
67
65
  var _context, _context2, _context3;
68
66
 
69
- var intl = reactIntl.useIntl();
67
+ const intl = reactIntl.useIntl();
70
68
 
71
- var _useTheme = designSystem.useTheme(),
72
- isNewTheme = _useTheme.isNewTheme;
69
+ const _useTheme = designSystem.useTheme(),
70
+ isNewTheme = _useTheme.isNewTheme;
73
71
 
74
72
  selectUtils.warnIfMenuPortalPropsAreMissing({
75
73
  menuPortalZIndex: props.menuPortalZIndex,
76
74
  menuPortalTarget: props.menuPortalTarget,
77
75
  componentName: 'SelectInput'
78
76
  });
79
- var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder); // Options can be grouped as
77
+ const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder); // Options can be grouped as
80
78
  // const colourOptions = [{ value: 'green', label: 'Green' }];
81
79
  // const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
82
80
  // const groupedOptions = [
@@ -85,7 +83,7 @@ var SelectInput = function SelectInput(props) {
85
83
  // ];
86
84
  // So we "ungroup" the options by merging them all into one list first.
87
85
 
88
- var optionsWithoutGroups = _flatMapInstanceProperty__default["default"](_context = props.options).call(_context, function (option) {
86
+ const optionsWithoutGroups = _flatMapInstanceProperty__default["default"](_context = props.options).call(_context, option => {
89
87
  if (isOptionObject(option)) {
90
88
  return option.options;
91
89
  }
@@ -93,15 +91,9 @@ var SelectInput = function SelectInput(props) {
93
91
  return option;
94
92
  });
95
93
 
96
- var 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
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
97
95
  // sorting is not lost
98
- ).call(_context3, function (value) {
99
- return _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
100
- return option.value === value;
101
- });
102
- })).call(_context2, Boolean) : _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
103
- return has__default["default"](option, 'value') && option.value === props.value;
104
- }) || null;
96
+ ).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;
105
97
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
106
98
  max: props.horizontalConstraint,
107
99
  children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
@@ -113,11 +105,9 @@ var SelectInput = function SelectInput(props) {
113
105
  autoFocus: props.isAutofocussed,
114
106
  backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
115
107
  components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
116
- Input: function Input(ownProps) {
117
- return jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
118
- readOnly: true
119
- }));
120
- }
108
+ Input: ownProps => jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
109
+ readOnly: true
110
+ }))
121
111
  } : {}), props.components),
122
112
  menuIsOpen: props.isReadOnly ? false : undefined,
123
113
  styles: selectUtils.createSelectStyles({
@@ -131,7 +121,7 @@ var SelectInput = function SelectInput(props) {
131
121
  isMulti: props.isMulti,
132
122
  hasValue: !isEmpty__default["default"](selectedOptions),
133
123
  controlShouldRenderValue: props.controlShouldRenderValue,
134
- isNewTheme: isNewTheme
124
+ isNewTheme
135
125
  }),
136
126
  filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
137
127
  // but we use "id" (for the input) and "containerId" (for the container)
@@ -153,41 +143,39 @@ var SelectInput = function SelectInput(props) {
153
143
  menuShouldBlockScroll: props.menuShouldBlockScroll,
154
144
  closeMenuOnSelect: props.closeMenuOnSelect,
155
145
  name: props.name,
156
- noOptionsMessage: props.noOptionsMessage || function (_ref) {
157
- var inputValue = _ref.inputValue;
146
+ noOptionsMessage: props.noOptionsMessage || (_ref => {
147
+ let inputValue = _ref.inputValue;
158
148
  return !inputValue || inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
159
- inputValue: inputValue
149
+ inputValue
160
150
  });
161
- },
162
- onBlur: typeof props.onBlur === 'function' ? function () {
163
- var event = {
151
+ }),
152
+ onBlur: typeof props.onBlur === 'function' ? () => {
153
+ const event = {
164
154
  target: {
165
155
  id: props.id,
166
- name: function () {
156
+ name: (() => {
167
157
  if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
168
158
  // state as an array instead of a boolean only.
169
159
  // Otherwise the shapes would clash on submission, as
170
160
  // Formik will create an array on submission anyways.
171
161
 
172
162
  return props.name ? "".concat(props.name, ".0") : undefined;
173
- }()
163
+ })()
174
164
  },
175
- persist: function persist() {}
165
+ persist: () => {}
176
166
  };
177
167
  props.onBlur && props.onBlur(event);
178
168
  } : undefined,
179
- onChange: function onChange(nextSelectedOptions) {
169
+ onChange: nextSelectedOptions => {
180
170
  // nextSelectedOptions is either an array, or a single option, or null
181
171
  // depending on whether we're in multi-mode or not (isMulti)
182
- var value = null;
172
+ let value = null;
183
173
 
184
174
  if (props.isMulti) {
185
175
  if (nextSelectedOptions) {
186
176
  var _context4;
187
177
 
188
- value = _mapInstanceProperty__default["default"](_context4 = nextSelectedOptions).call(_context4, function (option) {
189
- return option.value;
190
- });
178
+ value = _mapInstanceProperty__default["default"](_context4 = nextSelectedOptions).call(_context4, option => option.value);
191
179
  } else {
192
180
  value = [];
193
181
  }
@@ -199,9 +187,9 @@ var SelectInput = function SelectInput(props) {
199
187
  target: {
200
188
  id: props.id,
201
189
  name: props.name,
202
- value: value
190
+ value
203
191
  },
204
- persist: function persist() {}
192
+ persist: () => {}
205
193
  });
206
194
  },
207
195
  onFocus: props.onFocus,
@@ -246,9 +234,7 @@ SelectInput.defaultProps = defaultProps;
246
234
  */
247
235
  // Both "true" and an empty array [] represent a touched state.
248
236
 
249
- SelectInput.isTouched = function (touched) {
250
- return Boolean(touched);
251
- };
237
+ SelectInput.isTouched = touched => Boolean(touched);
252
238
  /**
253
239
  * Expose react-select components for customization purposes.
254
240
  */
@@ -282,7 +268,7 @@ SelectInput.ValueContainer = Select.components.ValueContainer;
282
268
  var SelectInput$1 = SelectInput;
283
269
 
284
270
  // NOTE: This string will be replaced on build time with the package version.
285
- var version = "15.15.0";
271
+ var version = "16.0.0";
286
272
 
287
273
  exports["default"] = SelectInput$1;
288
274
  exports.version = version;
package/dist/commercetools-uikit-select-input.cjs.prod.js CHANGED
@@ -46,36 +46,34 @@ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
46
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; }
47
47
 
48
48
  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
- var customizedComponents = {
49
+ const customizedComponents = {
50
50
  DropdownIndicator: selectUtils.DropdownIndicator,
51
51
  ClearIndicator: selectUtils.ClearIndicator,
52
52
  MultiValueRemove: selectUtils.TagRemove
53
53
  };
54
- var defaultProps = {
54
+ const defaultProps = {
55
55
  maxMenuHeight: 220,
56
56
  menuPortalZIndex: 1,
57
57
  controlShouldRenderValue: true,
58
58
  options: []
59
59
  };
60
60
 
61
- var isOptionObject = function isOptionObject(option) {
62
- return option.options !== undefined;
63
- };
61
+ const isOptionObject = option => option.options !== undefined;
64
62
 
65
- var SelectInput = function SelectInput(props) {
63
+ const SelectInput = props => {
66
64
  var _context, _context2, _context3;
67
65
 
68
- var intl = reactIntl.useIntl();
66
+ const intl = reactIntl.useIntl();
69
67
 
70
- var _useTheme = designSystem.useTheme(),
71
- isNewTheme = _useTheme.isNewTheme;
68
+ const _useTheme = designSystem.useTheme(),
69
+ isNewTheme = _useTheme.isNewTheme;
72
70
 
73
71
  selectUtils.warnIfMenuPortalPropsAreMissing({
74
72
  menuPortalZIndex: props.menuPortalZIndex,
75
73
  menuPortalTarget: props.menuPortalTarget,
76
74
  componentName: 'SelectInput'
77
75
  });
78
- var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder); // Options can be grouped as
76
+ const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder); // Options can be grouped as
79
77
  // const colourOptions = [{ value: 'green', label: 'Green' }];
80
78
  // const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
81
79
  // const groupedOptions = [
@@ -84,7 +82,7 @@ var SelectInput = function SelectInput(props) {
84
82
  // ];
85
83
  // So we "ungroup" the options by merging them all into one list first.
86
84
 
87
- var optionsWithoutGroups = _flatMapInstanceProperty__default["default"](_context = props.options).call(_context, function (option) {
85
+ const optionsWithoutGroups = _flatMapInstanceProperty__default["default"](_context = props.options).call(_context, option => {
88
86
  if (isOptionObject(option)) {
89
87
  return option.options;
90
88
  }
@@ -92,15 +90,9 @@ var SelectInput = function SelectInput(props) {
92
90
  return option;
93
91
  });
94
92
 
95
- var 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
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
96
94
  // sorting is not lost
97
- ).call(_context3, function (value) {
98
- return _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
99
- return option.value === value;
100
- });
101
- })).call(_context2, Boolean) : _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
102
- return has__default["default"](option, 'value') && option.value === props.value;
103
- }) || null;
95
+ ).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;
104
96
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
105
97
  max: props.horizontalConstraint,
106
98
  children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
@@ -112,11 +104,9 @@ var SelectInput = function SelectInput(props) {
112
104
  autoFocus: props.isAutofocussed,
113
105
  backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
114
106
  components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
115
- Input: function Input(ownProps) {
116
- return jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
117
- readOnly: true
118
- }));
119
- }
107
+ Input: ownProps => jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
108
+ readOnly: true
109
+ }))
120
110
  } : {}), props.components),
121
111
  menuIsOpen: props.isReadOnly ? false : undefined,
122
112
  styles: selectUtils.createSelectStyles({
@@ -130,7 +120,7 @@ var SelectInput = function SelectInput(props) {
130
120
  isMulti: props.isMulti,
131
121
  hasValue: !isEmpty__default["default"](selectedOptions),
132
122
  controlShouldRenderValue: props.controlShouldRenderValue,
133
- isNewTheme: isNewTheme
123
+ isNewTheme
134
124
  }),
135
125
  filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
136
126
  // but we use "id" (for the input) and "containerId" (for the container)
@@ -152,41 +142,39 @@ var SelectInput = function SelectInput(props) {
152
142
  menuShouldBlockScroll: props.menuShouldBlockScroll,
153
143
  closeMenuOnSelect: props.closeMenuOnSelect,
154
144
  name: props.name,
155
- noOptionsMessage: props.noOptionsMessage || function (_ref) {
156
- var inputValue = _ref.inputValue;
145
+ noOptionsMessage: props.noOptionsMessage || (_ref => {
146
+ let inputValue = _ref.inputValue;
157
147
  return !inputValue || inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
158
- inputValue: inputValue
148
+ inputValue
159
149
  });
160
- },
161
- onBlur: typeof props.onBlur === 'function' ? function () {
162
- var event = {
150
+ }),
151
+ onBlur: typeof props.onBlur === 'function' ? () => {
152
+ const event = {
163
153
  target: {
164
154
  id: props.id,
165
- name: function () {
155
+ name: (() => {
166
156
  if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
167
157
  // state as an array instead of a boolean only.
168
158
  // Otherwise the shapes would clash on submission, as
169
159
  // Formik will create an array on submission anyways.
170
160
 
171
161
  return props.name ? "".concat(props.name, ".0") : undefined;
172
- }()
162
+ })()
173
163
  },
174
- persist: function persist() {}
164
+ persist: () => {}
175
165
  };
176
166
  props.onBlur && props.onBlur(event);
177
167
  } : undefined,
178
- onChange: function onChange(nextSelectedOptions) {
168
+ onChange: nextSelectedOptions => {
179
169
  // nextSelectedOptions is either an array, or a single option, or null
180
170
  // depending on whether we're in multi-mode or not (isMulti)
181
- var value = null;
171
+ let value = null;
182
172
 
183
173
  if (props.isMulti) {
184
174
  if (nextSelectedOptions) {
185
175
  var _context4;
186
176
 
187
- value = _mapInstanceProperty__default["default"](_context4 = nextSelectedOptions).call(_context4, function (option) {
188
- return option.value;
189
- });
177
+ value = _mapInstanceProperty__default["default"](_context4 = nextSelectedOptions).call(_context4, option => option.value);
190
178
  } else {
191
179
  value = [];
192
180
  }
@@ -198,9 +186,9 @@ var SelectInput = function SelectInput(props) {
198
186
  target: {
199
187
  id: props.id,
200
188
  name: props.name,
201
- value: value
189
+ value
202
190
  },
203
- persist: function persist() {}
191
+ persist: () => {}
204
192
  });
205
193
  },
206
194
  onFocus: props.onFocus,
@@ -225,9 +213,7 @@ SelectInput.defaultProps = defaultProps;
225
213
  */
226
214
  // Both "true" and an empty array [] represent a touched state.
227
215
 
228
- SelectInput.isTouched = function (touched) {
229
- return Boolean(touched);
230
- };
216
+ SelectInput.isTouched = touched => Boolean(touched);
231
217
  /**
232
218
  * Expose react-select components for customization purposes.
233
219
  */
@@ -261,7 +247,7 @@ SelectInput.ValueContainer = Select.components.ValueContainer;
261
247
  var SelectInput$1 = SelectInput;
262
248
 
263
249
  // NOTE: This string will be replaced on build time with the package version.
264
- var version = "15.15.0";
250
+ var version = "16.0.0";
265
251
 
266
252
  exports["default"] = SelectInput$1;
267
253
  exports.version = version;
package/dist/commercetools-uikit-select-input.esm.js CHANGED
@@ -24,36 +24,34 @@ import { jsx } from '@emotion/react/jsx-runtime';
24
24
  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
25
 
26
26
  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
- var customizedComponents = {
28
- DropdownIndicator: DropdownIndicator,
29
- ClearIndicator: ClearIndicator,
27
+ const customizedComponents = {
28
+ DropdownIndicator,
29
+ ClearIndicator,
30
30
  MultiValueRemove: TagRemove
31
31
  };
32
- var defaultProps = {
32
+ const defaultProps = {
33
33
  maxMenuHeight: 220,
34
34
  menuPortalZIndex: 1,
35
35
  controlShouldRenderValue: true,
36
36
  options: []
37
37
  };
38
38
 
39
- var isOptionObject = function isOptionObject(option) {
40
- return option.options !== undefined;
41
- };
39
+ const isOptionObject = option => option.options !== undefined;
42
40
 
43
- var SelectInput = function SelectInput(props) {
41
+ const SelectInput = props => {
44
42
  var _context, _context2, _context3;
45
43
 
46
- var intl = useIntl();
44
+ const intl = useIntl();
47
45
 
48
- var _useTheme = useTheme(),
49
- isNewTheme = _useTheme.isNewTheme;
46
+ const _useTheme = useTheme(),
47
+ isNewTheme = _useTheme.isNewTheme;
50
48
 
51
49
  warnIfMenuPortalPropsAreMissing({
52
50
  menuPortalZIndex: props.menuPortalZIndex,
53
51
  menuPortalTarget: props.menuPortalTarget,
54
52
  componentName: 'SelectInput'
55
53
  });
56
- var placeholder = props.placeholder || intl.formatMessage(messages.placeholder); // Options can be grouped as
54
+ const placeholder = props.placeholder || intl.formatMessage(messages.placeholder); // Options can be grouped as
57
55
  // const colourOptions = [{ value: 'green', label: 'Green' }];
58
56
  // const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
59
57
  // const groupedOptions = [
@@ -62,7 +60,7 @@ var SelectInput = function SelectInput(props) {
62
60
  // ];
63
61
  // So we "ungroup" the options by merging them all into one list first.
64
62
 
65
- var optionsWithoutGroups = _flatMapInstanceProperty(_context = props.options).call(_context, function (option) {
63
+ const optionsWithoutGroups = _flatMapInstanceProperty(_context = props.options).call(_context, option => {
66
64
  if (isOptionObject(option)) {
67
65
  return option.options;
68
66
  }
@@ -70,15 +68,9 @@ var SelectInput = function SelectInput(props) {
70
68
  return option;
71
69
  });
72
70
 
73
- var selectedOptions = props.isMulti ? _filterInstanceProperty(_context2 = _mapInstanceProperty(_context3 = props.value || [] // Pass the options in the order selected by the use, so that the
71
+ const selectedOptions = props.isMulti ? _filterInstanceProperty(_context2 = _mapInstanceProperty(_context3 = props.value || [] // Pass the options in the order selected by the use, so that the
74
72
  // sorting is not lost
75
- ).call(_context3, function (value) {
76
- return _findInstanceProperty(optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
77
- return option.value === value;
78
- });
79
- })).call(_context2, Boolean) : _findInstanceProperty(optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
80
- return has(option, 'value') && option.value === props.value;
81
- }) || null;
73
+ ).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;
82
74
  return jsx(Constraints.Horizontal, {
83
75
  max: props.horizontalConstraint,
84
76
  children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
@@ -90,11 +82,9 @@ var SelectInput = function SelectInput(props) {
90
82
  autoFocus: props.isAutofocussed,
91
83
  backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
92
84
  components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? customComponentsWithIcons : {}), props.isReadOnly ? {
93
- Input: function Input(ownProps) {
94
- return jsx(components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
95
- readOnly: true
96
- }));
97
- }
85
+ Input: ownProps => jsx(components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
86
+ readOnly: true
87
+ }))
98
88
  } : {}), props.components),
99
89
  menuIsOpen: props.isReadOnly ? false : undefined,
100
90
  styles: createSelectStyles({
@@ -108,7 +98,7 @@ var SelectInput = function SelectInput(props) {
108
98
  isMulti: props.isMulti,
109
99
  hasValue: !isEmpty(selectedOptions),
110
100
  controlShouldRenderValue: props.controlShouldRenderValue,
111
- isNewTheme: isNewTheme
101
+ isNewTheme
112
102
  }),
113
103
  filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
114
104
  // but we use "id" (for the input) and "containerId" (for the container)
@@ -130,41 +120,39 @@ var SelectInput = function SelectInput(props) {
130
120
  menuShouldBlockScroll: props.menuShouldBlockScroll,
131
121
  closeMenuOnSelect: props.closeMenuOnSelect,
132
122
  name: props.name,
133
- noOptionsMessage: props.noOptionsMessage || function (_ref) {
134
- var inputValue = _ref.inputValue;
123
+ noOptionsMessage: props.noOptionsMessage || (_ref => {
124
+ let inputValue = _ref.inputValue;
135
125
  return !inputValue || inputValue === '' ? intl.formatMessage(messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(messages.noOptionsMessageWithInputValue, {
136
- inputValue: inputValue
126
+ inputValue
137
127
  });
138
- },
139
- onBlur: typeof props.onBlur === 'function' ? function () {
140
- var event = {
128
+ }),
129
+ onBlur: typeof props.onBlur === 'function' ? () => {
130
+ const event = {
141
131
  target: {
142
132
  id: props.id,
143
- name: function () {
133
+ name: (() => {
144
134
  if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
145
135
  // state as an array instead of a boolean only.
146
136
  // Otherwise the shapes would clash on submission, as
147
137
  // Formik will create an array on submission anyways.
148
138
 
149
139
  return props.name ? "".concat(props.name, ".0") : undefined;
150
- }()
140
+ })()
151
141
  },
152
- persist: function persist() {}
142
+ persist: () => {}
153
143
  };
154
144
  props.onBlur && props.onBlur(event);
155
145
  } : undefined,
156
- onChange: function onChange(nextSelectedOptions) {
146
+ onChange: nextSelectedOptions => {
157
147
  // nextSelectedOptions is either an array, or a single option, or null
158
148
  // depending on whether we're in multi-mode or not (isMulti)
159
- var value = null;
149
+ let value = null;
160
150
 
161
151
  if (props.isMulti) {
162
152
  if (nextSelectedOptions) {
163
153
  var _context4;
164
154
 
165
- value = _mapInstanceProperty(_context4 = nextSelectedOptions).call(_context4, function (option) {
166
- return option.value;
167
- });
155
+ value = _mapInstanceProperty(_context4 = nextSelectedOptions).call(_context4, option => option.value);
168
156
  } else {
169
157
  value = [];
170
158
  }
@@ -176,9 +164,9 @@ var SelectInput = function SelectInput(props) {
176
164
  target: {
177
165
  id: props.id,
178
166
  name: props.name,
179
- value: value
167
+ value
180
168
  },
181
- persist: function persist() {}
169
+ persist: () => {}
182
170
  });
183
171
  },
184
172
  onFocus: props.onFocus,
@@ -223,9 +211,7 @@ SelectInput.defaultProps = defaultProps;
223
211
  */
224
212
  // Both "true" and an empty array [] represent a touched state.
225
213
 
226
- SelectInput.isTouched = function (touched) {
227
- return Boolean(touched);
228
- };
214
+ SelectInput.isTouched = touched => Boolean(touched);
229
215
  /**
230
216
  * Expose react-select components for customization purposes.
231
217
  */
@@ -259,6 +245,6 @@ SelectInput.ValueContainer = components.ValueContainer;
259
245
  var SelectInput$1 = SelectInput;
260
246
 
261
247
  // NOTE: This string will be replaced on build time with the package version.
262
- var version = "15.15.0";
248
+ var version = "16.0.0";
263
249
 
264
250
  export { SelectInput$1 as default, version };
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": "15.15.0",
4
+ "version": "16.0.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,24 +21,24 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/constraints": "15.15.0",
25
- "@commercetools-uikit/design-system": "15.15.0",
26
- "@commercetools-uikit/icons": "15.15.0",
27
- "@commercetools-uikit/select-utils": "15.15.0",
28
- "@commercetools-uikit/utils": "15.15.0",
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
29
  "@emotion/is-prop-valid": "1.2.0",
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.1"
34
+ "react-select": "5.7.2"
35
35
  },
36
36
  "devDependencies": {
37
37
  "react": "17.0.2",
38
- "react-intl": "^5.25.1"
38
+ "react-intl": "^6.3.2"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "react": "17.x",
42
- "react-intl": "5.x"
42
+ "react-intl": "6.x"
43
43
  }
44
44
  }