@commercetools-uikit/select-input 12.2.9 → 13.0.3
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 +48 -268
- package/dist/commercetools-uikit-select-input.cjs.prod.js +29 -27
- package/dist/commercetools-uikit-select-input.esm.js +45 -264
- 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 +12 -12
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;
|
|
@@ -72,7 +74,7 @@ var SelectInput = function SelectInput(props) {
|
|
|
72
74
|
var optionsWithoutGroups = flatMap__default["default"](props.options, function (option) {
|
|
73
75
|
return has__default["default"](option, 'value') ? option : option.options;
|
|
74
76
|
});
|
|
75
|
-
var selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = props.value // Pass the options in the order selected by the use, so that the
|
|
77
|
+
var selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = props.value || [] // Pass the options in the order selected by the use, so that the
|
|
76
78
|
// sorting is not lost
|
|
77
79
|
).call(_context2, function (value) {
|
|
78
80
|
return _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
|
|
@@ -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,17 +120,19 @@ 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;
|
|
132
|
-
return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
|
|
135
|
+
return !inputValue || inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
|
|
133
136
|
inputValue: inputValue
|
|
134
137
|
});
|
|
135
138
|
},
|
|
@@ -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.3";
|
|
450
230
|
|
|
451
231
|
exports["default"] = SelectInput$1;
|
|
452
232
|
exports.version = version;
|