@commercetools-uikit/async-select-input 16.0.0 → 16.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -43
- package/dist/commercetools-uikit-async-select-input.cjs.dev.js +24 -35
- package/dist/commercetools-uikit-async-select-input.cjs.prod.js +24 -35
- package/dist/commercetools-uikit-async-select-input.esm.js +24 -35
- 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
|
|
|
@@ -20,7 +20,6 @@ var utils = require('@commercetools-uikit/utils');
|
|
|
20
20
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
21
21
|
var LoadingSpinner = require('@commercetools-uikit/loading-spinner');
|
|
22
22
|
var selectUtils = require('@commercetools-uikit/select-utils');
|
|
23
|
-
var designSystem = require('@commercetools-uikit/design-system');
|
|
24
23
|
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
25
24
|
|
|
26
25
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
@@ -40,13 +39,10 @@ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
|
40
39
|
var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
|
|
41
40
|
|
|
42
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; }
|
|
43
|
-
|
|
44
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; }
|
|
45
|
-
|
|
46
43
|
const LoadingIndicator = () => jsxRuntime.jsx(LoadingSpinner__default["default"], {
|
|
47
44
|
scale: "s"
|
|
48
45
|
});
|
|
49
|
-
|
|
50
46
|
LoadingIndicator.displayName = 'LoadingIndicator';
|
|
51
47
|
const customizedComponents = {
|
|
52
48
|
DropdownIndicator: selectUtils.DropdownIndicator,
|
|
@@ -59,34 +55,26 @@ const defaultProps = {
|
|
|
59
55
|
// case "undefined" gets passed as the next value
|
|
60
56
|
value: null,
|
|
61
57
|
isSearchable: true,
|
|
62
|
-
menuPortalZIndex: 1
|
|
58
|
+
menuPortalZIndex: 1,
|
|
59
|
+
controlShouldRenderValue: true
|
|
63
60
|
};
|
|
64
|
-
|
|
65
61
|
const AsyncSelectInput = props => {
|
|
66
62
|
const intl = reactIntl.useIntl();
|
|
67
|
-
|
|
68
|
-
const _useTheme = designSystem.useTheme(),
|
|
69
|
-
isNewTheme = _useTheme.isNewTheme;
|
|
70
|
-
|
|
71
63
|
if (!props.isReadOnly) {
|
|
72
64
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'AsyncSelectInput: `onChange` is required when input is not read only.') : void 0;
|
|
73
65
|
}
|
|
74
|
-
|
|
75
66
|
selectUtils.warnIfMenuPortalPropsAreMissing({
|
|
76
67
|
menuPortalZIndex: props.menuPortalZIndex,
|
|
77
68
|
menuPortalTarget: props.menuPortalTarget,
|
|
78
69
|
componentName: 'AsyncSelectInput'
|
|
79
70
|
});
|
|
80
71
|
const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
81
|
-
|
|
82
72
|
const loadingMessage = () => {
|
|
83
73
|
if (typeof props.loadingMessage === 'function') {
|
|
84
74
|
return props.loadingMessage();
|
|
85
75
|
}
|
|
86
|
-
|
|
87
76
|
return props.loadingMessage || intl.formatMessage(selectUtils.messages.loadingOptions);
|
|
88
77
|
};
|
|
89
|
-
|
|
90
78
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
91
79
|
max: props.horizontalConstraint,
|
|
92
80
|
children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
|
|
@@ -113,9 +101,10 @@ const AsyncSelectInput = props => {
|
|
|
113
101
|
iconLeft: props.iconLeft,
|
|
114
102
|
isMulti: props.isMulti,
|
|
115
103
|
hasValue: !isEmpty__default["default"](props.value),
|
|
116
|
-
|
|
104
|
+
controlShouldRenderValue: props.controlShouldRenderValue
|
|
117
105
|
}),
|
|
118
|
-
filterOption: props.filterOption
|
|
106
|
+
filterOption: props.filterOption
|
|
107
|
+
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
119
108
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
120
109
|
// instead.
|
|
121
110
|
// This makes it easier to less confusing to use with <label />s.
|
|
@@ -146,11 +135,11 @@ const AsyncSelectInput = props => {
|
|
|
146
135
|
id: props.id,
|
|
147
136
|
name: (() => {
|
|
148
137
|
if (!props.name) return undefined;
|
|
149
|
-
if (!props.isMulti) return props.name;
|
|
138
|
+
if (!props.isMulti) return props.name;
|
|
139
|
+
// We append the ".0" to make Formik set the touched
|
|
150
140
|
// state as an array instead of a boolean only.
|
|
151
141
|
// Otherwise the shapes would clash on submission, as
|
|
152
142
|
// Formik will create an array on submission anyways.
|
|
153
|
-
|
|
154
143
|
return "".concat(props.name, ".0");
|
|
155
144
|
})()
|
|
156
145
|
},
|
|
@@ -160,13 +149,10 @@ const AsyncSelectInput = props => {
|
|
|
160
149
|
} : undefined,
|
|
161
150
|
onChange: (value, info) => {
|
|
162
151
|
var _props$onChange;
|
|
163
|
-
|
|
164
152
|
let newValue = value;
|
|
165
|
-
|
|
166
153
|
if (props.isMulti && !newValue) {
|
|
167
154
|
newValue = [];
|
|
168
155
|
}
|
|
169
|
-
|
|
170
156
|
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
|
|
171
157
|
target: {
|
|
172
158
|
id: props.id,
|
|
@@ -181,19 +167,21 @@ const AsyncSelectInput = props => {
|
|
|
181
167
|
placeholder: placeholder,
|
|
182
168
|
tabIndex: props.tabIndex,
|
|
183
169
|
tabSelectsValue: props.tabSelectsValue,
|
|
184
|
-
value: props.value
|
|
170
|
+
value: props.value
|
|
171
|
+
// Async react-select props
|
|
185
172
|
,
|
|
186
173
|
defaultOptions: props.defaultOptions,
|
|
187
174
|
loadOptions: props.loadOptions,
|
|
188
|
-
cacheOptions: props.cacheOptions
|
|
175
|
+
cacheOptions: props.cacheOptions
|
|
176
|
+
// Extra props
|
|
189
177
|
// @ts-ignore: passed to the react-select components via `selectProps`.
|
|
190
178
|
,
|
|
191
|
-
iconLeft: props.iconLeft
|
|
179
|
+
iconLeft: props.iconLeft,
|
|
180
|
+
controlShouldRenderValue: props.controlShouldRenderValue
|
|
192
181
|
})
|
|
193
182
|
}))
|
|
194
183
|
});
|
|
195
184
|
};
|
|
196
|
-
|
|
197
185
|
AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
198
186
|
horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
199
187
|
hasError: _pt__default["default"].bool,
|
|
@@ -210,33 +198,34 @@ AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
210
198
|
} : {};
|
|
211
199
|
AsyncSelectInput.displayName = 'AsyncSelectInput';
|
|
212
200
|
AsyncSelectInput.defaultProps = defaultProps;
|
|
201
|
+
|
|
213
202
|
/**
|
|
214
203
|
* Expose static helper methods.
|
|
215
204
|
*/
|
|
205
|
+
|
|
216
206
|
// Formik will set the field to an array on submission, so we always have to
|
|
217
207
|
// deal with an array. The touched state ends up being an empty array in case
|
|
218
208
|
// values were removed only. So we have to treat any array we receive as
|
|
219
209
|
// a signal of the field having been touched.
|
|
220
|
-
|
|
221
210
|
AsyncSelectInput.isTouched = touched => Boolean(touched);
|
|
211
|
+
|
|
222
212
|
/**
|
|
223
213
|
* Expose react-select components for customization purposes.
|
|
224
214
|
*/
|
|
225
|
-
// custom
|
|
226
|
-
|
|
227
215
|
|
|
216
|
+
// custom
|
|
228
217
|
AsyncSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
229
218
|
AsyncSelectInput.Control = reactSelect.components.Control;
|
|
230
219
|
AsyncSelectInput.CrossIcon = reactSelect.components.CrossIcon;
|
|
231
|
-
AsyncSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
232
|
-
|
|
220
|
+
AsyncSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
221
|
+
// custom
|
|
233
222
|
AsyncSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
234
223
|
AsyncSelectInput.Group = reactSelect.components.Group;
|
|
235
224
|
AsyncSelectInput.GroupHeading = reactSelect.components.GroupHeading;
|
|
236
225
|
AsyncSelectInput.IndicatorSeparator = reactSelect.components.IndicatorSeparator;
|
|
237
226
|
AsyncSelectInput.IndicatorsContainer = reactSelect.components.IndicatorsContainer;
|
|
238
|
-
AsyncSelectInput.Input = reactSelect.components.Input;
|
|
239
|
-
|
|
227
|
+
AsyncSelectInput.Input = reactSelect.components.Input;
|
|
228
|
+
// custom
|
|
240
229
|
AsyncSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
|
|
241
230
|
AsyncSelectInput.LoadingMessage = reactSelect.components.LoadingMessage;
|
|
242
231
|
AsyncSelectInput.Menu = reactSelect.components.Menu;
|
|
@@ -244,8 +233,8 @@ AsyncSelectInput.MenuList = reactSelect.components.MenuList;
|
|
|
244
233
|
AsyncSelectInput.MenuPortal = reactSelect.components.MenuPortal;
|
|
245
234
|
AsyncSelectInput.MultiValue = reactSelect.components.MultiValue;
|
|
246
235
|
AsyncSelectInput.MultiValueContainer = reactSelect.components.MultiValueContainer;
|
|
247
|
-
AsyncSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
248
|
-
|
|
236
|
+
AsyncSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
237
|
+
// custom
|
|
249
238
|
AsyncSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
250
239
|
AsyncSelectInput.NoOptionsMessage = reactSelect.components.NoOptionsMessage;
|
|
251
240
|
AsyncSelectInput.Option = reactSelect.components.Option;
|
|
@@ -256,7 +245,7 @@ AsyncSelectInput.ValueContainer = reactSelect.components.ValueContainer;
|
|
|
256
245
|
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
257
246
|
|
|
258
247
|
// NOTE: This string will be replaced on build time with the package version.
|
|
259
|
-
var version = "16.
|
|
248
|
+
var version = "16.1.1";
|
|
260
249
|
|
|
261
250
|
exports["default"] = AsyncSelectInput$1;
|
|
262
251
|
exports.version = version;
|
|
@@ -20,7 +20,6 @@ var utils = require('@commercetools-uikit/utils');
|
|
|
20
20
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
21
21
|
var LoadingSpinner = require('@commercetools-uikit/loading-spinner');
|
|
22
22
|
var selectUtils = require('@commercetools-uikit/select-utils');
|
|
23
|
-
var designSystem = require('@commercetools-uikit/design-system');
|
|
24
23
|
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
25
24
|
|
|
26
25
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
@@ -39,13 +38,10 @@ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
|
39
38
|
var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
|
|
40
39
|
|
|
41
40
|
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
41
|
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
42
|
const LoadingIndicator = () => jsxRuntime.jsx(LoadingSpinner__default["default"], {
|
|
46
43
|
scale: "s"
|
|
47
44
|
});
|
|
48
|
-
|
|
49
45
|
LoadingIndicator.displayName = 'LoadingIndicator';
|
|
50
46
|
const customizedComponents = {
|
|
51
47
|
DropdownIndicator: selectUtils.DropdownIndicator,
|
|
@@ -58,32 +54,24 @@ const defaultProps = {
|
|
|
58
54
|
// case "undefined" gets passed as the next value
|
|
59
55
|
value: null,
|
|
60
56
|
isSearchable: true,
|
|
61
|
-
menuPortalZIndex: 1
|
|
57
|
+
menuPortalZIndex: 1,
|
|
58
|
+
controlShouldRenderValue: true
|
|
62
59
|
};
|
|
63
|
-
|
|
64
60
|
const AsyncSelectInput = props => {
|
|
65
61
|
const intl = reactIntl.useIntl();
|
|
66
|
-
|
|
67
|
-
const _useTheme = designSystem.useTheme(),
|
|
68
|
-
isNewTheme = _useTheme.isNewTheme;
|
|
69
|
-
|
|
70
62
|
if (!props.isReadOnly) ;
|
|
71
|
-
|
|
72
63
|
selectUtils.warnIfMenuPortalPropsAreMissing({
|
|
73
64
|
menuPortalZIndex: props.menuPortalZIndex,
|
|
74
65
|
menuPortalTarget: props.menuPortalTarget,
|
|
75
66
|
componentName: 'AsyncSelectInput'
|
|
76
67
|
});
|
|
77
68
|
const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
78
|
-
|
|
79
69
|
const loadingMessage = () => {
|
|
80
70
|
if (typeof props.loadingMessage === 'function') {
|
|
81
71
|
return props.loadingMessage();
|
|
82
72
|
}
|
|
83
|
-
|
|
84
73
|
return props.loadingMessage || intl.formatMessage(selectUtils.messages.loadingOptions);
|
|
85
74
|
};
|
|
86
|
-
|
|
87
75
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
88
76
|
max: props.horizontalConstraint,
|
|
89
77
|
children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
|
|
@@ -110,9 +98,10 @@ const AsyncSelectInput = props => {
|
|
|
110
98
|
iconLeft: props.iconLeft,
|
|
111
99
|
isMulti: props.isMulti,
|
|
112
100
|
hasValue: !isEmpty__default["default"](props.value),
|
|
113
|
-
|
|
101
|
+
controlShouldRenderValue: props.controlShouldRenderValue
|
|
114
102
|
}),
|
|
115
|
-
filterOption: props.filterOption
|
|
103
|
+
filterOption: props.filterOption
|
|
104
|
+
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
116
105
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
117
106
|
// instead.
|
|
118
107
|
// This makes it easier to less confusing to use with <label />s.
|
|
@@ -143,11 +132,11 @@ const AsyncSelectInput = props => {
|
|
|
143
132
|
id: props.id,
|
|
144
133
|
name: (() => {
|
|
145
134
|
if (!props.name) return undefined;
|
|
146
|
-
if (!props.isMulti) return props.name;
|
|
135
|
+
if (!props.isMulti) return props.name;
|
|
136
|
+
// We append the ".0" to make Formik set the touched
|
|
147
137
|
// state as an array instead of a boolean only.
|
|
148
138
|
// Otherwise the shapes would clash on submission, as
|
|
149
139
|
// Formik will create an array on submission anyways.
|
|
150
|
-
|
|
151
140
|
return "".concat(props.name, ".0");
|
|
152
141
|
})()
|
|
153
142
|
},
|
|
@@ -157,13 +146,10 @@ const AsyncSelectInput = props => {
|
|
|
157
146
|
} : undefined,
|
|
158
147
|
onChange: (value, info) => {
|
|
159
148
|
var _props$onChange;
|
|
160
|
-
|
|
161
149
|
let newValue = value;
|
|
162
|
-
|
|
163
150
|
if (props.isMulti && !newValue) {
|
|
164
151
|
newValue = [];
|
|
165
152
|
}
|
|
166
|
-
|
|
167
153
|
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
|
|
168
154
|
target: {
|
|
169
155
|
id: props.id,
|
|
@@ -178,49 +164,52 @@ const AsyncSelectInput = props => {
|
|
|
178
164
|
placeholder: placeholder,
|
|
179
165
|
tabIndex: props.tabIndex,
|
|
180
166
|
tabSelectsValue: props.tabSelectsValue,
|
|
181
|
-
value: props.value
|
|
167
|
+
value: props.value
|
|
168
|
+
// Async react-select props
|
|
182
169
|
,
|
|
183
170
|
defaultOptions: props.defaultOptions,
|
|
184
171
|
loadOptions: props.loadOptions,
|
|
185
|
-
cacheOptions: props.cacheOptions
|
|
172
|
+
cacheOptions: props.cacheOptions
|
|
173
|
+
// Extra props
|
|
186
174
|
// @ts-ignore: passed to the react-select components via `selectProps`.
|
|
187
175
|
,
|
|
188
|
-
iconLeft: props.iconLeft
|
|
176
|
+
iconLeft: props.iconLeft,
|
|
177
|
+
controlShouldRenderValue: props.controlShouldRenderValue
|
|
189
178
|
})
|
|
190
179
|
}))
|
|
191
180
|
});
|
|
192
181
|
};
|
|
193
|
-
|
|
194
182
|
AsyncSelectInput.propTypes = {};
|
|
195
183
|
AsyncSelectInput.displayName = 'AsyncSelectInput';
|
|
196
184
|
AsyncSelectInput.defaultProps = defaultProps;
|
|
185
|
+
|
|
197
186
|
/**
|
|
198
187
|
* Expose static helper methods.
|
|
199
188
|
*/
|
|
189
|
+
|
|
200
190
|
// Formik will set the field to an array on submission, so we always have to
|
|
201
191
|
// deal with an array. The touched state ends up being an empty array in case
|
|
202
192
|
// values were removed only. So we have to treat any array we receive as
|
|
203
193
|
// a signal of the field having been touched.
|
|
204
|
-
|
|
205
194
|
AsyncSelectInput.isTouched = touched => Boolean(touched);
|
|
195
|
+
|
|
206
196
|
/**
|
|
207
197
|
* Expose react-select components for customization purposes.
|
|
208
198
|
*/
|
|
209
|
-
// custom
|
|
210
|
-
|
|
211
199
|
|
|
200
|
+
// custom
|
|
212
201
|
AsyncSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
213
202
|
AsyncSelectInput.Control = reactSelect.components.Control;
|
|
214
203
|
AsyncSelectInput.CrossIcon = reactSelect.components.CrossIcon;
|
|
215
|
-
AsyncSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
216
|
-
|
|
204
|
+
AsyncSelectInput.DownChevron = reactSelect.components.DownChevron;
|
|
205
|
+
// custom
|
|
217
206
|
AsyncSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
218
207
|
AsyncSelectInput.Group = reactSelect.components.Group;
|
|
219
208
|
AsyncSelectInput.GroupHeading = reactSelect.components.GroupHeading;
|
|
220
209
|
AsyncSelectInput.IndicatorSeparator = reactSelect.components.IndicatorSeparator;
|
|
221
210
|
AsyncSelectInput.IndicatorsContainer = reactSelect.components.IndicatorsContainer;
|
|
222
|
-
AsyncSelectInput.Input = reactSelect.components.Input;
|
|
223
|
-
|
|
211
|
+
AsyncSelectInput.Input = reactSelect.components.Input;
|
|
212
|
+
// custom
|
|
224
213
|
AsyncSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
|
|
225
214
|
AsyncSelectInput.LoadingMessage = reactSelect.components.LoadingMessage;
|
|
226
215
|
AsyncSelectInput.Menu = reactSelect.components.Menu;
|
|
@@ -228,8 +217,8 @@ AsyncSelectInput.MenuList = reactSelect.components.MenuList;
|
|
|
228
217
|
AsyncSelectInput.MenuPortal = reactSelect.components.MenuPortal;
|
|
229
218
|
AsyncSelectInput.MultiValue = reactSelect.components.MultiValue;
|
|
230
219
|
AsyncSelectInput.MultiValueContainer = reactSelect.components.MultiValueContainer;
|
|
231
|
-
AsyncSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
232
|
-
|
|
220
|
+
AsyncSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
|
|
221
|
+
// custom
|
|
233
222
|
AsyncSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
234
223
|
AsyncSelectInput.NoOptionsMessage = reactSelect.components.NoOptionsMessage;
|
|
235
224
|
AsyncSelectInput.Option = reactSelect.components.Option;
|
|
@@ -240,7 +229,7 @@ AsyncSelectInput.ValueContainer = reactSelect.components.ValueContainer;
|
|
|
240
229
|
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
241
230
|
|
|
242
231
|
// NOTE: This string will be replaced on build time with the package version.
|
|
243
|
-
var version = "16.
|
|
232
|
+
var version = "16.1.1";
|
|
244
233
|
|
|
245
234
|
exports["default"] = AsyncSelectInput$1;
|
|
246
235
|
exports.version = version;
|
|
@@ -16,17 +16,13 @@ import { warning, filterDataAttributes } from '@commercetools-uikit/utils';
|
|
|
16
16
|
import Constraints from '@commercetools-uikit/constraints';
|
|
17
17
|
import LoadingSpinner from '@commercetools-uikit/loading-spinner';
|
|
18
18
|
import { warnIfMenuPortalPropsAreMissing, messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
|
|
19
|
-
import { useTheme } from '@commercetools-uikit/design-system';
|
|
20
19
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
21
20
|
|
|
22
21
|
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
22
|
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
23
|
const LoadingIndicator = () => jsx(LoadingSpinner, {
|
|
27
24
|
scale: "s"
|
|
28
25
|
});
|
|
29
|
-
|
|
30
26
|
LoadingIndicator.displayName = 'LoadingIndicator';
|
|
31
27
|
const customizedComponents = {
|
|
32
28
|
DropdownIndicator,
|
|
@@ -39,34 +35,26 @@ const defaultProps = {
|
|
|
39
35
|
// case "undefined" gets passed as the next value
|
|
40
36
|
value: null,
|
|
41
37
|
isSearchable: true,
|
|
42
|
-
menuPortalZIndex: 1
|
|
38
|
+
menuPortalZIndex: 1,
|
|
39
|
+
controlShouldRenderValue: true
|
|
43
40
|
};
|
|
44
|
-
|
|
45
41
|
const AsyncSelectInput = props => {
|
|
46
42
|
const intl = useIntl();
|
|
47
|
-
|
|
48
|
-
const _useTheme = useTheme(),
|
|
49
|
-
isNewTheme = _useTheme.isNewTheme;
|
|
50
|
-
|
|
51
43
|
if (!props.isReadOnly) {
|
|
52
44
|
process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'AsyncSelectInput: `onChange` is required when input is not read only.') : void 0;
|
|
53
45
|
}
|
|
54
|
-
|
|
55
46
|
warnIfMenuPortalPropsAreMissing({
|
|
56
47
|
menuPortalZIndex: props.menuPortalZIndex,
|
|
57
48
|
menuPortalTarget: props.menuPortalTarget,
|
|
58
49
|
componentName: 'AsyncSelectInput'
|
|
59
50
|
});
|
|
60
51
|
const placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
|
|
61
|
-
|
|
62
52
|
const loadingMessage = () => {
|
|
63
53
|
if (typeof props.loadingMessage === 'function') {
|
|
64
54
|
return props.loadingMessage();
|
|
65
55
|
}
|
|
66
|
-
|
|
67
56
|
return props.loadingMessage || intl.formatMessage(messages.loadingOptions);
|
|
68
57
|
};
|
|
69
|
-
|
|
70
58
|
return jsx(Constraints.Horizontal, {
|
|
71
59
|
max: props.horizontalConstraint,
|
|
72
60
|
children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
|
|
@@ -93,9 +81,10 @@ const AsyncSelectInput = props => {
|
|
|
93
81
|
iconLeft: props.iconLeft,
|
|
94
82
|
isMulti: props.isMulti,
|
|
95
83
|
hasValue: !isEmpty(props.value),
|
|
96
|
-
|
|
84
|
+
controlShouldRenderValue: props.controlShouldRenderValue
|
|
97
85
|
}),
|
|
98
|
-
filterOption: props.filterOption
|
|
86
|
+
filterOption: props.filterOption
|
|
87
|
+
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
99
88
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
100
89
|
// instead.
|
|
101
90
|
// This makes it easier to less confusing to use with <label />s.
|
|
@@ -126,11 +115,11 @@ const AsyncSelectInput = props => {
|
|
|
126
115
|
id: props.id,
|
|
127
116
|
name: (() => {
|
|
128
117
|
if (!props.name) return undefined;
|
|
129
|
-
if (!props.isMulti) return props.name;
|
|
118
|
+
if (!props.isMulti) return props.name;
|
|
119
|
+
// We append the ".0" to make Formik set the touched
|
|
130
120
|
// state as an array instead of a boolean only.
|
|
131
121
|
// Otherwise the shapes would clash on submission, as
|
|
132
122
|
// Formik will create an array on submission anyways.
|
|
133
|
-
|
|
134
123
|
return "".concat(props.name, ".0");
|
|
135
124
|
})()
|
|
136
125
|
},
|
|
@@ -140,13 +129,10 @@ const AsyncSelectInput = props => {
|
|
|
140
129
|
} : undefined,
|
|
141
130
|
onChange: (value, info) => {
|
|
142
131
|
var _props$onChange;
|
|
143
|
-
|
|
144
132
|
let newValue = value;
|
|
145
|
-
|
|
146
133
|
if (props.isMulti && !newValue) {
|
|
147
134
|
newValue = [];
|
|
148
135
|
}
|
|
149
|
-
|
|
150
136
|
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
|
|
151
137
|
target: {
|
|
152
138
|
id: props.id,
|
|
@@ -161,19 +147,21 @@ const AsyncSelectInput = props => {
|
|
|
161
147
|
placeholder: placeholder,
|
|
162
148
|
tabIndex: props.tabIndex,
|
|
163
149
|
tabSelectsValue: props.tabSelectsValue,
|
|
164
|
-
value: props.value
|
|
150
|
+
value: props.value
|
|
151
|
+
// Async react-select props
|
|
165
152
|
,
|
|
166
153
|
defaultOptions: props.defaultOptions,
|
|
167
154
|
loadOptions: props.loadOptions,
|
|
168
|
-
cacheOptions: props.cacheOptions
|
|
155
|
+
cacheOptions: props.cacheOptions
|
|
156
|
+
// Extra props
|
|
169
157
|
// @ts-ignore: passed to the react-select components via `selectProps`.
|
|
170
158
|
,
|
|
171
|
-
iconLeft: props.iconLeft
|
|
159
|
+
iconLeft: props.iconLeft,
|
|
160
|
+
controlShouldRenderValue: props.controlShouldRenderValue
|
|
172
161
|
})
|
|
173
162
|
}))
|
|
174
163
|
});
|
|
175
164
|
};
|
|
176
|
-
|
|
177
165
|
AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
178
166
|
horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
179
167
|
hasError: _pt.bool,
|
|
@@ -190,33 +178,34 @@ AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
190
178
|
} : {};
|
|
191
179
|
AsyncSelectInput.displayName = 'AsyncSelectInput';
|
|
192
180
|
AsyncSelectInput.defaultProps = defaultProps;
|
|
181
|
+
|
|
193
182
|
/**
|
|
194
183
|
* Expose static helper methods.
|
|
195
184
|
*/
|
|
185
|
+
|
|
196
186
|
// Formik will set the field to an array on submission, so we always have to
|
|
197
187
|
// deal with an array. The touched state ends up being an empty array in case
|
|
198
188
|
// values were removed only. So we have to treat any array we receive as
|
|
199
189
|
// a signal of the field having been touched.
|
|
200
|
-
|
|
201
190
|
AsyncSelectInput.isTouched = touched => Boolean(touched);
|
|
191
|
+
|
|
202
192
|
/**
|
|
203
193
|
* Expose react-select components for customization purposes.
|
|
204
194
|
*/
|
|
205
|
-
// custom
|
|
206
|
-
|
|
207
195
|
|
|
196
|
+
// custom
|
|
208
197
|
AsyncSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
209
198
|
AsyncSelectInput.Control = components.Control;
|
|
210
199
|
AsyncSelectInput.CrossIcon = components.CrossIcon;
|
|
211
|
-
AsyncSelectInput.DownChevron = components.DownChevron;
|
|
212
|
-
|
|
200
|
+
AsyncSelectInput.DownChevron = components.DownChevron;
|
|
201
|
+
// custom
|
|
213
202
|
AsyncSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
214
203
|
AsyncSelectInput.Group = components.Group;
|
|
215
204
|
AsyncSelectInput.GroupHeading = components.GroupHeading;
|
|
216
205
|
AsyncSelectInput.IndicatorSeparator = components.IndicatorSeparator;
|
|
217
206
|
AsyncSelectInput.IndicatorsContainer = components.IndicatorsContainer;
|
|
218
|
-
AsyncSelectInput.Input = components.Input;
|
|
219
|
-
|
|
207
|
+
AsyncSelectInput.Input = components.Input;
|
|
208
|
+
// custom
|
|
220
209
|
AsyncSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
|
|
221
210
|
AsyncSelectInput.LoadingMessage = components.LoadingMessage;
|
|
222
211
|
AsyncSelectInput.Menu = components.Menu;
|
|
@@ -224,8 +213,8 @@ AsyncSelectInput.MenuList = components.MenuList;
|
|
|
224
213
|
AsyncSelectInput.MenuPortal = components.MenuPortal;
|
|
225
214
|
AsyncSelectInput.MultiValue = components.MultiValue;
|
|
226
215
|
AsyncSelectInput.MultiValueContainer = components.MultiValueContainer;
|
|
227
|
-
AsyncSelectInput.MultiValueLabel = components.MultiValueLabel;
|
|
228
|
-
|
|
216
|
+
AsyncSelectInput.MultiValueLabel = components.MultiValueLabel;
|
|
217
|
+
// custom
|
|
229
218
|
AsyncSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
230
219
|
AsyncSelectInput.NoOptionsMessage = components.NoOptionsMessage;
|
|
231
220
|
AsyncSelectInput.Option = components.Option;
|
|
@@ -236,6 +225,6 @@ AsyncSelectInput.ValueContainer = components.ValueContainer;
|
|
|
236
225
|
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
237
226
|
|
|
238
227
|
// NOTE: This string will be replaced on build time with the package version.
|
|
239
|
-
var version = "16.
|
|
228
|
+
var version = "16.1.1";
|
|
240
229
|
|
|
241
230
|
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.1",
|
|
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.1",
|
|
25
|
+
"@commercetools-uikit/design-system": "16.1.1",
|
|
26
|
+
"@commercetools-uikit/icons": "16.1.1",
|
|
27
|
+
"@commercetools-uikit/loading-spinner": "16.1.1",
|
|
28
|
+
"@commercetools-uikit/select-utils": "16.1.1",
|
|
29
|
+
"@commercetools-uikit/spacings": "16.1.1",
|
|
30
|
+
"@commercetools-uikit/text": "16.1.1",
|
|
31
|
+
"@commercetools-uikit/utils": "16.1.1",
|
|
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",
|