@commercetools-uikit/select-input 19.13.0 → 19.14.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
CHANGED
|
@@ -60,7 +60,7 @@ export default Example;
|
|
|
60
60
|
|
|
61
61
|
| Props | Type | Required | Default | Description |
|
|
62
62
|
| -------------------------- | -------------------------------------------------------------------------------------------------------- | :------: | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
63
|
-
| `appearance` | `union`<br/>Possible values:<br/>`'default' , 'quiet'`
|
|
63
|
+
| `appearance` | `union`<br/>Possible values:<br/>`'default' , 'quiet' , 'filter'` | | `'default'` | Indicates the appearance of the input.
`quiet` appearance is meant to be used with the `horizontalConstraint="auto"`.
`filter` appearance provides a different look and feel for the select input when it is used as part of a filter component. |
|
|
64
64
|
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | |
|
|
65
65
|
| `hasError` | `boolean` | | | Indicates that input has errors |
|
|
66
66
|
| `isReadOnly` | `boolean` | | | Is the select read-only |
|
|
@@ -98,6 +98,7 @@ export default Example;
|
|
|
98
98
|
| `onFocus` | `ReactSelectProps['onFocus']` | | | Handle focus events on the control
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
99
99
|
| `onInputChange` | `ReactSelectProps['onInputChange']` | | | Handle change events on the input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
100
100
|
| `options` | `union`<br/>Possible values:<br/>`TOption[] , TOptionObject[]` | | `[]` | Array of options that populate the select menu |
|
|
101
|
+
| `optionStyle` | `union`<br/>Possible values:<br/>`'list' , 'checkbox'` | | `'list'` | defines how options are rendered |
|
|
101
102
|
| `showOptionGroupDivider` | `boolean` | | | |
|
|
102
103
|
| `placeholder` | `ReactSelectProps['placeholder']` | | | Placeholder text for the select value
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
103
104
|
| `tabIndex` | `ReactSelectProps['tabIndex']` | | | Sets the tabIndex attribute on the input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
@@ -105,6 +106,7 @@ export default Example;
|
|
|
105
106
|
| `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) |
|
|
106
107
|
| `minMenuWidth` | `union`<br/>Possible values:<br/>`, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | The min width (a range of values from the horizontalConrtaint set of values) for which the select-input menu
is allowed to shrink. If unset, the menu will shrink to a default value. |
|
|
107
108
|
| `maxMenuWidth` | `union`<br/>Possible values:<br/>`, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | The max width (a range of values from the horizontalConrtaint set of values) for which the select-input menu
is allowed to grow. If unset, the menu will grow horrizontally to fill its parent. |
|
|
109
|
+
| `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. |
|
|
108
110
|
|
|
109
111
|
## Signatures
|
|
110
112
|
|
|
@@ -22,6 +22,7 @@ var Select = require('react-select');
|
|
|
22
22
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
23
23
|
var selectUtils = require('@commercetools-uikit/select-utils');
|
|
24
24
|
var utils = require('@commercetools-uikit/utils');
|
|
25
|
+
var icons = require('@commercetools-uikit/icons');
|
|
25
26
|
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
26
27
|
|
|
27
28
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
@@ -54,7 +55,8 @@ const defaultProps = {
|
|
|
54
55
|
appearance: 'default',
|
|
55
56
|
maxMenuHeight: 220,
|
|
56
57
|
menuPortalZIndex: 1,
|
|
57
|
-
options: []
|
|
58
|
+
options: [],
|
|
59
|
+
optionStyle: 'list'
|
|
58
60
|
};
|
|
59
61
|
const isOptionObject = option => option.options !== undefined;
|
|
60
62
|
const SelectInput = props => {
|
|
@@ -65,7 +67,7 @@ const SelectInput = props => {
|
|
|
65
67
|
menuPortalTarget: props.menuPortalTarget,
|
|
66
68
|
componentName: 'SelectInput'
|
|
67
69
|
});
|
|
68
|
-
const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
70
|
+
const placeholder = props.appearance === 'filter' && !props.placeholder ? intl.formatMessage(selectUtils.messages.selectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
69
71
|
// Options can be grouped as
|
|
70
72
|
// const colourOptions = [{ value: 'green', label: 'Green' }];
|
|
71
73
|
// const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
|
|
@@ -87,19 +89,24 @@ const SelectInput = props => {
|
|
|
87
89
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
88
90
|
max: props.horizontalConstraint,
|
|
89
91
|
children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
|
|
90
|
-
children: jsxRuntime.jsx(Select__default["default"], {
|
|
92
|
+
children: jsxRuntime.jsx(Select__default["default"], _objectSpread(_objectSpread({
|
|
91
93
|
"aria-label": props['aria-label'],
|
|
92
94
|
"aria-labelledby": props['aria-labelledby'],
|
|
93
95
|
"aria-invalid": props['aria-invalid'],
|
|
94
96
|
"aria-errormessage": props['aria-errormessage'],
|
|
95
97
|
autoFocus: props.isAutofocussed,
|
|
96
98
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
97
|
-
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
99
|
+
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
98
100
|
Input: ownProps => jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
99
101
|
readOnly: true
|
|
100
102
|
}))
|
|
101
|
-
} : {}), props.
|
|
102
|
-
|
|
103
|
+
} : {}), props.appearance === 'filter' && {
|
|
104
|
+
DropdownIndicator: () => jsxRuntime.jsx(icons.SearchIcon, {
|
|
105
|
+
color: "neutral60"
|
|
106
|
+
}),
|
|
107
|
+
ClearIndicator: null
|
|
108
|
+
}), props.optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(props.appearance) : {}), props.components),
|
|
109
|
+
menuIsOpen: props.isReadOnly ? false : props.appearance === 'filter' ? true : props.menuIsOpen,
|
|
103
110
|
styles: selectUtils.createSelectStyles({
|
|
104
111
|
hasWarning: props.hasWarning,
|
|
105
112
|
hasError: props.hasError,
|
|
@@ -108,7 +115,7 @@ const SelectInput = props => {
|
|
|
108
115
|
appearance: props.appearance,
|
|
109
116
|
isDisabled: props.isDisabled,
|
|
110
117
|
isReadOnly: props.isReadOnly,
|
|
111
|
-
isCondensed: props.isCondensed,
|
|
118
|
+
isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
|
|
112
119
|
iconLeft: props.iconLeft,
|
|
113
120
|
isMulti: props.isMulti,
|
|
114
121
|
hasValue: !isEmpty__default["default"](selectedOptions),
|
|
@@ -128,17 +135,20 @@ const SelectInput = props => {
|
|
|
128
135
|
inputValue: props.inputValue,
|
|
129
136
|
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
130
137
|
isDisabled: props.isDisabled,
|
|
131
|
-
isOptionDisabled: props.isOptionDisabled
|
|
138
|
+
isOptionDisabled: props.isOptionDisabled
|
|
139
|
+
}, props.optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {
|
|
132
140
|
hideSelectedOptions: props.hideSelectedOptions
|
|
141
|
+
}), {}, {
|
|
133
142
|
// @ts-ignore
|
|
134
|
-
,
|
|
135
143
|
isReadOnly: props.isReadOnly,
|
|
136
144
|
isMulti: props.isMulti,
|
|
137
145
|
isSearchable: props.isSearchable,
|
|
138
146
|
isCondensed: props.isCondensed,
|
|
139
147
|
maxMenuHeight: props.maxMenuHeight,
|
|
140
148
|
menuPortalTarget: props.menuPortalTarget,
|
|
141
|
-
menuShouldBlockScroll: props.menuShouldBlockScroll
|
|
149
|
+
menuShouldBlockScroll: props.menuShouldBlockScroll
|
|
150
|
+
// @ts-expect-error: optionStyle 'checkbox' will override this property (if set)
|
|
151
|
+
,
|
|
142
152
|
closeMenuOnSelect: props.closeMenuOnSelect,
|
|
143
153
|
name: props.name,
|
|
144
154
|
noOptionsMessage: props.noOptionsMessage || (_ref => {
|
|
@@ -195,14 +205,14 @@ const SelectInput = props => {
|
|
|
195
205
|
tabSelectsValue: props.tabSelectsValue,
|
|
196
206
|
value: selectedOptions,
|
|
197
207
|
iconLeft: props.iconLeft,
|
|
198
|
-
controlShouldRenderValue: props.controlShouldRenderValue,
|
|
208
|
+
controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue,
|
|
199
209
|
menuPlacement: "auto"
|
|
200
|
-
})
|
|
210
|
+
}, props.optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {}))
|
|
201
211
|
}))
|
|
202
212
|
});
|
|
203
213
|
};
|
|
204
214
|
SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
205
|
-
appearance: _pt__default["default"].oneOf(['default', 'quiet']),
|
|
215
|
+
appearance: _pt__default["default"].oneOf(['default', 'quiet', 'filter']),
|
|
206
216
|
horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
207
217
|
hasError: _pt__default["default"].bool,
|
|
208
218
|
isReadOnly: _pt__default["default"].bool,
|
|
@@ -215,16 +225,20 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
215
225
|
onChange: _pt__default["default"].func,
|
|
216
226
|
options: _pt__default["default"].oneOfType([_pt__default["default"].arrayOf(_pt__default["default"].shape({
|
|
217
227
|
value: _pt__default["default"].string.isRequired,
|
|
218
|
-
label: _pt__default["default"].node
|
|
228
|
+
label: _pt__default["default"].node,
|
|
229
|
+
isDisabled: _pt__default["default"].bool
|
|
219
230
|
})), _pt__default["default"].arrayOf(_pt__default["default"].shape({
|
|
220
231
|
options: _pt__default["default"].arrayOf(_pt__default["default"].shape({
|
|
221
232
|
value: _pt__default["default"].string.isRequired,
|
|
222
|
-
label: _pt__default["default"].node
|
|
233
|
+
label: _pt__default["default"].node,
|
|
234
|
+
isDisabled: _pt__default["default"].bool
|
|
223
235
|
})).isRequired
|
|
224
236
|
}))]).isRequired,
|
|
237
|
+
optionStyle: _pt__default["default"].oneOf(['list', 'checkbox']).isRequired,
|
|
225
238
|
showOptionGroupDivider: _pt__default["default"].bool,
|
|
226
239
|
minMenuWidth: _pt__default["default"].oneOf([2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
227
|
-
maxMenuWidth: _pt__default["default"].oneOf([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
|
|
240
|
+
maxMenuWidth: _pt__default["default"].oneOf([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
241
|
+
count: _pt__default["default"].number
|
|
228
242
|
} : {};
|
|
229
243
|
SelectInput.displayName = 'SelectInput';
|
|
230
244
|
SelectInput.defaultProps = defaultProps;
|
|
@@ -268,7 +282,7 @@ SelectInput.ValueContainer = Select.components.ValueContainer;
|
|
|
268
282
|
var SelectInput$1 = SelectInput;
|
|
269
283
|
|
|
270
284
|
// NOTE: This string will be replaced on build time with the package version.
|
|
271
|
-
var version = "19.
|
|
285
|
+
var version = "19.14.0";
|
|
272
286
|
|
|
273
287
|
exports["default"] = SelectInput$1;
|
|
274
288
|
exports.version = version;
|
|
@@ -22,6 +22,7 @@ var Select = require('react-select');
|
|
|
22
22
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
23
23
|
var selectUtils = require('@commercetools-uikit/select-utils');
|
|
24
24
|
var utils = require('@commercetools-uikit/utils');
|
|
25
|
+
var icons = require('@commercetools-uikit/icons');
|
|
25
26
|
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
26
27
|
|
|
27
28
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
@@ -53,7 +54,8 @@ const defaultProps = {
|
|
|
53
54
|
appearance: 'default',
|
|
54
55
|
maxMenuHeight: 220,
|
|
55
56
|
menuPortalZIndex: 1,
|
|
56
|
-
options: []
|
|
57
|
+
options: [],
|
|
58
|
+
optionStyle: 'list'
|
|
57
59
|
};
|
|
58
60
|
const isOptionObject = option => option.options !== undefined;
|
|
59
61
|
const SelectInput = props => {
|
|
@@ -64,7 +66,7 @@ const SelectInput = props => {
|
|
|
64
66
|
menuPortalTarget: props.menuPortalTarget,
|
|
65
67
|
componentName: 'SelectInput'
|
|
66
68
|
});
|
|
67
|
-
const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
69
|
+
const placeholder = props.appearance === 'filter' && !props.placeholder ? intl.formatMessage(selectUtils.messages.selectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
68
70
|
// Options can be grouped as
|
|
69
71
|
// const colourOptions = [{ value: 'green', label: 'Green' }];
|
|
70
72
|
// const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
|
|
@@ -86,19 +88,24 @@ const SelectInput = props => {
|
|
|
86
88
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
87
89
|
max: props.horizontalConstraint,
|
|
88
90
|
children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
|
|
89
|
-
children: jsxRuntime.jsx(Select__default["default"], {
|
|
91
|
+
children: jsxRuntime.jsx(Select__default["default"], _objectSpread(_objectSpread({
|
|
90
92
|
"aria-label": props['aria-label'],
|
|
91
93
|
"aria-labelledby": props['aria-labelledby'],
|
|
92
94
|
"aria-invalid": props['aria-invalid'],
|
|
93
95
|
"aria-errormessage": props['aria-errormessage'],
|
|
94
96
|
autoFocus: props.isAutofocussed,
|
|
95
97
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
96
|
-
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
98
|
+
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
97
99
|
Input: ownProps => jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
98
100
|
readOnly: true
|
|
99
101
|
}))
|
|
100
|
-
} : {}), props.
|
|
101
|
-
|
|
102
|
+
} : {}), props.appearance === 'filter' && {
|
|
103
|
+
DropdownIndicator: () => jsxRuntime.jsx(icons.SearchIcon, {
|
|
104
|
+
color: "neutral60"
|
|
105
|
+
}),
|
|
106
|
+
ClearIndicator: null
|
|
107
|
+
}), props.optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(props.appearance) : {}), props.components),
|
|
108
|
+
menuIsOpen: props.isReadOnly ? false : props.appearance === 'filter' ? true : props.menuIsOpen,
|
|
102
109
|
styles: selectUtils.createSelectStyles({
|
|
103
110
|
hasWarning: props.hasWarning,
|
|
104
111
|
hasError: props.hasError,
|
|
@@ -107,7 +114,7 @@ const SelectInput = props => {
|
|
|
107
114
|
appearance: props.appearance,
|
|
108
115
|
isDisabled: props.isDisabled,
|
|
109
116
|
isReadOnly: props.isReadOnly,
|
|
110
|
-
isCondensed: props.isCondensed,
|
|
117
|
+
isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
|
|
111
118
|
iconLeft: props.iconLeft,
|
|
112
119
|
isMulti: props.isMulti,
|
|
113
120
|
hasValue: !isEmpty__default["default"](selectedOptions),
|
|
@@ -127,17 +134,20 @@ const SelectInput = props => {
|
|
|
127
134
|
inputValue: props.inputValue,
|
|
128
135
|
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
129
136
|
isDisabled: props.isDisabled,
|
|
130
|
-
isOptionDisabled: props.isOptionDisabled
|
|
137
|
+
isOptionDisabled: props.isOptionDisabled
|
|
138
|
+
}, props.optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {
|
|
131
139
|
hideSelectedOptions: props.hideSelectedOptions
|
|
140
|
+
}), {}, {
|
|
132
141
|
// @ts-ignore
|
|
133
|
-
,
|
|
134
142
|
isReadOnly: props.isReadOnly,
|
|
135
143
|
isMulti: props.isMulti,
|
|
136
144
|
isSearchable: props.isSearchable,
|
|
137
145
|
isCondensed: props.isCondensed,
|
|
138
146
|
maxMenuHeight: props.maxMenuHeight,
|
|
139
147
|
menuPortalTarget: props.menuPortalTarget,
|
|
140
|
-
menuShouldBlockScroll: props.menuShouldBlockScroll
|
|
148
|
+
menuShouldBlockScroll: props.menuShouldBlockScroll
|
|
149
|
+
// @ts-expect-error: optionStyle 'checkbox' will override this property (if set)
|
|
150
|
+
,
|
|
141
151
|
closeMenuOnSelect: props.closeMenuOnSelect,
|
|
142
152
|
name: props.name,
|
|
143
153
|
noOptionsMessage: props.noOptionsMessage || (_ref => {
|
|
@@ -194,9 +204,9 @@ const SelectInput = props => {
|
|
|
194
204
|
tabSelectsValue: props.tabSelectsValue,
|
|
195
205
|
value: selectedOptions,
|
|
196
206
|
iconLeft: props.iconLeft,
|
|
197
|
-
controlShouldRenderValue: props.controlShouldRenderValue,
|
|
207
|
+
controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue,
|
|
198
208
|
menuPlacement: "auto"
|
|
199
|
-
})
|
|
209
|
+
}, props.optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {}))
|
|
200
210
|
}))
|
|
201
211
|
});
|
|
202
212
|
};
|
|
@@ -243,7 +253,7 @@ SelectInput.ValueContainer = Select.components.ValueContainer;
|
|
|
243
253
|
var SelectInput$1 = SelectInput;
|
|
244
254
|
|
|
245
255
|
// NOTE: This string will be replaced on build time with the package version.
|
|
246
|
-
var version = "19.
|
|
256
|
+
var version = "19.14.0";
|
|
247
257
|
|
|
248
258
|
exports["default"] = SelectInput$1;
|
|
249
259
|
exports.version = version;
|
|
@@ -16,8 +16,9 @@ import isEmpty from 'lodash/isEmpty';
|
|
|
16
16
|
import has from 'lodash/has';
|
|
17
17
|
import Select, { components } from 'react-select';
|
|
18
18
|
import Constraints from '@commercetools-uikit/constraints';
|
|
19
|
-
import { warnIfMenuPortalPropsAreMissing, messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
|
|
19
|
+
import { warnIfMenuPortalPropsAreMissing, messages, customComponentsWithIcons, optionStyleCheckboxComponents, createSelectStyles, optionsStyleCheckboxSelectProps, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
|
|
20
20
|
import { filterDataAttributes } from '@commercetools-uikit/utils';
|
|
21
|
+
import { SearchIcon } from '@commercetools-uikit/icons';
|
|
21
22
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
22
23
|
|
|
23
24
|
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; }
|
|
@@ -31,7 +32,8 @@ const defaultProps = {
|
|
|
31
32
|
appearance: 'default',
|
|
32
33
|
maxMenuHeight: 220,
|
|
33
34
|
menuPortalZIndex: 1,
|
|
34
|
-
options: []
|
|
35
|
+
options: [],
|
|
36
|
+
optionStyle: 'list'
|
|
35
37
|
};
|
|
36
38
|
const isOptionObject = option => option.options !== undefined;
|
|
37
39
|
const SelectInput = props => {
|
|
@@ -42,7 +44,7 @@ const SelectInput = props => {
|
|
|
42
44
|
menuPortalTarget: props.menuPortalTarget,
|
|
43
45
|
componentName: 'SelectInput'
|
|
44
46
|
});
|
|
45
|
-
const placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
|
|
47
|
+
const placeholder = props.appearance === 'filter' && !props.placeholder ? intl.formatMessage(messages.selectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(messages.placeholder);
|
|
46
48
|
// Options can be grouped as
|
|
47
49
|
// const colourOptions = [{ value: 'green', label: 'Green' }];
|
|
48
50
|
// const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
|
|
@@ -64,19 +66,24 @@ const SelectInput = props => {
|
|
|
64
66
|
return jsx(Constraints.Horizontal, {
|
|
65
67
|
max: props.horizontalConstraint,
|
|
66
68
|
children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
|
|
67
|
-
children: jsx(Select, {
|
|
69
|
+
children: jsx(Select, _objectSpread(_objectSpread({
|
|
68
70
|
"aria-label": props['aria-label'],
|
|
69
71
|
"aria-labelledby": props['aria-labelledby'],
|
|
70
72
|
"aria-invalid": props['aria-invalid'],
|
|
71
73
|
"aria-errormessage": props['aria-errormessage'],
|
|
72
74
|
autoFocus: props.isAutofocussed,
|
|
73
75
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
74
|
-
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
76
|
+
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
75
77
|
Input: ownProps => jsx(components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
76
78
|
readOnly: true
|
|
77
79
|
}))
|
|
78
|
-
} : {}), props.
|
|
79
|
-
|
|
80
|
+
} : {}), props.appearance === 'filter' && {
|
|
81
|
+
DropdownIndicator: () => jsx(SearchIcon, {
|
|
82
|
+
color: "neutral60"
|
|
83
|
+
}),
|
|
84
|
+
ClearIndicator: null
|
|
85
|
+
}), props.optionStyle === 'checkbox' ? optionStyleCheckboxComponents(props.appearance) : {}), props.components),
|
|
86
|
+
menuIsOpen: props.isReadOnly ? false : props.appearance === 'filter' ? true : props.menuIsOpen,
|
|
80
87
|
styles: createSelectStyles({
|
|
81
88
|
hasWarning: props.hasWarning,
|
|
82
89
|
hasError: props.hasError,
|
|
@@ -85,7 +92,7 @@ const SelectInput = props => {
|
|
|
85
92
|
appearance: props.appearance,
|
|
86
93
|
isDisabled: props.isDisabled,
|
|
87
94
|
isReadOnly: props.isReadOnly,
|
|
88
|
-
isCondensed: props.isCondensed,
|
|
95
|
+
isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
|
|
89
96
|
iconLeft: props.iconLeft,
|
|
90
97
|
isMulti: props.isMulti,
|
|
91
98
|
hasValue: !isEmpty(selectedOptions),
|
|
@@ -105,17 +112,20 @@ const SelectInput = props => {
|
|
|
105
112
|
inputValue: props.inputValue,
|
|
106
113
|
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
107
114
|
isDisabled: props.isDisabled,
|
|
108
|
-
isOptionDisabled: props.isOptionDisabled
|
|
115
|
+
isOptionDisabled: props.isOptionDisabled
|
|
116
|
+
}, props.optionStyle === 'checkbox' ? optionsStyleCheckboxSelectProps() : {
|
|
109
117
|
hideSelectedOptions: props.hideSelectedOptions
|
|
118
|
+
}), {}, {
|
|
110
119
|
// @ts-ignore
|
|
111
|
-
,
|
|
112
120
|
isReadOnly: props.isReadOnly,
|
|
113
121
|
isMulti: props.isMulti,
|
|
114
122
|
isSearchable: props.isSearchable,
|
|
115
123
|
isCondensed: props.isCondensed,
|
|
116
124
|
maxMenuHeight: props.maxMenuHeight,
|
|
117
125
|
menuPortalTarget: props.menuPortalTarget,
|
|
118
|
-
menuShouldBlockScroll: props.menuShouldBlockScroll
|
|
126
|
+
menuShouldBlockScroll: props.menuShouldBlockScroll
|
|
127
|
+
// @ts-expect-error: optionStyle 'checkbox' will override this property (if set)
|
|
128
|
+
,
|
|
119
129
|
closeMenuOnSelect: props.closeMenuOnSelect,
|
|
120
130
|
name: props.name,
|
|
121
131
|
noOptionsMessage: props.noOptionsMessage || (_ref => {
|
|
@@ -172,14 +182,14 @@ const SelectInput = props => {
|
|
|
172
182
|
tabSelectsValue: props.tabSelectsValue,
|
|
173
183
|
value: selectedOptions,
|
|
174
184
|
iconLeft: props.iconLeft,
|
|
175
|
-
controlShouldRenderValue: props.controlShouldRenderValue,
|
|
185
|
+
controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue,
|
|
176
186
|
menuPlacement: "auto"
|
|
177
|
-
})
|
|
187
|
+
}, props.optionStyle === 'checkbox' ? optionsStyleCheckboxSelectProps() : {}))
|
|
178
188
|
}))
|
|
179
189
|
});
|
|
180
190
|
};
|
|
181
191
|
SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
182
|
-
appearance: _pt.oneOf(['default', 'quiet']),
|
|
192
|
+
appearance: _pt.oneOf(['default', 'quiet', 'filter']),
|
|
183
193
|
horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
184
194
|
hasError: _pt.bool,
|
|
185
195
|
isReadOnly: _pt.bool,
|
|
@@ -192,16 +202,20 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
192
202
|
onChange: _pt.func,
|
|
193
203
|
options: _pt.oneOfType([_pt.arrayOf(_pt.shape({
|
|
194
204
|
value: _pt.string.isRequired,
|
|
195
|
-
label: _pt.node
|
|
205
|
+
label: _pt.node,
|
|
206
|
+
isDisabled: _pt.bool
|
|
196
207
|
})), _pt.arrayOf(_pt.shape({
|
|
197
208
|
options: _pt.arrayOf(_pt.shape({
|
|
198
209
|
value: _pt.string.isRequired,
|
|
199
|
-
label: _pt.node
|
|
210
|
+
label: _pt.node,
|
|
211
|
+
isDisabled: _pt.bool
|
|
200
212
|
})).isRequired
|
|
201
213
|
}))]).isRequired,
|
|
214
|
+
optionStyle: _pt.oneOf(['list', 'checkbox']).isRequired,
|
|
202
215
|
showOptionGroupDivider: _pt.bool,
|
|
203
216
|
minMenuWidth: _pt.oneOf([2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
204
|
-
maxMenuWidth: _pt.oneOf([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
|
|
217
|
+
maxMenuWidth: _pt.oneOf([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
218
|
+
count: _pt.number
|
|
205
219
|
} : {};
|
|
206
220
|
SelectInput.displayName = 'SelectInput';
|
|
207
221
|
SelectInput.defaultProps = defaultProps;
|
|
@@ -245,6 +259,6 @@ SelectInput.ValueContainer = components.ValueContainer;
|
|
|
245
259
|
var SelectInput$1 = SelectInput;
|
|
246
260
|
|
|
247
261
|
// NOTE: This string will be replaced on build time with the package version.
|
|
248
|
-
var version = "19.
|
|
262
|
+
var version = "19.14.0";
|
|
249
263
|
|
|
250
264
|
export { SelectInput$1 as default, version };
|
|
@@ -3,6 +3,7 @@ import { type Props as ReactSelectProps } from 'react-select';
|
|
|
3
3
|
export type TOption = {
|
|
4
4
|
value: string;
|
|
5
5
|
label?: ReactNode;
|
|
6
|
+
isDisabled?: boolean;
|
|
6
7
|
};
|
|
7
8
|
export type TOptionObject = {
|
|
8
9
|
options: TOption[];
|
|
@@ -19,9 +20,10 @@ export type TCustomEvent = {
|
|
|
19
20
|
export type TSelectInputProps = {
|
|
20
21
|
/**
|
|
21
22
|
* Indicates the appearance of the input.
|
|
22
|
-
*
|
|
23
|
+
* `quiet` appearance is meant to be used with the `horizontalConstraint="auto"`.
|
|
24
|
+
* `filter` appearance provides a different look and feel for the select input when it is used as part of a filter component.
|
|
23
25
|
*/
|
|
24
|
-
appearance?: 'default' | 'quiet';
|
|
26
|
+
appearance?: 'default' | 'quiet' | 'filter';
|
|
25
27
|
horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
|
|
26
28
|
/**
|
|
27
29
|
* Indicates that input has errors
|
|
@@ -227,6 +229,8 @@ export type TSelectInputProps = {
|
|
|
227
229
|
* Array of options that populate the select menu
|
|
228
230
|
*/
|
|
229
231
|
options: TOptions;
|
|
232
|
+
/** defines how options are rendered */
|
|
233
|
+
optionStyle: 'list' | 'checkbox';
|
|
230
234
|
showOptionGroupDivider?: boolean;
|
|
231
235
|
/**
|
|
232
236
|
* Placeholder text for the select value
|
|
@@ -262,11 +266,15 @@ export type TSelectInputProps = {
|
|
|
262
266
|
* is allowed to grow. If unset, the menu will grow horrizontally to fill its parent.
|
|
263
267
|
*/
|
|
264
268
|
maxMenuWidth?: 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
|
|
269
|
+
/**
|
|
270
|
+
* 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.
|
|
271
|
+
*/
|
|
272
|
+
count?: number;
|
|
265
273
|
};
|
|
266
274
|
declare const SelectInput: {
|
|
267
275
|
(props: TSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
268
276
|
displayName: string;
|
|
269
|
-
defaultProps: Pick<TSelectInputProps, "appearance" | "maxMenuHeight" | "options" | "menuPortalZIndex">;
|
|
277
|
+
defaultProps: Pick<TSelectInputProps, "appearance" | "maxMenuHeight" | "options" | "menuPortalZIndex" | "optionStyle">;
|
|
270
278
|
/**
|
|
271
279
|
* Expose static helper methods.
|
|
272
280
|
*/
|
|
@@ -295,7 +303,13 @@ declare const SelectInput: {
|
|
|
295
303
|
Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends import("react-select").GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
|
|
296
304
|
MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends import("react-select").GroupBase<Option_10>>(props: import("react-select").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
|
|
297
305
|
MenuPortal: <Option_11, IsMulti_11 extends boolean, Group_11 extends import("react-select").GroupBase<Option_11>>(props: import("react-select/dist/declarations/src/components/Menu").MenuPortalProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element | null;
|
|
298
|
-
MultiValue: <Option_14, IsMulti_14 extends boolean, Group_14 extends import("react-select").GroupBase<Option_14>>(props: import("react-select").MultiValueProps<Option_14, IsMulti_14, Group_14>) => import(
|
|
306
|
+
MultiValue: <Option_14, IsMulti_14 extends boolean, Group_14 extends import("react-select").GroupBase<Option_14>>(props: import("react-select").MultiValueProps<Option_14, IsMulti_14, Group_14>) => import(
|
|
307
|
+
/**
|
|
308
|
+
* Is the select disabled
|
|
309
|
+
* <br>
|
|
310
|
+
* [Props from React select was used](https://react-select.com/props)
|
|
311
|
+
*/
|
|
312
|
+
"@emotion/react").jsx.JSX.Element;
|
|
299
313
|
MultiValueContainer: <Option_15, IsMulti_15 extends boolean, Group_15 extends import("react-select").GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
|
|
300
314
|
MultiValueLabel: <Option_15, IsMulti_15 extends boolean, Group_15 extends import("react-select").GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
|
|
301
315
|
MultiValueRemove: {
|
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": "19.
|
|
4
|
+
"version": "19.14.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,11 +21,11 @@
|
|
|
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/select-utils": "19.
|
|
28
|
-
"@commercetools-uikit/utils": "19.
|
|
24
|
+
"@commercetools-uikit/constraints": "19.14.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "19.14.0",
|
|
26
|
+
"@commercetools-uikit/icons": "19.14.0",
|
|
27
|
+
"@commercetools-uikit/select-utils": "19.14.0",
|
|
28
|
+
"@commercetools-uikit/utils": "19.14.0",
|
|
29
29
|
"@emotion/is-prop-valid": "1.3.1",
|
|
30
30
|
"@emotion/react": "^11.10.5",
|
|
31
31
|
"@emotion/styled": "^11.10.5",
|