@commercetools-uikit/search-select-field 13.0.0 → 13.0.4
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 +75 -48
- package/dist/commercetools-uikit-search-select-field.cjs.d.ts +2 -0
- package/dist/commercetools-uikit-search-select-field.cjs.dev.js +53 -285
- package/dist/commercetools-uikit-search-select-field.cjs.prod.js +22 -13
- package/dist/commercetools-uikit-search-select-field.esm.js +50 -281
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/declarations/src/search-select-field.d.ts +65 -0
- package/dist/declarations/src/version.d.ts +2 -0
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -83,54 +83,81 @@ export default Example;
|
|
|
83
83
|
|
|
84
84
|
## Properties
|
|
85
85
|
|
|
86
|
-
| Props | Type
|
|
87
|
-
| ------------------------ |
|
|
88
|
-
| `horizontalConstraint` | `
|
|
89
|
-
| `aria-label` | `
|
|
90
|
-
| `aria-labelledby
|
|
91
|
-
| `id` | `
|
|
92
|
-
| `containerId` | `
|
|
93
|
-
| `name` | `
|
|
94
|
-
| `placeholder` | `
|
|
95
|
-
| `components` | `
|
|
96
|
-
| `tabIndex` | `
|
|
97
|
-
| `value` | `
|
|
98
|
-
| `backspaceRemovesValue` | `
|
|
99
|
-
| `hasError` | `
|
|
100
|
-
| `hasWarning` | `
|
|
101
|
-
| `isReadOnly` | `
|
|
102
|
-
| `isDisabled` | `
|
|
103
|
-
| `isClearable` | `
|
|
104
|
-
| `isOptionDisabled` | `
|
|
105
|
-
| `isMulti` | `
|
|
106
|
-
| `isAutofocussed` | `
|
|
107
|
-
| `noOptionsMessage` | `
|
|
108
|
-
| `maxMenuHeight` | `
|
|
109
|
-
| `menuPortalTarget` | `
|
|
110
|
-
| `menuPortalZIndex` | `number`
|
|
111
|
-
| `menuShouldBlockScroll` | `
|
|
112
|
-
| `showOptionGroupDivider` | `
|
|
113
|
-
| `onBlur` | `
|
|
114
|
-
| `onChange` | `
|
|
115
|
-
| `onFocus` | `
|
|
116
|
-
| `onInputChange` | `
|
|
117
|
-
| `tabSelectsValue` | `
|
|
118
|
-
| `loadOptions` | `
|
|
119
|
-
| `loadingMessage` | `<string,
|
|
120
|
-
| `cacheOptions` | `
|
|
121
|
-
| `filterOption` | `
|
|
122
|
-
| `optionType` | `
|
|
123
|
-
| `errors` | `
|
|
124
|
-
| `
|
|
125
|
-
| `
|
|
126
|
-
| `
|
|
127
|
-
| `
|
|
128
|
-
| `
|
|
129
|
-
| `
|
|
130
|
-
| `
|
|
131
|
-
| `
|
|
132
|
-
| `
|
|
133
|
-
|
|
86
|
+
| Props | Type | Required | Default | Description |
|
|
87
|
+
| ------------------------ | ----------------------------------------------------------------------------------------------------- | :------: | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
88
|
+
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input fields. |
|
|
89
|
+
| `aria-label` | `AsyncProps['aria-label']` | | | Aria label (for assistive tech)
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
90
|
+
| `aria-labelledby?` | `AsyncProps['aria-labelledby']` | ✅ | | HTML ID of an element that should be used as the label (for assistive tech)
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
91
|
+
| `id` | `AsyncProps['inputId']` | | | The id of the search input. This forwarded as react-select's "inputId"
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
92
|
+
| `containerId` | `AsyncProps['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) |
|
|
93
|
+
| `name` | `AsyncProps['name']` | | | Name of the HTML Input (optional - without this, no input will be rendered)
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
94
|
+
| `placeholder` | `AsyncProps['placeholder']` | | | Placeholder text for the select value
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
95
|
+
| `components` | `AsyncProps['components']` | | | Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
96
|
+
| `tabIndex` | `AsyncProps['tabIndex']` | | | Sets the tabIndex attribute on the input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
97
|
+
| `value` | `AsyncProps['value']` | | | The value of the select; reflected by the selected option
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
98
|
+
| `backspaceRemovesValue` | `AsyncProps['backspaceRemovesValue']` | | | Remove the currently focused option when the user presses backspace
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
99
|
+
| `hasError` | `boolean` | | | Indicates the input field has an error |
|
|
100
|
+
| `hasWarning` | `boolean` | | | Indicates the input field has a warning |
|
|
101
|
+
| `isReadOnly` | `boolean` | | | Is the select read-only |
|
|
102
|
+
| `isDisabled` | `boolean` | | | Is the select disabled |
|
|
103
|
+
| `isClearable` | `boolean` | | | Is the select value clearable |
|
|
104
|
+
| `isOptionDisabled` | `AsyncProps['isOptionDisabled']` | | | Override the built-in logic to detect whether an option is disabled
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
105
|
+
| `isMulti` | `AsyncProps['isMulti']` | | | Support multiple selected options
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
106
|
+
| `isAutofocussed` | `boolean` | | | Focus the control when it is mounted. Renamed autoFocus of react-select |
|
|
107
|
+
| `noOptionsMessage` | `AsyncProps['noOptionsMessage']` | | | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
108
|
+
| `maxMenuHeight` | `AsyncProps['maxMenuHeight']` | | | Maximum height of the menu before scrolling
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
109
|
+
| `menuPortalTarget` | `AsyncProps['menuPortalTarget']` | | | Dom element to portal the select menu to
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
110
|
+
| `menuPortalZIndex` | `number` | | | z-index value for the menu portal |
|
|
111
|
+
| `menuShouldBlockScroll` | `boolean` | | | whether the menu should block scroll while open |
|
|
112
|
+
| `showOptionGroupDivider` | `boolean` | | | Determines if option groups will be separated by a divider |
|
|
113
|
+
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Handle blur events on the control |
|
|
114
|
+
| `onChange` | `Function`<br/>[See signature.](#signature-onChange) | ✅ | | Called with a fake event when value changes.
<br />
The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. |
|
|
115
|
+
| `onFocus` | `AsyncProps['onFocus']` | | | Handle focus events on the control
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
116
|
+
| `onInputChange` | `AsyncProps['onInputChange']` | | | Handle change events on the input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
117
|
+
| `tabSelectsValue` | `AsyncProps['tabSelectsValue']` | | | Select the currently focused option when the user presses tab
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
118
|
+
| `loadOptions` | `AsyncProps['loadOptions']` | ✅ | | Function that returns a promise, which is the set of options to be used once the promise resolves.
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
119
|
+
| `loadingMessage` | `union`<br/>Possible values:<br/>`string , (() => string)` | | | The text shown while the options are being loaded |
|
|
120
|
+
| `cacheOptions` | `AsyncProps['cacheOptions']` | | | If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
121
|
+
| `filterOption` | `AsyncProps['filterOption']` | | | Custom method to filter whether an option should be displayed in the menu
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
122
|
+
| `optionType` | `union`<br/>Possible values:<br/>`'single-property' , 'double-property' , 'multiple-properties'` | | | The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info |
|
|
123
|
+
| `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
<br />
Unknown errors will be forwarded to `renderError` |
|
|
124
|
+
| `renderError` | `Function`<br/>[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. |
|
|
125
|
+
| `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
|
|
126
|
+
| `touched` | `union`<br/>Possible values:<br/>`boolean[] , boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
|
|
127
|
+
| `title` | `ReactNode` | ✅ | | Title of the label |
|
|
128
|
+
| `hint` | `ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. |
|
|
129
|
+
| `description` | `ReactNode` | | | Provides a description for the title. |
|
|
130
|
+
| `onInfoButtonClick` | `Function`<br/>[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
<br />
Info button will only be visible when this prop is passed. |
|
|
131
|
+
| `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
<br />
Will only get rendered when `hint` is passed as well. |
|
|
132
|
+
| `badge` | `ReactNode` | | | Badge to be displayed beside the label.
<br />
Might be used to display additional information about the content of the field (E.g verified email) |
|
|
133
|
+
|
|
134
|
+
## Signatures
|
|
135
|
+
|
|
136
|
+
### Signature `onBlur`
|
|
137
|
+
|
|
138
|
+
```ts
|
|
139
|
+
(event: TEvent) => void
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
### Signature `onChange`
|
|
143
|
+
|
|
144
|
+
```ts
|
|
145
|
+
(event: TEvent, info: ActionMeta<unknown>) => void
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### Signature `renderError`
|
|
149
|
+
|
|
150
|
+
```ts
|
|
151
|
+
(key: string, error?: boolean) => ReactNode;
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### Signature `onInfoButtonClick`
|
|
155
|
+
|
|
156
|
+
```ts
|
|
157
|
+
(
|
|
158
|
+
event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
|
|
159
|
+
) => void
|
|
160
|
+
```
|
|
134
161
|
|
|
135
162
|
## `data-*` props
|
|
136
163
|
|
|
@@ -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 _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
|
|
8
|
+
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
|
|
9
|
+
var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
|
|
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 _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
|
|
@@ -10,12 +15,7 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
|
|
|
10
15
|
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
11
16
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
12
17
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
13
|
-
var
|
|
14
|
-
var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
|
|
15
|
-
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
|
|
16
|
-
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
17
|
-
var PropTypes = require('prop-types');
|
|
18
|
-
var requiredIf = require('react-required-if');
|
|
18
|
+
var react = require('react');
|
|
19
19
|
var utils = require('@commercetools-uikit/utils');
|
|
20
20
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
21
21
|
var Spacings = require('@commercetools-uikit/spacings');
|
|
@@ -26,6 +26,10 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
|
26
26
|
|
|
27
27
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
28
28
|
|
|
29
|
+
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
30
|
+
var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
|
|
31
|
+
var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
|
|
32
|
+
var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
|
|
29
33
|
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
|
|
30
34
|
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
|
|
31
35
|
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
|
|
@@ -34,11 +38,6 @@ 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 _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
|
|
38
|
-
var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
|
|
39
|
-
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
40
|
-
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
41
|
-
var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
|
|
42
41
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
43
42
|
var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
|
|
44
43
|
var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
|
|
@@ -47,7 +46,7 @@ var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
|
47
46
|
|
|
48
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; }
|
|
49
48
|
|
|
50
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
|
49
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
51
50
|
|
|
52
51
|
var hasErrors = function hasErrors(errors) {
|
|
53
52
|
var _context;
|
|
@@ -55,11 +54,22 @@ var hasErrors = function hasErrors(errors) {
|
|
|
55
54
|
return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
|
|
56
55
|
};
|
|
57
56
|
|
|
58
|
-
var sequentialId = utils.createSequentialId('
|
|
57
|
+
var sequentialId = utils.createSequentialId('search-select-field-');
|
|
58
|
+
var sequentialErrorsId = utils.createSequentialId('search-select-field-error-')();
|
|
59
59
|
|
|
60
60
|
var SearchSelectField = function SearchSelectField(props) {
|
|
61
61
|
var hasError = Boolean(props.touched) && hasErrors(props.errors);
|
|
62
62
|
var id = props.id || sequentialId();
|
|
63
|
+
|
|
64
|
+
if (props.hintIcon) {
|
|
65
|
+
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.hint === 'string' || /*#__PURE__*/react.isValidElement(props.hint), 'SearchSelectField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
if (props.isMulti) {
|
|
69
|
+
process.env.NODE_ENV !== "production" ? utils.warning(_Array$isArray__default["default"](props.value), 'SearchSelectField: `value` is expected to be an array of string when isMulti is true') : void 0;
|
|
70
|
+
process.env.NODE_ENV !== "production" ? utils.warning(_Array$isArray__default["default"](props.touched), 'SearchSelectField: `touched` is expected to be an array of boolean when isMulti is true') : void 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
63
73
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
64
74
|
max: props.horizontalConstraint,
|
|
65
75
|
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
@@ -77,7 +87,9 @@ var SearchSelectField = function SearchSelectField(props) {
|
|
|
77
87
|
horizontalConstraint: "scale",
|
|
78
88
|
hasError: hasError,
|
|
79
89
|
"aria-label": props['aria-label'],
|
|
80
|
-
"aria-labelledby": props['aria-labelledby'],
|
|
90
|
+
"aria-labelledby": props['aria-labelledby?'],
|
|
91
|
+
"aria-invalid": hasError,
|
|
92
|
+
"aria-errormessage": sequentialErrorsId,
|
|
81
93
|
isAutofocussed: props.isAutofocussed,
|
|
82
94
|
backspaceRemovesValue: props.backspaceRemovesValue,
|
|
83
95
|
components: props.components,
|
|
@@ -111,6 +123,7 @@ var SearchSelectField = function SearchSelectField(props) {
|
|
|
111
123
|
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
112
124
|
optionType: props.optionType
|
|
113
125
|
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
126
|
+
id: sequentialErrorsId,
|
|
114
127
|
errors: props.errors,
|
|
115
128
|
isVisible: hasError,
|
|
116
129
|
renderError: props.renderError
|
|
@@ -119,282 +132,37 @@ var SearchSelectField = function SearchSelectField(props) {
|
|
|
119
132
|
});
|
|
120
133
|
};
|
|
121
134
|
|
|
122
|
-
SearchSelectField.displayName = 'SearchSelectField';
|
|
123
135
|
SearchSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
*/
|
|
149
|
-
containerId: PropTypes__default["default"].string,
|
|
150
|
-
|
|
151
|
-
/**
|
|
152
|
-
* Name of the HTML Input (optional - without this, no input will be rendered)
|
|
153
|
-
*/
|
|
154
|
-
name: PropTypes__default["default"].string,
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* Placeholder text for the select value
|
|
158
|
-
*/
|
|
159
|
-
placeholder: PropTypes__default["default"].string,
|
|
160
|
-
|
|
161
|
-
/**
|
|
162
|
-
* Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
|
|
163
|
-
*/
|
|
164
|
-
components: PropTypes__default["default"].objectOf(PropTypes__default["default"].func),
|
|
165
|
-
|
|
166
|
-
/**
|
|
167
|
-
* Sets the tabIndex attribute on the input
|
|
168
|
-
*/
|
|
169
|
-
tabIndex: PropTypes__default["default"].string,
|
|
170
|
-
|
|
171
|
-
/**
|
|
172
|
-
* The value of the select; reflected by the selected option
|
|
173
|
-
*/
|
|
174
|
-
value: function value(props) {
|
|
175
|
-
var _context2, _context3;
|
|
176
|
-
|
|
177
|
-
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
178
|
-
rest[_key - 1] = arguments[_key];
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
return props.isMulti ? PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
|
|
182
|
-
value: PropTypes__default["default"].string.isRequired
|
|
183
|
-
})).apply(void 0, _concatInstanceProperty__default["default"](_context2 = [props]).call(_context2, rest)) : PropTypes__default["default"].shape({
|
|
184
|
-
value: PropTypes__default["default"].string.isRequired
|
|
185
|
-
}).apply(void 0, _concatInstanceProperty__default["default"](_context3 = [props]).call(_context3, rest));
|
|
186
|
-
},
|
|
187
|
-
|
|
188
|
-
/**
|
|
189
|
-
* Remove the currently focused option when the user presses backspace
|
|
190
|
-
*/
|
|
191
|
-
backspaceRemovesValue: PropTypes__default["default"].bool,
|
|
192
|
-
|
|
193
|
-
/**
|
|
194
|
-
* Indicates the input field has an error
|
|
195
|
-
*/
|
|
196
|
-
hasError: PropTypes__default["default"].bool,
|
|
197
|
-
|
|
198
|
-
/**
|
|
199
|
-
* Indicates the input field has a warning
|
|
200
|
-
*/
|
|
201
|
-
hasWarning: PropTypes__default["default"].bool,
|
|
202
|
-
|
|
203
|
-
/**
|
|
204
|
-
* Is the select read-only
|
|
205
|
-
*/
|
|
206
|
-
isReadOnly: PropTypes__default["default"].bool,
|
|
207
|
-
|
|
208
|
-
/**
|
|
209
|
-
* Is the select disabled
|
|
210
|
-
*/
|
|
211
|
-
isDisabled: PropTypes__default["default"].bool,
|
|
212
|
-
|
|
213
|
-
/**
|
|
214
|
-
* Is the select value clearable
|
|
215
|
-
*/
|
|
216
|
-
isClearable: PropTypes__default["default"].bool,
|
|
217
|
-
|
|
218
|
-
/**
|
|
219
|
-
* Override the built-in logic to detect whether an option is disabled
|
|
220
|
-
*/
|
|
221
|
-
isOptionDisabled: PropTypes__default["default"].func,
|
|
222
|
-
|
|
223
|
-
/**
|
|
224
|
-
* Support multiple selected options
|
|
225
|
-
*/
|
|
226
|
-
isMulti: PropTypes__default["default"].bool,
|
|
227
|
-
|
|
228
|
-
/**
|
|
229
|
-
* Focus the control when it is mounted. Renamed autoFocus of react-select
|
|
230
|
-
*/
|
|
231
|
-
isAutofocussed: PropTypes__default["default"].bool,
|
|
232
|
-
|
|
233
|
-
/**
|
|
234
|
-
* Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
|
|
235
|
-
*/
|
|
236
|
-
noOptionsMessage: PropTypes__default["default"].func,
|
|
237
|
-
|
|
238
|
-
/**
|
|
239
|
-
* Maximum height of the menu before scrolling
|
|
240
|
-
*/
|
|
241
|
-
maxMenuHeight: PropTypes__default["default"].number,
|
|
242
|
-
|
|
243
|
-
/**
|
|
244
|
-
* Dom element to portal the select menu to
|
|
245
|
-
*/
|
|
246
|
-
menuPortalTarget: PropTypes__default["default"].instanceOf(utils.SafeHTMLElement),
|
|
247
|
-
|
|
248
|
-
/**
|
|
249
|
-
* z-index value for the menu portal
|
|
250
|
-
*/
|
|
251
|
-
menuPortalZIndex: PropTypes__default["default"].number,
|
|
252
|
-
|
|
253
|
-
/**
|
|
254
|
-
* whether the menu should block scroll while open
|
|
255
|
-
*/
|
|
256
|
-
menuShouldBlockScroll: PropTypes__default["default"].bool,
|
|
257
|
-
|
|
258
|
-
/**
|
|
259
|
-
* Determines if option groups will be separated by a divider
|
|
260
|
-
*/
|
|
261
|
-
showOptionGroupDivider: PropTypes__default["default"].bool,
|
|
262
|
-
|
|
263
|
-
/**
|
|
264
|
-
* Handle blur events on the control
|
|
265
|
-
*/
|
|
266
|
-
onBlur: PropTypes__default["default"].func,
|
|
267
|
-
|
|
268
|
-
/**
|
|
269
|
-
* Called with a fake event when value changes.
|
|
270
|
-
* <br />
|
|
271
|
-
* The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
|
|
272
|
-
* <br />
|
|
273
|
-
* Signature: `(event, action) => void`
|
|
274
|
-
*/
|
|
275
|
-
onChange: PropTypes__default["default"].func.isRequired,
|
|
276
|
-
|
|
277
|
-
/**
|
|
278
|
-
* Handle focus events on the control
|
|
279
|
-
*/
|
|
280
|
-
onFocus: PropTypes__default["default"].func,
|
|
281
|
-
|
|
282
|
-
/**
|
|
283
|
-
* Handle change events on the input
|
|
284
|
-
* <br />
|
|
285
|
-
* Signature: `(inputValue, action) => void`
|
|
286
|
-
*/
|
|
287
|
-
onInputChange: PropTypes__default["default"].func,
|
|
288
|
-
|
|
289
|
-
/**
|
|
290
|
-
* Select the currently focused option when the user presses tab
|
|
291
|
-
*/
|
|
292
|
-
tabSelectsValue: PropTypes__default["default"].bool,
|
|
293
|
-
|
|
294
|
-
/**
|
|
295
|
-
* Function that returns a promise, which is the set of options to be used once the promise resolves.
|
|
296
|
-
*/
|
|
297
|
-
loadOptions: PropTypes__default["default"].func.isRequired,
|
|
298
|
-
|
|
299
|
-
/**
|
|
300
|
-
* The text shown while the options are being loaded
|
|
301
|
-
*/
|
|
302
|
-
loadingMessage: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].func]),
|
|
303
|
-
|
|
304
|
-
/**
|
|
305
|
-
* If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
|
|
306
|
-
*/
|
|
307
|
-
cacheOptions: PropTypes__default["default"].any,
|
|
308
|
-
|
|
309
|
-
/**
|
|
310
|
-
* Custom method to filter whether an option should be displayed in the menu
|
|
311
|
-
*/
|
|
312
|
-
filterOption: PropTypes__default["default"].func,
|
|
313
|
-
|
|
314
|
-
/**
|
|
315
|
-
* The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info
|
|
316
|
-
*/
|
|
317
|
-
optionType: PropTypes__default["default"].oneOf(['single-property', 'double-property', 'multiple-properties']),
|
|
318
|
-
|
|
319
|
-
/**
|
|
320
|
-
* A map of errors. Error messages for known errors are rendered automatically.
|
|
321
|
-
* <br />
|
|
322
|
-
* Unknown errors will be forwarded to `renderError`
|
|
323
|
-
*/
|
|
324
|
-
errors: PropTypes__default["default"].shape({
|
|
325
|
-
missing: PropTypes__default["default"].bool
|
|
326
|
-
}),
|
|
327
|
-
|
|
328
|
-
/**
|
|
329
|
-
* Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
|
|
330
|
-
* <br />
|
|
331
|
-
* Signature: `(key, error) => React.node`
|
|
332
|
-
*/
|
|
333
|
-
renderError: PropTypes__default["default"].func,
|
|
334
|
-
|
|
335
|
-
/**
|
|
336
|
-
* Indicates if the value is required. Shows an the "required asterisk" if so.
|
|
337
|
-
*/
|
|
338
|
-
isRequired: PropTypes__default["default"].bool,
|
|
339
|
-
|
|
340
|
-
/**
|
|
341
|
-
* Indicates whether the field was touched. Errors will only be shown when the field was touched.
|
|
342
|
-
*/
|
|
343
|
-
touched: function touched(props) {
|
|
344
|
-
var _context4, _context5, _context6;
|
|
345
|
-
|
|
346
|
-
for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
|
347
|
-
rest[_key2 - 1] = arguments[_key2];
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
return props.isMulti ? PropTypes__default["default"].arrayOf.apply(PropTypes__default["default"], _concatInstanceProperty__default["default"](_context4 = [PropTypes__default["default"].bool]).call(_context4, rest)).apply(void 0, _concatInstanceProperty__default["default"](_context5 = [props]).call(_context5, rest)) : PropTypes__default["default"].bool.apply(PropTypes__default["default"], _concatInstanceProperty__default["default"](_context6 = [props]).call(_context6, rest));
|
|
351
|
-
},
|
|
352
|
-
// LabelField
|
|
353
|
-
|
|
354
|
-
/**
|
|
355
|
-
* Title of the label
|
|
356
|
-
*/
|
|
357
|
-
title: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]).isRequired,
|
|
358
|
-
|
|
359
|
-
/**
|
|
360
|
-
* Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
|
|
361
|
-
*/
|
|
362
|
-
hint: requiredIf__default["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]), function (props) {
|
|
363
|
-
return props.hintIcon;
|
|
364
|
-
}),
|
|
365
|
-
|
|
366
|
-
/**
|
|
367
|
-
* Provides a description for the title.
|
|
368
|
-
*/
|
|
369
|
-
description: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
|
|
370
|
-
|
|
371
|
-
/**
|
|
372
|
-
* Function called when info button is pressed.
|
|
373
|
-
* <br />
|
|
374
|
-
* Info button will only be visible when this prop is passed.
|
|
375
|
-
* <br />
|
|
376
|
-
* Signature: `(event) => void`
|
|
377
|
-
*/
|
|
378
|
-
onInfoButtonClick: PropTypes__default["default"].func,
|
|
379
|
-
|
|
380
|
-
/**
|
|
381
|
-
* Icon to be displayed beside the hint text.
|
|
382
|
-
* <br />
|
|
383
|
-
* Will only get rendered when `hint` is passed as well.
|
|
384
|
-
*/
|
|
385
|
-
hintIcon: PropTypes__default["default"].node,
|
|
386
|
-
|
|
387
|
-
/**
|
|
388
|
-
* Badge to be displayed beside the label.
|
|
389
|
-
* <br />
|
|
390
|
-
* Might be used to display additional information about the content of the field (E.g verified email)
|
|
391
|
-
*/
|
|
392
|
-
badge: PropTypes__default["default"].node
|
|
136
|
+
horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
137
|
+
hasError: _pt__default["default"].bool,
|
|
138
|
+
hasWarning: _pt__default["default"].bool,
|
|
139
|
+
isReadOnly: _pt__default["default"].bool,
|
|
140
|
+
isDisabled: _pt__default["default"].bool,
|
|
141
|
+
isClearable: _pt__default["default"].bool,
|
|
142
|
+
isAutofocussed: _pt__default["default"].bool,
|
|
143
|
+
menuPortalZIndex: _pt__default["default"].number,
|
|
144
|
+
menuShouldBlockScroll: _pt__default["default"].bool,
|
|
145
|
+
showOptionGroupDivider: _pt__default["default"].bool,
|
|
146
|
+
onBlur: _pt__default["default"].func,
|
|
147
|
+
onChange: _pt__default["default"].func.isRequired,
|
|
148
|
+
loadingMessage: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].func]),
|
|
149
|
+
optionType: _pt__default["default"].oneOf(['single-property', 'double-property', 'multiple-properties']),
|
|
150
|
+
errors: _pt__default["default"].objectOf(_pt__default["default"].bool),
|
|
151
|
+
renderError: _pt__default["default"].func,
|
|
152
|
+
isRequired: _pt__default["default"].bool,
|
|
153
|
+
touched: _pt__default["default"].oneOfType([_pt__default["default"].arrayOf(_pt__default["default"].bool), _pt__default["default"].bool]),
|
|
154
|
+
title: _pt__default["default"].node.isRequired,
|
|
155
|
+
hint: _pt__default["default"].node,
|
|
156
|
+
description: _pt__default["default"].node,
|
|
157
|
+
onInfoButtonClick: _pt__default["default"].func,
|
|
158
|
+
hintIcon: _pt__default["default"].element,
|
|
159
|
+
badge: _pt__default["default"].node
|
|
393
160
|
} : {};
|
|
161
|
+
SearchSelectField.displayName = 'SearchSelectField';
|
|
394
162
|
var SearchSelectField$1 = SearchSelectField;
|
|
395
163
|
|
|
396
164
|
// NOTE: This string will be replaced on build time with the package version.
|
|
397
|
-
var version = "13.0.
|
|
165
|
+
var version = "13.0.4";
|
|
398
166
|
|
|
399
167
|
exports["default"] = SearchSelectField$1;
|
|
400
168
|
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 _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
|
|
8
|
+
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
|
|
9
|
+
require('@babel/runtime-corejs3/core-js-stable/array/is-array');
|
|
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 _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
|
|
@@ -10,12 +15,7 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
|
|
|
10
15
|
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
11
16
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
12
17
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
13
|
-
|
|
14
|
-
var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
|
|
15
|
-
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
|
|
16
|
-
require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
17
|
-
require('prop-types');
|
|
18
|
-
require('react-required-if');
|
|
18
|
+
require('react');
|
|
19
19
|
var utils = require('@commercetools-uikit/utils');
|
|
20
20
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
21
21
|
var Spacings = require('@commercetools-uikit/spacings');
|
|
@@ -26,6 +26,8 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
|
26
26
|
|
|
27
27
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
28
28
|
|
|
29
|
+
var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
|
|
30
|
+
var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
|
|
29
31
|
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
|
|
30
32
|
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
|
|
31
33
|
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
|
|
@@ -34,8 +36,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
|
|
|
34
36
|
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
35
37
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
36
38
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
37
|
-
var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
|
|
38
|
-
var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
|
|
39
39
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
40
40
|
var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
|
|
41
41
|
var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
|
|
@@ -44,7 +44,7 @@ var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
|
44
44
|
|
|
45
45
|
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; }
|
|
46
46
|
|
|
47
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
|
47
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
48
48
|
|
|
49
49
|
var hasErrors = function hasErrors(errors) {
|
|
50
50
|
var _context;
|
|
@@ -52,11 +52,17 @@ var hasErrors = function hasErrors(errors) {
|
|
|
52
52
|
return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
|
|
53
53
|
};
|
|
54
54
|
|
|
55
|
-
var sequentialId = utils.createSequentialId('
|
|
55
|
+
var sequentialId = utils.createSequentialId('search-select-field-');
|
|
56
|
+
var sequentialErrorsId = utils.createSequentialId('search-select-field-error-')();
|
|
56
57
|
|
|
57
58
|
var SearchSelectField = function SearchSelectField(props) {
|
|
58
59
|
var hasError = Boolean(props.touched) && hasErrors(props.errors);
|
|
59
60
|
var id = props.id || sequentialId();
|
|
61
|
+
|
|
62
|
+
if (props.hintIcon) ;
|
|
63
|
+
|
|
64
|
+
if (props.isMulti) ;
|
|
65
|
+
|
|
60
66
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
61
67
|
max: props.horizontalConstraint,
|
|
62
68
|
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
@@ -74,7 +80,9 @@ var SearchSelectField = function SearchSelectField(props) {
|
|
|
74
80
|
horizontalConstraint: "scale",
|
|
75
81
|
hasError: hasError,
|
|
76
82
|
"aria-label": props['aria-label'],
|
|
77
|
-
"aria-labelledby": props['aria-labelledby'],
|
|
83
|
+
"aria-labelledby": props['aria-labelledby?'],
|
|
84
|
+
"aria-invalid": hasError,
|
|
85
|
+
"aria-errormessage": sequentialErrorsId,
|
|
78
86
|
isAutofocussed: props.isAutofocussed,
|
|
79
87
|
backspaceRemovesValue: props.backspaceRemovesValue,
|
|
80
88
|
components: props.components,
|
|
@@ -108,6 +116,7 @@ var SearchSelectField = function SearchSelectField(props) {
|
|
|
108
116
|
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
109
117
|
optionType: props.optionType
|
|
110
118
|
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
119
|
+
id: sequentialErrorsId,
|
|
111
120
|
errors: props.errors,
|
|
112
121
|
isVisible: hasError,
|
|
113
122
|
renderError: props.renderError
|
|
@@ -116,12 +125,12 @@ var SearchSelectField = function SearchSelectField(props) {
|
|
|
116
125
|
});
|
|
117
126
|
};
|
|
118
127
|
|
|
119
|
-
SearchSelectField.displayName = 'SearchSelectField';
|
|
120
128
|
SearchSelectField.propTypes = {};
|
|
129
|
+
SearchSelectField.displayName = 'SearchSelectField';
|
|
121
130
|
var SearchSelectField$1 = SearchSelectField;
|
|
122
131
|
|
|
123
132
|
// NOTE: This string will be replaced on build time with the package version.
|
|
124
|
-
var version = "13.0.
|
|
133
|
+
var version = "13.0.4";
|
|
125
134
|
|
|
126
135
|
exports["default"] = SearchSelectField$1;
|
|
127
136
|
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 _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
|
|
4
|
+
import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
|
|
5
|
+
import _Array$isArray from '@babel/runtime-corejs3/core-js-stable/array/is-array';
|
|
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 _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
|
|
@@ -6,13 +11,8 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
|
|
|
6
11
|
import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
|
|
7
12
|
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
|
|
8
13
|
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
|
|
12
|
-
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
|
|
13
|
-
import PropTypes from 'prop-types';
|
|
14
|
-
import requiredIf from 'react-required-if';
|
|
15
|
-
import { createSequentialId, filterDataAttributes, SafeHTMLElement } from '@commercetools-uikit/utils';
|
|
14
|
+
import { isValidElement } from 'react';
|
|
15
|
+
import { createSequentialId, warning, filterDataAttributes } from '@commercetools-uikit/utils';
|
|
16
16
|
import Constraints from '@commercetools-uikit/constraints';
|
|
17
17
|
import Spacings from '@commercetools-uikit/spacings';
|
|
18
18
|
import FieldLabel from '@commercetools-uikit/field-label';
|
|
@@ -22,7 +22,7 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
|
22
22
|
|
|
23
23
|
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; }
|
|
24
24
|
|
|
25
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
|
25
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
26
26
|
|
|
27
27
|
var hasErrors = function hasErrors(errors) {
|
|
28
28
|
var _context;
|
|
@@ -30,11 +30,22 @@ var hasErrors = function hasErrors(errors) {
|
|
|
30
30
|
return errors && _someInstanceProperty(_context = _Object$values(errors)).call(_context, Boolean);
|
|
31
31
|
};
|
|
32
32
|
|
|
33
|
-
var sequentialId = createSequentialId('
|
|
33
|
+
var sequentialId = createSequentialId('search-select-field-');
|
|
34
|
+
var sequentialErrorsId = createSequentialId('search-select-field-error-')();
|
|
34
35
|
|
|
35
36
|
var SearchSelectField = function SearchSelectField(props) {
|
|
36
37
|
var hasError = Boolean(props.touched) && hasErrors(props.errors);
|
|
37
38
|
var id = props.id || sequentialId();
|
|
39
|
+
|
|
40
|
+
if (props.hintIcon) {
|
|
41
|
+
process.env.NODE_ENV !== "production" ? warning(typeof props.hint === 'string' || /*#__PURE__*/isValidElement(props.hint), 'SearchSelectField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
if (props.isMulti) {
|
|
45
|
+
process.env.NODE_ENV !== "production" ? warning(_Array$isArray(props.value), 'SearchSelectField: `value` is expected to be an array of string when isMulti is true') : void 0;
|
|
46
|
+
process.env.NODE_ENV !== "production" ? warning(_Array$isArray(props.touched), 'SearchSelectField: `touched` is expected to be an array of boolean when isMulti is true') : void 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
38
49
|
return jsx(Constraints.Horizontal, {
|
|
39
50
|
max: props.horizontalConstraint,
|
|
40
51
|
children: jsxs(Spacings.Stack, {
|
|
@@ -52,7 +63,9 @@ var SearchSelectField = function SearchSelectField(props) {
|
|
|
52
63
|
horizontalConstraint: "scale",
|
|
53
64
|
hasError: hasError,
|
|
54
65
|
"aria-label": props['aria-label'],
|
|
55
|
-
"aria-labelledby": props['aria-labelledby'],
|
|
66
|
+
"aria-labelledby": props['aria-labelledby?'],
|
|
67
|
+
"aria-invalid": hasError,
|
|
68
|
+
"aria-errormessage": sequentialErrorsId,
|
|
56
69
|
isAutofocussed: props.isAutofocussed,
|
|
57
70
|
backspaceRemovesValue: props.backspaceRemovesValue,
|
|
58
71
|
components: props.components,
|
|
@@ -86,6 +99,7 @@ var SearchSelectField = function SearchSelectField(props) {
|
|
|
86
99
|
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
87
100
|
optionType: props.optionType
|
|
88
101
|
})), jsx(FieldErrors, {
|
|
102
|
+
id: sequentialErrorsId,
|
|
89
103
|
errors: props.errors,
|
|
90
104
|
isVisible: hasError,
|
|
91
105
|
renderError: props.renderError
|
|
@@ -94,281 +108,36 @@ var SearchSelectField = function SearchSelectField(props) {
|
|
|
94
108
|
});
|
|
95
109
|
};
|
|
96
110
|
|
|
97
|
-
SearchSelectField.displayName = 'SearchSelectField';
|
|
98
111
|
SearchSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
*/
|
|
124
|
-
containerId: PropTypes.string,
|
|
125
|
-
|
|
126
|
-
/**
|
|
127
|
-
* Name of the HTML Input (optional - without this, no input will be rendered)
|
|
128
|
-
*/
|
|
129
|
-
name: PropTypes.string,
|
|
130
|
-
|
|
131
|
-
/**
|
|
132
|
-
* Placeholder text for the select value
|
|
133
|
-
*/
|
|
134
|
-
placeholder: PropTypes.string,
|
|
135
|
-
|
|
136
|
-
/**
|
|
137
|
-
* Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
|
|
138
|
-
*/
|
|
139
|
-
components: PropTypes.objectOf(PropTypes.func),
|
|
140
|
-
|
|
141
|
-
/**
|
|
142
|
-
* Sets the tabIndex attribute on the input
|
|
143
|
-
*/
|
|
144
|
-
tabIndex: PropTypes.string,
|
|
145
|
-
|
|
146
|
-
/**
|
|
147
|
-
* The value of the select; reflected by the selected option
|
|
148
|
-
*/
|
|
149
|
-
value: function value(props) {
|
|
150
|
-
var _context2, _context3;
|
|
151
|
-
|
|
152
|
-
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
153
|
-
rest[_key - 1] = arguments[_key];
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
return props.isMulti ? PropTypes.arrayOf(PropTypes.shape({
|
|
157
|
-
value: PropTypes.string.isRequired
|
|
158
|
-
})).apply(void 0, _concatInstanceProperty(_context2 = [props]).call(_context2, rest)) : PropTypes.shape({
|
|
159
|
-
value: PropTypes.string.isRequired
|
|
160
|
-
}).apply(void 0, _concatInstanceProperty(_context3 = [props]).call(_context3, rest));
|
|
161
|
-
},
|
|
162
|
-
|
|
163
|
-
/**
|
|
164
|
-
* Remove the currently focused option when the user presses backspace
|
|
165
|
-
*/
|
|
166
|
-
backspaceRemovesValue: PropTypes.bool,
|
|
167
|
-
|
|
168
|
-
/**
|
|
169
|
-
* Indicates the input field has an error
|
|
170
|
-
*/
|
|
171
|
-
hasError: PropTypes.bool,
|
|
172
|
-
|
|
173
|
-
/**
|
|
174
|
-
* Indicates the input field has a warning
|
|
175
|
-
*/
|
|
176
|
-
hasWarning: PropTypes.bool,
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* Is the select read-only
|
|
180
|
-
*/
|
|
181
|
-
isReadOnly: PropTypes.bool,
|
|
182
|
-
|
|
183
|
-
/**
|
|
184
|
-
* Is the select disabled
|
|
185
|
-
*/
|
|
186
|
-
isDisabled: PropTypes.bool,
|
|
187
|
-
|
|
188
|
-
/**
|
|
189
|
-
* Is the select value clearable
|
|
190
|
-
*/
|
|
191
|
-
isClearable: PropTypes.bool,
|
|
192
|
-
|
|
193
|
-
/**
|
|
194
|
-
* Override the built-in logic to detect whether an option is disabled
|
|
195
|
-
*/
|
|
196
|
-
isOptionDisabled: PropTypes.func,
|
|
197
|
-
|
|
198
|
-
/**
|
|
199
|
-
* Support multiple selected options
|
|
200
|
-
*/
|
|
201
|
-
isMulti: PropTypes.bool,
|
|
202
|
-
|
|
203
|
-
/**
|
|
204
|
-
* Focus the control when it is mounted. Renamed autoFocus of react-select
|
|
205
|
-
*/
|
|
206
|
-
isAutofocussed: PropTypes.bool,
|
|
207
|
-
|
|
208
|
-
/**
|
|
209
|
-
* Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
|
|
210
|
-
*/
|
|
211
|
-
noOptionsMessage: PropTypes.func,
|
|
212
|
-
|
|
213
|
-
/**
|
|
214
|
-
* Maximum height of the menu before scrolling
|
|
215
|
-
*/
|
|
216
|
-
maxMenuHeight: PropTypes.number,
|
|
217
|
-
|
|
218
|
-
/**
|
|
219
|
-
* Dom element to portal the select menu to
|
|
220
|
-
*/
|
|
221
|
-
menuPortalTarget: PropTypes.instanceOf(SafeHTMLElement),
|
|
222
|
-
|
|
223
|
-
/**
|
|
224
|
-
* z-index value for the menu portal
|
|
225
|
-
*/
|
|
226
|
-
menuPortalZIndex: PropTypes.number,
|
|
227
|
-
|
|
228
|
-
/**
|
|
229
|
-
* whether the menu should block scroll while open
|
|
230
|
-
*/
|
|
231
|
-
menuShouldBlockScroll: PropTypes.bool,
|
|
232
|
-
|
|
233
|
-
/**
|
|
234
|
-
* Determines if option groups will be separated by a divider
|
|
235
|
-
*/
|
|
236
|
-
showOptionGroupDivider: PropTypes.bool,
|
|
237
|
-
|
|
238
|
-
/**
|
|
239
|
-
* Handle blur events on the control
|
|
240
|
-
*/
|
|
241
|
-
onBlur: PropTypes.func,
|
|
242
|
-
|
|
243
|
-
/**
|
|
244
|
-
* Called with a fake event when value changes.
|
|
245
|
-
* <br />
|
|
246
|
-
* The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
|
|
247
|
-
* <br />
|
|
248
|
-
* Signature: `(event, action) => void`
|
|
249
|
-
*/
|
|
250
|
-
onChange: PropTypes.func.isRequired,
|
|
251
|
-
|
|
252
|
-
/**
|
|
253
|
-
* Handle focus events on the control
|
|
254
|
-
*/
|
|
255
|
-
onFocus: PropTypes.func,
|
|
256
|
-
|
|
257
|
-
/**
|
|
258
|
-
* Handle change events on the input
|
|
259
|
-
* <br />
|
|
260
|
-
* Signature: `(inputValue, action) => void`
|
|
261
|
-
*/
|
|
262
|
-
onInputChange: PropTypes.func,
|
|
263
|
-
|
|
264
|
-
/**
|
|
265
|
-
* Select the currently focused option when the user presses tab
|
|
266
|
-
*/
|
|
267
|
-
tabSelectsValue: PropTypes.bool,
|
|
268
|
-
|
|
269
|
-
/**
|
|
270
|
-
* Function that returns a promise, which is the set of options to be used once the promise resolves.
|
|
271
|
-
*/
|
|
272
|
-
loadOptions: PropTypes.func.isRequired,
|
|
273
|
-
|
|
274
|
-
/**
|
|
275
|
-
* The text shown while the options are being loaded
|
|
276
|
-
*/
|
|
277
|
-
loadingMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
|
278
|
-
|
|
279
|
-
/**
|
|
280
|
-
* If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
|
|
281
|
-
*/
|
|
282
|
-
cacheOptions: PropTypes.any,
|
|
283
|
-
|
|
284
|
-
/**
|
|
285
|
-
* Custom method to filter whether an option should be displayed in the menu
|
|
286
|
-
*/
|
|
287
|
-
filterOption: PropTypes.func,
|
|
288
|
-
|
|
289
|
-
/**
|
|
290
|
-
* The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info
|
|
291
|
-
*/
|
|
292
|
-
optionType: PropTypes.oneOf(['single-property', 'double-property', 'multiple-properties']),
|
|
293
|
-
|
|
294
|
-
/**
|
|
295
|
-
* A map of errors. Error messages for known errors are rendered automatically.
|
|
296
|
-
* <br />
|
|
297
|
-
* Unknown errors will be forwarded to `renderError`
|
|
298
|
-
*/
|
|
299
|
-
errors: PropTypes.shape({
|
|
300
|
-
missing: PropTypes.bool
|
|
301
|
-
}),
|
|
302
|
-
|
|
303
|
-
/**
|
|
304
|
-
* Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
|
|
305
|
-
* <br />
|
|
306
|
-
* Signature: `(key, error) => React.node`
|
|
307
|
-
*/
|
|
308
|
-
renderError: PropTypes.func,
|
|
309
|
-
|
|
310
|
-
/**
|
|
311
|
-
* Indicates if the value is required. Shows an the "required asterisk" if so.
|
|
312
|
-
*/
|
|
313
|
-
isRequired: PropTypes.bool,
|
|
314
|
-
|
|
315
|
-
/**
|
|
316
|
-
* Indicates whether the field was touched. Errors will only be shown when the field was touched.
|
|
317
|
-
*/
|
|
318
|
-
touched: function touched(props) {
|
|
319
|
-
var _context4, _context5, _context6;
|
|
320
|
-
|
|
321
|
-
for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
|
322
|
-
rest[_key2 - 1] = arguments[_key2];
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
return props.isMulti ? PropTypes.arrayOf.apply(PropTypes, _concatInstanceProperty(_context4 = [PropTypes.bool]).call(_context4, rest)).apply(void 0, _concatInstanceProperty(_context5 = [props]).call(_context5, rest)) : PropTypes.bool.apply(PropTypes, _concatInstanceProperty(_context6 = [props]).call(_context6, rest));
|
|
326
|
-
},
|
|
327
|
-
// LabelField
|
|
328
|
-
|
|
329
|
-
/**
|
|
330
|
-
* Title of the label
|
|
331
|
-
*/
|
|
332
|
-
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
|
|
333
|
-
|
|
334
|
-
/**
|
|
335
|
-
* Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
|
|
336
|
-
*/
|
|
337
|
-
hint: requiredIf(PropTypes.oneOfType([PropTypes.string, PropTypes.node]), function (props) {
|
|
338
|
-
return props.hintIcon;
|
|
339
|
-
}),
|
|
340
|
-
|
|
341
|
-
/**
|
|
342
|
-
* Provides a description for the title.
|
|
343
|
-
*/
|
|
344
|
-
description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
345
|
-
|
|
346
|
-
/**
|
|
347
|
-
* Function called when info button is pressed.
|
|
348
|
-
* <br />
|
|
349
|
-
* Info button will only be visible when this prop is passed.
|
|
350
|
-
* <br />
|
|
351
|
-
* Signature: `(event) => void`
|
|
352
|
-
*/
|
|
353
|
-
onInfoButtonClick: PropTypes.func,
|
|
354
|
-
|
|
355
|
-
/**
|
|
356
|
-
* Icon to be displayed beside the hint text.
|
|
357
|
-
* <br />
|
|
358
|
-
* Will only get rendered when `hint` is passed as well.
|
|
359
|
-
*/
|
|
360
|
-
hintIcon: PropTypes.node,
|
|
361
|
-
|
|
362
|
-
/**
|
|
363
|
-
* Badge to be displayed beside the label.
|
|
364
|
-
* <br />
|
|
365
|
-
* Might be used to display additional information about the content of the field (E.g verified email)
|
|
366
|
-
*/
|
|
367
|
-
badge: PropTypes.node
|
|
112
|
+
horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
113
|
+
hasError: _pt.bool,
|
|
114
|
+
hasWarning: _pt.bool,
|
|
115
|
+
isReadOnly: _pt.bool,
|
|
116
|
+
isDisabled: _pt.bool,
|
|
117
|
+
isClearable: _pt.bool,
|
|
118
|
+
isAutofocussed: _pt.bool,
|
|
119
|
+
menuPortalZIndex: _pt.number,
|
|
120
|
+
menuShouldBlockScroll: _pt.bool,
|
|
121
|
+
showOptionGroupDivider: _pt.bool,
|
|
122
|
+
onBlur: _pt.func,
|
|
123
|
+
onChange: _pt.func.isRequired,
|
|
124
|
+
loadingMessage: _pt.oneOfType([_pt.string, _pt.func]),
|
|
125
|
+
optionType: _pt.oneOf(['single-property', 'double-property', 'multiple-properties']),
|
|
126
|
+
errors: _pt.objectOf(_pt.bool),
|
|
127
|
+
renderError: _pt.func,
|
|
128
|
+
isRequired: _pt.bool,
|
|
129
|
+
touched: _pt.oneOfType([_pt.arrayOf(_pt.bool), _pt.bool]),
|
|
130
|
+
title: _pt.node.isRequired,
|
|
131
|
+
hint: _pt.node,
|
|
132
|
+
description: _pt.node,
|
|
133
|
+
onInfoButtonClick: _pt.func,
|
|
134
|
+
hintIcon: _pt.element,
|
|
135
|
+
badge: _pt.node
|
|
368
136
|
} : {};
|
|
137
|
+
SearchSelectField.displayName = 'SearchSelectField';
|
|
369
138
|
var SearchSelectField$1 = SearchSelectField;
|
|
370
139
|
|
|
371
140
|
// NOTE: This string will be replaced on build time with the package version.
|
|
372
|
-
var version = "13.0.
|
|
141
|
+
var version = "13.0.4";
|
|
373
142
|
|
|
374
143
|
export { SearchSelectField$1 as default, version };
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { type ReactNode, type MouseEvent, type KeyboardEvent, type ReactElement } from 'react';
|
|
2
|
+
import type { ActionMeta, GroupBase } from 'react-select';
|
|
3
|
+
import type { AsyncProps } from 'react-select/async';
|
|
4
|
+
declare type ReactSelectAsyncProps = AsyncProps<unknown, boolean, GroupBase<unknown>>;
|
|
5
|
+
declare type TEvent = {
|
|
6
|
+
target: {
|
|
7
|
+
name?: string;
|
|
8
|
+
value?: unknown;
|
|
9
|
+
};
|
|
10
|
+
persist: () => void;
|
|
11
|
+
};
|
|
12
|
+
declare type TFieldErrors = Record<string, boolean>;
|
|
13
|
+
declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
|
|
14
|
+
declare type TSearchSelectFieldProps = {
|
|
15
|
+
horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
|
|
16
|
+
'aria-label'?: ReactSelectAsyncProps['aria-label'];
|
|
17
|
+
'aria-labelledby?': ReactSelectAsyncProps['aria-labelledby'];
|
|
18
|
+
id?: ReactSelectAsyncProps['inputId'];
|
|
19
|
+
containerId?: ReactSelectAsyncProps['id'];
|
|
20
|
+
name?: ReactSelectAsyncProps['name'];
|
|
21
|
+
placeholder?: ReactSelectAsyncProps['placeholder'];
|
|
22
|
+
components?: ReactSelectAsyncProps['components'];
|
|
23
|
+
tabIndex?: ReactSelectAsyncProps['tabIndex'];
|
|
24
|
+
value?: ReactSelectAsyncProps['value'];
|
|
25
|
+
backspaceRemovesValue?: ReactSelectAsyncProps['backspaceRemovesValue'];
|
|
26
|
+
hasError?: boolean;
|
|
27
|
+
hasWarning?: boolean;
|
|
28
|
+
isReadOnly?: boolean;
|
|
29
|
+
isDisabled?: boolean;
|
|
30
|
+
isClearable?: boolean;
|
|
31
|
+
isOptionDisabled?: ReactSelectAsyncProps['isOptionDisabled'];
|
|
32
|
+
isMulti?: ReactSelectAsyncProps['isMulti'];
|
|
33
|
+
isAutofocussed?: boolean;
|
|
34
|
+
noOptionsMessage?: ReactSelectAsyncProps['noOptionsMessage'];
|
|
35
|
+
maxMenuHeight?: ReactSelectAsyncProps['maxMenuHeight'];
|
|
36
|
+
menuPortalTarget?: ReactSelectAsyncProps['menuPortalTarget'];
|
|
37
|
+
menuPortalZIndex?: number;
|
|
38
|
+
menuShouldBlockScroll?: boolean;
|
|
39
|
+
showOptionGroupDivider?: boolean;
|
|
40
|
+
onBlur?: (event: TEvent) => void;
|
|
41
|
+
onChange: (event: TEvent, info: ActionMeta<unknown>) => void;
|
|
42
|
+
onFocus?: ReactSelectAsyncProps['onFocus'];
|
|
43
|
+
onInputChange?: ReactSelectAsyncProps['onInputChange'];
|
|
44
|
+
tabSelectsValue?: ReactSelectAsyncProps['tabSelectsValue'];
|
|
45
|
+
loadOptions: ReactSelectAsyncProps['loadOptions'];
|
|
46
|
+
loadingMessage?: string | (() => string);
|
|
47
|
+
cacheOptions?: ReactSelectAsyncProps['cacheOptions'];
|
|
48
|
+
filterOption?: ReactSelectAsyncProps['filterOption'];
|
|
49
|
+
optionType?: 'single-property' | 'double-property' | 'multiple-properties';
|
|
50
|
+
errors?: TFieldErrors;
|
|
51
|
+
renderError?: TErrorRenderer;
|
|
52
|
+
isRequired?: boolean;
|
|
53
|
+
touched?: boolean[] | boolean;
|
|
54
|
+
title: ReactNode;
|
|
55
|
+
hint?: ReactNode;
|
|
56
|
+
description?: ReactNode;
|
|
57
|
+
onInfoButtonClick?: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
|
|
58
|
+
hintIcon?: ReactElement;
|
|
59
|
+
badge?: ReactNode;
|
|
60
|
+
};
|
|
61
|
+
declare const SearchSelectField: {
|
|
62
|
+
(props: TSearchSelectFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
63
|
+
displayName: string;
|
|
64
|
+
};
|
|
65
|
+
export default SearchSelectField;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/search-select-field",
|
|
3
3
|
"description": "A search select field built on top of search select input, allowing users to asynchronously search for options",
|
|
4
|
-
"version": "13.0.
|
|
4
|
+
"version": "13.0.4",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,17 +21,17 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "7.17.2",
|
|
23
23
|
"@babel/runtime-corejs3": "7.17.2",
|
|
24
|
-
"@commercetools-uikit/constraints": "13.0.
|
|
24
|
+
"@commercetools-uikit/constraints": "13.0.2",
|
|
25
25
|
"@commercetools-uikit/design-system": "13.0.0",
|
|
26
|
-
"@commercetools-uikit/field-errors": "13.0.
|
|
27
|
-
"@commercetools-uikit/field-label": "13.0.
|
|
28
|
-
"@commercetools-uikit/search-select-input": "13.0.
|
|
29
|
-
"@commercetools-uikit/spacings": "13.0.
|
|
30
|
-
"@commercetools-uikit/utils": "
|
|
26
|
+
"@commercetools-uikit/field-errors": "13.0.4",
|
|
27
|
+
"@commercetools-uikit/field-label": "13.0.4",
|
|
28
|
+
"@commercetools-uikit/search-select-input": "13.0.4",
|
|
29
|
+
"@commercetools-uikit/spacings": "13.0.2",
|
|
30
|
+
"@commercetools-uikit/utils": "13.0.2",
|
|
31
31
|
"@emotion/react": "^11.4.0",
|
|
32
32
|
"@emotion/styled": "^11.3.0",
|
|
33
33
|
"prop-types": "15.8.1",
|
|
34
|
-
"react-
|
|
34
|
+
"react-intl": "^5.24.6"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"react": "17.0.2"
|