@commercetools-uikit/select-input 19.20.0 → 19.21.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 (5) hide show
  1. package/dist/commercetools-uikit-select-input.cjs.dev.js +45 -35
  2. package/dist/commercetools-uikit-select-input.cjs.prod.js +43 -33
  3. package/dist/commercetools-uikit-select-input.esm.js +45 -35
  4. package/dist/declarations/src/select-input.d.ts +3 -4
  5. package/package.json +6 -6
package/dist/commercetools-uikit-select-input.cjs.dev.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
6
+ var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
6
7
  var _pt = require('prop-types');
7
8
  var _flatMapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/flat-map');
8
9
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -44,30 +45,35 @@ var has__default = /*#__PURE__*/_interopDefault(has);
44
45
  var Select__default = /*#__PURE__*/_interopDefault(Select);
45
46
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
46
47
 
48
+ const _excluded = ["appearance", "maxMenuHeight", "menuPortalZIndex", "options", "optionStyle"];
47
49
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
48
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
50
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
49
51
  const customizedComponents = {
50
52
  DropdownIndicator: selectUtils.DropdownIndicator,
51
53
  ClearIndicator: selectUtils.ClearIndicator,
52
54
  MultiValueRemove: selectUtils.TagRemove
53
55
  };
54
- const defaultProps = {
55
- appearance: 'default',
56
- maxMenuHeight: 220,
57
- menuPortalZIndex: 1,
58
- options: [],
59
- optionStyle: 'list'
60
- };
61
56
  const isOptionObject = option => option.options !== undefined;
62
- const SelectInput = props => {
63
- var _context, _context2, _context3;
57
+ const SelectInput = _ref => {
58
+ var _context, _context2;
59
+ let _ref$appearance = _ref.appearance,
60
+ appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
61
+ _ref$maxMenuHeight = _ref.maxMenuHeight,
62
+ maxMenuHeight = _ref$maxMenuHeight === void 0 ? 220 : _ref$maxMenuHeight,
63
+ _ref$menuPortalZIndex = _ref.menuPortalZIndex,
64
+ menuPortalZIndex = _ref$menuPortalZIndex === void 0 ? 1 : _ref$menuPortalZIndex,
65
+ _ref$options = _ref.options,
66
+ options = _ref$options === void 0 ? [] : _ref$options,
67
+ _ref$optionStyle = _ref.optionStyle,
68
+ optionStyle = _ref$optionStyle === void 0 ? 'list' : _ref$optionStyle,
69
+ props = _objectWithoutProperties(_ref, _excluded);
64
70
  const intl = reactIntl.useIntl();
65
71
  selectUtils.warnIfMenuPortalPropsAreMissing({
66
- menuPortalZIndex: props.menuPortalZIndex,
72
+ menuPortalZIndex: menuPortalZIndex,
67
73
  menuPortalTarget: props.menuPortalTarget,
68
74
  componentName: 'SelectInput'
69
75
  });
70
- const placeholder = props.appearance === 'filter' && !props.placeholder ? intl.formatMessage(selectUtils.messages.selectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
76
+ const placeholder = appearance === 'filter' && !props.placeholder ? intl.formatMessage(selectUtils.messages.selectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
71
77
  // Options can be grouped as
72
78
  // const colourOptions = [{ value: 'green', label: 'Green' }];
73
79
  // const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
@@ -76,19 +82,24 @@ const SelectInput = props => {
76
82
  // { label: 'Flavours', options: flavourOptions },
77
83
  // ];
78
84
  // So we "ungroup" the options by merging them all into one list first.
79
- const optionsWithoutGroups = _flatMapInstanceProperty__default["default"](_context = props.options).call(_context, option => {
85
+ const optionsWithoutGroups = _flatMapInstanceProperty__default["default"](options).call(options, option => {
80
86
  if (isOptionObject(option)) {
81
87
  return option.options;
82
88
  }
83
89
  return option;
84
90
  });
85
- const selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context2 = _mapInstanceProperty__default["default"](_context3 = props.value || []
91
+ const selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = props.value || []
86
92
  // Pass the options in the order selected by the use, so that the
87
93
  // sorting is not lost
88
- ).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;
94
+ ).call(_context2, value => _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === value))).call(_context, Boolean) : _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => has__default["default"](option, 'value') && option.value === props.value) || null;
89
95
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
90
96
  max: props.horizontalConstraint,
91
- children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
97
+ children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(_objectSpread({
98
+ appearance,
99
+ maxMenuHeight,
100
+ menuPortalZIndex,
101
+ optionStyle
102
+ }, props))), {}, {
92
103
  children: jsxRuntime.jsx(Select__default["default"], _objectSpread(_objectSpread({
93
104
  "aria-label": props['aria-label'],
94
105
  "aria-labelledby": props['aria-labelledby'],
@@ -100,22 +111,22 @@ const SelectInput = props => {
100
111
  Input: ownProps => jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
101
112
  readOnly: true
102
113
  }))
103
- } : {}), props.appearance === 'filter' && {
114
+ } : {}), appearance === 'filter' && {
104
115
  DropdownIndicator: () => jsxRuntime.jsx(icons.SearchIcon, {
105
116
  color: "neutral60"
106
117
  }),
107
118
  ClearIndicator: null
108
- }), props.optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(props.appearance) : {}), props.components),
109
- menuIsOpen: props.isReadOnly ? false : props.appearance === 'filter' ? true : props.menuIsOpen,
119
+ }), optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(appearance) : {}), props.components),
120
+ menuIsOpen: props.isReadOnly ? false : appearance === 'filter' ? true : props.menuIsOpen,
110
121
  styles: selectUtils.createSelectStyles({
111
122
  hasWarning: props.hasWarning,
112
123
  hasError: props.hasError,
113
124
  showOptionGroupDivider: props.showOptionGroupDivider,
114
- menuPortalZIndex: props.menuPortalZIndex,
115
- appearance: props.appearance,
125
+ menuPortalZIndex: menuPortalZIndex,
126
+ appearance: appearance,
116
127
  isDisabled: props.isDisabled,
117
128
  isReadOnly: props.isReadOnly,
118
- isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
129
+ isCondensed: appearance === 'filter' ? true : props.isCondensed,
119
130
  iconLeft: props.iconLeft,
120
131
  isMulti: props.isMulti,
121
132
  hasValue: !isEmpty__default["default"](selectedOptions),
@@ -136,7 +147,7 @@ const SelectInput = props => {
136
147
  isClearable: props.isReadOnly ? false : props.isClearable,
137
148
  isDisabled: props.isDisabled,
138
149
  isOptionDisabled: props.isOptionDisabled
139
- }, props.optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {
150
+ }, optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {
140
151
  hideSelectedOptions: props.hideSelectedOptions
141
152
  }), {}, {
142
153
  // @ts-ignore
@@ -144,15 +155,15 @@ const SelectInput = props => {
144
155
  isMulti: props.isMulti,
145
156
  isSearchable: props.isSearchable,
146
157
  isCondensed: props.isCondensed,
147
- maxMenuHeight: props.maxMenuHeight,
158
+ maxMenuHeight: maxMenuHeight,
148
159
  menuPortalTarget: props.menuPortalTarget,
149
160
  menuShouldBlockScroll: props.menuShouldBlockScroll
150
161
  // @ts-expect-error: optionStyle 'checkbox' will override this property (if set)
151
162
  ,
152
163
  closeMenuOnSelect: props.closeMenuOnSelect,
153
164
  name: props.name,
154
- noOptionsMessage: props.noOptionsMessage || (_ref => {
155
- let inputValue = _ref.inputValue;
165
+ noOptionsMessage: props.noOptionsMessage || (_ref2 => {
166
+ let inputValue = _ref2.inputValue;
156
167
  return !inputValue || inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
157
168
  inputValue
158
169
  });
@@ -180,8 +191,8 @@ const SelectInput = props => {
180
191
  let value = null;
181
192
  if (props.isMulti) {
182
193
  if (nextSelectedOptions) {
183
- var _context4;
184
- value = _mapInstanceProperty__default["default"](_context4 = nextSelectedOptions).call(_context4, option => option.value);
194
+ var _context3;
195
+ value = _mapInstanceProperty__default["default"](_context3 = nextSelectedOptions).call(_context3, option => option.value);
185
196
  } else {
186
197
  value = [];
187
198
  }
@@ -199,15 +210,15 @@ const SelectInput = props => {
199
210
  },
200
211
  onFocus: props.onFocus,
201
212
  onInputChange: props.onInputChange,
202
- options: props.options,
213
+ options: options,
203
214
  placeholder: placeholder,
204
215
  tabIndex: props.tabIndex,
205
216
  tabSelectsValue: props.tabSelectsValue,
206
217
  value: selectedOptions,
207
218
  iconLeft: props.iconLeft,
208
- controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue,
219
+ controlShouldRenderValue: appearance === 'filter' ? false : props.controlShouldRenderValue,
209
220
  menuPlacement: "auto"
210
- }, props.optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {}))
221
+ }, optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {}))
211
222
  }))
212
223
  });
213
224
  };
@@ -233,15 +244,14 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
233
244
  label: _pt__default["default"].node,
234
245
  isDisabled: _pt__default["default"].bool
235
246
  })).isRequired
236
- }))]).isRequired,
237
- optionStyle: _pt__default["default"].oneOf(['list', 'checkbox']).isRequired,
247
+ }))]),
248
+ optionStyle: _pt__default["default"].oneOf(['list', 'checkbox']),
238
249
  showOptionGroupDivider: _pt__default["default"].bool,
239
250
  minMenuWidth: _pt__default["default"].oneOf([2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
240
251
  maxMenuWidth: _pt__default["default"].oneOf([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
241
252
  count: _pt__default["default"].number
242
253
  } : {};
243
254
  SelectInput.displayName = 'SelectInput';
244
- SelectInput.defaultProps = defaultProps;
245
255
 
246
256
  /**
247
257
  * Expose static helper methods.
@@ -282,7 +292,7 @@ SelectInput.ValueContainer = Select.components.ValueContainer;
282
292
  var SelectInput$1 = SelectInput;
283
293
 
284
294
  // NOTE: This string will be replaced on build time with the package version.
285
- var version = "19.20.0";
295
+ var version = "19.21.0";
286
296
 
287
297
  exports["default"] = SelectInput$1;
288
298
  exports.version = version;
package/dist/commercetools-uikit-select-input.cjs.prod.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
6
+ var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
6
7
  require('prop-types');
7
8
  var _flatMapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/flat-map');
8
9
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -43,30 +44,35 @@ var has__default = /*#__PURE__*/_interopDefault(has);
43
44
  var Select__default = /*#__PURE__*/_interopDefault(Select);
44
45
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
45
46
 
47
+ const _excluded = ["appearance", "maxMenuHeight", "menuPortalZIndex", "options", "optionStyle"];
46
48
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
47
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
49
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
48
50
  const customizedComponents = {
49
51
  DropdownIndicator: selectUtils.DropdownIndicator,
50
52
  ClearIndicator: selectUtils.ClearIndicator,
51
53
  MultiValueRemove: selectUtils.TagRemove
52
54
  };
53
- const defaultProps = {
54
- appearance: 'default',
55
- maxMenuHeight: 220,
56
- menuPortalZIndex: 1,
57
- options: [],
58
- optionStyle: 'list'
59
- };
60
55
  const isOptionObject = option => option.options !== undefined;
61
- const SelectInput = props => {
62
- var _context, _context2, _context3;
56
+ const SelectInput = _ref => {
57
+ var _context, _context2;
58
+ let _ref$appearance = _ref.appearance,
59
+ appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
60
+ _ref$maxMenuHeight = _ref.maxMenuHeight,
61
+ maxMenuHeight = _ref$maxMenuHeight === void 0 ? 220 : _ref$maxMenuHeight,
62
+ _ref$menuPortalZIndex = _ref.menuPortalZIndex,
63
+ menuPortalZIndex = _ref$menuPortalZIndex === void 0 ? 1 : _ref$menuPortalZIndex,
64
+ _ref$options = _ref.options,
65
+ options = _ref$options === void 0 ? [] : _ref$options,
66
+ _ref$optionStyle = _ref.optionStyle,
67
+ optionStyle = _ref$optionStyle === void 0 ? 'list' : _ref$optionStyle,
68
+ props = _objectWithoutProperties(_ref, _excluded);
63
69
  const intl = reactIntl.useIntl();
64
70
  selectUtils.warnIfMenuPortalPropsAreMissing({
65
- menuPortalZIndex: props.menuPortalZIndex,
71
+ menuPortalZIndex: menuPortalZIndex,
66
72
  menuPortalTarget: props.menuPortalTarget,
67
73
  componentName: 'SelectInput'
68
74
  });
69
- const placeholder = props.appearance === 'filter' && !props.placeholder ? intl.formatMessage(selectUtils.messages.selectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
75
+ const placeholder = appearance === 'filter' && !props.placeholder ? intl.formatMessage(selectUtils.messages.selectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
70
76
  // Options can be grouped as
71
77
  // const colourOptions = [{ value: 'green', label: 'Green' }];
72
78
  // const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
@@ -75,19 +81,24 @@ const SelectInput = props => {
75
81
  // { label: 'Flavours', options: flavourOptions },
76
82
  // ];
77
83
  // So we "ungroup" the options by merging them all into one list first.
78
- const optionsWithoutGroups = _flatMapInstanceProperty__default["default"](_context = props.options).call(_context, option => {
84
+ const optionsWithoutGroups = _flatMapInstanceProperty__default["default"](options).call(options, option => {
79
85
  if (isOptionObject(option)) {
80
86
  return option.options;
81
87
  }
82
88
  return option;
83
89
  });
84
- const selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context2 = _mapInstanceProperty__default["default"](_context3 = props.value || []
90
+ const selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = props.value || []
85
91
  // Pass the options in the order selected by the use, so that the
86
92
  // sorting is not lost
87
- ).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;
93
+ ).call(_context2, value => _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === value))).call(_context, Boolean) : _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => has__default["default"](option, 'value') && option.value === props.value) || null;
88
94
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
89
95
  max: props.horizontalConstraint,
90
- children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
96
+ children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(_objectSpread({
97
+ appearance,
98
+ maxMenuHeight,
99
+ menuPortalZIndex,
100
+ optionStyle
101
+ }, props))), {}, {
91
102
  children: jsxRuntime.jsx(Select__default["default"], _objectSpread(_objectSpread({
92
103
  "aria-label": props['aria-label'],
93
104
  "aria-labelledby": props['aria-labelledby'],
@@ -99,22 +110,22 @@ const SelectInput = props => {
99
110
  Input: ownProps => jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
100
111
  readOnly: true
101
112
  }))
102
- } : {}), props.appearance === 'filter' && {
113
+ } : {}), appearance === 'filter' && {
103
114
  DropdownIndicator: () => jsxRuntime.jsx(icons.SearchIcon, {
104
115
  color: "neutral60"
105
116
  }),
106
117
  ClearIndicator: null
107
- }), props.optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(props.appearance) : {}), props.components),
108
- menuIsOpen: props.isReadOnly ? false : props.appearance === 'filter' ? true : props.menuIsOpen,
118
+ }), optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(appearance) : {}), props.components),
119
+ menuIsOpen: props.isReadOnly ? false : appearance === 'filter' ? true : props.menuIsOpen,
109
120
  styles: selectUtils.createSelectStyles({
110
121
  hasWarning: props.hasWarning,
111
122
  hasError: props.hasError,
112
123
  showOptionGroupDivider: props.showOptionGroupDivider,
113
- menuPortalZIndex: props.menuPortalZIndex,
114
- appearance: props.appearance,
124
+ menuPortalZIndex: menuPortalZIndex,
125
+ appearance: appearance,
115
126
  isDisabled: props.isDisabled,
116
127
  isReadOnly: props.isReadOnly,
117
- isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
128
+ isCondensed: appearance === 'filter' ? true : props.isCondensed,
118
129
  iconLeft: props.iconLeft,
119
130
  isMulti: props.isMulti,
120
131
  hasValue: !isEmpty__default["default"](selectedOptions),
@@ -135,7 +146,7 @@ const SelectInput = props => {
135
146
  isClearable: props.isReadOnly ? false : props.isClearable,
136
147
  isDisabled: props.isDisabled,
137
148
  isOptionDisabled: props.isOptionDisabled
138
- }, props.optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {
149
+ }, optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {
139
150
  hideSelectedOptions: props.hideSelectedOptions
140
151
  }), {}, {
141
152
  // @ts-ignore
@@ -143,15 +154,15 @@ const SelectInput = props => {
143
154
  isMulti: props.isMulti,
144
155
  isSearchable: props.isSearchable,
145
156
  isCondensed: props.isCondensed,
146
- maxMenuHeight: props.maxMenuHeight,
157
+ maxMenuHeight: maxMenuHeight,
147
158
  menuPortalTarget: props.menuPortalTarget,
148
159
  menuShouldBlockScroll: props.menuShouldBlockScroll
149
160
  // @ts-expect-error: optionStyle 'checkbox' will override this property (if set)
150
161
  ,
151
162
  closeMenuOnSelect: props.closeMenuOnSelect,
152
163
  name: props.name,
153
- noOptionsMessage: props.noOptionsMessage || (_ref => {
154
- let inputValue = _ref.inputValue;
164
+ noOptionsMessage: props.noOptionsMessage || (_ref2 => {
165
+ let inputValue = _ref2.inputValue;
155
166
  return !inputValue || inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
156
167
  inputValue
157
168
  });
@@ -179,8 +190,8 @@ const SelectInput = props => {
179
190
  let value = null;
180
191
  if (props.isMulti) {
181
192
  if (nextSelectedOptions) {
182
- var _context4;
183
- value = _mapInstanceProperty__default["default"](_context4 = nextSelectedOptions).call(_context4, option => option.value);
193
+ var _context3;
194
+ value = _mapInstanceProperty__default["default"](_context3 = nextSelectedOptions).call(_context3, option => option.value);
184
195
  } else {
185
196
  value = [];
186
197
  }
@@ -198,21 +209,20 @@ const SelectInput = props => {
198
209
  },
199
210
  onFocus: props.onFocus,
200
211
  onInputChange: props.onInputChange,
201
- options: props.options,
212
+ options: options,
202
213
  placeholder: placeholder,
203
214
  tabIndex: props.tabIndex,
204
215
  tabSelectsValue: props.tabSelectsValue,
205
216
  value: selectedOptions,
206
217
  iconLeft: props.iconLeft,
207
- controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue,
218
+ controlShouldRenderValue: appearance === 'filter' ? false : props.controlShouldRenderValue,
208
219
  menuPlacement: "auto"
209
- }, props.optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {}))
220
+ }, optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {}))
210
221
  }))
211
222
  });
212
223
  };
213
224
  SelectInput.propTypes = {};
214
225
  SelectInput.displayName = 'SelectInput';
215
- SelectInput.defaultProps = defaultProps;
216
226
 
217
227
  /**
218
228
  * Expose static helper methods.
@@ -253,7 +263,7 @@ SelectInput.ValueContainer = Select.components.ValueContainer;
253
263
  var SelectInput$1 = SelectInput;
254
264
 
255
265
  // NOTE: This string will be replaced on build time with the package version.
256
- var version = "19.20.0";
266
+ var version = "19.21.0";
257
267
 
258
268
  exports["default"] = SelectInput$1;
259
269
  exports.version = version;
package/dist/commercetools-uikit-select-input.esm.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
2
+ import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
2
3
  import _pt from 'prop-types';
3
4
  import _flatMapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/flat-map';
4
5
  import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
@@ -21,30 +22,35 @@ import { filterDataAttributes } from '@commercetools-uikit/utils';
21
22
  import { SearchIcon } from '@commercetools-uikit/icons';
22
23
  import { jsx } from '@emotion/react/jsx-runtime';
23
24
 
25
+ const _excluded = ["appearance", "maxMenuHeight", "menuPortalZIndex", "options", "optionStyle"];
24
26
  function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
25
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
27
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
26
28
  const customizedComponents = {
27
29
  DropdownIndicator,
28
30
  ClearIndicator,
29
31
  MultiValueRemove: TagRemove
30
32
  };
31
- const defaultProps = {
32
- appearance: 'default',
33
- maxMenuHeight: 220,
34
- menuPortalZIndex: 1,
35
- options: [],
36
- optionStyle: 'list'
37
- };
38
33
  const isOptionObject = option => option.options !== undefined;
39
- const SelectInput = props => {
40
- var _context, _context2, _context3;
34
+ const SelectInput = _ref => {
35
+ var _context, _context2;
36
+ let _ref$appearance = _ref.appearance,
37
+ appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
38
+ _ref$maxMenuHeight = _ref.maxMenuHeight,
39
+ maxMenuHeight = _ref$maxMenuHeight === void 0 ? 220 : _ref$maxMenuHeight,
40
+ _ref$menuPortalZIndex = _ref.menuPortalZIndex,
41
+ menuPortalZIndex = _ref$menuPortalZIndex === void 0 ? 1 : _ref$menuPortalZIndex,
42
+ _ref$options = _ref.options,
43
+ options = _ref$options === void 0 ? [] : _ref$options,
44
+ _ref$optionStyle = _ref.optionStyle,
45
+ optionStyle = _ref$optionStyle === void 0 ? 'list' : _ref$optionStyle,
46
+ props = _objectWithoutProperties(_ref, _excluded);
41
47
  const intl = useIntl();
42
48
  warnIfMenuPortalPropsAreMissing({
43
- menuPortalZIndex: props.menuPortalZIndex,
49
+ menuPortalZIndex: menuPortalZIndex,
44
50
  menuPortalTarget: props.menuPortalTarget,
45
51
  componentName: 'SelectInput'
46
52
  });
47
- const placeholder = props.appearance === 'filter' && !props.placeholder ? intl.formatMessage(messages.selectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(messages.placeholder);
53
+ const placeholder = appearance === 'filter' && !props.placeholder ? intl.formatMessage(messages.selectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(messages.placeholder);
48
54
  // Options can be grouped as
49
55
  // const colourOptions = [{ value: 'green', label: 'Green' }];
50
56
  // const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
@@ -53,19 +59,24 @@ const SelectInput = props => {
53
59
  // { label: 'Flavours', options: flavourOptions },
54
60
  // ];
55
61
  // So we "ungroup" the options by merging them all into one list first.
56
- const optionsWithoutGroups = _flatMapInstanceProperty(_context = props.options).call(_context, option => {
62
+ const optionsWithoutGroups = _flatMapInstanceProperty(options).call(options, option => {
57
63
  if (isOptionObject(option)) {
58
64
  return option.options;
59
65
  }
60
66
  return option;
61
67
  });
62
- const selectedOptions = props.isMulti ? _filterInstanceProperty(_context2 = _mapInstanceProperty(_context3 = props.value || []
68
+ const selectedOptions = props.isMulti ? _filterInstanceProperty(_context = _mapInstanceProperty(_context2 = props.value || []
63
69
  // Pass the options in the order selected by the use, so that the
64
70
  // sorting is not lost
65
- ).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;
71
+ ).call(_context2, value => _findInstanceProperty(optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === value))).call(_context, Boolean) : _findInstanceProperty(optionsWithoutGroups).call(optionsWithoutGroups, option => has(option, 'value') && option.value === props.value) || null;
66
72
  return jsx(Constraints.Horizontal, {
67
73
  max: props.horizontalConstraint,
68
- children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
74
+ children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(_objectSpread({
75
+ appearance,
76
+ maxMenuHeight,
77
+ menuPortalZIndex,
78
+ optionStyle
79
+ }, props))), {}, {
69
80
  children: jsx(Select, _objectSpread(_objectSpread({
70
81
  "aria-label": props['aria-label'],
71
82
  "aria-labelledby": props['aria-labelledby'],
@@ -77,22 +88,22 @@ const SelectInput = props => {
77
88
  Input: ownProps => jsx(components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
78
89
  readOnly: true
79
90
  }))
80
- } : {}), props.appearance === 'filter' && {
91
+ } : {}), appearance === 'filter' && {
81
92
  DropdownIndicator: () => jsx(SearchIcon, {
82
93
  color: "neutral60"
83
94
  }),
84
95
  ClearIndicator: null
85
- }), props.optionStyle === 'checkbox' ? optionStyleCheckboxComponents(props.appearance) : {}), props.components),
86
- menuIsOpen: props.isReadOnly ? false : props.appearance === 'filter' ? true : props.menuIsOpen,
96
+ }), optionStyle === 'checkbox' ? optionStyleCheckboxComponents(appearance) : {}), props.components),
97
+ menuIsOpen: props.isReadOnly ? false : appearance === 'filter' ? true : props.menuIsOpen,
87
98
  styles: createSelectStyles({
88
99
  hasWarning: props.hasWarning,
89
100
  hasError: props.hasError,
90
101
  showOptionGroupDivider: props.showOptionGroupDivider,
91
- menuPortalZIndex: props.menuPortalZIndex,
92
- appearance: props.appearance,
102
+ menuPortalZIndex: menuPortalZIndex,
103
+ appearance: appearance,
93
104
  isDisabled: props.isDisabled,
94
105
  isReadOnly: props.isReadOnly,
95
- isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
106
+ isCondensed: appearance === 'filter' ? true : props.isCondensed,
96
107
  iconLeft: props.iconLeft,
97
108
  isMulti: props.isMulti,
98
109
  hasValue: !isEmpty(selectedOptions),
@@ -113,7 +124,7 @@ const SelectInput = props => {
113
124
  isClearable: props.isReadOnly ? false : props.isClearable,
114
125
  isDisabled: props.isDisabled,
115
126
  isOptionDisabled: props.isOptionDisabled
116
- }, props.optionStyle === 'checkbox' ? optionsStyleCheckboxSelectProps() : {
127
+ }, optionStyle === 'checkbox' ? optionsStyleCheckboxSelectProps() : {
117
128
  hideSelectedOptions: props.hideSelectedOptions
118
129
  }), {}, {
119
130
  // @ts-ignore
@@ -121,15 +132,15 @@ const SelectInput = props => {
121
132
  isMulti: props.isMulti,
122
133
  isSearchable: props.isSearchable,
123
134
  isCondensed: props.isCondensed,
124
- maxMenuHeight: props.maxMenuHeight,
135
+ maxMenuHeight: maxMenuHeight,
125
136
  menuPortalTarget: props.menuPortalTarget,
126
137
  menuShouldBlockScroll: props.menuShouldBlockScroll
127
138
  // @ts-expect-error: optionStyle 'checkbox' will override this property (if set)
128
139
  ,
129
140
  closeMenuOnSelect: props.closeMenuOnSelect,
130
141
  name: props.name,
131
- noOptionsMessage: props.noOptionsMessage || (_ref => {
132
- let inputValue = _ref.inputValue;
142
+ noOptionsMessage: props.noOptionsMessage || (_ref2 => {
143
+ let inputValue = _ref2.inputValue;
133
144
  return !inputValue || inputValue === '' ? intl.formatMessage(messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(messages.noOptionsMessageWithInputValue, {
134
145
  inputValue
135
146
  });
@@ -157,8 +168,8 @@ const SelectInput = props => {
157
168
  let value = null;
158
169
  if (props.isMulti) {
159
170
  if (nextSelectedOptions) {
160
- var _context4;
161
- value = _mapInstanceProperty(_context4 = nextSelectedOptions).call(_context4, option => option.value);
171
+ var _context3;
172
+ value = _mapInstanceProperty(_context3 = nextSelectedOptions).call(_context3, option => option.value);
162
173
  } else {
163
174
  value = [];
164
175
  }
@@ -176,15 +187,15 @@ const SelectInput = props => {
176
187
  },
177
188
  onFocus: props.onFocus,
178
189
  onInputChange: props.onInputChange,
179
- options: props.options,
190
+ options: options,
180
191
  placeholder: placeholder,
181
192
  tabIndex: props.tabIndex,
182
193
  tabSelectsValue: props.tabSelectsValue,
183
194
  value: selectedOptions,
184
195
  iconLeft: props.iconLeft,
185
- controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue,
196
+ controlShouldRenderValue: appearance === 'filter' ? false : props.controlShouldRenderValue,
186
197
  menuPlacement: "auto"
187
- }, props.optionStyle === 'checkbox' ? optionsStyleCheckboxSelectProps() : {}))
198
+ }, optionStyle === 'checkbox' ? optionsStyleCheckboxSelectProps() : {}))
188
199
  }))
189
200
  });
190
201
  };
@@ -210,15 +221,14 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
210
221
  label: _pt.node,
211
222
  isDisabled: _pt.bool
212
223
  })).isRequired
213
- }))]).isRequired,
214
- optionStyle: _pt.oneOf(['list', 'checkbox']).isRequired,
224
+ }))]),
225
+ optionStyle: _pt.oneOf(['list', 'checkbox']),
215
226
  showOptionGroupDivider: _pt.bool,
216
227
  minMenuWidth: _pt.oneOf([2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
217
228
  maxMenuWidth: _pt.oneOf([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
218
229
  count: _pt.number
219
230
  } : {};
220
231
  SelectInput.displayName = 'SelectInput';
221
- SelectInput.defaultProps = defaultProps;
222
232
 
223
233
  /**
224
234
  * Expose static helper methods.
@@ -259,6 +269,6 @@ SelectInput.ValueContainer = components.ValueContainer;
259
269
  var SelectInput$1 = SelectInput;
260
270
 
261
271
  // NOTE: This string will be replaced on build time with the package version.
262
- var version = "19.20.0";
272
+ var version = "19.21.0";
263
273
 
264
274
  export { SelectInput$1 as default, version };
package/dist/declarations/src/select-input.d.ts CHANGED
@@ -228,9 +228,9 @@ export type TSelectInputProps = {
228
228
  /**
229
229
  * Array of options that populate the select menu
230
230
  */
231
- options: TOptions;
231
+ options?: TOptions;
232
232
  /** defines how options are rendered */
233
- optionStyle: 'list' | 'checkbox';
233
+ optionStyle?: 'list' | 'checkbox';
234
234
  showOptionGroupDivider?: boolean;
235
235
  /**
236
236
  * Placeholder text for the select value
@@ -272,9 +272,8 @@ export type TSelectInputProps = {
272
272
  count?: number;
273
273
  };
274
274
  declare const SelectInput: {
275
- (props: TSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
275
+ ({ appearance, maxMenuHeight, menuPortalZIndex, options, optionStyle, ...props }: TSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
276
276
  displayName: string;
277
- defaultProps: Pick<TSelectInputProps, "appearance" | "maxMenuHeight" | "options" | "menuPortalZIndex" | "optionStyle">;
278
277
  isTouched(touched: boolean | unknown[]): boolean;
279
278
  /**
280
279
  * Expose react-select components for customization purposes.
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": "19.20.0",
4
+ "version": "19.21.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,11 +21,11 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/constraints": "19.20.0",
25
- "@commercetools-uikit/design-system": "19.20.0",
26
- "@commercetools-uikit/icons": "19.20.0",
27
- "@commercetools-uikit/select-utils": "19.20.0",
28
- "@commercetools-uikit/utils": "19.20.0",
24
+ "@commercetools-uikit/constraints": "19.21.0",
25
+ "@commercetools-uikit/design-system": "19.21.0",
26
+ "@commercetools-uikit/icons": "19.21.0",
27
+ "@commercetools-uikit/select-utils": "19.21.0",
28
+ "@commercetools-uikit/utils": "19.21.0",
29
29
  "@emotion/is-prop-valid": "1.3.1",
30
30
  "@emotion/react": "^11.10.5",
31
31
  "@emotion/styled": "^11.10.5",