@commercetools-uikit/async-select-input 16.0.0 → 16.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -43
- package/dist/commercetools-uikit-async-select-input.cjs.dev.js +25 -32
- package/dist/commercetools-uikit-async-select-input.cjs.prod.js +25 -32
- package/dist/commercetools-uikit-async-select-input.esm.js +25 -32
- package/dist/declarations/src/async-select-input.d.ts +2 -1
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -58,49 +58,50 @@ export default Example;
|
|
|
58
58
|
|
|
59
59
|
## Properties
|
|
60
60
|
|
|
61
|
-
| Props
|
|
62
|
-
|
|
|
63
|
-
| `horizontalConstraint`
|
|
64
|
-
| `hasError`
|
|
65
|
-
| `hasWarning`
|
|
66
|
-
| `isReadOnly`
|
|
67
|
-
| `aria-label`
|
|
68
|
-
| `aria-labelledby`
|
|
69
|
-
| `aria-invalid`
|
|
70
|
-
| `aria-errormessage`
|
|
71
|
-
| `isAutofocussed`
|
|
72
|
-
| `backspaceRemovesValue`
|
|
73
|
-
| `components`
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
| `
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
61
|
+
| Props | Type | Required | Default | Description |
|
|
62
|
+
| -------------------------- | ----------------------------------------------------------------------------------------------------- | :------: | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
63
|
+
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input fields. |
|
|
64
|
+
| `hasError` | `boolean` | | | Indicates the input field has an error |
|
|
65
|
+
| `hasWarning` | `boolean` | | | Indicates the input field has a warning |
|
|
66
|
+
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
|
|
67
|
+
| `aria-label` | `AsyncProps['aria-label']` | | | Aria label (for assistive tech)
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
68
|
+
| `aria-labelledby` | `AsyncProps['aria-labelledby']` | | | HTML ID of an element that should be used as the label (for assistive tech)
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
69
|
+
| `aria-invalid` | `AsyncProps['aria-invalid']` | | | Indicate if the value entered in the input is invalid.
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
70
|
+
| `aria-errormessage` | `AsyncProps['aria-errormessage']` | | | HTML ID of an element containing an error message related to the input.
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
71
|
+
| `isAutofocussed` | `boolean` | | | Focus the control when it is mounted |
|
|
72
|
+
| `backspaceRemovesValue` | `AsyncProps['backspaceRemovesValue']` | | | Remove the currently focused option when the user presses backspace
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
73
|
+
| `components` | `AsyncProps['components']` | | | Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
74
|
+
| `controlShouldRenderValue` | `AsyncProps['controlShouldRenderValue']` | | `true` | Control whether the selected values should be rendered in the control
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
75
|
+
| `filterOption` | `AsyncProps['filterOption']` | | | Custom method to filter whether an option should be displayed in the menu
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
76
|
+
| `id` | `AsyncProps['inputId']` | | | The id of the search input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
77
|
+
| `inputValue` | `AsyncProps['inputValue']` | | | The value of the search input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
78
|
+
| `containerId` | `AsyncProps['id']` | | | The id to set on the SelectContainer component
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
79
|
+
| `isClearable` | `AsyncProps['isClearable']` | | | Is the select value clearable
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
80
|
+
| `isDisabled` | `AsyncProps['isDisabled']` | | | Is the select disabled
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
81
|
+
| `isOptionDisabled` | `AsyncProps['isOptionDisabled']` | | | Override the built-in logic to detect whether an option is disabled
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
82
|
+
| `isMulti` | `AsyncProps['isMulti']` | | | Support multiple selected options
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
83
|
+
| `isSearchable` | `AsyncProps['isSearchable']` | | `true` | Whether to enable search functionality
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
84
|
+
| `maxMenuHeight` | `AsyncProps['maxMenuHeight']` | | | Maximum height of the menu before scrolling
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
85
|
+
| `menuPortalTarget` | `AsyncProps['menuPortalTarget']` | | | Dom element to portal the select menu to
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
86
|
+
| `menuPortalZIndex` | `number` | | `1` | z-index value for the menu portal
<br>
Use in conjunction with `menuPortalTarget` |
|
|
87
|
+
| `menuShouldBlockScroll` | `AsyncProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
88
|
+
| `closeMenuOnSelect` | `AsyncProps['closeMenuOnSelect']` | | | Whether the menu should close after a value is selected. Defaults to `true`.
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
89
|
+
| `name` | `AsyncProps['name']` | | | Name of the HTML Input (optional - without this, no input will be rendered)
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
90
|
+
| `noOptionsMessage` | `AsyncProps['noOptionsMessage']` | | | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
91
|
+
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Handle blur events on the control |
|
|
92
|
+
| `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. |
|
|
93
|
+
| `onFocus` | `AsyncProps['onFocus']` | | | Handle focus events on the control
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
94
|
+
| `onInputChange` | `AsyncProps['onInputChange']` | | | Handle change events on the input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
95
|
+
| `placeholder` | `AsyncProps['placeholder']` | | | Placeholder text for the select value
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
96
|
+
| `loadingMessage` | `union`<br/>Possible values:<br/>`string , (() => string)` | | | loading message shown while the options are being loaded |
|
|
97
|
+
| `tabIndex` | `AsyncProps['tabIndex']` | | | Sets the tabIndex attribute on the input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
98
|
+
| `tabSelectsValue` | `AsyncProps['tabSelectsValue']` | | | Select the currently focused option when the user presses tab
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
99
|
+
| `value` | `AsyncProps['value']` | | `null` | The value of the select; reflected by the selected option
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
100
|
+
| `defaultOptions` | `union`<br/>Possible values:<br/>`OptionsOrGroups<unknown, GroupBase<unknown>> , boolean` | | | The default set of options to show before the user starts searching. When set to true, the results for loadOptions('') will be autoloaded.
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
101
|
+
| `loadOptions` | `AsyncProps['loadOptions']` | ✅ | | Function that returns a promise, which is the set of options to be used once the promise resolves. |
|
|
102
|
+
| `cacheOptions` | `AsyncProps['cacheOptions']` | | | If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value. |
|
|
103
|
+
| `showOptionGroupDivider` | `boolean` | | | Determines if option groups will be separated by a divider |
|
|
104
|
+
| `iconLeft` | `ReactNode` | | | Icon to display on the left of the placeholder text and selected value. Has no effect when `isMulti` is enabled. |
|
|
104
105
|
|
|
105
106
|
## Signatures
|
|
106
107
|
|
|
@@ -40,13 +40,10 @@ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
|
40
40
|
var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
|
|
41
41
|
|
|
42
42
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
43
|
-
|
|
44
43
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
45
|
-
|
|
46
44
|
const LoadingIndicator = () => jsxRuntime.jsx(LoadingSpinner__default["default"], {
|
|
47
45
|
scale: "s"
|
|
48
46
|
});
|
|
49
|
-
|
|
50
47
|
LoadingIndicator.displayName = 'LoadingIndicator';
|
|
51
48
|
const customizedComponents = {
|
|
52
49
|
DropdownIndicator: selectUtils.DropdownIndicator,
|
|
@@ -59,34 +56,28 @@ const defaultProps = {
|
|
|
59
56
|
// case "undefined" gets passed as the next value
|
|
60
57
|
value: null,
|
|
61
58
|
isSearchable: true,
|
|
62
|
-
menuPortalZIndex: 1
|
|
59
|
+
menuPortalZIndex: 1,
|
|
60
|
+
controlShouldRenderValue: true
|
|
63
61
|
};
|
|
64
|
-
|
|
65
62
|
const AsyncSelectInput = props => {
|
|
66
63
|
const intl = reactIntl.useIntl();
|
|
67
|
-
|
|
68
64
|
const _useTheme = designSystem.useTheme(),
|
|
69
|
-
|
|
70
|
-
|
|
65
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
71
66
|
if (!props.isReadOnly) {
|
|
72
67
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'AsyncSelectInput: `onChange` is required when input is not read only.') : void 0;
|
|
73
68
|
}
|
|
74
|
-
|
|
75
69
|
selectUtils.warnIfMenuPortalPropsAreMissing({
|
|
76
70
|
menuPortalZIndex: props.menuPortalZIndex,
|
|
77
71
|
menuPortalTarget: props.menuPortalTarget,
|
|
78
72
|
componentName: 'AsyncSelectInput'
|
|
79
73
|
});
|
|
80
74
|
const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
81
|
-
|
|
82
75
|
const loadingMessage = () => {
|
|
83
76
|
if (typeof props.loadingMessage === 'function') {
|
|
84
77
|
return props.loadingMessage();
|
|
85
78
|
}
|
|
86
|
-
|
|
87
79
|
return props.loadingMessage || intl.formatMessage(selectUtils.messages.loadingOptions);
|
|
88
80
|
};
|
|
89
|
-
|
|
90
81
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
91
82
|
max: props.horizontalConstraint,
|
|
92
83
|
children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
|
|
@@ -113,9 +104,11 @@ const AsyncSelectInput = props => {
|
|
|
113
104
|
iconLeft: props.iconLeft,
|
|
114
105
|
isMulti: props.isMulti,
|
|
115
106
|
hasValue: !isEmpty__default["default"](props.value),
|
|
107
|
+
controlShouldRenderValue: props.controlShouldRenderValue,
|
|
116
108
|
isNewTheme
|
|
117
109
|
}),
|
|
118
|
-
filterOption: props.filterOption
|
|
110
|
+
filterOption: props.filterOption
|
|
111
|
+
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
119
112
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
120
113
|
// instead.
|
|
121
114
|
// This makes it easier to less confusing to use with <label />s.
|
|
@@ -146,11 +139,11 @@ const AsyncSelectInput = props => {
|
|
|
146
139
|
id: props.id,
|
|
147
140
|
name: (() => {
|
|
148
141
|
if (!props.name) return undefined;
|
|
149
|
-
if (!props.isMulti) return props.name;
|
|
142
|
+
if (!props.isMulti) return props.name;
|
|
143
|
+
// We append the ".0" to make Formik set the touched
|
|
150
144
|
// state as an array instead of a boolean only.
|
|
151
145
|
// Otherwise the shapes would clash on submission, as
|
|
152
146
|
// Formik will create an array on submission anyways.
|
|
153
|
-
|
|
154
147
|
return "".concat(props.name, ".0");
|
|
155
148
|
})()
|
|
156
149
|
},
|
|
@@ -160,13 +153,10 @@ const AsyncSelectInput = props => {
|
|
|
160
153
|
} : undefined,
|
|
161
154
|
onChange: (value, info) => {
|
|
162
155
|
var _props$onChange;
|
|
163
|
-
|
|
164
156
|
let newValue = value;
|
|
165
|
-
|
|
166
157
|
if (props.isMulti && !newValue) {
|
|
167
158
|
newValue = [];
|
|
168
159
|
}
|
|
169
|
-
|
|
170
160
|
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
|
|
171
161
|
target: {
|
|
172
162
|
id: props.id,
|
|
@@ -181,19 +171,21 @@ const AsyncSelectInput = props => {
|
|
|
181
171
|
placeholder: placeholder,
|
|
182
172
|
tabIndex: props.tabIndex,
|
|
183
173
|
tabSelectsValue: props.tabSelectsValue,
|
|
184
|
-
value: props.value
|
|
174
|
+
value: props.value
|
|
175
|
+
// Async react-select props
|
|
185
176
|
,
|
|
186
177
|
defaultOptions: props.defaultOptions,
|
|
187
178
|
loadOptions: props.loadOptions,
|
|
188
|
-
cacheOptions: props.cacheOptions
|
|
179
|
+
cacheOptions: props.cacheOptions
|
|
180
|
+
// Extra props
|
|
189
181
|
// @ts-ignore: passed to the react-select components via `selectProps`.
|
|
190
182
|
,
|
|
191
|
-
iconLeft: props.iconLeft
|
|
183
|
+
iconLeft: props.iconLeft,
|
|
184
|
+
controlShouldRenderValue: props.controlShouldRenderValue
|
|
192
185
|
})
|
|
193
186
|
}))
|
|
194
187
|
});
|
|
195
188
|
};
|
|
196
|
-
|
|
197
189
|
AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
198
190
|
horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
199
191
|
hasError: _pt__default["default"].bool,
|
|
@@ -210,33 +202,34 @@ AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
210
202
|
} : {};
|
|
211
203
|
AsyncSelectInput.displayName = 'AsyncSelectInput';
|
|
212
204
|
AsyncSelectInput.defaultProps = defaultProps;
|
|
205
|
+
|
|
213
206
|
/**
|
|
214
207
|
* Expose static helper methods.
|
|
215
208
|
*/
|
|
209
|
+
|
|
216
210
|
// Formik will set the field to an array on submission, so we always have to
|
|
217
211
|
// deal with an array. The touched state ends up being an empty array in case
|
|
218
212
|
// values were removed only. So we have to treat any array we receive as
|
|
219
213
|
// a signal of the field having been touched.
|
|
220
|
-
|
|
221
214
|
AsyncSelectInput.isTouched = touched => Boolean(touched);
|
|
215
|
+
|
|
222
216
|
/**
|
|
223
217
|
* Expose react-select components for customization purposes.
|
|
224
218
|
*/
|
|
225
|
-
// custom
|
|
226
|
-
|
|
227
219
|
|
|
220
|
+
// custom
|
|
228
221
|
AsyncSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
229
222
|
AsyncSelectInput.Control = reactSelect.components.Control;
|
|
230
223
|
AsyncSelectInput.CrossIcon = reactSelect.components.CrossIcon;
|
|
231
|
-
AsyncSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
232
|
-
|
|
224
|
+
AsyncSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
225
|
+
// custom
|
|
233
226
|
AsyncSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
234
227
|
AsyncSelectInput.Group = reactSelect.components.Group;
|
|
235
228
|
AsyncSelectInput.GroupHeading = reactSelect.components.GroupHeading;
|
|
236
229
|
AsyncSelectInput.IndicatorSeparator = reactSelect.components.IndicatorSeparator;
|
|
237
230
|
AsyncSelectInput.IndicatorsContainer = reactSelect.components.IndicatorsContainer;
|
|
238
|
-
AsyncSelectInput.Input = reactSelect.components.Input;
|
|
239
|
-
|
|
231
|
+
AsyncSelectInput.Input = reactSelect.components.Input;
|
|
232
|
+
// custom
|
|
240
233
|
AsyncSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
|
|
241
234
|
AsyncSelectInput.LoadingMessage = reactSelect.components.LoadingMessage;
|
|
242
235
|
AsyncSelectInput.Menu = reactSelect.components.Menu;
|
|
@@ -244,8 +237,8 @@ AsyncSelectInput.MenuList = reactSelect.components.MenuList;
|
|
|
244
237
|
AsyncSelectInput.MenuPortal = reactSelect.components.MenuPortal;
|
|
245
238
|
AsyncSelectInput.MultiValue = reactSelect.components.MultiValue;
|
|
246
239
|
AsyncSelectInput.MultiValueContainer = reactSelect.components.MultiValueContainer;
|
|
247
|
-
AsyncSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
248
|
-
|
|
240
|
+
AsyncSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
241
|
+
// custom
|
|
249
242
|
AsyncSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
250
243
|
AsyncSelectInput.NoOptionsMessage = reactSelect.components.NoOptionsMessage;
|
|
251
244
|
AsyncSelectInput.Option = reactSelect.components.Option;
|
|
@@ -256,7 +249,7 @@ AsyncSelectInput.ValueContainer = reactSelect.components.ValueContainer;
|
|
|
256
249
|
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
257
250
|
|
|
258
251
|
// NOTE: This string will be replaced on build time with the package version.
|
|
259
|
-
var version = "16.
|
|
252
|
+
var version = "16.1.0";
|
|
260
253
|
|
|
261
254
|
exports["default"] = AsyncSelectInput$1;
|
|
262
255
|
exports.version = version;
|
|
@@ -39,13 +39,10 @@ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
|
39
39
|
var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
|
|
40
40
|
|
|
41
41
|
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; }
|
|
42
|
-
|
|
43
42
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
44
|
-
|
|
45
43
|
const LoadingIndicator = () => jsxRuntime.jsx(LoadingSpinner__default["default"], {
|
|
46
44
|
scale: "s"
|
|
47
45
|
});
|
|
48
|
-
|
|
49
46
|
LoadingIndicator.displayName = 'LoadingIndicator';
|
|
50
47
|
const customizedComponents = {
|
|
51
48
|
DropdownIndicator: selectUtils.DropdownIndicator,
|
|
@@ -58,32 +55,26 @@ const defaultProps = {
|
|
|
58
55
|
// case "undefined" gets passed as the next value
|
|
59
56
|
value: null,
|
|
60
57
|
isSearchable: true,
|
|
61
|
-
menuPortalZIndex: 1
|
|
58
|
+
menuPortalZIndex: 1,
|
|
59
|
+
controlShouldRenderValue: true
|
|
62
60
|
};
|
|
63
|
-
|
|
64
61
|
const AsyncSelectInput = props => {
|
|
65
62
|
const intl = reactIntl.useIntl();
|
|
66
|
-
|
|
67
63
|
const _useTheme = designSystem.useTheme(),
|
|
68
|
-
|
|
69
|
-
|
|
64
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
70
65
|
if (!props.isReadOnly) ;
|
|
71
|
-
|
|
72
66
|
selectUtils.warnIfMenuPortalPropsAreMissing({
|
|
73
67
|
menuPortalZIndex: props.menuPortalZIndex,
|
|
74
68
|
menuPortalTarget: props.menuPortalTarget,
|
|
75
69
|
componentName: 'AsyncSelectInput'
|
|
76
70
|
});
|
|
77
71
|
const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
78
|
-
|
|
79
72
|
const loadingMessage = () => {
|
|
80
73
|
if (typeof props.loadingMessage === 'function') {
|
|
81
74
|
return props.loadingMessage();
|
|
82
75
|
}
|
|
83
|
-
|
|
84
76
|
return props.loadingMessage || intl.formatMessage(selectUtils.messages.loadingOptions);
|
|
85
77
|
};
|
|
86
|
-
|
|
87
78
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
88
79
|
max: props.horizontalConstraint,
|
|
89
80
|
children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
|
|
@@ -110,9 +101,11 @@ const AsyncSelectInput = props => {
|
|
|
110
101
|
iconLeft: props.iconLeft,
|
|
111
102
|
isMulti: props.isMulti,
|
|
112
103
|
hasValue: !isEmpty__default["default"](props.value),
|
|
104
|
+
controlShouldRenderValue: props.controlShouldRenderValue,
|
|
113
105
|
isNewTheme
|
|
114
106
|
}),
|
|
115
|
-
filterOption: props.filterOption
|
|
107
|
+
filterOption: props.filterOption
|
|
108
|
+
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
116
109
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
117
110
|
// instead.
|
|
118
111
|
// This makes it easier to less confusing to use with <label />s.
|
|
@@ -143,11 +136,11 @@ const AsyncSelectInput = props => {
|
|
|
143
136
|
id: props.id,
|
|
144
137
|
name: (() => {
|
|
145
138
|
if (!props.name) return undefined;
|
|
146
|
-
if (!props.isMulti) return props.name;
|
|
139
|
+
if (!props.isMulti) return props.name;
|
|
140
|
+
// We append the ".0" to make Formik set the touched
|
|
147
141
|
// state as an array instead of a boolean only.
|
|
148
142
|
// Otherwise the shapes would clash on submission, as
|
|
149
143
|
// Formik will create an array on submission anyways.
|
|
150
|
-
|
|
151
144
|
return "".concat(props.name, ".0");
|
|
152
145
|
})()
|
|
153
146
|
},
|
|
@@ -157,13 +150,10 @@ const AsyncSelectInput = props => {
|
|
|
157
150
|
} : undefined,
|
|
158
151
|
onChange: (value, info) => {
|
|
159
152
|
var _props$onChange;
|
|
160
|
-
|
|
161
153
|
let newValue = value;
|
|
162
|
-
|
|
163
154
|
if (props.isMulti && !newValue) {
|
|
164
155
|
newValue = [];
|
|
165
156
|
}
|
|
166
|
-
|
|
167
157
|
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
|
|
168
158
|
target: {
|
|
169
159
|
id: props.id,
|
|
@@ -178,49 +168,52 @@ const AsyncSelectInput = props => {
|
|
|
178
168
|
placeholder: placeholder,
|
|
179
169
|
tabIndex: props.tabIndex,
|
|
180
170
|
tabSelectsValue: props.tabSelectsValue,
|
|
181
|
-
value: props.value
|
|
171
|
+
value: props.value
|
|
172
|
+
// Async react-select props
|
|
182
173
|
,
|
|
183
174
|
defaultOptions: props.defaultOptions,
|
|
184
175
|
loadOptions: props.loadOptions,
|
|
185
|
-
cacheOptions: props.cacheOptions
|
|
176
|
+
cacheOptions: props.cacheOptions
|
|
177
|
+
// Extra props
|
|
186
178
|
// @ts-ignore: passed to the react-select components via `selectProps`.
|
|
187
179
|
,
|
|
188
|
-
iconLeft: props.iconLeft
|
|
180
|
+
iconLeft: props.iconLeft,
|
|
181
|
+
controlShouldRenderValue: props.controlShouldRenderValue
|
|
189
182
|
})
|
|
190
183
|
}))
|
|
191
184
|
});
|
|
192
185
|
};
|
|
193
|
-
|
|
194
186
|
AsyncSelectInput.propTypes = {};
|
|
195
187
|
AsyncSelectInput.displayName = 'AsyncSelectInput';
|
|
196
188
|
AsyncSelectInput.defaultProps = defaultProps;
|
|
189
|
+
|
|
197
190
|
/**
|
|
198
191
|
* Expose static helper methods.
|
|
199
192
|
*/
|
|
193
|
+
|
|
200
194
|
// Formik will set the field to an array on submission, so we always have to
|
|
201
195
|
// deal with an array. The touched state ends up being an empty array in case
|
|
202
196
|
// values were removed only. So we have to treat any array we receive as
|
|
203
197
|
// a signal of the field having been touched.
|
|
204
|
-
|
|
205
198
|
AsyncSelectInput.isTouched = touched => Boolean(touched);
|
|
199
|
+
|
|
206
200
|
/**
|
|
207
201
|
* Expose react-select components for customization purposes.
|
|
208
202
|
*/
|
|
209
|
-
// custom
|
|
210
|
-
|
|
211
203
|
|
|
204
|
+
// custom
|
|
212
205
|
AsyncSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
213
206
|
AsyncSelectInput.Control = reactSelect.components.Control;
|
|
214
207
|
AsyncSelectInput.CrossIcon = reactSelect.components.CrossIcon;
|
|
215
|
-
AsyncSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
216
|
-
|
|
208
|
+
AsyncSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
209
|
+
// custom
|
|
217
210
|
AsyncSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
218
211
|
AsyncSelectInput.Group = reactSelect.components.Group;
|
|
219
212
|
AsyncSelectInput.GroupHeading = reactSelect.components.GroupHeading;
|
|
220
213
|
AsyncSelectInput.IndicatorSeparator = reactSelect.components.IndicatorSeparator;
|
|
221
214
|
AsyncSelectInput.IndicatorsContainer = reactSelect.components.IndicatorsContainer;
|
|
222
|
-
AsyncSelectInput.Input = reactSelect.components.Input;
|
|
223
|
-
|
|
215
|
+
AsyncSelectInput.Input = reactSelect.components.Input;
|
|
216
|
+
// custom
|
|
224
217
|
AsyncSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
|
|
225
218
|
AsyncSelectInput.LoadingMessage = reactSelect.components.LoadingMessage;
|
|
226
219
|
AsyncSelectInput.Menu = reactSelect.components.Menu;
|
|
@@ -228,8 +221,8 @@ AsyncSelectInput.MenuList = reactSelect.components.MenuList;
|
|
|
228
221
|
AsyncSelectInput.MenuPortal = reactSelect.components.MenuPortal;
|
|
229
222
|
AsyncSelectInput.MultiValue = reactSelect.components.MultiValue;
|
|
230
223
|
AsyncSelectInput.MultiValueContainer = reactSelect.components.MultiValueContainer;
|
|
231
|
-
AsyncSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
232
|
-
|
|
224
|
+
AsyncSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
225
|
+
// custom
|
|
233
226
|
AsyncSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
234
227
|
AsyncSelectInput.NoOptionsMessage = reactSelect.components.NoOptionsMessage;
|
|
235
228
|
AsyncSelectInput.Option = reactSelect.components.Option;
|
|
@@ -240,7 +233,7 @@ AsyncSelectInput.ValueContainer = reactSelect.components.ValueContainer;
|
|
|
240
233
|
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
241
234
|
|
|
242
235
|
// NOTE: This string will be replaced on build time with the package version.
|
|
243
|
-
var version = "16.
|
|
236
|
+
var version = "16.1.0";
|
|
244
237
|
|
|
245
238
|
exports["default"] = AsyncSelectInput$1;
|
|
246
239
|
exports.version = version;
|
|
@@ -20,13 +20,10 @@ import { useTheme } from '@commercetools-uikit/design-system';
|
|
|
20
20
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
21
21
|
|
|
22
22
|
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; }
|
|
23
|
-
|
|
24
23
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
|
-
|
|
26
24
|
const LoadingIndicator = () => jsx(LoadingSpinner, {
|
|
27
25
|
scale: "s"
|
|
28
26
|
});
|
|
29
|
-
|
|
30
27
|
LoadingIndicator.displayName = 'LoadingIndicator';
|
|
31
28
|
const customizedComponents = {
|
|
32
29
|
DropdownIndicator,
|
|
@@ -39,34 +36,28 @@ const defaultProps = {
|
|
|
39
36
|
// case "undefined" gets passed as the next value
|
|
40
37
|
value: null,
|
|
41
38
|
isSearchable: true,
|
|
42
|
-
menuPortalZIndex: 1
|
|
39
|
+
menuPortalZIndex: 1,
|
|
40
|
+
controlShouldRenderValue: true
|
|
43
41
|
};
|
|
44
|
-
|
|
45
42
|
const AsyncSelectInput = props => {
|
|
46
43
|
const intl = useIntl();
|
|
47
|
-
|
|
48
44
|
const _useTheme = useTheme(),
|
|
49
|
-
|
|
50
|
-
|
|
45
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
51
46
|
if (!props.isReadOnly) {
|
|
52
47
|
process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'AsyncSelectInput: `onChange` is required when input is not read only.') : void 0;
|
|
53
48
|
}
|
|
54
|
-
|
|
55
49
|
warnIfMenuPortalPropsAreMissing({
|
|
56
50
|
menuPortalZIndex: props.menuPortalZIndex,
|
|
57
51
|
menuPortalTarget: props.menuPortalTarget,
|
|
58
52
|
componentName: 'AsyncSelectInput'
|
|
59
53
|
});
|
|
60
54
|
const placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
|
|
61
|
-
|
|
62
55
|
const loadingMessage = () => {
|
|
63
56
|
if (typeof props.loadingMessage === 'function') {
|
|
64
57
|
return props.loadingMessage();
|
|
65
58
|
}
|
|
66
|
-
|
|
67
59
|
return props.loadingMessage || intl.formatMessage(messages.loadingOptions);
|
|
68
60
|
};
|
|
69
|
-
|
|
70
61
|
return jsx(Constraints.Horizontal, {
|
|
71
62
|
max: props.horizontalConstraint,
|
|
72
63
|
children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
|
|
@@ -93,9 +84,11 @@ const AsyncSelectInput = props => {
|
|
|
93
84
|
iconLeft: props.iconLeft,
|
|
94
85
|
isMulti: props.isMulti,
|
|
95
86
|
hasValue: !isEmpty(props.value),
|
|
87
|
+
controlShouldRenderValue: props.controlShouldRenderValue,
|
|
96
88
|
isNewTheme
|
|
97
89
|
}),
|
|
98
|
-
filterOption: props.filterOption
|
|
90
|
+
filterOption: props.filterOption
|
|
91
|
+
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
99
92
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
100
93
|
// instead.
|
|
101
94
|
// This makes it easier to less confusing to use with <label />s.
|
|
@@ -126,11 +119,11 @@ const AsyncSelectInput = props => {
|
|
|
126
119
|
id: props.id,
|
|
127
120
|
name: (() => {
|
|
128
121
|
if (!props.name) return undefined;
|
|
129
|
-
if (!props.isMulti) return props.name;
|
|
122
|
+
if (!props.isMulti) return props.name;
|
|
123
|
+
// We append the ".0" to make Formik set the touched
|
|
130
124
|
// state as an array instead of a boolean only.
|
|
131
125
|
// Otherwise the shapes would clash on submission, as
|
|
132
126
|
// Formik will create an array on submission anyways.
|
|
133
|
-
|
|
134
127
|
return "".concat(props.name, ".0");
|
|
135
128
|
})()
|
|
136
129
|
},
|
|
@@ -140,13 +133,10 @@ const AsyncSelectInput = props => {
|
|
|
140
133
|
} : undefined,
|
|
141
134
|
onChange: (value, info) => {
|
|
142
135
|
var _props$onChange;
|
|
143
|
-
|
|
144
136
|
let newValue = value;
|
|
145
|
-
|
|
146
137
|
if (props.isMulti && !newValue) {
|
|
147
138
|
newValue = [];
|
|
148
139
|
}
|
|
149
|
-
|
|
150
140
|
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
|
|
151
141
|
target: {
|
|
152
142
|
id: props.id,
|
|
@@ -161,19 +151,21 @@ const AsyncSelectInput = props => {
|
|
|
161
151
|
placeholder: placeholder,
|
|
162
152
|
tabIndex: props.tabIndex,
|
|
163
153
|
tabSelectsValue: props.tabSelectsValue,
|
|
164
|
-
value: props.value
|
|
154
|
+
value: props.value
|
|
155
|
+
// Async react-select props
|
|
165
156
|
,
|
|
166
157
|
defaultOptions: props.defaultOptions,
|
|
167
158
|
loadOptions: props.loadOptions,
|
|
168
|
-
cacheOptions: props.cacheOptions
|
|
159
|
+
cacheOptions: props.cacheOptions
|
|
160
|
+
// Extra props
|
|
169
161
|
// @ts-ignore: passed to the react-select components via `selectProps`.
|
|
170
162
|
,
|
|
171
|
-
iconLeft: props.iconLeft
|
|
163
|
+
iconLeft: props.iconLeft,
|
|
164
|
+
controlShouldRenderValue: props.controlShouldRenderValue
|
|
172
165
|
})
|
|
173
166
|
}))
|
|
174
167
|
});
|
|
175
168
|
};
|
|
176
|
-
|
|
177
169
|
AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
178
170
|
horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
179
171
|
hasError: _pt.bool,
|
|
@@ -190,33 +182,34 @@ AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
190
182
|
} : {};
|
|
191
183
|
AsyncSelectInput.displayName = 'AsyncSelectInput';
|
|
192
184
|
AsyncSelectInput.defaultProps = defaultProps;
|
|
185
|
+
|
|
193
186
|
/**
|
|
194
187
|
* Expose static helper methods.
|
|
195
188
|
*/
|
|
189
|
+
|
|
196
190
|
// Formik will set the field to an array on submission, so we always have to
|
|
197
191
|
// deal with an array. The touched state ends up being an empty array in case
|
|
198
192
|
// values were removed only. So we have to treat any array we receive as
|
|
199
193
|
// a signal of the field having been touched.
|
|
200
|
-
|
|
201
194
|
AsyncSelectInput.isTouched = touched => Boolean(touched);
|
|
195
|
+
|
|
202
196
|
/**
|
|
203
197
|
* Expose react-select components for customization purposes.
|
|
204
198
|
*/
|
|
205
|
-
// custom
|
|
206
|
-
|
|
207
199
|
|
|
200
|
+
// custom
|
|
208
201
|
AsyncSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
209
202
|
AsyncSelectInput.Control = components.Control;
|
|
210
203
|
AsyncSelectInput.CrossIcon = components.CrossIcon;
|
|
211
|
-
AsyncSelectInput.DownChevron = components.DownChevron;
|
|
212
|
-
|
|
204
|
+
AsyncSelectInput.DownChevron = components.DownChevron;
|
|
205
|
+
// custom
|
|
213
206
|
AsyncSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
214
207
|
AsyncSelectInput.Group = components.Group;
|
|
215
208
|
AsyncSelectInput.GroupHeading = components.GroupHeading;
|
|
216
209
|
AsyncSelectInput.IndicatorSeparator = components.IndicatorSeparator;
|
|
217
210
|
AsyncSelectInput.IndicatorsContainer = components.IndicatorsContainer;
|
|
218
|
-
AsyncSelectInput.Input = components.Input;
|
|
219
|
-
|
|
211
|
+
AsyncSelectInput.Input = components.Input;
|
|
212
|
+
// custom
|
|
220
213
|
AsyncSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
|
|
221
214
|
AsyncSelectInput.LoadingMessage = components.LoadingMessage;
|
|
222
215
|
AsyncSelectInput.Menu = components.Menu;
|
|
@@ -224,8 +217,8 @@ AsyncSelectInput.MenuList = components.MenuList;
|
|
|
224
217
|
AsyncSelectInput.MenuPortal = components.MenuPortal;
|
|
225
218
|
AsyncSelectInput.MultiValue = components.MultiValue;
|
|
226
219
|
AsyncSelectInput.MultiValueContainer = components.MultiValueContainer;
|
|
227
|
-
AsyncSelectInput.MultiValueLabel = components.MultiValueLabel;
|
|
228
|
-
|
|
220
|
+
AsyncSelectInput.MultiValueLabel = components.MultiValueLabel;
|
|
221
|
+
// custom
|
|
229
222
|
AsyncSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
230
223
|
AsyncSelectInput.NoOptionsMessage = components.NoOptionsMessage;
|
|
231
224
|
AsyncSelectInput.Option = components.Option;
|
|
@@ -236,6 +229,6 @@ AsyncSelectInput.ValueContainer = components.ValueContainer;
|
|
|
236
229
|
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
237
230
|
|
|
238
231
|
// NOTE: This string will be replaced on build time with the package version.
|
|
239
|
-
var version = "16.
|
|
232
|
+
var version = "16.1.0";
|
|
240
233
|
|
|
241
234
|
export { AsyncSelectInput$1 as default, version };
|
|
@@ -22,6 +22,7 @@ export type TAsyncSelectInputProps = {
|
|
|
22
22
|
isAutofocussed?: boolean;
|
|
23
23
|
backspaceRemovesValue?: ReactSelectAsyncProps['backspaceRemovesValue'];
|
|
24
24
|
components?: ReactSelectAsyncProps['components'];
|
|
25
|
+
controlShouldRenderValue?: ReactSelectAsyncProps['controlShouldRenderValue'];
|
|
25
26
|
filterOption?: ReactSelectAsyncProps['filterOption'];
|
|
26
27
|
id?: ReactSelectAsyncProps['inputId'];
|
|
27
28
|
inputValue?: ReactSelectAsyncProps['inputValue'];
|
|
@@ -56,7 +57,7 @@ export type TAsyncSelectInputProps = {
|
|
|
56
57
|
declare const AsyncSelectInput: {
|
|
57
58
|
(props: TAsyncSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
58
59
|
displayName: string;
|
|
59
|
-
defaultProps: Pick<TAsyncSelectInputProps, "value" | "isSearchable" | "menuPortalZIndex">;
|
|
60
|
+
defaultProps: Pick<TAsyncSelectInputProps, "value" | "controlShouldRenderValue" | "isSearchable" | "menuPortalZIndex">;
|
|
60
61
|
isTouched(touched: unknown): boolean;
|
|
61
62
|
ClearIndicator: {
|
|
62
63
|
(props: import("@commercetools-uikit/select-utils").TClearIndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/async-select-input",
|
|
3
3
|
"description": "An input component getting a selection from an asynchronously loaded list from the user.",
|
|
4
|
-
"version": "16.
|
|
4
|
+
"version": "16.1.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,19 +21,19 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/constraints": "16.
|
|
25
|
-
"@commercetools-uikit/design-system": "16.
|
|
26
|
-
"@commercetools-uikit/icons": "16.
|
|
27
|
-
"@commercetools-uikit/loading-spinner": "16.
|
|
28
|
-
"@commercetools-uikit/select-utils": "16.
|
|
29
|
-
"@commercetools-uikit/spacings": "16.
|
|
30
|
-
"@commercetools-uikit/text": "16.
|
|
31
|
-
"@commercetools-uikit/utils": "16.
|
|
24
|
+
"@commercetools-uikit/constraints": "16.1.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "16.1.0",
|
|
26
|
+
"@commercetools-uikit/icons": "16.1.0",
|
|
27
|
+
"@commercetools-uikit/loading-spinner": "16.1.0",
|
|
28
|
+
"@commercetools-uikit/select-utils": "16.1.0",
|
|
29
|
+
"@commercetools-uikit/spacings": "16.1.0",
|
|
30
|
+
"@commercetools-uikit/text": "16.1.0",
|
|
31
|
+
"@commercetools-uikit/utils": "16.1.0",
|
|
32
32
|
"@emotion/react": "^11.10.5",
|
|
33
33
|
"@emotion/styled": "^11.10.5",
|
|
34
34
|
"lodash": "4.17.21",
|
|
35
35
|
"prop-types": "15.8.1",
|
|
36
|
-
"react-select": "5.7.
|
|
36
|
+
"react-select": "5.7.3"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"react": "17.0.2",
|