@commercetools-uikit/async-select-input 19.14.0 → 19.16.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 +50 -47
- package/dist/commercetools-uikit-async-select-input.cjs.dev.js +28 -14
- package/dist/commercetools-uikit-async-select-input.cjs.prod.js +24 -13
- package/dist/commercetools-uikit-async-select-input.esm.js +29 -15
- package/dist/declarations/src/async-select-input.d.ts +13 -6
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -49,53 +49,56 @@ export default Example;
|
|
|
49
49
|
|
|
50
50
|
## Properties
|
|
51
51
|
|
|
52
|
-
| Props | Type | Required | Default
|
|
53
|
-
| -------------------------- | ----------------------------------------------------------------------------------------------------- | :------: |
|
|
54
|
-
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | |
|
|
55
|
-
| `hasError` | `boolean` | |
|
|
56
|
-
| `hasWarning` | `boolean` | |
|
|
57
|
-
| `isReadOnly` | `boolean` | |
|
|
58
|
-
| `aria-label` | `AsyncProps['aria-label']` | |
|
|
59
|
-
| `aria-labelledby` | `AsyncProps['aria-labelledby']` | |
|
|
60
|
-
| `aria-invalid` | `AsyncProps['aria-invalid']` | |
|
|
61
|
-
| `aria-errormessage` | `AsyncProps['aria-errormessage']` | |
|
|
62
|
-
| `isAutofocussed` | `boolean` | |
|
|
63
|
-
| `backspaceRemovesValue` | `AsyncProps['backspaceRemovesValue']` | |
|
|
64
|
-
| `components` | `AsyncProps['components']` | |
|
|
65
|
-
| `controlShouldRenderValue` | `AsyncProps['controlShouldRenderValue']` | | `true`
|
|
66
|
-
| `filterOption` | `AsyncProps['filterOption']` | |
|
|
67
|
-
| `hideSelectedOptions` | `AsyncProps['hideSelectedOptions']` | |
|
|
68
|
-
| `id` | `AsyncProps['inputId']` | |
|
|
69
|
-
| `inputValue` | `AsyncProps['inputValue']` | |
|
|
70
|
-
| `containerId` | `AsyncProps['id']` | |
|
|
71
|
-
| `isClearable` | `AsyncProps['isClearable']` | |
|
|
72
|
-
| `isCondensed` | `boolean` | |
|
|
73
|
-
| `isDisabled` | `AsyncProps['isDisabled']` | |
|
|
74
|
-
| `isOptionDisabled` | `AsyncProps['isOptionDisabled']` | |
|
|
75
|
-
| `isMulti` | `AsyncProps['isMulti']` | |
|
|
76
|
-
| `isSearchable` | `AsyncProps['isSearchable']` | | `true`
|
|
77
|
-
| `menuIsOpen` | `AsyncProps['menuIsOpen']` | |
|
|
78
|
-
| `maxMenuHeight` | `AsyncProps['maxMenuHeight']` | |
|
|
79
|
-
| `menuPortalTarget` | `AsyncProps['menuPortalTarget']` | |
|
|
80
|
-
| `menuPortalZIndex` | `number` | | `1`
|
|
81
|
-
| `menuShouldBlockScroll` | `AsyncProps['menuShouldBlockScroll']` | |
|
|
82
|
-
| `closeMenuOnSelect` | `AsyncProps['closeMenuOnSelect']` | |
|
|
83
|
-
| `name` | `AsyncProps['name']` | |
|
|
84
|
-
| `noOptionsMessage` | `AsyncProps['noOptionsMessage']` | |
|
|
85
|
-
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | |
|
|
86
|
-
| `onChange` | `Function`<br/>[See signature.](#signature-onChange) | |
|
|
87
|
-
| `onFocus` | `AsyncProps['onFocus']` | |
|
|
88
|
-
| `onInputChange` | `AsyncProps['onInputChange']` | |
|
|
89
|
-
| `placeholder` | `AsyncProps['placeholder']` | |
|
|
90
|
-
| `loadingMessage` | `union`<br/>Possible values:<br/>`string , (() => string)` | |
|
|
91
|
-
| `tabIndex` | `AsyncProps['tabIndex']` | |
|
|
92
|
-
| `tabSelectsValue` | `AsyncProps['tabSelectsValue']` | |
|
|
93
|
-
| `value` | `AsyncProps['value']` | | `null`
|
|
94
|
-
| `defaultOptions` | `union`<br/>Possible values:<br/>`OptionsOrGroups<unknown, GroupBase<unknown>> , boolean` | |
|
|
95
|
-
| `loadOptions` | `AsyncProps['loadOptions']` | ✅ |
|
|
96
|
-
| `cacheOptions` | `AsyncProps['cacheOptions']` | |
|
|
97
|
-
| `showOptionGroupDivider` | `boolean` | |
|
|
98
|
-
| `iconLeft` | `ReactNode` | |
|
|
52
|
+
| Props | Type | Required | Default | Description |
|
|
53
|
+
| -------------------------- | ----------------------------------------------------------------------------------------------------- | :------: | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
54
|
+
| `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. |
|
|
55
|
+
| `hasError` | `boolean` | | | Indicates the input field has an error |
|
|
56
|
+
| `hasWarning` | `boolean` | | | Indicates the input field has a warning |
|
|
57
|
+
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
|
|
58
|
+
| `aria-label` | `AsyncProps['aria-label']` | | | Aria label (for assistive tech)
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
59
|
+
| `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) |
|
|
60
|
+
| `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) |
|
|
61
|
+
| `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) |
|
|
62
|
+
| `isAutofocussed` | `boolean` | | | Focus the control when it is mounted |
|
|
63
|
+
| `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) |
|
|
64
|
+
| `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) |
|
|
65
|
+
| `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) |
|
|
66
|
+
| `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) |
|
|
67
|
+
| `hideSelectedOptions` | `AsyncProps['hideSelectedOptions']` | | | Custom method to determine whether selected options should be displayed in the menu
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
68
|
+
| `id` | `AsyncProps['inputId']` | | | The id of the search input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
69
|
+
| `inputValue` | `AsyncProps['inputValue']` | | | The value of the search input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
70
|
+
| `containerId` | `AsyncProps['id']` | | | The id to set on the SelectContainer component
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
71
|
+
| `isClearable` | `AsyncProps['isClearable']` | | | Is the select value clearable
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
72
|
+
| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant |
|
|
73
|
+
| `isDisabled` | `AsyncProps['isDisabled']` | | | Is the select disabled
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
74
|
+
| `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) |
|
|
75
|
+
| `isMulti` | `AsyncProps['isMulti']` | | | Support multiple selected options
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
76
|
+
| `isSearchable` | `AsyncProps['isSearchable']` | | `true` | Whether to enable search functionality
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
77
|
+
| `menuIsOpen` | `AsyncProps['menuIsOpen']` | | | Can be used to enforce the select input to be opened
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
78
|
+
| `maxMenuHeight` | `AsyncProps['maxMenuHeight']` | | | Maximum height of the menu before scrolling
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
79
|
+
| `menuPortalTarget` | `AsyncProps['menuPortalTarget']` | | | Dom element to portal the select menu to
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
80
|
+
| `menuPortalZIndex` | `number` | | `1` | z-index value for the menu portal
<br>
Use in conjunction with `menuPortalTarget` |
|
|
81
|
+
| `menuShouldBlockScroll` | `AsyncProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
82
|
+
| `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) |
|
|
83
|
+
| `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) |
|
|
84
|
+
| `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) |
|
|
85
|
+
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Handle blur events on the control |
|
|
86
|
+
| `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`. |
|
|
87
|
+
| `onFocus` | `AsyncProps['onFocus']` | | | Handle focus events on the control
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
88
|
+
| `onInputChange` | `AsyncProps['onInputChange']` | | | Handle change events on the input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
89
|
+
| `placeholder` | `AsyncProps['placeholder']` | | | Placeholder text for the select value
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
90
|
+
| `loadingMessage` | `union`<br/>Possible values:<br/>`string , (() => string)` | | | loading message shown while the options are being loaded |
|
|
91
|
+
| `tabIndex` | `AsyncProps['tabIndex']` | | | Sets the tabIndex attribute on the input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
92
|
+
| `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) |
|
|
93
|
+
| `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) |
|
|
94
|
+
| `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) |
|
|
95
|
+
| `loadOptions` | `AsyncProps['loadOptions']` | ✅ | | Function that returns a promise, which is the set of options to be used once the promise resolves. |
|
|
96
|
+
| `cacheOptions` | `AsyncProps['cacheOptions']` | | | If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value. |
|
|
97
|
+
| `showOptionGroupDivider` | `boolean` | | | Determines if option groups will be separated by a divider |
|
|
98
|
+
| `iconLeft` | `ReactNode` | | | Icon to display on the left of the placeholder text and selected value. Has no effect when `isMulti` is enabled. |
|
|
99
|
+
| `optionStyle` | `union`<br/>Possible values:<br/>`'list' , 'checkbox'` | | `'list'` | defines how options are rendered |
|
|
100
|
+
| `appearance` | `union`<br/>Possible values:<br/>`'default' , 'filter'` | | `'default'` | Indicates the appearance of the input.
Filter appearance is meant to be used when the async-select is used as a filter. |
|
|
101
|
+
| `count` | `number` | | | An additional value displayed on the select options menu. This value is only available in the checkbox option style when appearance is set to filter. |
|
|
99
102
|
|
|
100
103
|
## Signatures
|
|
101
104
|
|
|
@@ -20,6 +20,7 @@ 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 icons = require('@commercetools-uikit/icons');
|
|
23
24
|
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
24
25
|
|
|
25
26
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
@@ -56,7 +57,9 @@ const defaultProps = {
|
|
|
56
57
|
value: null,
|
|
57
58
|
isSearchable: true,
|
|
58
59
|
menuPortalZIndex: 1,
|
|
59
|
-
controlShouldRenderValue: true
|
|
60
|
+
controlShouldRenderValue: true,
|
|
61
|
+
appearance: 'default',
|
|
62
|
+
optionStyle: 'list'
|
|
60
63
|
};
|
|
61
64
|
const AsyncSelectInput = props => {
|
|
62
65
|
const intl = reactIntl.useIntl();
|
|
@@ -68,7 +71,7 @@ const AsyncSelectInput = props => {
|
|
|
68
71
|
menuPortalTarget: props.menuPortalTarget,
|
|
69
72
|
componentName: 'AsyncSelectInput'
|
|
70
73
|
});
|
|
71
|
-
const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
74
|
+
const placeholder = props.placeholder || intl.formatMessage(props.appearance === 'filter' ? selectUtils.messages.selectInputAsFilterPlaceholder : selectUtils.messages.placeholder);
|
|
72
75
|
const loadingMessage = () => {
|
|
73
76
|
if (typeof props.loadingMessage === 'function') {
|
|
74
77
|
return props.loadingMessage();
|
|
@@ -78,25 +81,31 @@ const AsyncSelectInput = props => {
|
|
|
78
81
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
79
82
|
max: props.horizontalConstraint,
|
|
80
83
|
children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
|
|
81
|
-
children: jsxRuntime.jsx(AsyncSelect__default["default"], {
|
|
84
|
+
children: jsxRuntime.jsx(AsyncSelect__default["default"], _objectSpread(_objectSpread({
|
|
82
85
|
"aria-label": props['aria-label'],
|
|
83
86
|
"aria-labelledby": props['aria-labelledby'],
|
|
84
87
|
"aria-invalid": props['aria-invalid'],
|
|
85
88
|
"aria-errormessage": props['aria-errormessage'],
|
|
86
89
|
autoFocus: props.isAutofocussed,
|
|
87
90
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
88
|
-
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
91
|
+
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
89
92
|
Input: ownProps => jsxRuntime.jsx(reactSelect.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
90
93
|
readOnly: true
|
|
91
94
|
}))
|
|
92
|
-
} : {}), props.
|
|
93
|
-
|
|
95
|
+
} : {}), props.appearance === 'filter' && {
|
|
96
|
+
DropdownIndicator: () => jsxRuntime.jsx(icons.SearchIcon, {
|
|
97
|
+
color: "neutral60"
|
|
98
|
+
}),
|
|
99
|
+
ClearIndicator: null
|
|
100
|
+
}), props.optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(props.appearance) : {}), props.components),
|
|
101
|
+
menuIsOpen: props.isReadOnly ? false : props.appearance === 'filter' ? true : props.menuIsOpen,
|
|
94
102
|
styles: selectUtils.createSelectStyles({
|
|
95
103
|
hasWarning: props.hasWarning,
|
|
104
|
+
appearance: props.appearance,
|
|
96
105
|
hasError: props.hasError,
|
|
97
106
|
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
98
107
|
menuPortalZIndex: props.menuPortalZIndex,
|
|
99
|
-
isCondensed: props.isCondensed,
|
|
108
|
+
isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
|
|
100
109
|
isDisabled: props.isDisabled,
|
|
101
110
|
isReadOnly: props.isReadOnly,
|
|
102
111
|
iconLeft: props.iconLeft,
|
|
@@ -105,8 +114,7 @@ const AsyncSelectInput = props => {
|
|
|
105
114
|
controlShouldRenderValue: props.controlShouldRenderValue,
|
|
106
115
|
horizontalConstraint: props.horizontalConstraint
|
|
107
116
|
}),
|
|
108
|
-
filterOption: props.filterOption
|
|
109
|
-
hideSelectedOptions: props.hideSelectedOptions
|
|
117
|
+
filterOption: props.filterOption
|
|
110
118
|
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
111
119
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
112
120
|
// instead.
|
|
@@ -117,7 +125,10 @@ const AsyncSelectInput = props => {
|
|
|
117
125
|
inputValue: props.inputValue,
|
|
118
126
|
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
119
127
|
isDisabled: props.isDisabled,
|
|
120
|
-
isOptionDisabled: props.isOptionDisabled
|
|
128
|
+
isOptionDisabled: props.isOptionDisabled
|
|
129
|
+
}, props.optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {
|
|
130
|
+
hideSelectedOptions: props.hideSelectedOptions
|
|
131
|
+
}), {}, {
|
|
121
132
|
isMulti: props.isMulti,
|
|
122
133
|
isSearchable: props.isSearchable,
|
|
123
134
|
maxMenuHeight: props.maxMenuHeight,
|
|
@@ -180,8 +191,8 @@ const AsyncSelectInput = props => {
|
|
|
180
191
|
,
|
|
181
192
|
isCondensed: props.isCondensed,
|
|
182
193
|
iconLeft: props.iconLeft,
|
|
183
|
-
controlShouldRenderValue: props.controlShouldRenderValue
|
|
184
|
-
})
|
|
194
|
+
controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue
|
|
195
|
+
}))
|
|
185
196
|
}))
|
|
186
197
|
});
|
|
187
198
|
};
|
|
@@ -198,7 +209,10 @@ AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
198
209
|
loadingMessage: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].func]),
|
|
199
210
|
defaultOptions: _pt__default["default"].oneOfType([_pt__default["default"].any, _pt__default["default"].bool]),
|
|
200
211
|
showOptionGroupDivider: _pt__default["default"].bool,
|
|
201
|
-
iconLeft: _pt__default["default"].node
|
|
212
|
+
iconLeft: _pt__default["default"].node,
|
|
213
|
+
optionStyle: _pt__default["default"].oneOf(['list', 'checkbox']).isRequired,
|
|
214
|
+
appearance: _pt__default["default"].oneOf(['default', 'filter']),
|
|
215
|
+
count: _pt__default["default"].number
|
|
202
216
|
} : {};
|
|
203
217
|
AsyncSelectInput.displayName = 'AsyncSelectInput';
|
|
204
218
|
AsyncSelectInput.defaultProps = defaultProps;
|
|
@@ -249,7 +263,7 @@ AsyncSelectInput.ValueContainer = reactSelect.components.ValueContainer;
|
|
|
249
263
|
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
250
264
|
|
|
251
265
|
// NOTE: This string will be replaced on build time with the package version.
|
|
252
|
-
var version = "19.
|
|
266
|
+
var version = "19.16.0";
|
|
253
267
|
|
|
254
268
|
exports["default"] = AsyncSelectInput$1;
|
|
255
269
|
exports.version = version;
|
|
@@ -20,6 +20,7 @@ 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 icons = require('@commercetools-uikit/icons');
|
|
23
24
|
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
24
25
|
|
|
25
26
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
@@ -55,7 +56,9 @@ const defaultProps = {
|
|
|
55
56
|
value: null,
|
|
56
57
|
isSearchable: true,
|
|
57
58
|
menuPortalZIndex: 1,
|
|
58
|
-
controlShouldRenderValue: true
|
|
59
|
+
controlShouldRenderValue: true,
|
|
60
|
+
appearance: 'default',
|
|
61
|
+
optionStyle: 'list'
|
|
59
62
|
};
|
|
60
63
|
const AsyncSelectInput = props => {
|
|
61
64
|
const intl = reactIntl.useIntl();
|
|
@@ -65,7 +68,7 @@ const AsyncSelectInput = props => {
|
|
|
65
68
|
menuPortalTarget: props.menuPortalTarget,
|
|
66
69
|
componentName: 'AsyncSelectInput'
|
|
67
70
|
});
|
|
68
|
-
const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
71
|
+
const placeholder = props.placeholder || intl.formatMessage(props.appearance === 'filter' ? selectUtils.messages.selectInputAsFilterPlaceholder : selectUtils.messages.placeholder);
|
|
69
72
|
const loadingMessage = () => {
|
|
70
73
|
if (typeof props.loadingMessage === 'function') {
|
|
71
74
|
return props.loadingMessage();
|
|
@@ -75,25 +78,31 @@ const AsyncSelectInput = props => {
|
|
|
75
78
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
76
79
|
max: props.horizontalConstraint,
|
|
77
80
|
children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
|
|
78
|
-
children: jsxRuntime.jsx(AsyncSelect__default["default"], {
|
|
81
|
+
children: jsxRuntime.jsx(AsyncSelect__default["default"], _objectSpread(_objectSpread({
|
|
79
82
|
"aria-label": props['aria-label'],
|
|
80
83
|
"aria-labelledby": props['aria-labelledby'],
|
|
81
84
|
"aria-invalid": props['aria-invalid'],
|
|
82
85
|
"aria-errormessage": props['aria-errormessage'],
|
|
83
86
|
autoFocus: props.isAutofocussed,
|
|
84
87
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
85
|
-
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
88
|
+
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
86
89
|
Input: ownProps => jsxRuntime.jsx(reactSelect.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
87
90
|
readOnly: true
|
|
88
91
|
}))
|
|
89
|
-
} : {}), props.
|
|
90
|
-
|
|
92
|
+
} : {}), props.appearance === 'filter' && {
|
|
93
|
+
DropdownIndicator: () => jsxRuntime.jsx(icons.SearchIcon, {
|
|
94
|
+
color: "neutral60"
|
|
95
|
+
}),
|
|
96
|
+
ClearIndicator: null
|
|
97
|
+
}), props.optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(props.appearance) : {}), props.components),
|
|
98
|
+
menuIsOpen: props.isReadOnly ? false : props.appearance === 'filter' ? true : props.menuIsOpen,
|
|
91
99
|
styles: selectUtils.createSelectStyles({
|
|
92
100
|
hasWarning: props.hasWarning,
|
|
101
|
+
appearance: props.appearance,
|
|
93
102
|
hasError: props.hasError,
|
|
94
103
|
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
95
104
|
menuPortalZIndex: props.menuPortalZIndex,
|
|
96
|
-
isCondensed: props.isCondensed,
|
|
105
|
+
isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
|
|
97
106
|
isDisabled: props.isDisabled,
|
|
98
107
|
isReadOnly: props.isReadOnly,
|
|
99
108
|
iconLeft: props.iconLeft,
|
|
@@ -102,8 +111,7 @@ const AsyncSelectInput = props => {
|
|
|
102
111
|
controlShouldRenderValue: props.controlShouldRenderValue,
|
|
103
112
|
horizontalConstraint: props.horizontalConstraint
|
|
104
113
|
}),
|
|
105
|
-
filterOption: props.filterOption
|
|
106
|
-
hideSelectedOptions: props.hideSelectedOptions
|
|
114
|
+
filterOption: props.filterOption
|
|
107
115
|
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
108
116
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
109
117
|
// instead.
|
|
@@ -114,7 +122,10 @@ const AsyncSelectInput = props => {
|
|
|
114
122
|
inputValue: props.inputValue,
|
|
115
123
|
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
116
124
|
isDisabled: props.isDisabled,
|
|
117
|
-
isOptionDisabled: props.isOptionDisabled
|
|
125
|
+
isOptionDisabled: props.isOptionDisabled
|
|
126
|
+
}, props.optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {
|
|
127
|
+
hideSelectedOptions: props.hideSelectedOptions
|
|
128
|
+
}), {}, {
|
|
118
129
|
isMulti: props.isMulti,
|
|
119
130
|
isSearchable: props.isSearchable,
|
|
120
131
|
maxMenuHeight: props.maxMenuHeight,
|
|
@@ -177,8 +188,8 @@ const AsyncSelectInput = props => {
|
|
|
177
188
|
,
|
|
178
189
|
isCondensed: props.isCondensed,
|
|
179
190
|
iconLeft: props.iconLeft,
|
|
180
|
-
controlShouldRenderValue: props.controlShouldRenderValue
|
|
181
|
-
})
|
|
191
|
+
controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue
|
|
192
|
+
}))
|
|
182
193
|
}))
|
|
183
194
|
});
|
|
184
195
|
};
|
|
@@ -232,7 +243,7 @@ AsyncSelectInput.ValueContainer = reactSelect.components.ValueContainer;
|
|
|
232
243
|
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
233
244
|
|
|
234
245
|
// NOTE: This string will be replaced on build time with the package version.
|
|
235
|
-
var version = "19.
|
|
246
|
+
var version = "19.16.0";
|
|
236
247
|
|
|
237
248
|
exports["default"] = AsyncSelectInput$1;
|
|
238
249
|
exports.version = version;
|
|
@@ -15,7 +15,8 @@ import AsyncSelect from 'react-select/async';
|
|
|
15
15
|
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
|
-
import { warnIfMenuPortalPropsAreMissing, messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
|
|
18
|
+
import { warnIfMenuPortalPropsAreMissing, messages, customComponentsWithIcons, optionStyleCheckboxComponents, createSelectStyles, optionsStyleCheckboxSelectProps, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
|
|
19
|
+
import { SearchIcon } from '@commercetools-uikit/icons';
|
|
19
20
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
20
21
|
|
|
21
22
|
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -36,7 +37,9 @@ const defaultProps = {
|
|
|
36
37
|
value: null,
|
|
37
38
|
isSearchable: true,
|
|
38
39
|
menuPortalZIndex: 1,
|
|
39
|
-
controlShouldRenderValue: true
|
|
40
|
+
controlShouldRenderValue: true,
|
|
41
|
+
appearance: 'default',
|
|
42
|
+
optionStyle: 'list'
|
|
40
43
|
};
|
|
41
44
|
const AsyncSelectInput = props => {
|
|
42
45
|
const intl = useIntl();
|
|
@@ -48,7 +51,7 @@ const AsyncSelectInput = props => {
|
|
|
48
51
|
menuPortalTarget: props.menuPortalTarget,
|
|
49
52
|
componentName: 'AsyncSelectInput'
|
|
50
53
|
});
|
|
51
|
-
const placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
|
|
54
|
+
const placeholder = props.placeholder || intl.formatMessage(props.appearance === 'filter' ? messages.selectInputAsFilterPlaceholder : messages.placeholder);
|
|
52
55
|
const loadingMessage = () => {
|
|
53
56
|
if (typeof props.loadingMessage === 'function') {
|
|
54
57
|
return props.loadingMessage();
|
|
@@ -58,25 +61,31 @@ const AsyncSelectInput = props => {
|
|
|
58
61
|
return jsx(Constraints.Horizontal, {
|
|
59
62
|
max: props.horizontalConstraint,
|
|
60
63
|
children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
|
|
61
|
-
children: jsx(AsyncSelect, {
|
|
64
|
+
children: jsx(AsyncSelect, _objectSpread(_objectSpread({
|
|
62
65
|
"aria-label": props['aria-label'],
|
|
63
66
|
"aria-labelledby": props['aria-labelledby'],
|
|
64
67
|
"aria-invalid": props['aria-invalid'],
|
|
65
68
|
"aria-errormessage": props['aria-errormessage'],
|
|
66
69
|
autoFocus: props.isAutofocussed,
|
|
67
70
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
68
|
-
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
71
|
+
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
69
72
|
Input: ownProps => jsx(components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
70
73
|
readOnly: true
|
|
71
74
|
}))
|
|
72
|
-
} : {}), props.
|
|
73
|
-
|
|
75
|
+
} : {}), props.appearance === 'filter' && {
|
|
76
|
+
DropdownIndicator: () => jsx(SearchIcon, {
|
|
77
|
+
color: "neutral60"
|
|
78
|
+
}),
|
|
79
|
+
ClearIndicator: null
|
|
80
|
+
}), props.optionStyle === 'checkbox' ? optionStyleCheckboxComponents(props.appearance) : {}), props.components),
|
|
81
|
+
menuIsOpen: props.isReadOnly ? false : props.appearance === 'filter' ? true : props.menuIsOpen,
|
|
74
82
|
styles: createSelectStyles({
|
|
75
83
|
hasWarning: props.hasWarning,
|
|
84
|
+
appearance: props.appearance,
|
|
76
85
|
hasError: props.hasError,
|
|
77
86
|
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
78
87
|
menuPortalZIndex: props.menuPortalZIndex,
|
|
79
|
-
isCondensed: props.isCondensed,
|
|
88
|
+
isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
|
|
80
89
|
isDisabled: props.isDisabled,
|
|
81
90
|
isReadOnly: props.isReadOnly,
|
|
82
91
|
iconLeft: props.iconLeft,
|
|
@@ -85,8 +94,7 @@ const AsyncSelectInput = props => {
|
|
|
85
94
|
controlShouldRenderValue: props.controlShouldRenderValue,
|
|
86
95
|
horizontalConstraint: props.horizontalConstraint
|
|
87
96
|
}),
|
|
88
|
-
filterOption: props.filterOption
|
|
89
|
-
hideSelectedOptions: props.hideSelectedOptions
|
|
97
|
+
filterOption: props.filterOption
|
|
90
98
|
// react-select uses "id" (for the container) and "inputId" (for the input),
|
|
91
99
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
92
100
|
// instead.
|
|
@@ -97,7 +105,10 @@ const AsyncSelectInput = props => {
|
|
|
97
105
|
inputValue: props.inputValue,
|
|
98
106
|
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
99
107
|
isDisabled: props.isDisabled,
|
|
100
|
-
isOptionDisabled: props.isOptionDisabled
|
|
108
|
+
isOptionDisabled: props.isOptionDisabled
|
|
109
|
+
}, props.optionStyle === 'checkbox' ? optionsStyleCheckboxSelectProps() : {
|
|
110
|
+
hideSelectedOptions: props.hideSelectedOptions
|
|
111
|
+
}), {}, {
|
|
101
112
|
isMulti: props.isMulti,
|
|
102
113
|
isSearchable: props.isSearchable,
|
|
103
114
|
maxMenuHeight: props.maxMenuHeight,
|
|
@@ -160,8 +171,8 @@ const AsyncSelectInput = props => {
|
|
|
160
171
|
,
|
|
161
172
|
isCondensed: props.isCondensed,
|
|
162
173
|
iconLeft: props.iconLeft,
|
|
163
|
-
controlShouldRenderValue: props.controlShouldRenderValue
|
|
164
|
-
})
|
|
174
|
+
controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue
|
|
175
|
+
}))
|
|
165
176
|
}))
|
|
166
177
|
});
|
|
167
178
|
};
|
|
@@ -178,7 +189,10 @@ AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
178
189
|
loadingMessage: _pt.oneOfType([_pt.string, _pt.func]),
|
|
179
190
|
defaultOptions: _pt.oneOfType([_pt.any, _pt.bool]),
|
|
180
191
|
showOptionGroupDivider: _pt.bool,
|
|
181
|
-
iconLeft: _pt.node
|
|
192
|
+
iconLeft: _pt.node,
|
|
193
|
+
optionStyle: _pt.oneOf(['list', 'checkbox']).isRequired,
|
|
194
|
+
appearance: _pt.oneOf(['default', 'filter']),
|
|
195
|
+
count: _pt.number
|
|
182
196
|
} : {};
|
|
183
197
|
AsyncSelectInput.displayName = 'AsyncSelectInput';
|
|
184
198
|
AsyncSelectInput.defaultProps = defaultProps;
|
|
@@ -229,6 +243,6 @@ AsyncSelectInput.ValueContainer = components.ValueContainer;
|
|
|
229
243
|
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
230
244
|
|
|
231
245
|
// NOTE: This string will be replaced on build time with the package version.
|
|
232
|
-
var version = "19.
|
|
246
|
+
var version = "19.16.0";
|
|
233
247
|
|
|
234
248
|
export { AsyncSelectInput$1 as default, version };
|
|
@@ -255,11 +255,22 @@ export type TAsyncSelectInputProps = {
|
|
|
255
255
|
* Icon to display on the left of the placeholder text and selected value. Has no effect when `isMulti` is enabled.
|
|
256
256
|
*/
|
|
257
257
|
iconLeft?: ReactNode;
|
|
258
|
+
/** defines how options are rendered */
|
|
259
|
+
optionStyle: 'list' | 'checkbox';
|
|
260
|
+
/**
|
|
261
|
+
* Indicates the appearance of the input.
|
|
262
|
+
* Filter appearance is meant to be used when the async-select is used as a filter.
|
|
263
|
+
*/
|
|
264
|
+
appearance?: 'default' | 'filter';
|
|
265
|
+
/**
|
|
266
|
+
* An additional value displayed on the select options menu. This value is only available in the checkbox option style when appearance is set to filter.
|
|
267
|
+
*/
|
|
268
|
+
count?: number;
|
|
258
269
|
};
|
|
259
270
|
declare const AsyncSelectInput: {
|
|
260
271
|
(props: TAsyncSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
261
272
|
displayName: string;
|
|
262
|
-
defaultProps: Pick<TAsyncSelectInputProps, "value" | "controlShouldRenderValue" | "isSearchable" | "menuPortalZIndex">;
|
|
273
|
+
defaultProps: Pick<TAsyncSelectInputProps, "value" | "appearance" | "controlShouldRenderValue" | "isSearchable" | "menuPortalZIndex" | "optionStyle">;
|
|
263
274
|
/**
|
|
264
275
|
* Expose static helper methods.
|
|
265
276
|
*/
|
|
@@ -278,11 +289,7 @@ declare const AsyncSelectInput: {
|
|
|
278
289
|
(props: import("react-select").DropdownIndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
279
290
|
displayName: string;
|
|
280
291
|
};
|
|
281
|
-
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"
|
|
282
|
-
* Custom method to filter whether an option should be displayed in the menu
|
|
283
|
-
* <br>
|
|
284
|
-
* [Props from React select was used](https://react-select.com/props)
|
|
285
|
-
*/).jsx.JSX.Element;
|
|
292
|
+
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;
|
|
286
293
|
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;
|
|
287
294
|
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;
|
|
288
295
|
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;
|
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": "19.
|
|
4
|
+
"version": "19.16.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,14 +21,14 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/constraints": "19.
|
|
25
|
-
"@commercetools-uikit/design-system": "19.
|
|
26
|
-
"@commercetools-uikit/icons": "19.
|
|
27
|
-
"@commercetools-uikit/loading-spinner": "19.
|
|
28
|
-
"@commercetools-uikit/select-utils": "19.
|
|
29
|
-
"@commercetools-uikit/spacings": "19.
|
|
30
|
-
"@commercetools-uikit/text": "19.
|
|
31
|
-
"@commercetools-uikit/utils": "19.
|
|
24
|
+
"@commercetools-uikit/constraints": "19.16.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "19.16.0",
|
|
26
|
+
"@commercetools-uikit/icons": "19.16.0",
|
|
27
|
+
"@commercetools-uikit/loading-spinner": "19.16.0",
|
|
28
|
+
"@commercetools-uikit/select-utils": "19.16.0",
|
|
29
|
+
"@commercetools-uikit/spacings": "19.16.0",
|
|
30
|
+
"@commercetools-uikit/text": "19.16.0",
|
|
31
|
+
"@commercetools-uikit/utils": "19.16.0",
|
|
32
32
|
"@emotion/react": "^11.10.5",
|
|
33
33
|
"@emotion/styled": "^11.10.5",
|
|
34
34
|
"lodash": "4.17.21",
|