@commercetools-uikit/async-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 +49 -48
- package/dist/commercetools-uikit-async-select-field.cjs.dev.js +9 -24
- package/dist/commercetools-uikit-async-select-field.cjs.prod.js +9 -24
- package/dist/commercetools-uikit-async-select-field.esm.js +9 -24
- package/dist/declarations/src/async-select-field.d.ts +2 -1
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -50,54 +50,55 @@ export default Example;
|
|
|
50
50
|
|
|
51
51
|
## Properties
|
|
52
52
|
|
|
53
|
-
| Props
|
|
54
|
-
|
|
|
55
|
-
| `id`
|
|
56
|
-
| `horizontalConstraint`
|
|
57
|
-
| `errors`
|
|
58
|
-
| `renderError`
|
|
59
|
-
| `isRequired`
|
|
60
|
-
| `touched`
|
|
61
|
-
| `aria-label`
|
|
62
|
-
| `aria-labelledby`
|
|
63
|
-
| `isAutofocussed`
|
|
64
|
-
| `backspaceRemovesValue`
|
|
65
|
-
| `components`
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
| `
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
53
|
+
| Props | Type | Required | Default | Description |
|
|
54
|
+
| -------------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
55
|
+
| `id` | `AsyncProps['inputId']` | | | Used as HTML id property. An id is auto-generated when it is not specified.
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
56
|
+
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. |
|
|
57
|
+
| `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
<br />
Unknown errors will be forwarded to `renderError` |
|
|
58
|
+
| `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. |
|
|
59
|
+
| `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
|
|
60
|
+
| `touched` | `union`<br/>Possible values:<br/>`boolean[] , boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
|
|
61
|
+
| `aria-label` | `AsyncProps['aria-label']` | | | Aria label (for assistive tech)
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
62
|
+
| `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) |
|
|
63
|
+
| `isAutofocussed` | `boolean` | | | Focus the control when it is mounted |
|
|
64
|
+
| `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) |
|
|
65
|
+
| `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) |
|
|
66
|
+
| `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) |
|
|
67
|
+
| `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) |
|
|
68
|
+
| `containerId` | `AsyncProps['id']` | | | The id to set on the SelectContainer component
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
69
|
+
| `isClearable` | `AsyncProps['isClearable']` | | | Is the select value clearable
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
70
|
+
| `isDisabled` | `AsyncProps['isDisabled']` | | | Is the select disabled
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
71
|
+
| `isReadOnly` | `boolean` | | | Is the select read-only |
|
|
72
|
+
| `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) |
|
|
73
|
+
| `isMulti` | `AsyncProps['isMulti']` | | | Support multiple selected options
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
74
|
+
| `isSearchable` | `AsyncProps['isSearchable']` | | | Whether to enable search functionality
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
75
|
+
| `hasWarning` | `boolean` | | | Indicates the input field has a warning |
|
|
76
|
+
| `maxMenuHeight` | `AsyncProps['maxMenuHeight']` | | | Maximum height of the menu before scrolling
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
77
|
+
| `menuPortalTarget` | `AsyncProps['menuPortalTarget']` | | | Dom element to portal the select menu to
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
78
|
+
| `menuPortalZIndex` | `number` | | | z-index value for the menu portal
<br>
Use in conjunction with `menuPortalTarget` |
|
|
79
|
+
| `menuShouldBlockScroll` | `AsyncProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
80
|
+
| `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) |
|
|
81
|
+
| `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).
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
82
|
+
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Handle blur events on the control |
|
|
83
|
+
| `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`. |
|
|
84
|
+
| `onFocus` | `FocusEventHandler` | | | Handle focus events on the control |
|
|
85
|
+
| `onInputChange` | `AsyncProps['onInputChange']` | | | Handle change events on the input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
86
|
+
| `placeholder` | `AsyncProps['placeholder']` | | | Placeholder text for the select value
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
87
|
+
| `loadingMessage` | `union`<br/>Possible values:<br/>`string , (() => string)` | | | loading message shown while the options are being loaded |
|
|
88
|
+
| `tabIndex` | `AsyncProps['tabIndex']` | | | Sets the tabIndex attribute on the input
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
89
|
+
| `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) |
|
|
90
|
+
| `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) |
|
|
91
|
+
| `showOptionGroupDivider` | `boolean` | | | Determines if option groups will be separated by a divider |
|
|
92
|
+
| `defaultOptions` | `union`<br/>Possible values:<br/>`OptionsOrGroups<unknown, GroupBase<unknown>> , boolean` | | | The default set of options to show before the user starts searching.
<br />
When set to `true`, the results for `loadOptions('')` will be autoloaded. |
|
|
93
|
+
| `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) |
|
|
94
|
+
| `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) |
|
|
95
|
+
| `title` | `union`<br/>Possible values:<br/>`string , ReactNode` | ✅ | | Title of the label |
|
|
96
|
+
| `hint` | `union`<br/>Possible values:<br/>`string , 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`. |
|
|
97
|
+
| `description` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Provides a description for the title. |
|
|
98
|
+
| `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. |
|
|
99
|
+
| `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
<br />
Will only get rendered when `hint` is passed as well. |
|
|
100
|
+
| `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) |
|
|
101
|
+
| `iconLeft` | `ReactNode` | | | Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled. |
|
|
101
102
|
|
|
102
103
|
## Signatures
|
|
103
104
|
|
|
@@ -52,35 +52,24 @@ var AsyncSelectInput__default = /*#__PURE__*/_interopDefault(AsyncSelectInput);
|
|
|
52
52
|
var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
53
53
|
|
|
54
54
|
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; }
|
|
55
|
-
|
|
56
55
|
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; }
|
|
57
|
-
|
|
58
56
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
59
|
-
|
|
60
57
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
61
58
|
const sequentialId = utils.createSequentialId('async-select-field-');
|
|
62
59
|
const sequentialErrorsId = utils.createSequentialId('async-select-field-error-')();
|
|
63
|
-
|
|
64
60
|
const hasErrors = errors => {
|
|
65
61
|
var _context;
|
|
66
|
-
|
|
67
62
|
return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
|
|
68
63
|
};
|
|
69
|
-
|
|
70
64
|
let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
71
65
|
_inherits(AsyncSelectField, _Component);
|
|
72
|
-
|
|
73
66
|
var _super = _createSuper(AsyncSelectField);
|
|
74
|
-
|
|
75
67
|
function AsyncSelectField() {
|
|
76
68
|
var _this;
|
|
77
|
-
|
|
78
69
|
_classCallCheck(this, AsyncSelectField);
|
|
79
|
-
|
|
80
70
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
81
71
|
args[_key] = arguments[_key];
|
|
82
72
|
}
|
|
83
|
-
|
|
84
73
|
_this = _super.call(this, ...args);
|
|
85
74
|
_this.state = {
|
|
86
75
|
// We generate an id in case no id is provided by the parent to attach the
|
|
@@ -89,25 +78,20 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
|
89
78
|
};
|
|
90
79
|
return _this;
|
|
91
80
|
}
|
|
92
|
-
|
|
93
81
|
_createClass(AsyncSelectField, [{
|
|
94
82
|
key: "render",
|
|
95
83
|
value: function render() {
|
|
96
84
|
const hasError = AsyncSelectInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
|
|
97
|
-
|
|
98
85
|
if (!this.props.isReadOnly) {
|
|
99
86
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'AsyncSelectField: `onChange` is required when field is not read only.') : void 0;
|
|
100
87
|
}
|
|
101
|
-
|
|
102
88
|
if (this.props.hintIcon) {
|
|
103
89
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.hint === 'string' || /*#__PURE__*/react.isValidElement(this.props.hint), 'AsyncSelectField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
|
|
104
90
|
}
|
|
105
|
-
|
|
106
91
|
if (this.props.isMulti) {
|
|
107
92
|
process.env.NODE_ENV !== "production" ? utils.warning(_Array$isArray__default["default"](this.props.value), 'AsyncSelectField: `value` is expected to be an array of string when isMulti is true') : void 0;
|
|
108
93
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.touched === 'undefined' || _Array$isArray__default["default"](this.props.touched), 'AsyncSelectField: `touched` is expected to be an array of boolean when isMulti is true') : void 0;
|
|
109
94
|
}
|
|
110
|
-
|
|
111
95
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
112
96
|
max: this.props.horizontalConstraint,
|
|
113
97
|
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
@@ -121,7 +105,7 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
|
121
105
|
badge: this.props.badge,
|
|
122
106
|
hasRequiredIndicator: this.props.isRequired,
|
|
123
107
|
htmlFor: this.state.id
|
|
124
|
-
}), jsxRuntime.jsx(AsyncSelectInput__default["default"], _objectSpread({
|
|
108
|
+
}), jsxRuntime.jsx(AsyncSelectInput__default["default"], _objectSpread(_objectSpread({
|
|
125
109
|
horizontalConstraint: "scale",
|
|
126
110
|
hasError: hasError,
|
|
127
111
|
"aria-label": this.props['aria-label'],
|
|
@@ -155,14 +139,17 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
|
155
139
|
placeholder: this.props.placeholder,
|
|
156
140
|
tabIndex: this.props.tabIndex,
|
|
157
141
|
tabSelectsValue: this.props.tabSelectsValue,
|
|
158
|
-
value: this.props.value
|
|
142
|
+
value: this.props.value
|
|
143
|
+
// Async react-select props
|
|
159
144
|
,
|
|
160
145
|
defaultOptions: this.props.defaultOptions,
|
|
161
146
|
loadOptions: this.props.loadOptions,
|
|
162
147
|
cacheOptions: this.props.cacheOptions,
|
|
163
148
|
showOptionGroupDivider: this.props.showOptionGroupDivider,
|
|
164
149
|
iconLeft: this.props.iconLeft
|
|
165
|
-
}, utils.filterDataAttributes(this.props))
|
|
150
|
+
}, utils.filterDataAttributes(this.props)), {}, {
|
|
151
|
+
controlShouldRenderValue: this.props.controlShouldRenderValue
|
|
152
|
+
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
166
153
|
id: sequentialErrorsId,
|
|
167
154
|
errors: this.props.errors,
|
|
168
155
|
isVisible: hasError,
|
|
@@ -183,15 +170,13 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
|
183
170
|
return errors;
|
|
184
171
|
}
|
|
185
172
|
}]);
|
|
186
|
-
|
|
187
173
|
return AsyncSelectField;
|
|
188
174
|
}(react.Component);
|
|
189
|
-
|
|
190
175
|
AsyncSelectField.displayName = 'AsyncSelectField';
|
|
191
176
|
AsyncSelectField.defaultProps = {
|
|
192
|
-
horizontalConstraint: 'scale'
|
|
177
|
+
horizontalConstraint: 'scale',
|
|
178
|
+
controlShouldRenderValue: true
|
|
193
179
|
};
|
|
194
|
-
|
|
195
180
|
AsyncSelectField.getDerivedStateFromProps = (props, state) => ({
|
|
196
181
|
id: utils.getFieldId(props, state, sequentialId)
|
|
197
182
|
});
|
|
@@ -221,7 +206,7 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
221
206
|
} : {};
|
|
222
207
|
|
|
223
208
|
// NOTE: This string will be replaced on build time with the package version.
|
|
224
|
-
var version = "16.
|
|
209
|
+
var version = "16.1.0";
|
|
225
210
|
|
|
226
211
|
exports["default"] = AsyncSelectField;
|
|
227
212
|
exports.version = version;
|
|
@@ -50,35 +50,24 @@ var AsyncSelectInput__default = /*#__PURE__*/_interopDefault(AsyncSelectInput);
|
|
|
50
50
|
var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
51
51
|
|
|
52
52
|
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; }
|
|
53
|
-
|
|
54
53
|
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; }
|
|
55
|
-
|
|
56
54
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
57
|
-
|
|
58
55
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
59
56
|
const sequentialId = utils.createSequentialId('async-select-field-');
|
|
60
57
|
const sequentialErrorsId = utils.createSequentialId('async-select-field-error-')();
|
|
61
|
-
|
|
62
58
|
const hasErrors = errors => {
|
|
63
59
|
var _context;
|
|
64
|
-
|
|
65
60
|
return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
|
|
66
61
|
};
|
|
67
|
-
|
|
68
62
|
let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
69
63
|
_inherits(AsyncSelectField, _Component);
|
|
70
|
-
|
|
71
64
|
var _super = _createSuper(AsyncSelectField);
|
|
72
|
-
|
|
73
65
|
function AsyncSelectField() {
|
|
74
66
|
var _this;
|
|
75
|
-
|
|
76
67
|
_classCallCheck(this, AsyncSelectField);
|
|
77
|
-
|
|
78
68
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
79
69
|
args[_key] = arguments[_key];
|
|
80
70
|
}
|
|
81
|
-
|
|
82
71
|
_this = _super.call(this, ...args);
|
|
83
72
|
_this.state = {
|
|
84
73
|
// We generate an id in case no id is provided by the parent to attach the
|
|
@@ -87,18 +76,13 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
|
87
76
|
};
|
|
88
77
|
return _this;
|
|
89
78
|
}
|
|
90
|
-
|
|
91
79
|
_createClass(AsyncSelectField, [{
|
|
92
80
|
key: "render",
|
|
93
81
|
value: function render() {
|
|
94
82
|
const hasError = AsyncSelectInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
|
|
95
|
-
|
|
96
83
|
if (!this.props.isReadOnly) ;
|
|
97
|
-
|
|
98
84
|
if (this.props.hintIcon) ;
|
|
99
|
-
|
|
100
85
|
if (this.props.isMulti) ;
|
|
101
|
-
|
|
102
86
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
103
87
|
max: this.props.horizontalConstraint,
|
|
104
88
|
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
@@ -112,7 +96,7 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
|
112
96
|
badge: this.props.badge,
|
|
113
97
|
hasRequiredIndicator: this.props.isRequired,
|
|
114
98
|
htmlFor: this.state.id
|
|
115
|
-
}), jsxRuntime.jsx(AsyncSelectInput__default["default"], _objectSpread({
|
|
99
|
+
}), jsxRuntime.jsx(AsyncSelectInput__default["default"], _objectSpread(_objectSpread({
|
|
116
100
|
horizontalConstraint: "scale",
|
|
117
101
|
hasError: hasError,
|
|
118
102
|
"aria-label": this.props['aria-label'],
|
|
@@ -146,14 +130,17 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
|
146
130
|
placeholder: this.props.placeholder,
|
|
147
131
|
tabIndex: this.props.tabIndex,
|
|
148
132
|
tabSelectsValue: this.props.tabSelectsValue,
|
|
149
|
-
value: this.props.value
|
|
133
|
+
value: this.props.value
|
|
134
|
+
// Async react-select props
|
|
150
135
|
,
|
|
151
136
|
defaultOptions: this.props.defaultOptions,
|
|
152
137
|
loadOptions: this.props.loadOptions,
|
|
153
138
|
cacheOptions: this.props.cacheOptions,
|
|
154
139
|
showOptionGroupDivider: this.props.showOptionGroupDivider,
|
|
155
140
|
iconLeft: this.props.iconLeft
|
|
156
|
-
}, utils.filterDataAttributes(this.props))
|
|
141
|
+
}, utils.filterDataAttributes(this.props)), {}, {
|
|
142
|
+
controlShouldRenderValue: this.props.controlShouldRenderValue
|
|
143
|
+
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
157
144
|
id: sequentialErrorsId,
|
|
158
145
|
errors: this.props.errors,
|
|
159
146
|
isVisible: hasError,
|
|
@@ -174,22 +161,20 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
|
174
161
|
return errors;
|
|
175
162
|
}
|
|
176
163
|
}]);
|
|
177
|
-
|
|
178
164
|
return AsyncSelectField;
|
|
179
165
|
}(react.Component);
|
|
180
|
-
|
|
181
166
|
AsyncSelectField.displayName = 'AsyncSelectField';
|
|
182
167
|
AsyncSelectField.defaultProps = {
|
|
183
|
-
horizontalConstraint: 'scale'
|
|
168
|
+
horizontalConstraint: 'scale',
|
|
169
|
+
controlShouldRenderValue: true
|
|
184
170
|
};
|
|
185
|
-
|
|
186
171
|
AsyncSelectField.getDerivedStateFromProps = (props, state) => ({
|
|
187
172
|
id: utils.getFieldId(props, state, sequentialId)
|
|
188
173
|
});
|
|
189
174
|
AsyncSelectField.propTypes = {};
|
|
190
175
|
|
|
191
176
|
// NOTE: This string will be replaced on build time with the package version.
|
|
192
|
-
var version = "16.
|
|
177
|
+
var version = "16.1.0";
|
|
193
178
|
|
|
194
179
|
exports["default"] = AsyncSelectField;
|
|
195
180
|
exports.version = version;
|
|
@@ -27,35 +27,24 @@ import FieldErrors from '@commercetools-uikit/field-errors';
|
|
|
27
27
|
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
28
28
|
|
|
29
29
|
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; }
|
|
30
|
-
|
|
31
30
|
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; }
|
|
32
|
-
|
|
33
31
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
34
|
-
|
|
35
32
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
36
33
|
const sequentialId = createSequentialId('async-select-field-');
|
|
37
34
|
const sequentialErrorsId = createSequentialId('async-select-field-error-')();
|
|
38
|
-
|
|
39
35
|
const hasErrors = errors => {
|
|
40
36
|
var _context;
|
|
41
|
-
|
|
42
37
|
return errors && _someInstanceProperty(_context = _Object$values(errors)).call(_context, Boolean);
|
|
43
38
|
};
|
|
44
|
-
|
|
45
39
|
let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
46
40
|
_inherits(AsyncSelectField, _Component);
|
|
47
|
-
|
|
48
41
|
var _super = _createSuper(AsyncSelectField);
|
|
49
|
-
|
|
50
42
|
function AsyncSelectField() {
|
|
51
43
|
var _this;
|
|
52
|
-
|
|
53
44
|
_classCallCheck(this, AsyncSelectField);
|
|
54
|
-
|
|
55
45
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
56
46
|
args[_key] = arguments[_key];
|
|
57
47
|
}
|
|
58
|
-
|
|
59
48
|
_this = _super.call(this, ...args);
|
|
60
49
|
_this.state = {
|
|
61
50
|
// We generate an id in case no id is provided by the parent to attach the
|
|
@@ -64,25 +53,20 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
|
64
53
|
};
|
|
65
54
|
return _this;
|
|
66
55
|
}
|
|
67
|
-
|
|
68
56
|
_createClass(AsyncSelectField, [{
|
|
69
57
|
key: "render",
|
|
70
58
|
value: function render() {
|
|
71
59
|
const hasError = AsyncSelectInput.isTouched(this.props.touched) && hasErrors(this.props.errors);
|
|
72
|
-
|
|
73
60
|
if (!this.props.isReadOnly) {
|
|
74
61
|
process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'AsyncSelectField: `onChange` is required when field is not read only.') : void 0;
|
|
75
62
|
}
|
|
76
|
-
|
|
77
63
|
if (this.props.hintIcon) {
|
|
78
64
|
process.env.NODE_ENV !== "production" ? warning(typeof this.props.hint === 'string' || /*#__PURE__*/isValidElement(this.props.hint), 'AsyncSelectField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
|
|
79
65
|
}
|
|
80
|
-
|
|
81
66
|
if (this.props.isMulti) {
|
|
82
67
|
process.env.NODE_ENV !== "production" ? warning(_Array$isArray(this.props.value), 'AsyncSelectField: `value` is expected to be an array of string when isMulti is true') : void 0;
|
|
83
68
|
process.env.NODE_ENV !== "production" ? warning(typeof this.props.touched === 'undefined' || _Array$isArray(this.props.touched), 'AsyncSelectField: `touched` is expected to be an array of boolean when isMulti is true') : void 0;
|
|
84
69
|
}
|
|
85
|
-
|
|
86
70
|
return jsx(Constraints.Horizontal, {
|
|
87
71
|
max: this.props.horizontalConstraint,
|
|
88
72
|
children: jsxs(Spacings.Stack, {
|
|
@@ -96,7 +80,7 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
|
96
80
|
badge: this.props.badge,
|
|
97
81
|
hasRequiredIndicator: this.props.isRequired,
|
|
98
82
|
htmlFor: this.state.id
|
|
99
|
-
}), jsx(AsyncSelectInput, _objectSpread({
|
|
83
|
+
}), jsx(AsyncSelectInput, _objectSpread(_objectSpread({
|
|
100
84
|
horizontalConstraint: "scale",
|
|
101
85
|
hasError: hasError,
|
|
102
86
|
"aria-label": this.props['aria-label'],
|
|
@@ -130,14 +114,17 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
|
130
114
|
placeholder: this.props.placeholder,
|
|
131
115
|
tabIndex: this.props.tabIndex,
|
|
132
116
|
tabSelectsValue: this.props.tabSelectsValue,
|
|
133
|
-
value: this.props.value
|
|
117
|
+
value: this.props.value
|
|
118
|
+
// Async react-select props
|
|
134
119
|
,
|
|
135
120
|
defaultOptions: this.props.defaultOptions,
|
|
136
121
|
loadOptions: this.props.loadOptions,
|
|
137
122
|
cacheOptions: this.props.cacheOptions,
|
|
138
123
|
showOptionGroupDivider: this.props.showOptionGroupDivider,
|
|
139
124
|
iconLeft: this.props.iconLeft
|
|
140
|
-
}, filterDataAttributes(this.props))
|
|
125
|
+
}, filterDataAttributes(this.props)), {}, {
|
|
126
|
+
controlShouldRenderValue: this.props.controlShouldRenderValue
|
|
127
|
+
})), jsx(FieldErrors, {
|
|
141
128
|
id: sequentialErrorsId,
|
|
142
129
|
errors: this.props.errors,
|
|
143
130
|
isVisible: hasError,
|
|
@@ -158,15 +145,13 @@ let AsyncSelectField = /*#__PURE__*/function (_Component) {
|
|
|
158
145
|
return errors;
|
|
159
146
|
}
|
|
160
147
|
}]);
|
|
161
|
-
|
|
162
148
|
return AsyncSelectField;
|
|
163
149
|
}(Component);
|
|
164
|
-
|
|
165
150
|
AsyncSelectField.displayName = 'AsyncSelectField';
|
|
166
151
|
AsyncSelectField.defaultProps = {
|
|
167
|
-
horizontalConstraint: 'scale'
|
|
152
|
+
horizontalConstraint: 'scale',
|
|
153
|
+
controlShouldRenderValue: true
|
|
168
154
|
};
|
|
169
|
-
|
|
170
155
|
AsyncSelectField.getDerivedStateFromProps = (props, state) => ({
|
|
171
156
|
id: getFieldId(props, state, sequentialId)
|
|
172
157
|
});
|
|
@@ -196,6 +181,6 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
196
181
|
} : {};
|
|
197
182
|
|
|
198
183
|
// NOTE: This string will be replaced on build time with the package version.
|
|
199
|
-
var version = "16.
|
|
184
|
+
var version = "16.1.0";
|
|
200
185
|
|
|
201
186
|
export { AsyncSelectField as default, version };
|
|
@@ -27,6 +27,7 @@ export type TAsyncSelectFieldProps = {
|
|
|
27
27
|
isAutofocussed?: boolean;
|
|
28
28
|
backspaceRemovesValue?: ReactSelectAsyncProps['backspaceRemovesValue'];
|
|
29
29
|
components?: ReactSelectAsyncProps['components'];
|
|
30
|
+
controlShouldRenderValue?: ReactSelectAsyncProps['controlShouldRenderValue'];
|
|
30
31
|
filterOption?: ReactSelectAsyncProps['filterOption'];
|
|
31
32
|
containerId?: ReactSelectAsyncProps['id'];
|
|
32
33
|
isClearable?: ReactSelectAsyncProps['isClearable'];
|
|
@@ -66,7 +67,7 @@ export type TAsyncSelectFieldProps = {
|
|
|
66
67
|
type TAsyncSelectFieldState = Pick<TAsyncSelectFieldProps, 'id'>;
|
|
67
68
|
export default class AsyncSelectField extends Component<TAsyncSelectFieldProps, TAsyncSelectFieldState> {
|
|
68
69
|
static displayName: string;
|
|
69
|
-
static defaultProps: Pick<TAsyncSelectFieldProps, 'horizontalConstraint'>;
|
|
70
|
+
static defaultProps: Pick<TAsyncSelectFieldProps, 'horizontalConstraint' | 'controlShouldRenderValue'>;
|
|
70
71
|
state: {
|
|
71
72
|
id: string | undefined;
|
|
72
73
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/async-select-field",
|
|
3
3
|
"description": "A controlled input component with validation states and a label getting a selection from an asynchronously loaded list from the user.",
|
|
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,13 +21,13 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/async-select-input": "16.
|
|
25
|
-
"@commercetools-uikit/constraints": "16.
|
|
26
|
-
"@commercetools-uikit/design-system": "16.
|
|
27
|
-
"@commercetools-uikit/field-errors": "16.
|
|
28
|
-
"@commercetools-uikit/field-label": "16.
|
|
29
|
-
"@commercetools-uikit/spacings": "16.
|
|
30
|
-
"@commercetools-uikit/utils": "16.
|
|
24
|
+
"@commercetools-uikit/async-select-input": "16.1.0",
|
|
25
|
+
"@commercetools-uikit/constraints": "16.1.0",
|
|
26
|
+
"@commercetools-uikit/design-system": "16.1.0",
|
|
27
|
+
"@commercetools-uikit/field-errors": "16.1.0",
|
|
28
|
+
"@commercetools-uikit/field-label": "16.1.0",
|
|
29
|
+
"@commercetools-uikit/spacings": "16.1.0",
|
|
30
|
+
"@commercetools-uikit/utils": "16.1.0",
|
|
31
31
|
"@emotion/react": "^11.10.5",
|
|
32
32
|
"@emotion/styled": "^11.10.5",
|
|
33
33
|
"prop-types": "15.8.1",
|