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