@commercetools-uikit/async-creatable-select-input 13.0.2 → 14.0.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 +10 -9
- package/dist/commercetools-uikit-async-creatable-select-input.cjs.dev.js +46 -11
- package/dist/commercetools-uikit-async-creatable-select-input.cjs.prod.js +46 -11
- package/dist/commercetools-uikit-async-creatable-select-input.esm.js +48 -13
- package/dist/declarations/src/async-creatable-select-input.d.ts +58 -1
- package/package.json +13 -13
package/README.md
CHANGED
|
@@ -67,6 +67,8 @@ export default Example;
|
|
|
67
67
|
| `iconLeft` | `ReactNode` | | | Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled. |
|
|
68
68
|
| `aria-label` | `AsyncCreatableProps['aria-label']` | | | Aria label (for assistive tech)
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
69
69
|
| `aria-labelledby` | `AsyncCreatableProps['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) |
|
|
70
|
+
| `aria-invalid` | `AsyncCreatableProps['aria-invalid']` | | | Indicate if the value entered in the input is invalid.
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
71
|
+
| `aria-errormessage` | `AsyncCreatableProps['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) |
|
|
70
72
|
| `isAutofocussed` | `boolean` | | | Focus the control when it is mounted |
|
|
71
73
|
| `backspaceRemovesValue` | `AsyncCreatableProps['backspaceRemovesValue']` | | | Remove the currently focused option when the user presses backspace
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
72
74
|
| `components` | `AsyncCreatableProps['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) |
|
|
@@ -128,36 +130,35 @@ In case you need one of the currently excluded props, feel free to open a PR add
|
|
|
128
130
|
|
|
129
131
|
#### `isTouched(touched)`
|
|
130
132
|
|
|
131
|
-
|
|
132
|
-
Returns `true` when truthy.
|
|
133
|
+
Returns truthy value for the Formik `touched` value of this input field.
|
|
133
134
|
|
|
134
|
-
|
|
135
|
+
## Components
|
|
135
136
|
|
|
136
|
-
It is possible to customize `
|
|
137
|
-
`
|
|
137
|
+
It is possible to customize `AsyncCreatableSelectInput` by passing the `components` property.
|
|
138
|
+
`AsyncCreatableSelectInput` exports the default underlying components as static exports.
|
|
138
139
|
|
|
139
140
|
Components available as static exports are:
|
|
140
141
|
|
|
141
142
|
- `ClearIndicator`
|
|
142
143
|
- `Control`
|
|
143
|
-
- `DropdownIndicator`
|
|
144
|
-
- `DownChevron`
|
|
145
144
|
- `CrossIcon`
|
|
145
|
+
- `DownChevron`
|
|
146
|
+
- `DropdownIndicator`
|
|
146
147
|
- `Group`
|
|
147
148
|
- `GroupHeading`
|
|
148
149
|
- `IndicatorsContainer`
|
|
149
150
|
- `IndicatorSeparator`
|
|
150
151
|
- `Input`
|
|
151
152
|
- `LoadingIndicator`
|
|
153
|
+
- `LoadingMessage`
|
|
152
154
|
- `Menu`
|
|
153
155
|
- `MenuList`
|
|
154
156
|
- `MenuPortal`
|
|
155
|
-
- `LoadingMessage`
|
|
156
|
-
- `NoOptionsMessage`
|
|
157
157
|
- `MultiValue`
|
|
158
158
|
- `MultiValueContainer`
|
|
159
159
|
- `MultiValueLabel`
|
|
160
160
|
- `MultiValueRemove`
|
|
161
|
+
- `NoOptionsMessage`
|
|
161
162
|
- `Option`
|
|
162
163
|
- `Placeholder`
|
|
163
164
|
- `SelectContainer`
|
|
@@ -81,6 +81,8 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
|
|
|
81
81
|
children: jsxRuntime.jsx(AsyncCreatableSelect__default["default"], {
|
|
82
82
|
"aria-label": props['aria-label'],
|
|
83
83
|
"aria-labelledby": props['aria-labelledby'],
|
|
84
|
+
"aria-invalid": props['aria-invalid'],
|
|
85
|
+
"aria-errormessage": props['aria-errormessage'],
|
|
84
86
|
autoFocus: props.isAutofocussed,
|
|
85
87
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
86
88
|
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
@@ -185,11 +187,7 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
|
|
|
185
187
|
})
|
|
186
188
|
}))
|
|
187
189
|
});
|
|
188
|
-
};
|
|
189
|
-
// deal with an array. The touched state ends up being an empty array in case
|
|
190
|
-
// values were removed only. So we have to treat any array we receive as
|
|
191
|
-
// a signal of the field having been touched.
|
|
192
|
-
|
|
190
|
+
};
|
|
193
191
|
|
|
194
192
|
AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
195
193
|
horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
@@ -203,20 +201,57 @@ AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
203
201
|
onChange: _pt__default["default"].func.isRequired,
|
|
204
202
|
showOptionGroupDivider: _pt__default["default"].bool
|
|
205
203
|
} : {};
|
|
204
|
+
AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
|
|
205
|
+
AsyncCreatableSelectInput.defaultProps = defaultProps;
|
|
206
|
+
/**
|
|
207
|
+
* Expose static helper methods.
|
|
208
|
+
*/
|
|
209
|
+
// Formik will set the field to an array on submission, so we always have to
|
|
210
|
+
// deal with an array. The touched state ends up being an empty array in case
|
|
211
|
+
// values were removed only. So we have to treat any array we receive as
|
|
212
|
+
// a signal of the field having been touched.
|
|
206
213
|
|
|
207
214
|
AsyncCreatableSelectInput.isTouched = function (touched) {
|
|
208
215
|
return Boolean(touched);
|
|
209
216
|
};
|
|
217
|
+
/**
|
|
218
|
+
* Expose react-select components for customization purposes.
|
|
219
|
+
*/
|
|
220
|
+
// custom
|
|
210
221
|
|
|
211
|
-
|
|
212
|
-
AsyncCreatableSelectInput.
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
222
|
+
|
|
223
|
+
AsyncCreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
224
|
+
AsyncCreatableSelectInput.Control = reactSelect.components.Control;
|
|
225
|
+
AsyncCreatableSelectInput.CrossIcon = reactSelect.components.CrossIcon;
|
|
226
|
+
AsyncCreatableSelectInput.DownChevron = reactSelect.components.DownChevron; // custom
|
|
227
|
+
|
|
228
|
+
AsyncCreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
229
|
+
AsyncCreatableSelectInput.Group = reactSelect.components.Group;
|
|
230
|
+
AsyncCreatableSelectInput.GroupHeading = reactSelect.components.GroupHeading;
|
|
231
|
+
AsyncCreatableSelectInput.IndicatorSeparator = reactSelect.components.IndicatorSeparator;
|
|
232
|
+
AsyncCreatableSelectInput.IndicatorsContainer = reactSelect.components.IndicatorsContainer;
|
|
233
|
+
AsyncCreatableSelectInput.Input = reactSelect.components.Input; // custom
|
|
234
|
+
|
|
235
|
+
AsyncCreatableSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
|
|
236
|
+
AsyncCreatableSelectInput.LoadingMessage = reactSelect.components.LoadingMessage;
|
|
237
|
+
AsyncCreatableSelectInput.Menu = reactSelect.components.Menu;
|
|
238
|
+
AsyncCreatableSelectInput.MenuList = reactSelect.components.MenuList;
|
|
239
|
+
AsyncCreatableSelectInput.MenuPortal = reactSelect.components.MenuPortal;
|
|
240
|
+
AsyncCreatableSelectInput.MultiValue = reactSelect.components.MultiValue;
|
|
241
|
+
AsyncCreatableSelectInput.MultiValueContainer = reactSelect.components.MultiValueContainer;
|
|
242
|
+
AsyncCreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel; // custom
|
|
243
|
+
|
|
244
|
+
AsyncCreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
245
|
+
AsyncCreatableSelectInput.NoOptionsMessage = reactSelect.components.NoOptionsMessage;
|
|
246
|
+
AsyncCreatableSelectInput.Option = reactSelect.components.Option;
|
|
247
|
+
AsyncCreatableSelectInput.Placeholder = reactSelect.components.Placeholder;
|
|
248
|
+
AsyncCreatableSelectInput.SelectContainer = reactSelect.components.SelectContainer;
|
|
249
|
+
AsyncCreatableSelectInput.SingleValue = reactSelect.components.SingleValue;
|
|
250
|
+
AsyncCreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer;
|
|
216
251
|
var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
|
|
217
252
|
|
|
218
253
|
// NOTE: This string will be replaced on build time with the package version.
|
|
219
|
-
var version = "
|
|
254
|
+
var version = "14.0.1";
|
|
220
255
|
|
|
221
256
|
exports["default"] = AsyncCreatableSelectInput$1;
|
|
222
257
|
exports.version = version;
|
|
@@ -77,6 +77,8 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
|
|
|
77
77
|
children: jsxRuntime.jsx(AsyncCreatableSelect__default["default"], {
|
|
78
78
|
"aria-label": props['aria-label'],
|
|
79
79
|
"aria-labelledby": props['aria-labelledby'],
|
|
80
|
+
"aria-invalid": props['aria-invalid'],
|
|
81
|
+
"aria-errormessage": props['aria-errormessage'],
|
|
80
82
|
autoFocus: props.isAutofocussed,
|
|
81
83
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
82
84
|
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
@@ -181,27 +183,60 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
|
|
|
181
183
|
})
|
|
182
184
|
}))
|
|
183
185
|
});
|
|
184
|
-
};
|
|
186
|
+
};
|
|
187
|
+
|
|
188
|
+
AsyncCreatableSelectInput.propTypes = {};
|
|
189
|
+
AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
|
|
190
|
+
AsyncCreatableSelectInput.defaultProps = defaultProps;
|
|
191
|
+
/**
|
|
192
|
+
* Expose static helper methods.
|
|
193
|
+
*/
|
|
194
|
+
// Formik will set the field to an array on submission, so we always have to
|
|
185
195
|
// deal with an array. The touched state ends up being an empty array in case
|
|
186
196
|
// values were removed only. So we have to treat any array we receive as
|
|
187
197
|
// a signal of the field having been touched.
|
|
188
198
|
|
|
189
|
-
|
|
190
|
-
AsyncCreatableSelectInput.propTypes = {};
|
|
191
|
-
|
|
192
199
|
AsyncCreatableSelectInput.isTouched = function (touched) {
|
|
193
200
|
return Boolean(touched);
|
|
194
201
|
};
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
202
|
+
/**
|
|
203
|
+
* Expose react-select components for customization purposes.
|
|
204
|
+
*/
|
|
205
|
+
// custom
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
AsyncCreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
209
|
+
AsyncCreatableSelectInput.Control = reactSelect.components.Control;
|
|
210
|
+
AsyncCreatableSelectInput.CrossIcon = reactSelect.components.CrossIcon;
|
|
211
|
+
AsyncCreatableSelectInput.DownChevron = reactSelect.components.DownChevron; // custom
|
|
212
|
+
|
|
213
|
+
AsyncCreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
214
|
+
AsyncCreatableSelectInput.Group = reactSelect.components.Group;
|
|
215
|
+
AsyncCreatableSelectInput.GroupHeading = reactSelect.components.GroupHeading;
|
|
216
|
+
AsyncCreatableSelectInput.IndicatorSeparator = reactSelect.components.IndicatorSeparator;
|
|
217
|
+
AsyncCreatableSelectInput.IndicatorsContainer = reactSelect.components.IndicatorsContainer;
|
|
218
|
+
AsyncCreatableSelectInput.Input = reactSelect.components.Input; // custom
|
|
219
|
+
|
|
220
|
+
AsyncCreatableSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
|
|
221
|
+
AsyncCreatableSelectInput.LoadingMessage = reactSelect.components.LoadingMessage;
|
|
222
|
+
AsyncCreatableSelectInput.Menu = reactSelect.components.Menu;
|
|
223
|
+
AsyncCreatableSelectInput.MenuList = reactSelect.components.MenuList;
|
|
224
|
+
AsyncCreatableSelectInput.MenuPortal = reactSelect.components.MenuPortal;
|
|
225
|
+
AsyncCreatableSelectInput.MultiValue = reactSelect.components.MultiValue;
|
|
226
|
+
AsyncCreatableSelectInput.MultiValueContainer = reactSelect.components.MultiValueContainer;
|
|
227
|
+
AsyncCreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel; // custom
|
|
228
|
+
|
|
229
|
+
AsyncCreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
230
|
+
AsyncCreatableSelectInput.NoOptionsMessage = reactSelect.components.NoOptionsMessage;
|
|
231
|
+
AsyncCreatableSelectInput.Option = reactSelect.components.Option;
|
|
232
|
+
AsyncCreatableSelectInput.Placeholder = reactSelect.components.Placeholder;
|
|
233
|
+
AsyncCreatableSelectInput.SelectContainer = reactSelect.components.SelectContainer;
|
|
234
|
+
AsyncCreatableSelectInput.SingleValue = reactSelect.components.SingleValue;
|
|
235
|
+
AsyncCreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer;
|
|
201
236
|
var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
|
|
202
237
|
|
|
203
238
|
// NOTE: This string will be replaced on build time with the package version.
|
|
204
|
-
var version = "
|
|
239
|
+
var version = "14.0.1";
|
|
205
240
|
|
|
206
241
|
exports["default"] = AsyncCreatableSelectInput$1;
|
|
207
242
|
exports.version = version;
|
|
@@ -17,7 +17,7 @@ import AsyncCreatableSelect from 'react-select/async-creatable';
|
|
|
17
17
|
import Constraints from '@commercetools-uikit/constraints';
|
|
18
18
|
import LoadingSpinner from '@commercetools-uikit/loading-spinner';
|
|
19
19
|
import { messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
|
|
20
|
-
import { warning, filterDataAttributes
|
|
20
|
+
import { warning, filterDataAttributes } from '@commercetools-uikit/utils';
|
|
21
21
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
22
22
|
|
|
23
23
|
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; }
|
|
@@ -60,6 +60,8 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
|
|
|
60
60
|
children: jsx(AsyncCreatableSelect, {
|
|
61
61
|
"aria-label": props['aria-label'],
|
|
62
62
|
"aria-labelledby": props['aria-labelledby'],
|
|
63
|
+
"aria-invalid": props['aria-invalid'],
|
|
64
|
+
"aria-errormessage": props['aria-errormessage'],
|
|
63
65
|
autoFocus: props.isAutofocussed,
|
|
64
66
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
65
67
|
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
@@ -164,11 +166,7 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
|
|
|
164
166
|
})
|
|
165
167
|
}))
|
|
166
168
|
});
|
|
167
|
-
};
|
|
168
|
-
// deal with an array. The touched state ends up being an empty array in case
|
|
169
|
-
// values were removed only. So we have to treat any array we receive as
|
|
170
|
-
// a signal of the field having been touched.
|
|
171
|
-
|
|
169
|
+
};
|
|
172
170
|
|
|
173
171
|
AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
174
172
|
horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
@@ -182,19 +180,56 @@ AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
182
180
|
onChange: _pt.func.isRequired,
|
|
183
181
|
showOptionGroupDivider: _pt.bool
|
|
184
182
|
} : {};
|
|
183
|
+
AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
|
|
184
|
+
AsyncCreatableSelectInput.defaultProps = defaultProps;
|
|
185
|
+
/**
|
|
186
|
+
* Expose static helper methods.
|
|
187
|
+
*/
|
|
188
|
+
// Formik will set the field to an array on submission, so we always have to
|
|
189
|
+
// deal with an array. The touched state ends up being an empty array in case
|
|
190
|
+
// values were removed only. So we have to treat any array we receive as
|
|
191
|
+
// a signal of the field having been touched.
|
|
185
192
|
|
|
186
193
|
AsyncCreatableSelectInput.isTouched = function (touched) {
|
|
187
194
|
return Boolean(touched);
|
|
188
195
|
};
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
196
|
+
/**
|
|
197
|
+
* Expose react-select components for customization purposes.
|
|
198
|
+
*/
|
|
199
|
+
// custom
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
AsyncCreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
|
|
203
|
+
AsyncCreatableSelectInput.Control = components.Control;
|
|
204
|
+
AsyncCreatableSelectInput.CrossIcon = components.CrossIcon;
|
|
205
|
+
AsyncCreatableSelectInput.DownChevron = components.DownChevron; // custom
|
|
206
|
+
|
|
207
|
+
AsyncCreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
|
|
208
|
+
AsyncCreatableSelectInput.Group = components.Group;
|
|
209
|
+
AsyncCreatableSelectInput.GroupHeading = components.GroupHeading;
|
|
210
|
+
AsyncCreatableSelectInput.IndicatorSeparator = components.IndicatorSeparator;
|
|
211
|
+
AsyncCreatableSelectInput.IndicatorsContainer = components.IndicatorsContainer;
|
|
212
|
+
AsyncCreatableSelectInput.Input = components.Input; // custom
|
|
213
|
+
|
|
214
|
+
AsyncCreatableSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
|
|
215
|
+
AsyncCreatableSelectInput.LoadingMessage = components.LoadingMessage;
|
|
216
|
+
AsyncCreatableSelectInput.Menu = components.Menu;
|
|
217
|
+
AsyncCreatableSelectInput.MenuList = components.MenuList;
|
|
218
|
+
AsyncCreatableSelectInput.MenuPortal = components.MenuPortal;
|
|
219
|
+
AsyncCreatableSelectInput.MultiValue = components.MultiValue;
|
|
220
|
+
AsyncCreatableSelectInput.MultiValueContainer = components.MultiValueContainer;
|
|
221
|
+
AsyncCreatableSelectInput.MultiValueLabel = components.MultiValueLabel; // custom
|
|
222
|
+
|
|
223
|
+
AsyncCreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
|
|
224
|
+
AsyncCreatableSelectInput.NoOptionsMessage = components.NoOptionsMessage;
|
|
225
|
+
AsyncCreatableSelectInput.Option = components.Option;
|
|
226
|
+
AsyncCreatableSelectInput.Placeholder = components.Placeholder;
|
|
227
|
+
AsyncCreatableSelectInput.SelectContainer = components.SelectContainer;
|
|
228
|
+
AsyncCreatableSelectInput.SingleValue = components.SingleValue;
|
|
229
|
+
AsyncCreatableSelectInput.ValueContainer = components.ValueContainer;
|
|
195
230
|
var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
|
|
196
231
|
|
|
197
232
|
// NOTE: This string will be replaced on build time with the package version.
|
|
198
|
-
var version = "
|
|
233
|
+
var version = "14.0.1";
|
|
199
234
|
|
|
200
235
|
export { AsyncCreatableSelectInput$1 as default, version };
|
|
@@ -17,6 +17,8 @@ declare type TAsyncCreatableSelectInputProps = {
|
|
|
17
17
|
iconLeft?: ReactNode;
|
|
18
18
|
'aria-label'?: ReactSelectAsyncCreatableProps['aria-label'];
|
|
19
19
|
'aria-labelledby'?: ReactSelectAsyncCreatableProps['aria-labelledby'];
|
|
20
|
+
'aria-invalid'?: ReactSelectAsyncCreatableProps['aria-invalid'];
|
|
21
|
+
'aria-errormessage'?: ReactSelectAsyncCreatableProps['aria-errormessage'];
|
|
20
22
|
isAutofocussed?: boolean;
|
|
21
23
|
backspaceRemovesValue?: ReactSelectAsyncCreatableProps['backspaceRemovesValue'];
|
|
22
24
|
components?: ReactSelectAsyncCreatableProps['components'];
|
|
@@ -57,8 +59,63 @@ declare type TAsyncCreatableSelectInputProps = {
|
|
|
57
59
|
};
|
|
58
60
|
declare const AsyncCreatableSelectInput: {
|
|
59
61
|
(props: TAsyncCreatableSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
60
|
-
isTouched(touched: unknown): boolean;
|
|
61
62
|
displayName: string;
|
|
62
63
|
defaultProps: Pick<TAsyncCreatableSelectInputProps, "value" | "isSearchable" | "menuPortalZIndex">;
|
|
64
|
+
isTouched(touched: unknown): boolean;
|
|
65
|
+
ClearIndicator: {
|
|
66
|
+
(props: {
|
|
67
|
+
innerProps: {
|
|
68
|
+
ref: import("react").LegacyRef<HTMLButtonElement>;
|
|
69
|
+
} & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>;
|
|
70
|
+
} & import("react-select").ClearIndicatorProps<unknown, boolean, GroupBase<unknown>>): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
71
|
+
displayName: string;
|
|
72
|
+
};
|
|
73
|
+
Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: import("react-select").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
|
|
74
|
+
CrossIcon: (props: import("react-select/dist/declarations/src/components/indicators").CrossIconProps) => import("@emotion/react").jsx.JSX.Element;
|
|
75
|
+
DownChevron: (props: import("react-select/dist/declarations/src/components/indicators").DownChevronProps) => import("@emotion/react").jsx.JSX.Element;
|
|
76
|
+
DropdownIndicator: {
|
|
77
|
+
(props: import("react-select").DropdownIndicatorProps<unknown, boolean, GroupBase<unknown>>): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
78
|
+
displayName: string;
|
|
79
|
+
};
|
|
80
|
+
Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends GroupBase<Option_3>>(props: import("react-select").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
|
|
81
|
+
GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends GroupBase<Option_4>>(props: import("react-select").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
|
|
82
|
+
IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
|
|
83
|
+
IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends GroupBase<Option_5>>(props: import("react-select").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
|
|
84
|
+
Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
|
|
85
|
+
LoadingIndicator: {
|
|
86
|
+
(): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
87
|
+
displayName: string;
|
|
88
|
+
};
|
|
89
|
+
LoadingMessage: {
|
|
90
|
+
<Option_11, IsMulti_11 extends boolean, Group_11 extends GroupBase<Option_11>>(props: import("react-select").NoticeProps<Option_11, IsMulti_11, Group_11>): import("@emotion/react").jsx.JSX.Element;
|
|
91
|
+
defaultProps: {
|
|
92
|
+
children: string;
|
|
93
|
+
};
|
|
94
|
+
};
|
|
95
|
+
Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
|
|
96
|
+
MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends GroupBase<Option_10>>(props: import("react-select").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
|
|
97
|
+
MenuPortal: typeof import("react-select/dist/declarations/src/components/Menu").MenuPortal;
|
|
98
|
+
MultiValue: <Option_13, IsMulti_13 extends boolean, Group_13 extends GroupBase<Option_13>>(props: import("react-select").MultiValueProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
|
|
99
|
+
MultiValueContainer: <Option_14, IsMulti_14 extends boolean, Group_14 extends GroupBase<Option_14>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
|
|
100
|
+
MultiValueLabel: <Option_14_1, IsMulti_14_1 extends boolean, Group_14_1 extends GroupBase<Option_14_1>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_14_1, IsMulti_14_1, Group_14_1>) => import("@emotion/react").jsx.JSX.Element;
|
|
101
|
+
MultiValueRemove: {
|
|
102
|
+
(props: {
|
|
103
|
+
selectProps: {
|
|
104
|
+
isReadOnly: boolean;
|
|
105
|
+
} & import("react-select/dist/declarations/src/Select").Props<unknown, boolean, GroupBase<unknown>>;
|
|
106
|
+
} & import("react-select").MultiValueGenericProps<unknown, boolean, GroupBase<unknown>>): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
107
|
+
displayName: string;
|
|
108
|
+
};
|
|
109
|
+
NoOptionsMessage: {
|
|
110
|
+
<Option_12, IsMulti_12 extends boolean, Group_12 extends GroupBase<Option_12>>(props: import("react-select").NoticeProps<Option_12, IsMulti_12, Group_12>): import("@emotion/react").jsx.JSX.Element;
|
|
111
|
+
defaultProps: {
|
|
112
|
+
children: string;
|
|
113
|
+
};
|
|
114
|
+
};
|
|
115
|
+
Option: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>(props: import("react-select").OptionProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
|
|
116
|
+
Placeholder: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>(props: import("react-select").PlaceholderProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
|
|
117
|
+
SelectContainer: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: import("react-select").ContainerProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
|
|
118
|
+
SingleValue: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import("react-select").SingleValueProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
|
|
119
|
+
ValueContainer: <Option_19, IsMulti_19 extends boolean, Group_19 extends GroupBase<Option_19>>(props: import("react-select").ValueContainerProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
|
|
63
120
|
};
|
|
64
121
|
export default AsyncCreatableSelectInput;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/async-creatable-select-input",
|
|
3
3
|
"description": "An input component getting a selection from an asynchronously loaded list from the user, and where options can be created by the user.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "14.0.1",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"directory": "packages/components/inputs/async-creatable-select-input"
|
|
10
10
|
},
|
|
11
11
|
"homepage": "https://uikit.commercetools.com",
|
|
12
|
-
"keywords": ["javascript", "design
|
|
12
|
+
"keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"publishConfig": {
|
|
15
15
|
"access": "public"
|
|
@@ -19,16 +19,16 @@
|
|
|
19
19
|
"module": "dist/commercetools-uikit-async-creatable-select-input.esm.js",
|
|
20
20
|
"files": ["dist"],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@babel/runtime": "7.17.2",
|
|
23
|
-
"@babel/runtime-corejs3": "7.17.2",
|
|
24
|
-
"@commercetools-uikit/constraints": "
|
|
25
|
-
"@commercetools-uikit/design-system": "
|
|
26
|
-
"@commercetools-uikit/icons": "
|
|
27
|
-
"@commercetools-uikit/loading-spinner": "
|
|
28
|
-
"@commercetools-uikit/select-utils": "
|
|
29
|
-
"@commercetools-uikit/spacings": "
|
|
30
|
-
"@commercetools-uikit/text": "
|
|
31
|
-
"@commercetools-uikit/utils": "
|
|
22
|
+
"@babel/runtime": "^7.17.2",
|
|
23
|
+
"@babel/runtime-corejs3": "^7.17.2",
|
|
24
|
+
"@commercetools-uikit/constraints": "14.0.1",
|
|
25
|
+
"@commercetools-uikit/design-system": "14.0.0",
|
|
26
|
+
"@commercetools-uikit/icons": "14.0.1",
|
|
27
|
+
"@commercetools-uikit/loading-spinner": "14.0.1",
|
|
28
|
+
"@commercetools-uikit/select-utils": "14.0.1",
|
|
29
|
+
"@commercetools-uikit/spacings": "14.0.1",
|
|
30
|
+
"@commercetools-uikit/text": "14.0.1",
|
|
31
|
+
"@commercetools-uikit/utils": "14.0.1",
|
|
32
32
|
"@emotion/is-prop-valid": "1.1.2",
|
|
33
33
|
"@emotion/react": "^11.4.0",
|
|
34
34
|
"@emotion/styled": "^11.3.0",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"react": "17.0.2",
|
|
41
41
|
"react-dom": "17.0.2",
|
|
42
|
-
"react-intl": "5.24.6"
|
|
42
|
+
"react-intl": "^5.24.6"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"react": "17.x",
|