@commercetools-uikit/search-select-field 16.0.0 → 16.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -47
- package/dist/commercetools-uikit-search-select-field.cjs.dev.js +9 -15
- package/dist/commercetools-uikit-search-select-field.cjs.prod.js +9 -15
- package/dist/commercetools-uikit-search-select-field.esm.js +9 -15
- package/dist/declarations/src/search-select-field.d.ts +2 -0
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -83,53 +83,54 @@ export default Example;
|
|
|
83
83
|
|
|
84
84
|
## Properties
|
|
85
85
|
|
|
86
|
-
| Props
|
|
87
|
-
|
|
|
88
|
-
| `horizontalConstraint`
|
|
89
|
-
| `aria-label`
|
|
90
|
-
| `aria-labelledby`
|
|
91
|
-
| `id`
|
|
92
|
-
| `containerId`
|
|
93
|
-
| `name`
|
|
94
|
-
| `placeholder`
|
|
95
|
-
| `components`
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
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
|
-
| `
|
|
125
|
-
| `
|
|
126
|
-
| `
|
|
127
|
-
| `
|
|
128
|
-
| `
|
|
129
|
-
| `
|
|
130
|
-
| `
|
|
131
|
-
| `
|
|
132
|
-
| `
|
|
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
|
+
| `controlShouldRenderValue` | `AsyncProps['controlShouldRenderValue']` | | `true` | Control whether the selected values should be rendered in the control
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
97
|
+
| `tabIndex` | `AsyncProps['tabIndex']` | | | Sets the tabIndex attribute on the input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
98
|
+
| `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) |
|
|
99
|
+
| `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) |
|
|
100
|
+
| `hasError` | `boolean` | | | Indicates the input field has an error |
|
|
101
|
+
| `hasWarning` | `boolean` | | | Indicates the input field has a warning |
|
|
102
|
+
| `isReadOnly` | `boolean` | | | Is the select read-only |
|
|
103
|
+
| `isDisabled` | `boolean` | | | Is the select disabled |
|
|
104
|
+
| `isClearable` | `boolean` | | | Is the select value clearable |
|
|
105
|
+
| `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) |
|
|
106
|
+
| `isMulti` | `AsyncProps['isMulti']` | | | Support multiple selected options
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
107
|
+
| `isAutofocussed` | `boolean` | | | Focus the control when it is mounted. Renamed autoFocus of react-select |
|
|
108
|
+
| `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) |
|
|
109
|
+
| `maxMenuHeight` | `AsyncProps['maxMenuHeight']` | | | Maximum height of the menu before scrolling
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
110
|
+
| `menuPortalTarget` | `AsyncProps['menuPortalTarget']` | | | Dom element to portal the select menu to
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
111
|
+
| `menuPortalZIndex` | `number` | | | z-index value for the menu portal
<br>
Use in conjunction with `menuPortalTarget` |
|
|
112
|
+
| `menuShouldBlockScroll` | `boolean` | | | whether the menu should block scroll while open |
|
|
113
|
+
| `showOptionGroupDivider` | `boolean` | | | Determines if option groups will be separated by a divider |
|
|
114
|
+
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Handle blur events on the control |
|
|
115
|
+
| `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`. |
|
|
116
|
+
| `onFocus` | `AsyncProps['onFocus']` | | | Handle focus events on the control
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
117
|
+
| `onInputChange` | `AsyncProps['onInputChange']` | | | Handle change events on the input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
118
|
+
| `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) |
|
|
119
|
+
| `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) |
|
|
120
|
+
| `loadingMessage` | `union`<br/>Possible values:<br/>`string , (() => string)` | | | The text shown while the options are being loaded |
|
|
121
|
+
| `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) |
|
|
122
|
+
| `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) |
|
|
123
|
+
| `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 |
|
|
124
|
+
| `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
<br />
Unknown errors will be forwarded to `renderError` |
|
|
125
|
+
| `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. |
|
|
126
|
+
| `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
|
|
127
|
+
| `touched` | `union`<br/>Possible values:<br/>`boolean[] , boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
|
|
128
|
+
| `title` | `ReactNode` | ✅ | | Title of the label |
|
|
129
|
+
| `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`. |
|
|
130
|
+
| `description` | `ReactNode` | | | Provides a description for the title. |
|
|
131
|
+
| `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. |
|
|
132
|
+
| `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
<br />
Will only get rendered when `hint` is passed as well. |
|
|
133
|
+
| `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
|
|
|
134
135
|
## Signatures
|
|
135
136
|
|
|
@@ -46,35 +46,29 @@ var SearchSelectInput__default = /*#__PURE__*/_interopDefault(SearchSelectInput)
|
|
|
46
46
|
var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
47
47
|
|
|
48
48
|
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
|
-
|
|
50
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
|
-
|
|
52
50
|
const hasErrors = errors => {
|
|
53
51
|
var _context;
|
|
54
|
-
|
|
55
52
|
return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
|
|
56
53
|
};
|
|
57
|
-
|
|
58
54
|
const sequentialId = utils.createSequentialId('search-select-field-');
|
|
59
55
|
const sequentialErrorsId = utils.createSequentialId('search-select-field-error-')();
|
|
60
|
-
|
|
56
|
+
const defaultProps = {
|
|
57
|
+
controlShouldRenderValue: true
|
|
58
|
+
};
|
|
61
59
|
const SearchSelectField = props => {
|
|
62
60
|
const hasError = Boolean(props.touched) && hasErrors(props.errors);
|
|
63
61
|
const id = hooks.useFieldId(props.id, sequentialId);
|
|
64
|
-
|
|
65
62
|
if (!props.isReadOnly) {
|
|
66
63
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'SearchSelectField: `onChange` is required when field is not read only.') : void 0;
|
|
67
64
|
}
|
|
68
|
-
|
|
69
65
|
if (props.hintIcon) {
|
|
70
66
|
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;
|
|
71
67
|
}
|
|
72
|
-
|
|
73
68
|
if (props.isMulti) {
|
|
74
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;
|
|
75
70
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.touched === 'undefined' || _Array$isArray__default["default"](props.touched), 'SearchSelectField: `touched` is expected to be an array of boolean when isMulti is true') : void 0;
|
|
76
71
|
}
|
|
77
|
-
|
|
78
72
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
79
73
|
max: props.horizontalConstraint,
|
|
80
74
|
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
@@ -121,12 +115,14 @@ const SearchSelectField = props => {
|
|
|
121
115
|
placeholder: props.placeholder,
|
|
122
116
|
tabIndex: props.tabIndex,
|
|
123
117
|
tabSelectsValue: props.tabSelectsValue,
|
|
124
|
-
value: props.value
|
|
118
|
+
value: props.value
|
|
119
|
+
// Async react-select props
|
|
125
120
|
,
|
|
126
121
|
loadOptions: props.loadOptions,
|
|
127
122
|
cacheOptions: props.cacheOptions,
|
|
128
123
|
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
129
|
-
optionType: props.optionType
|
|
124
|
+
optionType: props.optionType,
|
|
125
|
+
controlShouldRenderValue: props.controlShouldRenderValue
|
|
130
126
|
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
131
127
|
id: sequentialErrorsId,
|
|
132
128
|
errors: props.errors,
|
|
@@ -136,7 +132,6 @@ const SearchSelectField = props => {
|
|
|
136
132
|
})
|
|
137
133
|
});
|
|
138
134
|
};
|
|
139
|
-
|
|
140
135
|
SearchSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
141
136
|
horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
142
137
|
hasError: _pt__default["default"].bool,
|
|
@@ -163,21 +158,20 @@ SearchSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
163
158
|
hintIcon: _pt__default["default"].element,
|
|
164
159
|
badge: _pt__default["default"].node
|
|
165
160
|
} : {};
|
|
161
|
+
SearchSelectField.defaultProps = defaultProps;
|
|
166
162
|
SearchSelectField.displayName = 'SearchSelectField';
|
|
167
163
|
/**
|
|
168
164
|
* Use this function to convert the Formik `errors` object type to
|
|
169
165
|
* our custom field errors type.
|
|
170
166
|
* This is primarly useful when using TypeScript.
|
|
171
167
|
*/
|
|
172
|
-
|
|
173
168
|
SearchSelectField.toFieldErrors = function toFieldErrors(errors) {
|
|
174
169
|
return errors;
|
|
175
170
|
};
|
|
176
|
-
|
|
177
171
|
var SearchSelectField$1 = SearchSelectField;
|
|
178
172
|
|
|
179
173
|
// NOTE: This string will be replaced on build time with the package version.
|
|
180
|
-
var version = "16.
|
|
174
|
+
var version = "16.1.0";
|
|
181
175
|
|
|
182
176
|
exports["default"] = SearchSelectField$1;
|
|
183
177
|
exports.version = version;
|
|
@@ -44,28 +44,22 @@ var SearchSelectInput__default = /*#__PURE__*/_interopDefault(SearchSelectInput)
|
|
|
44
44
|
var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
45
45
|
|
|
46
46
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
47
|
-
|
|
48
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; }
|
|
49
|
-
|
|
50
48
|
const hasErrors = errors => {
|
|
51
49
|
var _context;
|
|
52
|
-
|
|
53
50
|
return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
|
|
54
51
|
};
|
|
55
|
-
|
|
56
52
|
const sequentialId = utils.createSequentialId('search-select-field-');
|
|
57
53
|
const sequentialErrorsId = utils.createSequentialId('search-select-field-error-')();
|
|
58
|
-
|
|
54
|
+
const defaultProps = {
|
|
55
|
+
controlShouldRenderValue: true
|
|
56
|
+
};
|
|
59
57
|
const SearchSelectField = props => {
|
|
60
58
|
const hasError = Boolean(props.touched) && hasErrors(props.errors);
|
|
61
59
|
const id = hooks.useFieldId(props.id, sequentialId);
|
|
62
|
-
|
|
63
60
|
if (!props.isReadOnly) ;
|
|
64
|
-
|
|
65
61
|
if (props.hintIcon) ;
|
|
66
|
-
|
|
67
62
|
if (props.isMulti) ;
|
|
68
|
-
|
|
69
63
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
70
64
|
max: props.horizontalConstraint,
|
|
71
65
|
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
@@ -112,12 +106,14 @@ const SearchSelectField = props => {
|
|
|
112
106
|
placeholder: props.placeholder,
|
|
113
107
|
tabIndex: props.tabIndex,
|
|
114
108
|
tabSelectsValue: props.tabSelectsValue,
|
|
115
|
-
value: props.value
|
|
109
|
+
value: props.value
|
|
110
|
+
// Async react-select props
|
|
116
111
|
,
|
|
117
112
|
loadOptions: props.loadOptions,
|
|
118
113
|
cacheOptions: props.cacheOptions,
|
|
119
114
|
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
120
|
-
optionType: props.optionType
|
|
115
|
+
optionType: props.optionType,
|
|
116
|
+
controlShouldRenderValue: props.controlShouldRenderValue
|
|
121
117
|
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
122
118
|
id: sequentialErrorsId,
|
|
123
119
|
errors: props.errors,
|
|
@@ -127,23 +123,21 @@ const SearchSelectField = props => {
|
|
|
127
123
|
})
|
|
128
124
|
});
|
|
129
125
|
};
|
|
130
|
-
|
|
131
126
|
SearchSelectField.propTypes = {};
|
|
127
|
+
SearchSelectField.defaultProps = defaultProps;
|
|
132
128
|
SearchSelectField.displayName = 'SearchSelectField';
|
|
133
129
|
/**
|
|
134
130
|
* Use this function to convert the Formik `errors` object type to
|
|
135
131
|
* our custom field errors type.
|
|
136
132
|
* This is primarly useful when using TypeScript.
|
|
137
133
|
*/
|
|
138
|
-
|
|
139
134
|
SearchSelectField.toFieldErrors = function toFieldErrors(errors) {
|
|
140
135
|
return errors;
|
|
141
136
|
};
|
|
142
|
-
|
|
143
137
|
var SearchSelectField$1 = SearchSelectField;
|
|
144
138
|
|
|
145
139
|
// NOTE: This string will be replaced on build time with the package version.
|
|
146
|
-
var version = "16.
|
|
140
|
+
var version = "16.1.0";
|
|
147
141
|
|
|
148
142
|
exports["default"] = SearchSelectField$1;
|
|
149
143
|
exports.version = version;
|
|
@@ -22,35 +22,29 @@ import FieldErrors from '@commercetools-uikit/field-errors';
|
|
|
22
22
|
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
23
23
|
|
|
24
24
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
25
|
-
|
|
26
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; }
|
|
27
|
-
|
|
28
26
|
const hasErrors = errors => {
|
|
29
27
|
var _context;
|
|
30
|
-
|
|
31
28
|
return errors && _someInstanceProperty(_context = _Object$values(errors)).call(_context, Boolean);
|
|
32
29
|
};
|
|
33
|
-
|
|
34
30
|
const sequentialId = createSequentialId('search-select-field-');
|
|
35
31
|
const sequentialErrorsId = createSequentialId('search-select-field-error-')();
|
|
36
|
-
|
|
32
|
+
const defaultProps = {
|
|
33
|
+
controlShouldRenderValue: true
|
|
34
|
+
};
|
|
37
35
|
const SearchSelectField = props => {
|
|
38
36
|
const hasError = Boolean(props.touched) && hasErrors(props.errors);
|
|
39
37
|
const id = useFieldId(props.id, sequentialId);
|
|
40
|
-
|
|
41
38
|
if (!props.isReadOnly) {
|
|
42
39
|
process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'SearchSelectField: `onChange` is required when field is not read only.') : void 0;
|
|
43
40
|
}
|
|
44
|
-
|
|
45
41
|
if (props.hintIcon) {
|
|
46
42
|
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;
|
|
47
43
|
}
|
|
48
|
-
|
|
49
44
|
if (props.isMulti) {
|
|
50
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;
|
|
51
46
|
process.env.NODE_ENV !== "production" ? warning(typeof props.touched === 'undefined' || _Array$isArray(props.touched), 'SearchSelectField: `touched` is expected to be an array of boolean when isMulti is true') : void 0;
|
|
52
47
|
}
|
|
53
|
-
|
|
54
48
|
return jsx(Constraints.Horizontal, {
|
|
55
49
|
max: props.horizontalConstraint,
|
|
56
50
|
children: jsxs(Spacings.Stack, {
|
|
@@ -97,12 +91,14 @@ const SearchSelectField = props => {
|
|
|
97
91
|
placeholder: props.placeholder,
|
|
98
92
|
tabIndex: props.tabIndex,
|
|
99
93
|
tabSelectsValue: props.tabSelectsValue,
|
|
100
|
-
value: props.value
|
|
94
|
+
value: props.value
|
|
95
|
+
// Async react-select props
|
|
101
96
|
,
|
|
102
97
|
loadOptions: props.loadOptions,
|
|
103
98
|
cacheOptions: props.cacheOptions,
|
|
104
99
|
showOptionGroupDivider: props.showOptionGroupDivider,
|
|
105
|
-
optionType: props.optionType
|
|
100
|
+
optionType: props.optionType,
|
|
101
|
+
controlShouldRenderValue: props.controlShouldRenderValue
|
|
106
102
|
})), jsx(FieldErrors, {
|
|
107
103
|
id: sequentialErrorsId,
|
|
108
104
|
errors: props.errors,
|
|
@@ -112,7 +108,6 @@ const SearchSelectField = props => {
|
|
|
112
108
|
})
|
|
113
109
|
});
|
|
114
110
|
};
|
|
115
|
-
|
|
116
111
|
SearchSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
117
112
|
horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
118
113
|
hasError: _pt.bool,
|
|
@@ -139,20 +134,19 @@ SearchSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
139
134
|
hintIcon: _pt.element,
|
|
140
135
|
badge: _pt.node
|
|
141
136
|
} : {};
|
|
137
|
+
SearchSelectField.defaultProps = defaultProps;
|
|
142
138
|
SearchSelectField.displayName = 'SearchSelectField';
|
|
143
139
|
/**
|
|
144
140
|
* Use this function to convert the Formik `errors` object type to
|
|
145
141
|
* our custom field errors type.
|
|
146
142
|
* This is primarly useful when using TypeScript.
|
|
147
143
|
*/
|
|
148
|
-
|
|
149
144
|
SearchSelectField.toFieldErrors = function toFieldErrors(errors) {
|
|
150
145
|
return errors;
|
|
151
146
|
};
|
|
152
|
-
|
|
153
147
|
var SearchSelectField$1 = SearchSelectField;
|
|
154
148
|
|
|
155
149
|
// NOTE: This string will be replaced on build time with the package version.
|
|
156
|
-
var version = "16.
|
|
150
|
+
var version = "16.1.0";
|
|
157
151
|
|
|
158
152
|
export { SearchSelectField$1 as default, version };
|
|
@@ -24,6 +24,7 @@ export type TSearchSelectFieldProps = {
|
|
|
24
24
|
name?: ReactSelectAsyncProps['name'];
|
|
25
25
|
placeholder?: ReactSelectAsyncProps['placeholder'];
|
|
26
26
|
components?: ReactSelectAsyncProps['components'];
|
|
27
|
+
controlShouldRenderValue?: ReactSelectAsyncProps['controlShouldRenderValue'];
|
|
27
28
|
tabIndex?: ReactSelectAsyncProps['tabIndex'];
|
|
28
29
|
value?: ReactSelectAsyncProps['value'];
|
|
29
30
|
backspaceRemovesValue?: ReactSelectAsyncProps['backspaceRemovesValue'];
|
|
@@ -64,6 +65,7 @@ export type TSearchSelectFieldProps = {
|
|
|
64
65
|
};
|
|
65
66
|
declare const SearchSelectField: {
|
|
66
67
|
(props: TSearchSelectFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
68
|
+
defaultProps: Pick<TSearchSelectFieldProps, "controlShouldRenderValue">;
|
|
67
69
|
displayName: string;
|
|
68
70
|
toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
|
|
69
71
|
};
|
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": "16.
|
|
4
|
+
"version": "16.1.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,14 +21,14 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/constraints": "16.
|
|
25
|
-
"@commercetools-uikit/design-system": "16.
|
|
26
|
-
"@commercetools-uikit/field-errors": "16.
|
|
27
|
-
"@commercetools-uikit/field-label": "16.
|
|
28
|
-
"@commercetools-uikit/hooks": "16.
|
|
29
|
-
"@commercetools-uikit/search-select-input": "16.
|
|
30
|
-
"@commercetools-uikit/spacings": "16.
|
|
31
|
-
"@commercetools-uikit/utils": "16.
|
|
24
|
+
"@commercetools-uikit/constraints": "16.1.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "16.1.0",
|
|
26
|
+
"@commercetools-uikit/field-errors": "16.1.0",
|
|
27
|
+
"@commercetools-uikit/field-label": "16.1.0",
|
|
28
|
+
"@commercetools-uikit/hooks": "16.1.0",
|
|
29
|
+
"@commercetools-uikit/search-select-input": "16.1.0",
|
|
30
|
+
"@commercetools-uikit/spacings": "16.1.0",
|
|
31
|
+
"@commercetools-uikit/utils": "16.1.0",
|
|
32
32
|
"@emotion/react": "^11.10.5",
|
|
33
33
|
"@emotion/styled": "^11.10.5",
|
|
34
34
|
"prop-types": "15.8.1",
|