@commercetools-uikit/select-input 13.0.1 → 13.0.4
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
CHANGED
|
@@ -67,12 +67,14 @@ 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` | `ReactSelectProps['aria-label']` | | | Aria label (for assistive tech)
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
69
69
|
| `aria-labelledby` | `ReactSelectProps['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` | `ReactSelectProps['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` | `ReactSelectProps['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` | `ReactSelectProps['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` | `ReactSelectProps['components']` | | | Map of components to overwrite the default ones, see what components you can override
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
73
75
|
| `filterOption` | `ReactSelectProps['filterOption']` | | | Custom method to filter whether an option should be displayed in the menu
<br />
Signature: `(option, rawInput) => boolean`
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
74
76
|
| `id` | `ReactSelectProps['inputId']` | | | Used as HTML id property. An id is generated automatically when not provided.
This forwarded as react-select's "inputId"
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
75
|
-
| `inputValue` | `ReactSelectProps['inputValue']` |
|
|
77
|
+
| `inputValue` | `ReactSelectProps['inputValue']` | | | The value of the search input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
76
78
|
| `containerId` | `ReactSelectProps['id']` | | | The id to set on the SelectContainer component
This is forwarded as react-select's "id"
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
77
79
|
| `isClearable` | `ReactSelectProps['isClearable']` | | | Is the select value clearable
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
78
80
|
| `isDisabled` | `ReactSelectProps['isDisabled']` | | | Is the select disabled
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
@@ -95,7 +97,7 @@ export default Example;
|
|
|
95
97
|
| `placeholder` | `ReactSelectProps['placeholder']` | | | Placeholder text for the select value
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
96
98
|
| `tabIndex` | `ReactSelectProps['tabIndex']` | | | Sets the tabIndex attribute on the input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
97
99
|
| `tabSelectsValue` | `ReactSelectProps['tabSelectsValue']` | | | Select the currently focused option when the user presses tab
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
98
|
-
| `value` | `ReactSelectProps['value']` |
|
|
100
|
+
| `value` | `ReactSelectProps['value']` | | | The value of the select; reflected by the selected option
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
99
101
|
|
|
100
102
|
## Signatures
|
|
101
103
|
|
|
@@ -74,7 +74,7 @@ var SelectInput = function SelectInput(props) {
|
|
|
74
74
|
var optionsWithoutGroups = flatMap__default["default"](props.options, function (option) {
|
|
75
75
|
return has__default["default"](option, 'value') ? option : option.options;
|
|
76
76
|
});
|
|
77
|
-
var selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = props.value // Pass the options in the order selected by the use, so that the
|
|
77
|
+
var selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = props.value || [] // Pass the options in the order selected by the use, so that the
|
|
78
78
|
// sorting is not lost
|
|
79
79
|
).call(_context2, function (value) {
|
|
80
80
|
return _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
|
|
@@ -89,6 +89,8 @@ var SelectInput = function SelectInput(props) {
|
|
|
89
89
|
children: jsxRuntime.jsx(Select__default["default"], {
|
|
90
90
|
"aria-label": props['aria-label'],
|
|
91
91
|
"aria-labelledby": props['aria-labelledby'],
|
|
92
|
+
"aria-invalid": props['aria-invalid'],
|
|
93
|
+
"aria-errormessage": props['aria-errormessage'],
|
|
92
94
|
autoFocus: props.isAutofocussed,
|
|
93
95
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
94
96
|
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
@@ -132,7 +134,7 @@ var SelectInput = function SelectInput(props) {
|
|
|
132
134
|
name: props.name,
|
|
133
135
|
noOptionsMessage: props.noOptionsMessage || function (_ref) {
|
|
134
136
|
var inputValue = _ref.inputValue;
|
|
135
|
-
return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
|
|
137
|
+
return !inputValue || inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
|
|
136
138
|
inputValue: inputValue
|
|
137
139
|
});
|
|
138
140
|
},
|
|
@@ -226,7 +228,7 @@ utils.addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({},
|
|
|
226
228
|
var SelectInput$1 = SelectInput;
|
|
227
229
|
|
|
228
230
|
// NOTE: This string will be replaced on build time with the package version.
|
|
229
|
-
var version = "13.0.
|
|
231
|
+
var version = "13.0.4";
|
|
230
232
|
|
|
231
233
|
exports["default"] = SelectInput$1;
|
|
232
234
|
exports.version = version;
|
|
@@ -73,7 +73,7 @@ var SelectInput = function SelectInput(props) {
|
|
|
73
73
|
var optionsWithoutGroups = flatMap__default["default"](props.options, function (option) {
|
|
74
74
|
return has__default["default"](option, 'value') ? option : option.options;
|
|
75
75
|
});
|
|
76
|
-
var selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = props.value // Pass the options in the order selected by the use, so that the
|
|
76
|
+
var selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = props.value || [] // Pass the options in the order selected by the use, so that the
|
|
77
77
|
// sorting is not lost
|
|
78
78
|
).call(_context2, function (value) {
|
|
79
79
|
return _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
|
|
@@ -88,6 +88,8 @@ var SelectInput = function SelectInput(props) {
|
|
|
88
88
|
children: jsxRuntime.jsx(Select__default["default"], {
|
|
89
89
|
"aria-label": props['aria-label'],
|
|
90
90
|
"aria-labelledby": props['aria-labelledby'],
|
|
91
|
+
"aria-invalid": props['aria-invalid'],
|
|
92
|
+
"aria-errormessage": props['aria-errormessage'],
|
|
91
93
|
autoFocus: props.isAutofocussed,
|
|
92
94
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
93
95
|
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
@@ -131,7 +133,7 @@ var SelectInput = function SelectInput(props) {
|
|
|
131
133
|
name: props.name,
|
|
132
134
|
noOptionsMessage: props.noOptionsMessage || function (_ref) {
|
|
133
135
|
var inputValue = _ref.inputValue;
|
|
134
|
-
return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
|
|
136
|
+
return !inputValue || inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
|
|
135
137
|
inputValue: inputValue
|
|
136
138
|
});
|
|
137
139
|
},
|
|
@@ -207,7 +209,7 @@ utils.addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({},
|
|
|
207
209
|
var SelectInput$1 = SelectInput;
|
|
208
210
|
|
|
209
211
|
// NOTE: This string will be replaced on build time with the package version.
|
|
210
|
-
var version = "13.0.
|
|
212
|
+
var version = "13.0.4";
|
|
211
213
|
|
|
212
214
|
exports["default"] = SelectInput$1;
|
|
213
215
|
exports.version = version;
|
|
@@ -51,7 +51,7 @@ var SelectInput = function SelectInput(props) {
|
|
|
51
51
|
var optionsWithoutGroups = flatMap(props.options, function (option) {
|
|
52
52
|
return has(option, 'value') ? option : option.options;
|
|
53
53
|
});
|
|
54
|
-
var selectedOptions = props.isMulti ? _filterInstanceProperty(_context = _mapInstanceProperty(_context2 = props.value // Pass the options in the order selected by the use, so that the
|
|
54
|
+
var selectedOptions = props.isMulti ? _filterInstanceProperty(_context = _mapInstanceProperty(_context2 = props.value || [] // Pass the options in the order selected by the use, so that the
|
|
55
55
|
// sorting is not lost
|
|
56
56
|
).call(_context2, function (value) {
|
|
57
57
|
return _findInstanceProperty(optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
|
|
@@ -66,6 +66,8 @@ var SelectInput = function SelectInput(props) {
|
|
|
66
66
|
children: jsx(Select, {
|
|
67
67
|
"aria-label": props['aria-label'],
|
|
68
68
|
"aria-labelledby": props['aria-labelledby'],
|
|
69
|
+
"aria-invalid": props['aria-invalid'],
|
|
70
|
+
"aria-errormessage": props['aria-errormessage'],
|
|
69
71
|
autoFocus: props.isAutofocussed,
|
|
70
72
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
71
73
|
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
@@ -109,7 +111,7 @@ var SelectInput = function SelectInput(props) {
|
|
|
109
111
|
name: props.name,
|
|
110
112
|
noOptionsMessage: props.noOptionsMessage || function (_ref) {
|
|
111
113
|
var inputValue = _ref.inputValue;
|
|
112
|
-
return inputValue === '' ? intl.formatMessage(messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(messages.noOptionsMessageWithInputValue, {
|
|
114
|
+
return !inputValue || inputValue === '' ? intl.formatMessage(messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(messages.noOptionsMessageWithInputValue, {
|
|
113
115
|
inputValue: inputValue
|
|
114
116
|
});
|
|
115
117
|
},
|
|
@@ -203,6 +205,6 @@ addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({}, compo
|
|
|
203
205
|
var SelectInput$1 = SelectInput;
|
|
204
206
|
|
|
205
207
|
// NOTE: This string will be replaced on build time with the package version.
|
|
206
|
-
var version = "13.0.
|
|
208
|
+
var version = "13.0.4";
|
|
207
209
|
|
|
208
210
|
export { SelectInput$1 as default, version };
|
|
@@ -22,12 +22,14 @@ declare type TSelectInputProps = {
|
|
|
22
22
|
iconLeft?: ReactNode;
|
|
23
23
|
'aria-label'?: ReactSelectProps['aria-label'];
|
|
24
24
|
'aria-labelledby'?: ReactSelectProps['aria-labelledby'];
|
|
25
|
+
'aria-invalid'?: ReactSelectProps['aria-invalid'];
|
|
26
|
+
'aria-errormessage'?: ReactSelectProps['aria-errormessage'];
|
|
25
27
|
isAutofocussed?: boolean;
|
|
26
28
|
backspaceRemovesValue?: ReactSelectProps['backspaceRemovesValue'];
|
|
27
29
|
components?: ReactSelectProps['components'];
|
|
28
30
|
filterOption?: ReactSelectProps['filterOption'];
|
|
29
31
|
id?: ReactSelectProps['inputId'];
|
|
30
|
-
inputValue
|
|
32
|
+
inputValue?: ReactSelectProps['inputValue'];
|
|
31
33
|
containerId?: ReactSelectProps['id'];
|
|
32
34
|
isClearable?: ReactSelectProps['isClearable'];
|
|
33
35
|
isDisabled?: ReactSelectProps['isDisabled'];
|
|
@@ -50,7 +52,7 @@ declare type TSelectInputProps = {
|
|
|
50
52
|
placeholder?: ReactSelectProps['placeholder'];
|
|
51
53
|
tabIndex?: ReactSelectProps['tabIndex'];
|
|
52
54
|
tabSelectsValue?: ReactSelectProps['tabSelectsValue'];
|
|
53
|
-
value
|
|
55
|
+
value?: ReactSelectProps['value'];
|
|
54
56
|
};
|
|
55
57
|
declare const SelectInput: {
|
|
56
58
|
(props: TSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/select-input",
|
|
3
3
|
"description": "An input component getting a selection from the user.",
|
|
4
|
-
"version": "13.0.
|
|
4
|
+
"version": "13.0.4",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "7.17.2",
|
|
23
23
|
"@babel/runtime-corejs3": "7.17.2",
|
|
24
|
-
"@commercetools-uikit/constraints": "13.0.
|
|
24
|
+
"@commercetools-uikit/constraints": "13.0.2",
|
|
25
25
|
"@commercetools-uikit/design-system": "13.0.0",
|
|
26
|
-
"@commercetools-uikit/icons": "13.0.
|
|
27
|
-
"@commercetools-uikit/select-utils": "13.0.
|
|
28
|
-
"@commercetools-uikit/utils": "
|
|
29
|
-
"@emotion/is-prop-valid": "1.1.
|
|
26
|
+
"@commercetools-uikit/icons": "13.0.2",
|
|
27
|
+
"@commercetools-uikit/select-utils": "13.0.4",
|
|
28
|
+
"@commercetools-uikit/utils": "13.0.2",
|
|
29
|
+
"@emotion/is-prop-valid": "1.1.2",
|
|
30
30
|
"@emotion/react": "^11.4.0",
|
|
31
31
|
"@emotion/styled": "^11.3.0",
|
|
32
32
|
"lodash": "4.17.21",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"react": "17.0.2",
|
|
38
|
-
"react-intl": "5.24.6"
|
|
38
|
+
"react-intl": "^5.24.6"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": "17.x",
|