@commercetools-uikit/select-input 12.2.9 → 13.0.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 +52 -41
- package/dist/commercetools-uikit-select-input.cjs.d.ts +2 -0
- package/dist/commercetools-uikit-select-input.cjs.dev.js +46 -266
- package/dist/commercetools-uikit-select-input.cjs.prod.js +27 -25
- package/dist/commercetools-uikit-select-input.esm.js +43 -262
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/declarations/src/select-input.d.ts +61 -0
- package/dist/declarations/src/version.d.ts +2 -0
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -58,47 +58,58 @@ export default Example;
|
|
|
58
58
|
|
|
59
59
|
## Properties
|
|
60
60
|
|
|
61
|
-
| Props
|
|
62
|
-
|
|
|
63
|
-
| `horizontalConstraint`
|
|
64
|
-
| `hasError`
|
|
65
|
-
| `isReadOnly`
|
|
66
|
-
| `hasWarning`
|
|
67
|
-
| `iconLeft`
|
|
68
|
-
| `aria-label`
|
|
69
|
-
| `aria-labelledby`
|
|
70
|
-
| `isAutofocussed`
|
|
71
|
-
| `backspaceRemovesValue`
|
|
72
|
-
| `components`
|
|
73
|
-
| `filterOption`
|
|
74
|
-
| `id`
|
|
75
|
-
| `inputValue`
|
|
76
|
-
| `containerId`
|
|
77
|
-
| `isClearable`
|
|
78
|
-
| `isDisabled`
|
|
79
|
-
| `isOptionDisabled`
|
|
80
|
-
| `isMulti`
|
|
81
|
-
| `isSearchable`
|
|
82
|
-
| `maxMenuHeight`
|
|
83
|
-
| `menuPortalTarget`
|
|
84
|
-
| `menuPortalZIndex`
|
|
85
|
-
| `menuShouldBlockScroll`
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
| `
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `options[]
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
61
|
+
| Props | Type | Required | Default | Description |
|
|
62
|
+
| ------------------------ | ----------------------------------------------------------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
63
|
+
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | |
|
|
64
|
+
| `hasError` | `boolean` | | | Indicates that input has errors |
|
|
65
|
+
| `isReadOnly` | `boolean` | | | Is the select read-only |
|
|
66
|
+
| `hasWarning` | `boolean` | | | Control to indicate on the input if there are selected values that are potentially invalid |
|
|
67
|
+
| `iconLeft` | `ReactNode` | | | Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled. |
|
|
68
|
+
| `aria-label` | `ReactSelectProps['aria-label']` | | | Aria label (for assistive tech)
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
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
|
+
| `isAutofocussed` | `boolean` | | | Focus the control when it is mounted |
|
|
71
|
+
| `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
|
+
| `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
|
+
| `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
|
+
| `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']` | ✅ | | The value of the search input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
76
|
+
| `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
|
+
| `isClearable` | `ReactSelectProps['isClearable']` | | | Is the select value clearable
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
78
|
+
| `isDisabled` | `ReactSelectProps['isDisabled']` | | | Is the select disabled
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
79
|
+
| `isOptionDisabled` | `ReactSelectProps['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) |
|
|
80
|
+
| `isMulti` | `ReactSelectProps['isMulti']` | | | Support multiple selected options
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
81
|
+
| `isSearchable` | `ReactSelectProps['isSearchable']` | | | Whether to enable search functionality
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
82
|
+
| `maxMenuHeight` | `ReactSelectProps['maxMenuHeight']` | | `220` | Maximum height of the menu before scrolling
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
83
|
+
| `menuPortalTarget` | `ReactSelectProps['menuPortalTarget']` | | | Dom element to portal the select menu to
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
84
|
+
| `menuPortalZIndex` | `number` | | `1` | z-index value for the menu portal |
|
|
85
|
+
| `menuShouldBlockScroll` | `ReactSelectProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
86
|
+
| `closeMenuOnSelect` | `ReactSelectProps['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) |
|
|
87
|
+
| `name` | `ReactSelectProps['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) |
|
|
88
|
+
| `noOptionsMessage` | `ReactSelectProps['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 }.
<br />
`inputValue` will be an empty string when no search text is present.
<br />
Signature: `({ inputValue}) => string`
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
89
|
+
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Handle blur events on the control
<br />
Signature: `(event) => void` |
|
|
90
|
+
| `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.
<br/>
The value will be the selected option, or an array of options in case isMulti is true.
<br />
Signature: `(event) => void` |
|
|
91
|
+
| `onFocus` | `ReactSelectProps['onFocus']` | | | Handle focus events on the control
<br />
Signature: `(event) => void`
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
92
|
+
| `onInputChange` | `ReactSelectProps['onInputChange']` | | | Handle change events on the input
<br />
Signature: `(newValue, actionMeta) => void`
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
93
|
+
| `options` | `union`<br/>Possible values:<br/>`TOption[] , TOptionObject[]` | | | Array of options that populate the select menu |
|
|
94
|
+
| `showOptionGroupDivider` | `boolean` | | | |
|
|
95
|
+
| `placeholder` | `ReactSelectProps['placeholder']` | | | Placeholder text for the select value
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
96
|
+
| `tabIndex` | `ReactSelectProps['tabIndex']` | | | Sets the tabIndex attribute on the input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
97
|
+
| `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']` | ✅ | | The value of the select; reflected by the selected option
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
99
|
+
|
|
100
|
+
## Signatures
|
|
101
|
+
|
|
102
|
+
### Signature `onBlur`
|
|
103
|
+
|
|
104
|
+
```ts
|
|
105
|
+
(event: TEvent) => void
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Signature `onChange`
|
|
109
|
+
|
|
110
|
+
```ts
|
|
111
|
+
(event: TEvent) => void
|
|
112
|
+
```
|
|
102
113
|
|
|
103
114
|
## `react-select` under the hood
|
|
104
115
|
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
6
|
+
var _pt = require('prop-types');
|
|
7
|
+
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
|
|
8
|
+
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
9
|
+
var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
|
|
5
10
|
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
|
|
6
11
|
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
|
|
7
12
|
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
|
|
@@ -9,12 +14,6 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
|
|
|
9
14
|
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
10
15
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
11
16
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
12
|
-
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
13
|
-
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
|
|
14
|
-
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
15
|
-
var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
|
|
16
|
-
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
17
|
-
var PropTypes = require('prop-types');
|
|
18
17
|
var reactIntl = require('react-intl');
|
|
19
18
|
var isEmpty = require('lodash/isEmpty');
|
|
20
19
|
var react = require('@emotion/react');
|
|
@@ -28,6 +27,10 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
|
28
27
|
|
|
29
28
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
30
29
|
|
|
30
|
+
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
31
|
+
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
|
|
32
|
+
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
33
|
+
var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
|
|
31
34
|
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
|
|
32
35
|
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
|
|
33
36
|
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
|
|
@@ -35,25 +38,24 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
|
|
|
35
38
|
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
36
39
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
37
40
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
38
|
-
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
|
|
39
|
-
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
40
|
-
var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
|
|
41
|
-
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
42
|
-
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
43
41
|
var isEmpty__default = /*#__PURE__*/_interopDefault(isEmpty);
|
|
44
42
|
var has__default = /*#__PURE__*/_interopDefault(has);
|
|
45
43
|
var flatMap__default = /*#__PURE__*/_interopDefault(flatMap);
|
|
46
44
|
var Select__default = /*#__PURE__*/_interopDefault(Select);
|
|
47
45
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
48
46
|
|
|
49
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object);
|
|
47
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
50
48
|
|
|
51
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
49
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
52
50
|
var customizedComponents = {
|
|
53
51
|
DropdownIndicator: selectUtils.DropdownIndicator,
|
|
54
52
|
ClearIndicator: selectUtils.ClearIndicator,
|
|
55
53
|
MultiValueRemove: selectUtils.TagRemove
|
|
56
54
|
};
|
|
55
|
+
var defaultProps = {
|
|
56
|
+
maxMenuHeight: 220,
|
|
57
|
+
menuPortalZIndex: 1
|
|
58
|
+
};
|
|
57
59
|
|
|
58
60
|
var SelectInput = function SelectInput(props) {
|
|
59
61
|
var _context, _context2;
|
|
@@ -90,7 +92,6 @@ var SelectInput = function SelectInput(props) {
|
|
|
90
92
|
autoFocus: props.isAutofocussed,
|
|
91
93
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
92
94
|
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
93
|
-
// eslint-disable-next-line react/display-name
|
|
94
95
|
Input: function Input(ownProps) {
|
|
95
96
|
return jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
96
97
|
readOnly: true
|
|
@@ -119,13 +120,15 @@ var SelectInput = function SelectInput(props) {
|
|
|
119
120
|
inputValue: props.inputValue,
|
|
120
121
|
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
121
122
|
isDisabled: props.isDisabled,
|
|
123
|
+
isOptionDisabled: props.isOptionDisabled // @ts-ignore
|
|
124
|
+
,
|
|
122
125
|
isReadOnly: props.isReadOnly,
|
|
123
|
-
isOptionDisabled: props.isOptionDisabled,
|
|
124
126
|
isMulti: props.isMulti,
|
|
125
127
|
isSearchable: props.isSearchable,
|
|
126
128
|
maxMenuHeight: props.maxMenuHeight,
|
|
127
129
|
menuPortalTarget: props.menuPortalTarget,
|
|
128
130
|
menuShouldBlockScroll: props.menuShouldBlockScroll,
|
|
131
|
+
closeMenuOnSelect: props.closeMenuOnSelect,
|
|
129
132
|
name: props.name,
|
|
130
133
|
noOptionsMessage: props.noOptionsMessage || function (_ref) {
|
|
131
134
|
var inputValue = _ref.inputValue;
|
|
@@ -145,10 +148,9 @@ var SelectInput = function SelectInput(props) {
|
|
|
145
148
|
return props.name ? "".concat(props.name, ".0") : undefined;
|
|
146
149
|
}()
|
|
147
150
|
},
|
|
148
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
149
151
|
persist: function persist() {}
|
|
150
152
|
};
|
|
151
|
-
props.onBlur(event);
|
|
153
|
+
props.onBlur && props.onBlur(event);
|
|
152
154
|
} : undefined,
|
|
153
155
|
onChange: function onChange(nextSelectedOptions) {
|
|
154
156
|
// nextSelectedOptions is either an array, or a single option, or null
|
|
@@ -157,7 +159,9 @@ var SelectInput = function SelectInput(props) {
|
|
|
157
159
|
|
|
158
160
|
if (props.isMulti) {
|
|
159
161
|
if (nextSelectedOptions) {
|
|
160
|
-
|
|
162
|
+
var _context3;
|
|
163
|
+
|
|
164
|
+
value = _mapInstanceProperty__default["default"](_context3 = nextSelectedOptions).call(_context3, function (option) {
|
|
161
165
|
return option.value;
|
|
162
166
|
});
|
|
163
167
|
} else {
|
|
@@ -167,12 +171,11 @@ var SelectInput = function SelectInput(props) {
|
|
|
167
171
|
value = nextSelectedOptions.value;
|
|
168
172
|
}
|
|
169
173
|
|
|
170
|
-
props.onChange({
|
|
174
|
+
props.onChange && props.onChange({
|
|
171
175
|
target: {
|
|
172
176
|
name: props.name,
|
|
173
177
|
value: value
|
|
174
178
|
},
|
|
175
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
176
179
|
persist: function persist() {}
|
|
177
180
|
});
|
|
178
181
|
},
|
|
@@ -182,13 +185,33 @@ var SelectInput = function SelectInput(props) {
|
|
|
182
185
|
placeholder: placeholder,
|
|
183
186
|
tabIndex: props.tabIndex,
|
|
184
187
|
tabSelectsValue: props.tabSelectsValue,
|
|
185
|
-
value: selectedOptions
|
|
188
|
+
value: selectedOptions //@ts-ignore
|
|
189
|
+
,
|
|
186
190
|
iconLeft: props.iconLeft
|
|
187
191
|
})
|
|
188
192
|
}))
|
|
189
193
|
});
|
|
190
194
|
};
|
|
191
195
|
|
|
196
|
+
SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
197
|
+
horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
198
|
+
hasError: _pt__default["default"].bool,
|
|
199
|
+
isReadOnly: _pt__default["default"].bool,
|
|
200
|
+
hasWarning: _pt__default["default"].bool,
|
|
201
|
+
iconLeft: _pt__default["default"].node,
|
|
202
|
+
isAutofocussed: _pt__default["default"].bool,
|
|
203
|
+
menuPortalZIndex: _pt__default["default"].number,
|
|
204
|
+
onBlur: _pt__default["default"].func,
|
|
205
|
+
onChange: _pt__default["default"].func,
|
|
206
|
+
options: _pt__default["default"].oneOfType([_pt__default["default"].arrayOf(_pt__default["default"].shape({
|
|
207
|
+
value: _pt__default["default"].string.isRequired
|
|
208
|
+
})), _pt__default["default"].arrayOf(_pt__default["default"].shape({
|
|
209
|
+
options: _pt__default["default"].arrayOf(_pt__default["default"].shape({
|
|
210
|
+
value: _pt__default["default"].string.isRequired
|
|
211
|
+
})).isRequired
|
|
212
|
+
}))]),
|
|
213
|
+
showOptionGroupDivider: _pt__default["default"].bool
|
|
214
|
+
} : {};
|
|
192
215
|
SelectInput.displayName = 'SelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
|
|
193
216
|
// conveniently handles both cases
|
|
194
217
|
|
|
@@ -196,257 +219,14 @@ SelectInput.isTouched = function (touched) {
|
|
|
196
219
|
return Boolean(touched);
|
|
197
220
|
};
|
|
198
221
|
|
|
199
|
-
SelectInput.defaultProps =
|
|
200
|
-
maxMenuHeight: 220,
|
|
201
|
-
menuPortalZIndex: 1
|
|
202
|
-
};
|
|
203
|
-
SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
204
|
-
horizontalConstraint: PropTypes__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
205
|
-
|
|
206
|
-
/**
|
|
207
|
-
* Indicates that input has errors
|
|
208
|
-
*/
|
|
209
|
-
hasError: PropTypes__default["default"].bool,
|
|
210
|
-
|
|
211
|
-
/**
|
|
212
|
-
* Is the select read-only
|
|
213
|
-
*/
|
|
214
|
-
isReadOnly: PropTypes__default["default"].bool,
|
|
215
|
-
|
|
216
|
-
/**
|
|
217
|
-
* Control to indicate on the input if there are selected values that are potentially invalid
|
|
218
|
-
*/
|
|
219
|
-
hasWarning: PropTypes__default["default"].bool,
|
|
220
|
-
|
|
221
|
-
/**
|
|
222
|
-
* Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled.
|
|
223
|
-
*/
|
|
224
|
-
iconLeft: PropTypes__default["default"].node,
|
|
225
|
-
// react-select base props
|
|
226
|
-
//
|
|
227
|
-
// Currently unsupported props are commented out. In case you need one of
|
|
228
|
-
// these props when using UI Kit, you can submit a PR and enable the
|
|
229
|
-
// prop. Don't forget to add it to the story, docs and other select input
|
|
230
|
-
// components as well!
|
|
231
|
-
//
|
|
232
|
-
// See https://react-select.com/props#select-props
|
|
233
|
-
|
|
234
|
-
/**
|
|
235
|
-
* Aria label (for assistive tech)
|
|
236
|
-
*/
|
|
237
|
-
'aria-label': PropTypes__default["default"].string,
|
|
238
|
-
|
|
239
|
-
/**
|
|
240
|
-
* HTML ID of an element that should be used as the label (for assistive tech)
|
|
241
|
-
*/
|
|
242
|
-
'aria-labelledby': PropTypes__default["default"].string,
|
|
243
|
-
|
|
244
|
-
/**
|
|
245
|
-
* Focus the control when it is mounted
|
|
246
|
-
*/
|
|
247
|
-
isAutofocussed: PropTypes__default["default"].bool,
|
|
248
|
-
|
|
249
|
-
/**
|
|
250
|
-
* Remove the currently focused option when the user presses backspace
|
|
251
|
-
*/
|
|
252
|
-
backspaceRemovesValue: PropTypes__default["default"].bool,
|
|
253
|
-
// blurInputOnSelect: PropTypes.bool,
|
|
254
|
-
// captureMenuScroll: PropTypes.bool,
|
|
255
|
-
// className: PropTypes.string,
|
|
256
|
-
// classNamePrefix: PropTypes.string,
|
|
257
|
-
// closeMenuOnSelect: PropTypes.bool,
|
|
258
|
-
// closeMenuOnScroll: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
|
|
259
|
-
|
|
260
|
-
/**
|
|
261
|
-
* Map of components to overwrite the default ones, see what components you can override
|
|
262
|
-
*/
|
|
263
|
-
components: PropTypes__default["default"].objectOf(PropTypes__default["default"].func),
|
|
264
|
-
// controlShouldRenderValue: PropTypes.bool,
|
|
265
|
-
// delimiter: PropTypes.string,
|
|
266
|
-
// escapeClearsValue: PropTypes.bool,
|
|
267
|
-
|
|
268
|
-
/**
|
|
269
|
-
* Custom method to filter whether an option should be displayed in the menu
|
|
270
|
-
* <br />
|
|
271
|
-
* Signature: `(option, rawInput) => boolean`
|
|
272
|
-
*/
|
|
273
|
-
filterOption: PropTypes__default["default"].func,
|
|
274
|
-
// formatGroupLabel: PropTypes.func,
|
|
275
|
-
// formatOptionLabel: PropTypes.func,
|
|
276
|
-
// getOptionLabel: PropTypes.func,
|
|
277
|
-
// getOptionValue: PropTypes.func,
|
|
278
|
-
// hideSelectedOptions: PropTypes.bool,
|
|
279
|
-
|
|
280
|
-
/**
|
|
281
|
-
* Used as HTML id property. An id is generated automatically when not provided.
|
|
282
|
-
*This forwarded as react-select's "inputId"
|
|
283
|
-
*/
|
|
284
|
-
id: PropTypes__default["default"].string,
|
|
285
|
-
inputValue: PropTypes__default["default"].string,
|
|
286
|
-
|
|
287
|
-
/**
|
|
288
|
-
* The id to set on the SelectContainer component
|
|
289
|
-
* This is forwarded as react-select's "id"
|
|
290
|
-
*/
|
|
291
|
-
containerId: PropTypes__default["default"].string,
|
|
292
|
-
// instanceId: PropTypes.string,
|
|
293
|
-
|
|
294
|
-
/**
|
|
295
|
-
* Is the select value clearable
|
|
296
|
-
*/
|
|
297
|
-
isClearable: PropTypes__default["default"].bool,
|
|
298
|
-
|
|
299
|
-
/**
|
|
300
|
-
* Is the select disabled
|
|
301
|
-
*/
|
|
302
|
-
isDisabled: PropTypes__default["default"].bool,
|
|
303
|
-
// isLoading: PropTypes.bool,
|
|
304
|
-
|
|
305
|
-
/**
|
|
306
|
-
* Override the built-in logic to detect whether an option is disabled
|
|
307
|
-
*/
|
|
308
|
-
isOptionDisabled: PropTypes__default["default"].func,
|
|
309
|
-
// isOptionSelected: PropTypes.func,
|
|
310
|
-
|
|
311
|
-
/**
|
|
312
|
-
* Support multiple selected options
|
|
313
|
-
*/
|
|
314
|
-
isMulti: PropTypes__default["default"].bool,
|
|
315
|
-
// isRtl: PropTypes.bool,
|
|
316
|
-
|
|
317
|
-
/**
|
|
318
|
-
* Whether to enable search functionality
|
|
319
|
-
*/
|
|
320
|
-
isSearchable: PropTypes__default["default"].bool,
|
|
321
|
-
// loadingMessage: PropTypes.func,
|
|
322
|
-
// minMenuHeight: PropTypes.number,
|
|
323
|
-
|
|
324
|
-
/**
|
|
325
|
-
* Maximum height of the menu before scrolling
|
|
326
|
-
*/
|
|
327
|
-
maxMenuHeight: PropTypes__default["default"].number,
|
|
328
|
-
// menuIsOpen: PropTypes.bool,
|
|
329
|
-
// menuPlacement: PropTypes.oneOf(['auto', 'bottom', 'top']),
|
|
330
|
-
// menuPosition: PropTypes.oneOf(['absolute', 'fixed']),
|
|
331
|
-
|
|
332
|
-
/**
|
|
333
|
-
* Dom element to portal the select menu to
|
|
334
|
-
*/
|
|
335
|
-
menuPortalTarget: PropTypes__default["default"].instanceOf(utils.SafeHTMLElement),
|
|
336
|
-
|
|
337
|
-
/**
|
|
338
|
-
* z-index value for the menu portal
|
|
339
|
-
*/
|
|
340
|
-
menuPortalZIndex: PropTypes__default["default"].number,
|
|
341
|
-
|
|
342
|
-
/**
|
|
343
|
-
* whether the menu should block scroll while open
|
|
344
|
-
*/
|
|
345
|
-
menuShouldBlockScroll: PropTypes__default["default"].bool,
|
|
346
|
-
// menuShouldScrollIntoView: PropTypes.bool,
|
|
347
|
-
|
|
348
|
-
/**
|
|
349
|
-
* Name of the HTML Input (optional - without this, no input will be rendered)
|
|
350
|
-
*/
|
|
351
|
-
name: PropTypes__default["default"].string,
|
|
352
|
-
|
|
353
|
-
/**
|
|
354
|
-
* 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 }.
|
|
355
|
-
* <br />
|
|
356
|
-
* `inputValue` will be an empty string when no search text is present.
|
|
357
|
-
* <br />
|
|
358
|
-
* Signature: `({ inputValue}) => string`
|
|
359
|
-
*/
|
|
360
|
-
noOptionsMessage: PropTypes__default["default"].func,
|
|
361
|
-
|
|
362
|
-
/**
|
|
363
|
-
* Handle blur events on the control
|
|
364
|
-
* <br />
|
|
365
|
-
* Signature: `(event) => void`
|
|
366
|
-
*/
|
|
367
|
-
onBlur: PropTypes__default["default"].func,
|
|
368
|
-
|
|
369
|
-
/**
|
|
370
|
-
* 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.
|
|
371
|
-
* <br/>
|
|
372
|
-
* The value will be the selected option, or an array of options in case isMulti is true.
|
|
373
|
-
* <br />
|
|
374
|
-
* Signature: `(event) => void`
|
|
375
|
-
*/
|
|
376
|
-
onChange: PropTypes__default["default"].func,
|
|
377
|
-
|
|
378
|
-
/**
|
|
379
|
-
* Handle focus events on the control
|
|
380
|
-
* <br />
|
|
381
|
-
* Signature: `(event) => void`
|
|
382
|
-
*/
|
|
383
|
-
onFocus: PropTypes__default["default"].func,
|
|
384
|
-
|
|
385
|
-
/**
|
|
386
|
-
* Handle change events on the input
|
|
387
|
-
* <br />
|
|
388
|
-
* Signature: `(newValue, actionMeta) => void`
|
|
389
|
-
*/
|
|
390
|
-
onInputChange: PropTypes__default["default"].func,
|
|
391
|
-
// onKeyDown: PropTypes.func,
|
|
392
|
-
// onMenuOpen: PropTypes.func,
|
|
393
|
-
// onMenuClose: PropTypes.func,
|
|
394
|
-
// onMenuScrollToTop: PropTypes.func,
|
|
395
|
-
// onMenuScrollToBottom: PropTypes.func,
|
|
396
|
-
// openMenuOnFocus: PropTypes.bool,
|
|
397
|
-
// openMenuOnClick: PropTypes.bool,
|
|
398
|
-
|
|
399
|
-
/**
|
|
400
|
-
* Array of options that populate the select menu
|
|
401
|
-
*/
|
|
402
|
-
options: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
|
|
403
|
-
value: PropTypes__default["default"].string.isRequired
|
|
404
|
-
}), PropTypes__default["default"].shape({
|
|
405
|
-
options: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
|
|
406
|
-
value: PropTypes__default["default"].string.isRequired
|
|
407
|
-
}))
|
|
408
|
-
})])),
|
|
409
|
-
showOptionGroupDivider: PropTypes__default["default"].bool,
|
|
410
|
-
// pageSize: PropTypes.number,
|
|
411
|
-
|
|
412
|
-
/**
|
|
413
|
-
* Placeholder text for the select value
|
|
414
|
-
*/
|
|
415
|
-
placeholder: PropTypes__default["default"].string,
|
|
416
|
-
// screenReaderStatus: PropTypes.func,
|
|
417
|
-
// styles: PropTypes.objectOf(PropTypes.func),
|
|
418
|
-
// theme: PropTypes.object,
|
|
419
|
-
|
|
420
|
-
/**
|
|
421
|
-
* Sets the tabIndex attribute on the input
|
|
422
|
-
*/
|
|
423
|
-
tabIndex: PropTypes__default["default"].string,
|
|
424
|
-
|
|
425
|
-
/**
|
|
426
|
-
* Select the currently focused option when the user presses tab
|
|
427
|
-
*/
|
|
428
|
-
tabSelectsValue: PropTypes__default["default"].bool,
|
|
429
|
-
|
|
430
|
-
/**
|
|
431
|
-
* The value of the select; reflected by the selected option
|
|
432
|
-
*/
|
|
433
|
-
value: function value(props) {
|
|
434
|
-
var _PropTypes$arrayOf, _context3, _context4;
|
|
435
|
-
|
|
436
|
-
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
437
|
-
rest[_key - 1] = arguments[_key];
|
|
438
|
-
}
|
|
439
|
-
|
|
440
|
-
return props.isMulti ? (_PropTypes$arrayOf = PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)).isRequired.apply(_PropTypes$arrayOf, _concatInstanceProperty__default["default"](_context3 = [props]).call(_context3, rest)) : PropTypes__default["default"].string.apply(PropTypes__default["default"], _concatInstanceProperty__default["default"](_context4 = [props]).call(_context4, rest));
|
|
441
|
-
}
|
|
442
|
-
} : {};
|
|
222
|
+
SelectInput.defaultProps = defaultProps;
|
|
443
223
|
utils.addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({}, Select.components), customizedComponents), {}, {
|
|
444
224
|
isTouched: SelectInput.isTouched
|
|
445
225
|
}));
|
|
446
226
|
var SelectInput$1 = SelectInput;
|
|
447
227
|
|
|
448
228
|
// NOTE: This string will be replaced on build time with the package version.
|
|
449
|
-
var version = "
|
|
229
|
+
var version = "13.0.0";
|
|
450
230
|
|
|
451
231
|
exports["default"] = SelectInput$1;
|
|
452
232
|
exports.version = version;
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
6
|
+
require('prop-types');
|
|
7
|
+
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
|
|
8
|
+
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
9
|
+
var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
|
|
5
10
|
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
|
|
6
11
|
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
|
|
7
12
|
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
|
|
@@ -9,12 +14,6 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
|
|
|
9
14
|
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
10
15
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
11
16
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
12
|
-
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
13
|
-
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
|
|
14
|
-
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
15
|
-
var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
|
|
16
|
-
require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
17
|
-
require('prop-types');
|
|
18
17
|
var reactIntl = require('react-intl');
|
|
19
18
|
var isEmpty = require('lodash/isEmpty');
|
|
20
19
|
var react = require('@emotion/react');
|
|
@@ -28,6 +27,9 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
|
28
27
|
|
|
29
28
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
30
29
|
|
|
30
|
+
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
|
|
31
|
+
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
32
|
+
var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
|
|
31
33
|
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
|
|
32
34
|
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
|
|
33
35
|
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
|
|
@@ -35,23 +37,24 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
|
|
|
35
37
|
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
36
38
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
37
39
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
38
|
-
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
|
|
39
|
-
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
40
|
-
var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
|
|
41
40
|
var isEmpty__default = /*#__PURE__*/_interopDefault(isEmpty);
|
|
42
41
|
var has__default = /*#__PURE__*/_interopDefault(has);
|
|
43
42
|
var flatMap__default = /*#__PURE__*/_interopDefault(flatMap);
|
|
44
43
|
var Select__default = /*#__PURE__*/_interopDefault(Select);
|
|
45
44
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
46
45
|
|
|
47
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object);
|
|
46
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
48
47
|
|
|
49
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
48
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
50
49
|
var customizedComponents = {
|
|
51
50
|
DropdownIndicator: selectUtils.DropdownIndicator,
|
|
52
51
|
ClearIndicator: selectUtils.ClearIndicator,
|
|
53
52
|
MultiValueRemove: selectUtils.TagRemove
|
|
54
53
|
};
|
|
54
|
+
var defaultProps = {
|
|
55
|
+
maxMenuHeight: 220,
|
|
56
|
+
menuPortalZIndex: 1
|
|
57
|
+
};
|
|
55
58
|
|
|
56
59
|
var SelectInput = function SelectInput(props) {
|
|
57
60
|
var _context, _context2;
|
|
@@ -88,7 +91,6 @@ var SelectInput = function SelectInput(props) {
|
|
|
88
91
|
autoFocus: props.isAutofocussed,
|
|
89
92
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
90
93
|
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
91
|
-
// eslint-disable-next-line react/display-name
|
|
92
94
|
Input: function Input(ownProps) {
|
|
93
95
|
return jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
94
96
|
readOnly: true
|
|
@@ -117,13 +119,15 @@ var SelectInput = function SelectInput(props) {
|
|
|
117
119
|
inputValue: props.inputValue,
|
|
118
120
|
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
119
121
|
isDisabled: props.isDisabled,
|
|
122
|
+
isOptionDisabled: props.isOptionDisabled // @ts-ignore
|
|
123
|
+
,
|
|
120
124
|
isReadOnly: props.isReadOnly,
|
|
121
|
-
isOptionDisabled: props.isOptionDisabled,
|
|
122
125
|
isMulti: props.isMulti,
|
|
123
126
|
isSearchable: props.isSearchable,
|
|
124
127
|
maxMenuHeight: props.maxMenuHeight,
|
|
125
128
|
menuPortalTarget: props.menuPortalTarget,
|
|
126
129
|
menuShouldBlockScroll: props.menuShouldBlockScroll,
|
|
130
|
+
closeMenuOnSelect: props.closeMenuOnSelect,
|
|
127
131
|
name: props.name,
|
|
128
132
|
noOptionsMessage: props.noOptionsMessage || function (_ref) {
|
|
129
133
|
var inputValue = _ref.inputValue;
|
|
@@ -143,10 +147,9 @@ var SelectInput = function SelectInput(props) {
|
|
|
143
147
|
return props.name ? "".concat(props.name, ".0") : undefined;
|
|
144
148
|
}()
|
|
145
149
|
},
|
|
146
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
147
150
|
persist: function persist() {}
|
|
148
151
|
};
|
|
149
|
-
props.onBlur(event);
|
|
152
|
+
props.onBlur && props.onBlur(event);
|
|
150
153
|
} : undefined,
|
|
151
154
|
onChange: function onChange(nextSelectedOptions) {
|
|
152
155
|
// nextSelectedOptions is either an array, or a single option, or null
|
|
@@ -155,7 +158,9 @@ var SelectInput = function SelectInput(props) {
|
|
|
155
158
|
|
|
156
159
|
if (props.isMulti) {
|
|
157
160
|
if (nextSelectedOptions) {
|
|
158
|
-
|
|
161
|
+
var _context3;
|
|
162
|
+
|
|
163
|
+
value = _mapInstanceProperty__default["default"](_context3 = nextSelectedOptions).call(_context3, function (option) {
|
|
159
164
|
return option.value;
|
|
160
165
|
});
|
|
161
166
|
} else {
|
|
@@ -165,12 +170,11 @@ var SelectInput = function SelectInput(props) {
|
|
|
165
170
|
value = nextSelectedOptions.value;
|
|
166
171
|
}
|
|
167
172
|
|
|
168
|
-
props.onChange({
|
|
173
|
+
props.onChange && props.onChange({
|
|
169
174
|
target: {
|
|
170
175
|
name: props.name,
|
|
171
176
|
value: value
|
|
172
177
|
},
|
|
173
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
174
178
|
persist: function persist() {}
|
|
175
179
|
});
|
|
176
180
|
},
|
|
@@ -180,13 +184,15 @@ var SelectInput = function SelectInput(props) {
|
|
|
180
184
|
placeholder: placeholder,
|
|
181
185
|
tabIndex: props.tabIndex,
|
|
182
186
|
tabSelectsValue: props.tabSelectsValue,
|
|
183
|
-
value: selectedOptions
|
|
187
|
+
value: selectedOptions //@ts-ignore
|
|
188
|
+
,
|
|
184
189
|
iconLeft: props.iconLeft
|
|
185
190
|
})
|
|
186
191
|
}))
|
|
187
192
|
});
|
|
188
193
|
};
|
|
189
194
|
|
|
195
|
+
SelectInput.propTypes = {};
|
|
190
196
|
SelectInput.displayName = 'SelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
|
|
191
197
|
// conveniently handles both cases
|
|
192
198
|
|
|
@@ -194,18 +200,14 @@ SelectInput.isTouched = function (touched) {
|
|
|
194
200
|
return Boolean(touched);
|
|
195
201
|
};
|
|
196
202
|
|
|
197
|
-
SelectInput.defaultProps =
|
|
198
|
-
maxMenuHeight: 220,
|
|
199
|
-
menuPortalZIndex: 1
|
|
200
|
-
};
|
|
201
|
-
SelectInput.propTypes = {};
|
|
203
|
+
SelectInput.defaultProps = defaultProps;
|
|
202
204
|
utils.addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({}, Select.components), customizedComponents), {}, {
|
|
203
205
|
isTouched: SelectInput.isTouched
|
|
204
206
|
}));
|
|
205
207
|
var SelectInput$1 = SelectInput;
|
|
206
208
|
|
|
207
209
|
// NOTE: This string will be replaced on build time with the package version.
|
|
208
|
-
var version = "
|
|
210
|
+
var version = "13.0.0";
|
|
209
211
|
|
|
210
212
|
exports["default"] = SelectInput$1;
|
|
211
213
|
exports.version = version;
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
|
|
2
|
+
import _pt from 'prop-types';
|
|
3
|
+
import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
|
|
4
|
+
import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
|
|
5
|
+
import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
|
|
1
6
|
import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
|
|
2
7
|
import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
|
|
3
8
|
import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
|
|
@@ -5,12 +10,6 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
|
|
|
5
10
|
import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
|
|
6
11
|
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
|
|
7
12
|
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
|
|
8
|
-
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
|
|
9
|
-
import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
|
|
10
|
-
import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
|
|
11
|
-
import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
|
|
12
|
-
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
|
|
13
|
-
import PropTypes from 'prop-types';
|
|
14
13
|
import { useIntl } from 'react-intl';
|
|
15
14
|
import isEmpty from 'lodash/isEmpty';
|
|
16
15
|
import { useTheme } from '@emotion/react';
|
|
@@ -19,17 +18,21 @@ import flatMap from 'lodash/flatMap';
|
|
|
19
18
|
import Select, { components } from 'react-select';
|
|
20
19
|
import Constraints from '@commercetools-uikit/constraints';
|
|
21
20
|
import { messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
|
|
22
|
-
import { filterDataAttributes,
|
|
21
|
+
import { filterDataAttributes, addStaticFields } from '@commercetools-uikit/utils';
|
|
23
22
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
24
23
|
|
|
25
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object);
|
|
24
|
+
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; }
|
|
26
25
|
|
|
27
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
26
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
28
27
|
var customizedComponents = {
|
|
29
28
|
DropdownIndicator: DropdownIndicator,
|
|
30
29
|
ClearIndicator: ClearIndicator,
|
|
31
30
|
MultiValueRemove: TagRemove
|
|
32
31
|
};
|
|
32
|
+
var defaultProps = {
|
|
33
|
+
maxMenuHeight: 220,
|
|
34
|
+
menuPortalZIndex: 1
|
|
35
|
+
};
|
|
33
36
|
|
|
34
37
|
var SelectInput = function SelectInput(props) {
|
|
35
38
|
var _context, _context2;
|
|
@@ -66,7 +69,6 @@ var SelectInput = function SelectInput(props) {
|
|
|
66
69
|
autoFocus: props.isAutofocussed,
|
|
67
70
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
68
71
|
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
69
|
-
// eslint-disable-next-line react/display-name
|
|
70
72
|
Input: function Input(ownProps) {
|
|
71
73
|
return jsx(components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
72
74
|
readOnly: true
|
|
@@ -95,13 +97,15 @@ var SelectInput = function SelectInput(props) {
|
|
|
95
97
|
inputValue: props.inputValue,
|
|
96
98
|
isClearable: props.isReadOnly ? false : props.isClearable,
|
|
97
99
|
isDisabled: props.isDisabled,
|
|
100
|
+
isOptionDisabled: props.isOptionDisabled // @ts-ignore
|
|
101
|
+
,
|
|
98
102
|
isReadOnly: props.isReadOnly,
|
|
99
|
-
isOptionDisabled: props.isOptionDisabled,
|
|
100
103
|
isMulti: props.isMulti,
|
|
101
104
|
isSearchable: props.isSearchable,
|
|
102
105
|
maxMenuHeight: props.maxMenuHeight,
|
|
103
106
|
menuPortalTarget: props.menuPortalTarget,
|
|
104
107
|
menuShouldBlockScroll: props.menuShouldBlockScroll,
|
|
108
|
+
closeMenuOnSelect: props.closeMenuOnSelect,
|
|
105
109
|
name: props.name,
|
|
106
110
|
noOptionsMessage: props.noOptionsMessage || function (_ref) {
|
|
107
111
|
var inputValue = _ref.inputValue;
|
|
@@ -121,10 +125,9 @@ var SelectInput = function SelectInput(props) {
|
|
|
121
125
|
return props.name ? "".concat(props.name, ".0") : undefined;
|
|
122
126
|
}()
|
|
123
127
|
},
|
|
124
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
125
128
|
persist: function persist() {}
|
|
126
129
|
};
|
|
127
|
-
props.onBlur(event);
|
|
130
|
+
props.onBlur && props.onBlur(event);
|
|
128
131
|
} : undefined,
|
|
129
132
|
onChange: function onChange(nextSelectedOptions) {
|
|
130
133
|
// nextSelectedOptions is either an array, or a single option, or null
|
|
@@ -133,7 +136,9 @@ var SelectInput = function SelectInput(props) {
|
|
|
133
136
|
|
|
134
137
|
if (props.isMulti) {
|
|
135
138
|
if (nextSelectedOptions) {
|
|
136
|
-
|
|
139
|
+
var _context3;
|
|
140
|
+
|
|
141
|
+
value = _mapInstanceProperty(_context3 = nextSelectedOptions).call(_context3, function (option) {
|
|
137
142
|
return option.value;
|
|
138
143
|
});
|
|
139
144
|
} else {
|
|
@@ -143,12 +148,11 @@ var SelectInput = function SelectInput(props) {
|
|
|
143
148
|
value = nextSelectedOptions.value;
|
|
144
149
|
}
|
|
145
150
|
|
|
146
|
-
props.onChange({
|
|
151
|
+
props.onChange && props.onChange({
|
|
147
152
|
target: {
|
|
148
153
|
name: props.name,
|
|
149
154
|
value: value
|
|
150
155
|
},
|
|
151
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
152
156
|
persist: function persist() {}
|
|
153
157
|
});
|
|
154
158
|
},
|
|
@@ -158,13 +162,33 @@ var SelectInput = function SelectInput(props) {
|
|
|
158
162
|
placeholder: placeholder,
|
|
159
163
|
tabIndex: props.tabIndex,
|
|
160
164
|
tabSelectsValue: props.tabSelectsValue,
|
|
161
|
-
value: selectedOptions
|
|
165
|
+
value: selectedOptions //@ts-ignore
|
|
166
|
+
,
|
|
162
167
|
iconLeft: props.iconLeft
|
|
163
168
|
})
|
|
164
169
|
}))
|
|
165
170
|
});
|
|
166
171
|
};
|
|
167
172
|
|
|
173
|
+
SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
174
|
+
horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
175
|
+
hasError: _pt.bool,
|
|
176
|
+
isReadOnly: _pt.bool,
|
|
177
|
+
hasWarning: _pt.bool,
|
|
178
|
+
iconLeft: _pt.node,
|
|
179
|
+
isAutofocussed: _pt.bool,
|
|
180
|
+
menuPortalZIndex: _pt.number,
|
|
181
|
+
onBlur: _pt.func,
|
|
182
|
+
onChange: _pt.func,
|
|
183
|
+
options: _pt.oneOfType([_pt.arrayOf(_pt.shape({
|
|
184
|
+
value: _pt.string.isRequired
|
|
185
|
+
})), _pt.arrayOf(_pt.shape({
|
|
186
|
+
options: _pt.arrayOf(_pt.shape({
|
|
187
|
+
value: _pt.string.isRequired
|
|
188
|
+
})).isRequired
|
|
189
|
+
}))]),
|
|
190
|
+
showOptionGroupDivider: _pt.bool
|
|
191
|
+
} : {};
|
|
168
192
|
SelectInput.displayName = 'SelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
|
|
169
193
|
// conveniently handles both cases
|
|
170
194
|
|
|
@@ -172,256 +196,13 @@ SelectInput.isTouched = function (touched) {
|
|
|
172
196
|
return Boolean(touched);
|
|
173
197
|
};
|
|
174
198
|
|
|
175
|
-
SelectInput.defaultProps =
|
|
176
|
-
maxMenuHeight: 220,
|
|
177
|
-
menuPortalZIndex: 1
|
|
178
|
-
};
|
|
179
|
-
SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
180
|
-
horizontalConstraint: PropTypes.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
181
|
-
|
|
182
|
-
/**
|
|
183
|
-
* Indicates that input has errors
|
|
184
|
-
*/
|
|
185
|
-
hasError: PropTypes.bool,
|
|
186
|
-
|
|
187
|
-
/**
|
|
188
|
-
* Is the select read-only
|
|
189
|
-
*/
|
|
190
|
-
isReadOnly: PropTypes.bool,
|
|
191
|
-
|
|
192
|
-
/**
|
|
193
|
-
* Control to indicate on the input if there are selected values that are potentially invalid
|
|
194
|
-
*/
|
|
195
|
-
hasWarning: PropTypes.bool,
|
|
196
|
-
|
|
197
|
-
/**
|
|
198
|
-
* Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled.
|
|
199
|
-
*/
|
|
200
|
-
iconLeft: PropTypes.node,
|
|
201
|
-
// react-select base props
|
|
202
|
-
//
|
|
203
|
-
// Currently unsupported props are commented out. In case you need one of
|
|
204
|
-
// these props when using UI Kit, you can submit a PR and enable the
|
|
205
|
-
// prop. Don't forget to add it to the story, docs and other select input
|
|
206
|
-
// components as well!
|
|
207
|
-
//
|
|
208
|
-
// See https://react-select.com/props#select-props
|
|
209
|
-
|
|
210
|
-
/**
|
|
211
|
-
* Aria label (for assistive tech)
|
|
212
|
-
*/
|
|
213
|
-
'aria-label': PropTypes.string,
|
|
214
|
-
|
|
215
|
-
/**
|
|
216
|
-
* HTML ID of an element that should be used as the label (for assistive tech)
|
|
217
|
-
*/
|
|
218
|
-
'aria-labelledby': PropTypes.string,
|
|
219
|
-
|
|
220
|
-
/**
|
|
221
|
-
* Focus the control when it is mounted
|
|
222
|
-
*/
|
|
223
|
-
isAutofocussed: PropTypes.bool,
|
|
224
|
-
|
|
225
|
-
/**
|
|
226
|
-
* Remove the currently focused option when the user presses backspace
|
|
227
|
-
*/
|
|
228
|
-
backspaceRemovesValue: PropTypes.bool,
|
|
229
|
-
// blurInputOnSelect: PropTypes.bool,
|
|
230
|
-
// captureMenuScroll: PropTypes.bool,
|
|
231
|
-
// className: PropTypes.string,
|
|
232
|
-
// classNamePrefix: PropTypes.string,
|
|
233
|
-
// closeMenuOnSelect: PropTypes.bool,
|
|
234
|
-
// closeMenuOnScroll: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
|
|
235
|
-
|
|
236
|
-
/**
|
|
237
|
-
* Map of components to overwrite the default ones, see what components you can override
|
|
238
|
-
*/
|
|
239
|
-
components: PropTypes.objectOf(PropTypes.func),
|
|
240
|
-
// controlShouldRenderValue: PropTypes.bool,
|
|
241
|
-
// delimiter: PropTypes.string,
|
|
242
|
-
// escapeClearsValue: PropTypes.bool,
|
|
243
|
-
|
|
244
|
-
/**
|
|
245
|
-
* Custom method to filter whether an option should be displayed in the menu
|
|
246
|
-
* <br />
|
|
247
|
-
* Signature: `(option, rawInput) => boolean`
|
|
248
|
-
*/
|
|
249
|
-
filterOption: PropTypes.func,
|
|
250
|
-
// formatGroupLabel: PropTypes.func,
|
|
251
|
-
// formatOptionLabel: PropTypes.func,
|
|
252
|
-
// getOptionLabel: PropTypes.func,
|
|
253
|
-
// getOptionValue: PropTypes.func,
|
|
254
|
-
// hideSelectedOptions: PropTypes.bool,
|
|
255
|
-
|
|
256
|
-
/**
|
|
257
|
-
* Used as HTML id property. An id is generated automatically when not provided.
|
|
258
|
-
*This forwarded as react-select's "inputId"
|
|
259
|
-
*/
|
|
260
|
-
id: PropTypes.string,
|
|
261
|
-
inputValue: PropTypes.string,
|
|
262
|
-
|
|
263
|
-
/**
|
|
264
|
-
* The id to set on the SelectContainer component
|
|
265
|
-
* This is forwarded as react-select's "id"
|
|
266
|
-
*/
|
|
267
|
-
containerId: PropTypes.string,
|
|
268
|
-
// instanceId: PropTypes.string,
|
|
269
|
-
|
|
270
|
-
/**
|
|
271
|
-
* Is the select value clearable
|
|
272
|
-
*/
|
|
273
|
-
isClearable: PropTypes.bool,
|
|
274
|
-
|
|
275
|
-
/**
|
|
276
|
-
* Is the select disabled
|
|
277
|
-
*/
|
|
278
|
-
isDisabled: PropTypes.bool,
|
|
279
|
-
// isLoading: PropTypes.bool,
|
|
280
|
-
|
|
281
|
-
/**
|
|
282
|
-
* Override the built-in logic to detect whether an option is disabled
|
|
283
|
-
*/
|
|
284
|
-
isOptionDisabled: PropTypes.func,
|
|
285
|
-
// isOptionSelected: PropTypes.func,
|
|
286
|
-
|
|
287
|
-
/**
|
|
288
|
-
* Support multiple selected options
|
|
289
|
-
*/
|
|
290
|
-
isMulti: PropTypes.bool,
|
|
291
|
-
// isRtl: PropTypes.bool,
|
|
292
|
-
|
|
293
|
-
/**
|
|
294
|
-
* Whether to enable search functionality
|
|
295
|
-
*/
|
|
296
|
-
isSearchable: PropTypes.bool,
|
|
297
|
-
// loadingMessage: PropTypes.func,
|
|
298
|
-
// minMenuHeight: PropTypes.number,
|
|
299
|
-
|
|
300
|
-
/**
|
|
301
|
-
* Maximum height of the menu before scrolling
|
|
302
|
-
*/
|
|
303
|
-
maxMenuHeight: PropTypes.number,
|
|
304
|
-
// menuIsOpen: PropTypes.bool,
|
|
305
|
-
// menuPlacement: PropTypes.oneOf(['auto', 'bottom', 'top']),
|
|
306
|
-
// menuPosition: PropTypes.oneOf(['absolute', 'fixed']),
|
|
307
|
-
|
|
308
|
-
/**
|
|
309
|
-
* Dom element to portal the select menu to
|
|
310
|
-
*/
|
|
311
|
-
menuPortalTarget: PropTypes.instanceOf(SafeHTMLElement),
|
|
312
|
-
|
|
313
|
-
/**
|
|
314
|
-
* z-index value for the menu portal
|
|
315
|
-
*/
|
|
316
|
-
menuPortalZIndex: PropTypes.number,
|
|
317
|
-
|
|
318
|
-
/**
|
|
319
|
-
* whether the menu should block scroll while open
|
|
320
|
-
*/
|
|
321
|
-
menuShouldBlockScroll: PropTypes.bool,
|
|
322
|
-
// menuShouldScrollIntoView: PropTypes.bool,
|
|
323
|
-
|
|
324
|
-
/**
|
|
325
|
-
* Name of the HTML Input (optional - without this, no input will be rendered)
|
|
326
|
-
*/
|
|
327
|
-
name: PropTypes.string,
|
|
328
|
-
|
|
329
|
-
/**
|
|
330
|
-
* 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 }.
|
|
331
|
-
* <br />
|
|
332
|
-
* `inputValue` will be an empty string when no search text is present.
|
|
333
|
-
* <br />
|
|
334
|
-
* Signature: `({ inputValue}) => string`
|
|
335
|
-
*/
|
|
336
|
-
noOptionsMessage: PropTypes.func,
|
|
337
|
-
|
|
338
|
-
/**
|
|
339
|
-
* Handle blur events on the control
|
|
340
|
-
* <br />
|
|
341
|
-
* Signature: `(event) => void`
|
|
342
|
-
*/
|
|
343
|
-
onBlur: PropTypes.func,
|
|
344
|
-
|
|
345
|
-
/**
|
|
346
|
-
* 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.
|
|
347
|
-
* <br/>
|
|
348
|
-
* The value will be the selected option, or an array of options in case isMulti is true.
|
|
349
|
-
* <br />
|
|
350
|
-
* Signature: `(event) => void`
|
|
351
|
-
*/
|
|
352
|
-
onChange: PropTypes.func,
|
|
353
|
-
|
|
354
|
-
/**
|
|
355
|
-
* Handle focus events on the control
|
|
356
|
-
* <br />
|
|
357
|
-
* Signature: `(event) => void`
|
|
358
|
-
*/
|
|
359
|
-
onFocus: PropTypes.func,
|
|
360
|
-
|
|
361
|
-
/**
|
|
362
|
-
* Handle change events on the input
|
|
363
|
-
* <br />
|
|
364
|
-
* Signature: `(newValue, actionMeta) => void`
|
|
365
|
-
*/
|
|
366
|
-
onInputChange: PropTypes.func,
|
|
367
|
-
// onKeyDown: PropTypes.func,
|
|
368
|
-
// onMenuOpen: PropTypes.func,
|
|
369
|
-
// onMenuClose: PropTypes.func,
|
|
370
|
-
// onMenuScrollToTop: PropTypes.func,
|
|
371
|
-
// onMenuScrollToBottom: PropTypes.func,
|
|
372
|
-
// openMenuOnFocus: PropTypes.bool,
|
|
373
|
-
// openMenuOnClick: PropTypes.bool,
|
|
374
|
-
|
|
375
|
-
/**
|
|
376
|
-
* Array of options that populate the select menu
|
|
377
|
-
*/
|
|
378
|
-
options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
|
|
379
|
-
value: PropTypes.string.isRequired
|
|
380
|
-
}), PropTypes.shape({
|
|
381
|
-
options: PropTypes.arrayOf(PropTypes.shape({
|
|
382
|
-
value: PropTypes.string.isRequired
|
|
383
|
-
}))
|
|
384
|
-
})])),
|
|
385
|
-
showOptionGroupDivider: PropTypes.bool,
|
|
386
|
-
// pageSize: PropTypes.number,
|
|
387
|
-
|
|
388
|
-
/**
|
|
389
|
-
* Placeholder text for the select value
|
|
390
|
-
*/
|
|
391
|
-
placeholder: PropTypes.string,
|
|
392
|
-
// screenReaderStatus: PropTypes.func,
|
|
393
|
-
// styles: PropTypes.objectOf(PropTypes.func),
|
|
394
|
-
// theme: PropTypes.object,
|
|
395
|
-
|
|
396
|
-
/**
|
|
397
|
-
* Sets the tabIndex attribute on the input
|
|
398
|
-
*/
|
|
399
|
-
tabIndex: PropTypes.string,
|
|
400
|
-
|
|
401
|
-
/**
|
|
402
|
-
* Select the currently focused option when the user presses tab
|
|
403
|
-
*/
|
|
404
|
-
tabSelectsValue: PropTypes.bool,
|
|
405
|
-
|
|
406
|
-
/**
|
|
407
|
-
* The value of the select; reflected by the selected option
|
|
408
|
-
*/
|
|
409
|
-
value: function value(props) {
|
|
410
|
-
var _PropTypes$arrayOf, _context3, _context4;
|
|
411
|
-
|
|
412
|
-
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
413
|
-
rest[_key - 1] = arguments[_key];
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
return props.isMulti ? (_PropTypes$arrayOf = PropTypes.arrayOf(PropTypes.string)).isRequired.apply(_PropTypes$arrayOf, _concatInstanceProperty(_context3 = [props]).call(_context3, rest)) : PropTypes.string.apply(PropTypes, _concatInstanceProperty(_context4 = [props]).call(_context4, rest));
|
|
417
|
-
}
|
|
418
|
-
} : {};
|
|
199
|
+
SelectInput.defaultProps = defaultProps;
|
|
419
200
|
addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({}, components), customizedComponents), {}, {
|
|
420
201
|
isTouched: SelectInput.isTouched
|
|
421
202
|
}));
|
|
422
203
|
var SelectInput$1 = SelectInput;
|
|
423
204
|
|
|
424
205
|
// NOTE: This string will be replaced on build time with the package version.
|
|
425
|
-
var version = "
|
|
206
|
+
var version = "13.0.0";
|
|
426
207
|
|
|
427
208
|
export { SelectInput$1 as default, version };
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import { type Props as ReactSelectProps } from 'react-select';
|
|
3
|
+
declare type TOption = {
|
|
4
|
+
value: string;
|
|
5
|
+
};
|
|
6
|
+
declare type TOptionObject = {
|
|
7
|
+
options: TOption[];
|
|
8
|
+
};
|
|
9
|
+
declare type TOptions = TOption[] | TOptionObject[];
|
|
10
|
+
declare type TEvent = {
|
|
11
|
+
target: {
|
|
12
|
+
name: ReactSelectProps['name'];
|
|
13
|
+
value?: string | string[] | null;
|
|
14
|
+
};
|
|
15
|
+
persist: () => void;
|
|
16
|
+
};
|
|
17
|
+
declare type TSelectInputProps = {
|
|
18
|
+
horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
|
|
19
|
+
hasError?: boolean;
|
|
20
|
+
isReadOnly?: boolean;
|
|
21
|
+
hasWarning?: boolean;
|
|
22
|
+
iconLeft?: ReactNode;
|
|
23
|
+
'aria-label'?: ReactSelectProps['aria-label'];
|
|
24
|
+
'aria-labelledby'?: ReactSelectProps['aria-labelledby'];
|
|
25
|
+
isAutofocussed?: boolean;
|
|
26
|
+
backspaceRemovesValue?: ReactSelectProps['backspaceRemovesValue'];
|
|
27
|
+
components?: ReactSelectProps['components'];
|
|
28
|
+
filterOption?: ReactSelectProps['filterOption'];
|
|
29
|
+
id?: ReactSelectProps['inputId'];
|
|
30
|
+
inputValue: ReactSelectProps['inputValue'];
|
|
31
|
+
containerId?: ReactSelectProps['id'];
|
|
32
|
+
isClearable?: ReactSelectProps['isClearable'];
|
|
33
|
+
isDisabled?: ReactSelectProps['isDisabled'];
|
|
34
|
+
isOptionDisabled?: ReactSelectProps['isOptionDisabled'];
|
|
35
|
+
isMulti?: ReactSelectProps['isMulti'];
|
|
36
|
+
isSearchable?: ReactSelectProps['isSearchable'];
|
|
37
|
+
maxMenuHeight?: ReactSelectProps['maxMenuHeight'];
|
|
38
|
+
menuPortalTarget?: ReactSelectProps['menuPortalTarget'];
|
|
39
|
+
menuPortalZIndex?: number;
|
|
40
|
+
menuShouldBlockScroll?: ReactSelectProps['menuShouldBlockScroll'];
|
|
41
|
+
closeMenuOnSelect?: ReactSelectProps['closeMenuOnSelect'];
|
|
42
|
+
name?: ReactSelectProps['name'];
|
|
43
|
+
noOptionsMessage?: ReactSelectProps['noOptionsMessage'];
|
|
44
|
+
onBlur?: (event: TEvent) => void;
|
|
45
|
+
onChange?: (event: TEvent) => void;
|
|
46
|
+
onFocus?: ReactSelectProps['onFocus'];
|
|
47
|
+
onInputChange?: ReactSelectProps['onInputChange'];
|
|
48
|
+
options?: TOptions;
|
|
49
|
+
showOptionGroupDivider?: boolean;
|
|
50
|
+
placeholder?: ReactSelectProps['placeholder'];
|
|
51
|
+
tabIndex?: ReactSelectProps['tabIndex'];
|
|
52
|
+
tabSelectsValue?: ReactSelectProps['tabSelectsValue'];
|
|
53
|
+
value: ReactSelectProps['value'];
|
|
54
|
+
};
|
|
55
|
+
declare const SelectInput: {
|
|
56
|
+
(props: TSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
57
|
+
displayName: string;
|
|
58
|
+
isTouched(touched: boolean | unknown[]): boolean;
|
|
59
|
+
defaultProps: Pick<TSelectInputProps, "maxMenuHeight" | "menuPortalZIndex">;
|
|
60
|
+
};
|
|
61
|
+
export default SelectInput;
|
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": "
|
|
4
|
+
"version": "13.0.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -19,23 +19,23 @@
|
|
|
19
19
|
"module": "dist/commercetools-uikit-select-input.esm.js",
|
|
20
20
|
"files": ["dist"],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@babel/runtime": "7.
|
|
23
|
-
"@babel/runtime-corejs3": "7.
|
|
24
|
-
"@commercetools-uikit/constraints": "
|
|
25
|
-
"@commercetools-uikit/design-system": "
|
|
26
|
-
"@commercetools-uikit/icons": "
|
|
27
|
-
"@commercetools-uikit/select-utils": "
|
|
22
|
+
"@babel/runtime": "7.17.2",
|
|
23
|
+
"@babel/runtime-corejs3": "7.17.2",
|
|
24
|
+
"@commercetools-uikit/constraints": "13.0.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "13.0.0",
|
|
26
|
+
"@commercetools-uikit/icons": "13.0.0",
|
|
27
|
+
"@commercetools-uikit/select-utils": "13.0.0",
|
|
28
28
|
"@commercetools-uikit/utils": "12.2.9",
|
|
29
29
|
"@emotion/is-prop-valid": "1.1.1",
|
|
30
30
|
"@emotion/react": "^11.4.0",
|
|
31
31
|
"@emotion/styled": "^11.3.0",
|
|
32
32
|
"lodash": "4.17.21",
|
|
33
|
-
"prop-types": "15.
|
|
34
|
-
"react-select": "5.2.
|
|
33
|
+
"prop-types": "15.8.1",
|
|
34
|
+
"react-select": "5.2.2"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"react": "17.0.2",
|
|
38
|
-
"react-intl": "5.
|
|
38
|
+
"react-intl": "5.24.6"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": "17.x",
|