@commercetools-uikit/async-select-input 19.20.1 → 19.22.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-async-select-input.cjs.dev.js +43 -32
  2. package/dist/commercetools-uikit-async-select-input.cjs.prod.js +41 -30
  3. package/dist/commercetools-uikit-async-select-input.esm.js +43 -32
  4. package/dist/declarations/src/async-select-input.d.ts +3 -4
  5. package/package.json +9 -9
package/dist/commercetools-uikit-async-select-input.cjs.dev.js CHANGED
@@ -11,6 +11,7 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
11
11
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
12
12
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
13
13
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
+ var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
14
15
  var _pt = require('prop-types');
15
16
  var reactIntl = require('react-intl');
16
17
  var isEmpty = require('lodash/isEmpty');
@@ -39,6 +40,7 @@ var AsyncSelect__default = /*#__PURE__*/_interopDefault(AsyncSelect);
39
40
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
40
41
  var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
41
42
 
43
+ const _excluded = ["value", "isSearchable", "menuPortalZIndex", "controlShouldRenderValue", "appearance", "optionStyle"];
42
44
  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; }
43
45
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
44
46
  const LoadingIndicator = () => jsxRuntime.jsx(LoadingSpinner__default["default"], {
@@ -51,27 +53,30 @@ const customizedComponents = {
51
53
  LoadingIndicator,
52
54
  MultiValueRemove: selectUtils.TagRemove
53
55
  };
54
- const defaultProps = {
55
- // Using "null" will ensure that the currently selected value disappears in
56
- // case "undefined" gets passed as the next value
57
- value: null,
58
- isSearchable: true,
59
- menuPortalZIndex: 1,
60
- controlShouldRenderValue: true,
61
- appearance: 'default',
62
- optionStyle: 'list'
63
- };
64
- const AsyncSelectInput = props => {
56
+ const AsyncSelectInput = _ref => {
57
+ let _ref$value = _ref.value,
58
+ value = _ref$value === void 0 ? null : _ref$value,
59
+ _ref$isSearchable = _ref.isSearchable,
60
+ isSearchable = _ref$isSearchable === void 0 ? true : _ref$isSearchable,
61
+ _ref$menuPortalZIndex = _ref.menuPortalZIndex,
62
+ menuPortalZIndex = _ref$menuPortalZIndex === void 0 ? 1 : _ref$menuPortalZIndex,
63
+ _ref$controlShouldRen = _ref.controlShouldRenderValue,
64
+ controlShouldRenderValue = _ref$controlShouldRen === void 0 ? true : _ref$controlShouldRen,
65
+ _ref$appearance = _ref.appearance,
66
+ appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
67
+ _ref$optionStyle = _ref.optionStyle,
68
+ optionStyle = _ref$optionStyle === void 0 ? 'list' : _ref$optionStyle,
69
+ props = _objectWithoutProperties(_ref, _excluded);
65
70
  const intl = reactIntl.useIntl();
66
71
  if (!props.isReadOnly) {
67
72
  process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'AsyncSelectInput: `onChange` is required when input is not read only.') : void 0;
68
73
  }
69
74
  selectUtils.warnIfMenuPortalPropsAreMissing({
70
- menuPortalZIndex: props.menuPortalZIndex,
75
+ menuPortalZIndex: menuPortalZIndex,
71
76
  menuPortalTarget: props.menuPortalTarget,
72
77
  componentName: 'AsyncSelectInput'
73
78
  });
74
- const placeholder = props.placeholder || intl.formatMessage(props.appearance === 'filter' ? selectUtils.messages.selectInputAsFilterPlaceholder : selectUtils.messages.placeholder);
79
+ const placeholder = props.placeholder || intl.formatMessage(appearance === 'filter' ? selectUtils.messages.selectInputAsFilterPlaceholder : selectUtils.messages.placeholder);
75
80
  const loadingMessage = () => {
76
81
  if (typeof props.loadingMessage === 'function') {
77
82
  return props.loadingMessage();
@@ -80,7 +85,14 @@ const AsyncSelectInput = props => {
80
85
  };
81
86
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
82
87
  max: props.horizontalConstraint,
83
- children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
88
+ children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(_objectSpread({
89
+ value,
90
+ isSearchable,
91
+ menuPortalZIndex,
92
+ controlShouldRenderValue,
93
+ appearance,
94
+ optionStyle
95
+ }, props))), {}, {
84
96
  children: jsxRuntime.jsx(AsyncSelect__default["default"], _objectSpread(_objectSpread({
85
97
  "aria-label": props['aria-label'],
86
98
  "aria-labelledby": props['aria-labelledby'],
@@ -92,26 +104,26 @@ const AsyncSelectInput = props => {
92
104
  Input: ownProps => jsxRuntime.jsx(reactSelect.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
93
105
  readOnly: true
94
106
  }))
95
- } : {}), props.appearance === 'filter' && {
107
+ } : {}), appearance === 'filter' && {
96
108
  DropdownIndicator: () => jsxRuntime.jsx(icons.SearchIcon, {
97
109
  color: "neutral60"
98
110
  }),
99
111
  ClearIndicator: null
100
- }), props.optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(props.appearance) : {}), props.components),
101
- menuIsOpen: props.isReadOnly ? false : props.appearance === 'filter' ? true : props.menuIsOpen,
112
+ }), optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(appearance) : {}), props.components),
113
+ menuIsOpen: props.isReadOnly ? false : appearance === 'filter' ? true : props.menuIsOpen,
102
114
  styles: selectUtils.createSelectStyles({
103
115
  hasWarning: props.hasWarning,
104
- appearance: props.appearance,
116
+ appearance: appearance,
105
117
  hasError: props.hasError,
106
118
  showOptionGroupDivider: props.showOptionGroupDivider,
107
- menuPortalZIndex: props.menuPortalZIndex,
108
- isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
119
+ menuPortalZIndex: menuPortalZIndex,
120
+ isCondensed: appearance === 'filter' ? true : props.isCondensed,
109
121
  isDisabled: props.isDisabled,
110
122
  isReadOnly: props.isReadOnly,
111
123
  iconLeft: props.iconLeft,
112
124
  isMulti: props.isMulti,
113
- hasValue: !isEmpty__default["default"](props.value),
114
- controlShouldRenderValue: props.controlShouldRenderValue,
125
+ hasValue: !isEmpty__default["default"](value),
126
+ controlShouldRenderValue: controlShouldRenderValue,
115
127
  horizontalConstraint: props.horizontalConstraint
116
128
  }),
117
129
  filterOption: props.filterOption
@@ -126,19 +138,19 @@ const AsyncSelectInput = props => {
126
138
  isClearable: props.isReadOnly ? false : props.isClearable,
127
139
  isDisabled: props.isDisabled,
128
140
  isOptionDisabled: props.isOptionDisabled
129
- }, props.optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {
141
+ }, optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {
130
142
  hideSelectedOptions: props.hideSelectedOptions
131
143
  }), {}, {
132
144
  isMulti: props.isMulti,
133
- isSearchable: props.isSearchable,
145
+ isSearchable: isSearchable,
134
146
  maxMenuHeight: props.maxMenuHeight,
135
147
  menuPortalTarget: props.menuPortalTarget,
136
148
  menuShouldBlockScroll: props.menuShouldBlockScroll,
137
149
  closeMenuOnSelect: props.closeMenuOnSelect,
138
150
  name: props.name,
139
151
  loadingMessage: loadingMessage,
140
- noOptionsMessage: props.noOptionsMessage || (_ref => {
141
- let inputValue = _ref.inputValue;
152
+ noOptionsMessage: props.noOptionsMessage || (_ref2 => {
153
+ let inputValue = _ref2.inputValue;
142
154
  return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
143
155
  inputValue
144
156
  });
@@ -180,7 +192,7 @@ const AsyncSelectInput = props => {
180
192
  placeholder: placeholder,
181
193
  tabIndex: props.tabIndex,
182
194
  tabSelectsValue: props.tabSelectsValue,
183
- value: props.value
195
+ value: value
184
196
  // Async react-select props
185
197
  ,
186
198
  defaultOptions: props.defaultOptions,
@@ -191,7 +203,7 @@ const AsyncSelectInput = props => {
191
203
  ,
192
204
  isCondensed: props.isCondensed,
193
205
  iconLeft: props.iconLeft,
194
- controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue
206
+ controlShouldRenderValue: appearance === 'filter' ? false : controlShouldRenderValue
195
207
  }))
196
208
  }))
197
209
  });
@@ -203,19 +215,18 @@ AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
203
215
  isReadOnly: _pt__default["default"].bool,
204
216
  isAutofocussed: _pt__default["default"].bool,
205
217
  isCondensed: _pt__default["default"].bool,
206
- menuPortalZIndex: _pt__default["default"].number.isRequired,
218
+ menuPortalZIndex: _pt__default["default"].number,
207
219
  onBlur: _pt__default["default"].func,
208
220
  onChange: _pt__default["default"].func,
209
221
  loadingMessage: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].func]),
210
222
  defaultOptions: _pt__default["default"].oneOfType([_pt__default["default"].any, _pt__default["default"].bool]),
211
223
  showOptionGroupDivider: _pt__default["default"].bool,
212
224
  iconLeft: _pt__default["default"].node,
213
- optionStyle: _pt__default["default"].oneOf(['list', 'checkbox']).isRequired,
225
+ optionStyle: _pt__default["default"].oneOf(['list', 'checkbox']),
214
226
  appearance: _pt__default["default"].oneOf(['default', 'filter']),
215
227
  count: _pt__default["default"].number
216
228
  } : {};
217
229
  AsyncSelectInput.displayName = 'AsyncSelectInput';
218
- AsyncSelectInput.defaultProps = defaultProps;
219
230
 
220
231
  /**
221
232
  * Expose static helper methods.
@@ -263,7 +274,7 @@ AsyncSelectInput.ValueContainer = reactSelect.components.ValueContainer;
263
274
  var AsyncSelectInput$1 = AsyncSelectInput;
264
275
 
265
276
  // NOTE: This string will be replaced on build time with the package version.
266
- var version = "19.20.1";
277
+ var version = "19.22.0";
267
278
 
268
279
  exports["default"] = AsyncSelectInput$1;
269
280
  exports.version = version;
package/dist/commercetools-uikit-async-select-input.cjs.prod.js CHANGED
@@ -11,6 +11,7 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
11
11
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
12
12
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
13
13
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
+ var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
14
15
  require('prop-types');
15
16
  var reactIntl = require('react-intl');
16
17
  var isEmpty = require('lodash/isEmpty');
@@ -38,6 +39,7 @@ var AsyncSelect__default = /*#__PURE__*/_interopDefault(AsyncSelect);
38
39
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
39
40
  var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
40
41
 
42
+ const _excluded = ["value", "isSearchable", "menuPortalZIndex", "controlShouldRenderValue", "appearance", "optionStyle"];
41
43
  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; }
42
44
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
43
45
  const LoadingIndicator = () => jsxRuntime.jsx(LoadingSpinner__default["default"], {
@@ -50,25 +52,28 @@ const customizedComponents = {
50
52
  LoadingIndicator,
51
53
  MultiValueRemove: selectUtils.TagRemove
52
54
  };
53
- const defaultProps = {
54
- // Using "null" will ensure that the currently selected value disappears in
55
- // case "undefined" gets passed as the next value
56
- value: null,
57
- isSearchable: true,
58
- menuPortalZIndex: 1,
59
- controlShouldRenderValue: true,
60
- appearance: 'default',
61
- optionStyle: 'list'
62
- };
63
- const AsyncSelectInput = props => {
55
+ const AsyncSelectInput = _ref => {
56
+ let _ref$value = _ref.value,
57
+ value = _ref$value === void 0 ? null : _ref$value,
58
+ _ref$isSearchable = _ref.isSearchable,
59
+ isSearchable = _ref$isSearchable === void 0 ? true : _ref$isSearchable,
60
+ _ref$menuPortalZIndex = _ref.menuPortalZIndex,
61
+ menuPortalZIndex = _ref$menuPortalZIndex === void 0 ? 1 : _ref$menuPortalZIndex,
62
+ _ref$controlShouldRen = _ref.controlShouldRenderValue,
63
+ controlShouldRenderValue = _ref$controlShouldRen === void 0 ? true : _ref$controlShouldRen,
64
+ _ref$appearance = _ref.appearance,
65
+ appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
66
+ _ref$optionStyle = _ref.optionStyle,
67
+ optionStyle = _ref$optionStyle === void 0 ? 'list' : _ref$optionStyle,
68
+ props = _objectWithoutProperties(_ref, _excluded);
64
69
  const intl = reactIntl.useIntl();
65
70
  if (!props.isReadOnly) ;
66
71
  selectUtils.warnIfMenuPortalPropsAreMissing({
67
- menuPortalZIndex: props.menuPortalZIndex,
72
+ menuPortalZIndex: menuPortalZIndex,
68
73
  menuPortalTarget: props.menuPortalTarget,
69
74
  componentName: 'AsyncSelectInput'
70
75
  });
71
- const placeholder = props.placeholder || intl.formatMessage(props.appearance === 'filter' ? selectUtils.messages.selectInputAsFilterPlaceholder : selectUtils.messages.placeholder);
76
+ const placeholder = props.placeholder || intl.formatMessage(appearance === 'filter' ? selectUtils.messages.selectInputAsFilterPlaceholder : selectUtils.messages.placeholder);
72
77
  const loadingMessage = () => {
73
78
  if (typeof props.loadingMessage === 'function') {
74
79
  return props.loadingMessage();
@@ -77,7 +82,14 @@ const AsyncSelectInput = props => {
77
82
  };
78
83
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
79
84
  max: props.horizontalConstraint,
80
- children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
85
+ children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(_objectSpread({
86
+ value,
87
+ isSearchable,
88
+ menuPortalZIndex,
89
+ controlShouldRenderValue,
90
+ appearance,
91
+ optionStyle
92
+ }, props))), {}, {
81
93
  children: jsxRuntime.jsx(AsyncSelect__default["default"], _objectSpread(_objectSpread({
82
94
  "aria-label": props['aria-label'],
83
95
  "aria-labelledby": props['aria-labelledby'],
@@ -89,26 +101,26 @@ const AsyncSelectInput = props => {
89
101
  Input: ownProps => jsxRuntime.jsx(reactSelect.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
90
102
  readOnly: true
91
103
  }))
92
- } : {}), props.appearance === 'filter' && {
104
+ } : {}), appearance === 'filter' && {
93
105
  DropdownIndicator: () => jsxRuntime.jsx(icons.SearchIcon, {
94
106
  color: "neutral60"
95
107
  }),
96
108
  ClearIndicator: null
97
- }), props.optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(props.appearance) : {}), props.components),
98
- menuIsOpen: props.isReadOnly ? false : props.appearance === 'filter' ? true : props.menuIsOpen,
109
+ }), optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(appearance) : {}), props.components),
110
+ menuIsOpen: props.isReadOnly ? false : appearance === 'filter' ? true : props.menuIsOpen,
99
111
  styles: selectUtils.createSelectStyles({
100
112
  hasWarning: props.hasWarning,
101
- appearance: props.appearance,
113
+ appearance: appearance,
102
114
  hasError: props.hasError,
103
115
  showOptionGroupDivider: props.showOptionGroupDivider,
104
- menuPortalZIndex: props.menuPortalZIndex,
105
- isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
116
+ menuPortalZIndex: menuPortalZIndex,
117
+ isCondensed: appearance === 'filter' ? true : props.isCondensed,
106
118
  isDisabled: props.isDisabled,
107
119
  isReadOnly: props.isReadOnly,
108
120
  iconLeft: props.iconLeft,
109
121
  isMulti: props.isMulti,
110
- hasValue: !isEmpty__default["default"](props.value),
111
- controlShouldRenderValue: props.controlShouldRenderValue,
122
+ hasValue: !isEmpty__default["default"](value),
123
+ controlShouldRenderValue: controlShouldRenderValue,
112
124
  horizontalConstraint: props.horizontalConstraint
113
125
  }),
114
126
  filterOption: props.filterOption
@@ -123,19 +135,19 @@ const AsyncSelectInput = props => {
123
135
  isClearable: props.isReadOnly ? false : props.isClearable,
124
136
  isDisabled: props.isDisabled,
125
137
  isOptionDisabled: props.isOptionDisabled
126
- }, props.optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {
138
+ }, optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {
127
139
  hideSelectedOptions: props.hideSelectedOptions
128
140
  }), {}, {
129
141
  isMulti: props.isMulti,
130
- isSearchable: props.isSearchable,
142
+ isSearchable: isSearchable,
131
143
  maxMenuHeight: props.maxMenuHeight,
132
144
  menuPortalTarget: props.menuPortalTarget,
133
145
  menuShouldBlockScroll: props.menuShouldBlockScroll,
134
146
  closeMenuOnSelect: props.closeMenuOnSelect,
135
147
  name: props.name,
136
148
  loadingMessage: loadingMessage,
137
- noOptionsMessage: props.noOptionsMessage || (_ref => {
138
- let inputValue = _ref.inputValue;
149
+ noOptionsMessage: props.noOptionsMessage || (_ref2 => {
150
+ let inputValue = _ref2.inputValue;
139
151
  return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
140
152
  inputValue
141
153
  });
@@ -177,7 +189,7 @@ const AsyncSelectInput = props => {
177
189
  placeholder: placeholder,
178
190
  tabIndex: props.tabIndex,
179
191
  tabSelectsValue: props.tabSelectsValue,
180
- value: props.value
192
+ value: value
181
193
  // Async react-select props
182
194
  ,
183
195
  defaultOptions: props.defaultOptions,
@@ -188,14 +200,13 @@ const AsyncSelectInput = props => {
188
200
  ,
189
201
  isCondensed: props.isCondensed,
190
202
  iconLeft: props.iconLeft,
191
- controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue
203
+ controlShouldRenderValue: appearance === 'filter' ? false : controlShouldRenderValue
192
204
  }))
193
205
  }))
194
206
  });
195
207
  };
196
208
  AsyncSelectInput.propTypes = {};
197
209
  AsyncSelectInput.displayName = 'AsyncSelectInput';
198
- AsyncSelectInput.defaultProps = defaultProps;
199
210
 
200
211
  /**
201
212
  * Expose static helper methods.
@@ -243,7 +254,7 @@ AsyncSelectInput.ValueContainer = reactSelect.components.ValueContainer;
243
254
  var AsyncSelectInput$1 = AsyncSelectInput;
244
255
 
245
256
  // NOTE: This string will be replaced on build time with the package version.
246
- var version = "19.20.1";
257
+ var version = "19.22.0";
247
258
 
248
259
  exports["default"] = AsyncSelectInput$1;
249
260
  exports.version = version;
package/dist/commercetools-uikit-async-select-input.esm.js CHANGED
@@ -7,6 +7,7 @@ import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-st
7
7
  import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
8
8
  import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
9
9
  import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
10
+ import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
10
11
  import _pt from 'prop-types';
11
12
  import { useIntl } from 'react-intl';
12
13
  import isEmpty from 'lodash/isEmpty';
@@ -19,6 +20,7 @@ import { warnIfMenuPortalPropsAreMissing, messages, customComponentsWithIcons, o
19
20
  import { SearchIcon } from '@commercetools-uikit/icons';
20
21
  import { jsx } from '@emotion/react/jsx-runtime';
21
22
 
23
+ const _excluded = ["value", "isSearchable", "menuPortalZIndex", "controlShouldRenderValue", "appearance", "optionStyle"];
22
24
  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; }
23
25
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
24
26
  const LoadingIndicator = () => jsx(LoadingSpinner, {
@@ -31,27 +33,30 @@ const customizedComponents = {
31
33
  LoadingIndicator,
32
34
  MultiValueRemove: TagRemove
33
35
  };
34
- const defaultProps = {
35
- // Using "null" will ensure that the currently selected value disappears in
36
- // case "undefined" gets passed as the next value
37
- value: null,
38
- isSearchable: true,
39
- menuPortalZIndex: 1,
40
- controlShouldRenderValue: true,
41
- appearance: 'default',
42
- optionStyle: 'list'
43
- };
44
- const AsyncSelectInput = props => {
36
+ const AsyncSelectInput = _ref => {
37
+ let _ref$value = _ref.value,
38
+ value = _ref$value === void 0 ? null : _ref$value,
39
+ _ref$isSearchable = _ref.isSearchable,
40
+ isSearchable = _ref$isSearchable === void 0 ? true : _ref$isSearchable,
41
+ _ref$menuPortalZIndex = _ref.menuPortalZIndex,
42
+ menuPortalZIndex = _ref$menuPortalZIndex === void 0 ? 1 : _ref$menuPortalZIndex,
43
+ _ref$controlShouldRen = _ref.controlShouldRenderValue,
44
+ controlShouldRenderValue = _ref$controlShouldRen === void 0 ? true : _ref$controlShouldRen,
45
+ _ref$appearance = _ref.appearance,
46
+ appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
47
+ _ref$optionStyle = _ref.optionStyle,
48
+ optionStyle = _ref$optionStyle === void 0 ? 'list' : _ref$optionStyle,
49
+ props = _objectWithoutProperties(_ref, _excluded);
45
50
  const intl = useIntl();
46
51
  if (!props.isReadOnly) {
47
52
  process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'AsyncSelectInput: `onChange` is required when input is not read only.') : void 0;
48
53
  }
49
54
  warnIfMenuPortalPropsAreMissing({
50
- menuPortalZIndex: props.menuPortalZIndex,
55
+ menuPortalZIndex: menuPortalZIndex,
51
56
  menuPortalTarget: props.menuPortalTarget,
52
57
  componentName: 'AsyncSelectInput'
53
58
  });
54
- const placeholder = props.placeholder || intl.formatMessage(props.appearance === 'filter' ? messages.selectInputAsFilterPlaceholder : messages.placeholder);
59
+ const placeholder = props.placeholder || intl.formatMessage(appearance === 'filter' ? messages.selectInputAsFilterPlaceholder : messages.placeholder);
55
60
  const loadingMessage = () => {
56
61
  if (typeof props.loadingMessage === 'function') {
57
62
  return props.loadingMessage();
@@ -60,7 +65,14 @@ const AsyncSelectInput = props => {
60
65
  };
61
66
  return jsx(Constraints.Horizontal, {
62
67
  max: props.horizontalConstraint,
63
- children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
68
+ children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(_objectSpread({
69
+ value,
70
+ isSearchable,
71
+ menuPortalZIndex,
72
+ controlShouldRenderValue,
73
+ appearance,
74
+ optionStyle
75
+ }, props))), {}, {
64
76
  children: jsx(AsyncSelect, _objectSpread(_objectSpread({
65
77
  "aria-label": props['aria-label'],
66
78
  "aria-labelledby": props['aria-labelledby'],
@@ -72,26 +84,26 @@ const AsyncSelectInput = props => {
72
84
  Input: ownProps => jsx(components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
73
85
  readOnly: true
74
86
  }))
75
- } : {}), props.appearance === 'filter' && {
87
+ } : {}), appearance === 'filter' && {
76
88
  DropdownIndicator: () => jsx(SearchIcon, {
77
89
  color: "neutral60"
78
90
  }),
79
91
  ClearIndicator: null
80
- }), props.optionStyle === 'checkbox' ? optionStyleCheckboxComponents(props.appearance) : {}), props.components),
81
- menuIsOpen: props.isReadOnly ? false : props.appearance === 'filter' ? true : props.menuIsOpen,
92
+ }), optionStyle === 'checkbox' ? optionStyleCheckboxComponents(appearance) : {}), props.components),
93
+ menuIsOpen: props.isReadOnly ? false : appearance === 'filter' ? true : props.menuIsOpen,
82
94
  styles: createSelectStyles({
83
95
  hasWarning: props.hasWarning,
84
- appearance: props.appearance,
96
+ appearance: appearance,
85
97
  hasError: props.hasError,
86
98
  showOptionGroupDivider: props.showOptionGroupDivider,
87
- menuPortalZIndex: props.menuPortalZIndex,
88
- isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
99
+ menuPortalZIndex: menuPortalZIndex,
100
+ isCondensed: appearance === 'filter' ? true : props.isCondensed,
89
101
  isDisabled: props.isDisabled,
90
102
  isReadOnly: props.isReadOnly,
91
103
  iconLeft: props.iconLeft,
92
104
  isMulti: props.isMulti,
93
- hasValue: !isEmpty(props.value),
94
- controlShouldRenderValue: props.controlShouldRenderValue,
105
+ hasValue: !isEmpty(value),
106
+ controlShouldRenderValue: controlShouldRenderValue,
95
107
  horizontalConstraint: props.horizontalConstraint
96
108
  }),
97
109
  filterOption: props.filterOption
@@ -106,19 +118,19 @@ const AsyncSelectInput = props => {
106
118
  isClearable: props.isReadOnly ? false : props.isClearable,
107
119
  isDisabled: props.isDisabled,
108
120
  isOptionDisabled: props.isOptionDisabled
109
- }, props.optionStyle === 'checkbox' ? optionsStyleCheckboxSelectProps() : {
121
+ }, optionStyle === 'checkbox' ? optionsStyleCheckboxSelectProps() : {
110
122
  hideSelectedOptions: props.hideSelectedOptions
111
123
  }), {}, {
112
124
  isMulti: props.isMulti,
113
- isSearchable: props.isSearchable,
125
+ isSearchable: isSearchable,
114
126
  maxMenuHeight: props.maxMenuHeight,
115
127
  menuPortalTarget: props.menuPortalTarget,
116
128
  menuShouldBlockScroll: props.menuShouldBlockScroll,
117
129
  closeMenuOnSelect: props.closeMenuOnSelect,
118
130
  name: props.name,
119
131
  loadingMessage: loadingMessage,
120
- noOptionsMessage: props.noOptionsMessage || (_ref => {
121
- let inputValue = _ref.inputValue;
132
+ noOptionsMessage: props.noOptionsMessage || (_ref2 => {
133
+ let inputValue = _ref2.inputValue;
122
134
  return inputValue === '' ? intl.formatMessage(messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(messages.noOptionsMessageWithInputValue, {
123
135
  inputValue
124
136
  });
@@ -160,7 +172,7 @@ const AsyncSelectInput = props => {
160
172
  placeholder: placeholder,
161
173
  tabIndex: props.tabIndex,
162
174
  tabSelectsValue: props.tabSelectsValue,
163
- value: props.value
175
+ value: value
164
176
  // Async react-select props
165
177
  ,
166
178
  defaultOptions: props.defaultOptions,
@@ -171,7 +183,7 @@ const AsyncSelectInput = props => {
171
183
  ,
172
184
  isCondensed: props.isCondensed,
173
185
  iconLeft: props.iconLeft,
174
- controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue
186
+ controlShouldRenderValue: appearance === 'filter' ? false : controlShouldRenderValue
175
187
  }))
176
188
  }))
177
189
  });
@@ -183,19 +195,18 @@ AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
183
195
  isReadOnly: _pt.bool,
184
196
  isAutofocussed: _pt.bool,
185
197
  isCondensed: _pt.bool,
186
- menuPortalZIndex: _pt.number.isRequired,
198
+ menuPortalZIndex: _pt.number,
187
199
  onBlur: _pt.func,
188
200
  onChange: _pt.func,
189
201
  loadingMessage: _pt.oneOfType([_pt.string, _pt.func]),
190
202
  defaultOptions: _pt.oneOfType([_pt.any, _pt.bool]),
191
203
  showOptionGroupDivider: _pt.bool,
192
204
  iconLeft: _pt.node,
193
- optionStyle: _pt.oneOf(['list', 'checkbox']).isRequired,
205
+ optionStyle: _pt.oneOf(['list', 'checkbox']),
194
206
  appearance: _pt.oneOf(['default', 'filter']),
195
207
  count: _pt.number
196
208
  } : {};
197
209
  AsyncSelectInput.displayName = 'AsyncSelectInput';
198
- AsyncSelectInput.defaultProps = defaultProps;
199
210
 
200
211
  /**
201
212
  * Expose static helper methods.
@@ -243,6 +254,6 @@ AsyncSelectInput.ValueContainer = components.ValueContainer;
243
254
  var AsyncSelectInput$1 = AsyncSelectInput;
244
255
 
245
256
  // NOTE: This string will be replaced on build time with the package version.
246
- var version = "19.20.1";
257
+ var version = "19.22.0";
247
258
 
248
259
  export { AsyncSelectInput$1 as default, version };
package/dist/declarations/src/async-select-input.d.ts CHANGED
@@ -160,7 +160,7 @@ export type TAsyncSelectInputProps = {
160
160
  * <br>
161
161
  * Use in conjunction with `menuPortalTarget`
162
162
  */
163
- menuPortalZIndex: number;
163
+ menuPortalZIndex?: number;
164
164
  /**
165
165
  * whether the menu should block scroll while open
166
166
  * <br>
@@ -256,7 +256,7 @@ export type TAsyncSelectInputProps = {
256
256
  */
257
257
  iconLeft?: ReactNode;
258
258
  /** defines how options are rendered */
259
- optionStyle: 'list' | 'checkbox';
259
+ optionStyle?: 'list' | 'checkbox';
260
260
  /**
261
261
  * Indicates the appearance of the input.
262
262
  * Filter appearance is meant to be used when the async-select is used as a filter.
@@ -268,9 +268,8 @@ export type TAsyncSelectInputProps = {
268
268
  count?: number;
269
269
  };
270
270
  declare const AsyncSelectInput: {
271
- (props: TAsyncSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
271
+ ({ value, isSearchable, menuPortalZIndex, controlShouldRenderValue, appearance, optionStyle, ...props }: TAsyncSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
272
272
  displayName: string;
273
- defaultProps: Pick<TAsyncSelectInputProps, "value" | "appearance" | "controlShouldRenderValue" | "isSearchable" | "menuPortalZIndex" | "optionStyle">;
274
273
  isTouched(touched: unknown): boolean;
275
274
  /**
276
275
  * Expose react-select components for customization purposes.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/async-select-input",
3
3
  "description": "An input component getting a selection from an asynchronously loaded list from the user.",
4
- "version": "19.20.1",
4
+ "version": "19.22.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,14 +21,14 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/constraints": "19.20.1",
25
- "@commercetools-uikit/design-system": "19.20.1",
26
- "@commercetools-uikit/icons": "19.20.1",
27
- "@commercetools-uikit/loading-spinner": "19.20.1",
28
- "@commercetools-uikit/select-utils": "19.20.1",
29
- "@commercetools-uikit/spacings": "19.20.1",
30
- "@commercetools-uikit/text": "19.20.1",
31
- "@commercetools-uikit/utils": "19.20.1",
24
+ "@commercetools-uikit/constraints": "19.22.0",
25
+ "@commercetools-uikit/design-system": "19.22.0",
26
+ "@commercetools-uikit/icons": "19.22.0",
27
+ "@commercetools-uikit/loading-spinner": "19.22.0",
28
+ "@commercetools-uikit/select-utils": "19.22.0",
29
+ "@commercetools-uikit/spacings": "19.22.0",
30
+ "@commercetools-uikit/text": "19.22.0",
31
+ "@commercetools-uikit/utils": "19.22.0",
32
32
  "@emotion/react": "^11.10.5",
33
33
  "@emotion/styled": "^11.10.5",
34
34
  "lodash": "4.17.21",