@commercetools-uikit/selectable-search-input 19.5.0 → 19.7.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 +12 -0
- package/dist/commercetools-uikit-selectable-search-input.cjs.dev.js +23 -10
- package/dist/commercetools-uikit-selectable-search-input.cjs.prod.js +19 -8
- package/dist/commercetools-uikit-selectable-search-input.esm.js +22 -10
- package/dist/declarations/src/selectable-search-input.d.ts +5 -2
- package/package.json +10 -9
package/README.md
CHANGED
|
@@ -65,6 +65,7 @@ export default Example;
|
|
|
65
65
|
| `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. |
|
|
66
66
|
| `name` | `string` | | | Used as HTML name of the input component property. |
|
|
67
67
|
| `value` | `Object`<br/>[See signature.](#signature-value) | ✅ | | Value of the input. Consists of text input and selected option. |
|
|
68
|
+
| `_experimentalValue` | `Object`<br/>[See signature.](#signature-_experimentalValue) | | | |
|
|
68
69
|
| `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Called with the event of the input or dropdown when either the selectable dropdown or the text input have changed.
The change event from the text input has a suffix of `.textInput` and the change event from the dropdown has a suffix of `.dropdown`. |
|
|
69
70
|
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when input is blurred |
|
|
70
71
|
| `onFocus` | `Function`<br/>[See signature.](#signature-onFocus) | | | Called when input is focused |
|
|
@@ -93,6 +94,8 @@ export default Example;
|
|
|
93
94
|
| `selectDataProps` | `Record` | | | used to pass data-\* props to the select component.
eg: selectDataProps={\[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]} |
|
|
94
95
|
| `inputDataProps` | `Record` | | | used to pass data-\* props to the input element.
eg: inputDataProps={\[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]} |
|
|
95
96
|
| `selectCustomComponents` | `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) |
|
|
97
|
+
| `rightActionIcon` | `ReactElement` | | | Custom action icon to be displayed on the right side of the input. |
|
|
98
|
+
| `rightActionProps` | `TIconButtonProps` | | | Props for the right-action icon-button. Required when rightActionIcon is provided.
At least a `label` and an `onClick` prop/function need to be provided. |
|
|
96
99
|
|
|
97
100
|
## Signatures
|
|
98
101
|
|
|
@@ -105,6 +108,15 @@ export default Example;
|
|
|
105
108
|
}
|
|
106
109
|
```
|
|
107
110
|
|
|
111
|
+
### Signature `_experimentalValue`
|
|
112
|
+
|
|
113
|
+
```ts
|
|
114
|
+
{
|
|
115
|
+
text: string;
|
|
116
|
+
option: string;
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
108
120
|
### Signature `onChange`
|
|
109
121
|
|
|
110
122
|
```ts
|