@commercetools-uikit/async-select-input 15.15.0 → 16.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commercetools-uikit-async-select-input.cjs.d.ts +1 -0
- package/dist/commercetools-uikit-async-select-input.cjs.d.ts.map +1 -0
- package/dist/commercetools-uikit-async-select-input.cjs.dev.js +30 -36
- package/dist/commercetools-uikit-async-select-input.cjs.prod.js +30 -36
- package/dist/commercetools-uikit-async-select-input.esm.js +32 -38
- package/package.json +12 -12
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"commercetools-uikit-async-select-input.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
|
|
@@ -43,20 +43,18 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
|
|
|
43
43
|
|
|
44
44
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
});
|
|
50
|
-
};
|
|
46
|
+
const LoadingIndicator = () => jsxRuntime.jsx(LoadingSpinner__default["default"], {
|
|
47
|
+
scale: "s"
|
|
48
|
+
});
|
|
51
49
|
|
|
52
50
|
LoadingIndicator.displayName = 'LoadingIndicator';
|
|
53
|
-
|
|
51
|
+
const customizedComponents = {
|
|
54
52
|
DropdownIndicator: selectUtils.DropdownIndicator,
|
|
55
53
|
ClearIndicator: selectUtils.ClearIndicator,
|
|
56
|
-
LoadingIndicator
|
|
54
|
+
LoadingIndicator,
|
|
57
55
|
MultiValueRemove: selectUtils.TagRemove
|
|
58
56
|
};
|
|
59
|
-
|
|
57
|
+
const defaultProps = {
|
|
60
58
|
// Using "null" will ensure that the currently selected value disappears in
|
|
61
59
|
// case "undefined" gets passed as the next value
|
|
62
60
|
value: null,
|
|
@@ -64,11 +62,11 @@ var defaultProps = {
|
|
|
64
62
|
menuPortalZIndex: 1
|
|
65
63
|
};
|
|
66
64
|
|
|
67
|
-
|
|
68
|
-
|
|
65
|
+
const AsyncSelectInput = props => {
|
|
66
|
+
const intl = reactIntl.useIntl();
|
|
69
67
|
|
|
70
|
-
|
|
71
|
-
|
|
68
|
+
const _useTheme = designSystem.useTheme(),
|
|
69
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
72
70
|
|
|
73
71
|
if (!props.isReadOnly) {
|
|
74
72
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'AsyncSelectInput: `onChange` is required when input is not read only.') : void 0;
|
|
@@ -79,9 +77,9 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
79
77
|
menuPortalTarget: props.menuPortalTarget,
|
|
80
78
|
componentName: 'AsyncSelectInput'
|
|
81
79
|
});
|
|
82
|
-
|
|
80
|
+
const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
83
81
|
|
|
84
|
-
|
|
82
|
+
const loadingMessage = () => {
|
|
85
83
|
if (typeof props.loadingMessage === 'function') {
|
|
86
84
|
return props.loadingMessage();
|
|
87
85
|
}
|
|
@@ -100,11 +98,9 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
100
98
|
autoFocus: props.isAutofocussed,
|
|
101
99
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
102
100
|
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
103
|
-
Input:
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}));
|
|
107
|
-
}
|
|
101
|
+
Input: ownProps => jsxRuntime.jsx(reactSelect.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
102
|
+
readOnly: true
|
|
103
|
+
}))
|
|
108
104
|
} : {}), props.components),
|
|
109
105
|
menuIsOpen: props.isReadOnly ? false : undefined,
|
|
110
106
|
styles: selectUtils.createSelectStyles({
|
|
@@ -117,7 +113,7 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
117
113
|
iconLeft: props.iconLeft,
|
|
118
114
|
isMulti: props.isMulti,
|
|
119
115
|
hasValue: !isEmpty__default["default"](props.value),
|
|
120
|
-
isNewTheme
|
|
116
|
+
isNewTheme
|
|
121
117
|
}),
|
|
122
118
|
filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
|
|
123
119
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
@@ -138,17 +134,17 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
138
134
|
closeMenuOnSelect: props.closeMenuOnSelect,
|
|
139
135
|
name: props.name,
|
|
140
136
|
loadingMessage: loadingMessage,
|
|
141
|
-
noOptionsMessage: props.noOptionsMessage ||
|
|
142
|
-
|
|
137
|
+
noOptionsMessage: props.noOptionsMessage || (_ref => {
|
|
138
|
+
let inputValue = _ref.inputValue;
|
|
143
139
|
return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
|
|
144
|
-
inputValue
|
|
140
|
+
inputValue
|
|
145
141
|
});
|
|
146
|
-
},
|
|
147
|
-
onBlur: props.onBlur ?
|
|
148
|
-
|
|
142
|
+
}),
|
|
143
|
+
onBlur: props.onBlur ? () => {
|
|
144
|
+
const event = {
|
|
149
145
|
target: {
|
|
150
146
|
id: props.id,
|
|
151
|
-
name:
|
|
147
|
+
name: (() => {
|
|
152
148
|
if (!props.name) return undefined;
|
|
153
149
|
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
154
150
|
// state as an array instead of a boolean only.
|
|
@@ -156,16 +152,16 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
156
152
|
// Formik will create an array on submission anyways.
|
|
157
153
|
|
|
158
154
|
return "".concat(props.name, ".0");
|
|
159
|
-
}()
|
|
155
|
+
})()
|
|
160
156
|
},
|
|
161
|
-
persist:
|
|
157
|
+
persist: () => {}
|
|
162
158
|
};
|
|
163
159
|
props.onBlur && props.onBlur(event);
|
|
164
160
|
} : undefined,
|
|
165
|
-
onChange:
|
|
161
|
+
onChange: (value, info) => {
|
|
166
162
|
var _props$onChange;
|
|
167
163
|
|
|
168
|
-
|
|
164
|
+
let newValue = value;
|
|
169
165
|
|
|
170
166
|
if (props.isMulti && !newValue) {
|
|
171
167
|
newValue = [];
|
|
@@ -177,7 +173,7 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
177
173
|
name: props.name,
|
|
178
174
|
value: newValue
|
|
179
175
|
},
|
|
180
|
-
persist:
|
|
176
|
+
persist: () => {}
|
|
181
177
|
}, info);
|
|
182
178
|
},
|
|
183
179
|
onFocus: props.onFocus,
|
|
@@ -222,9 +218,7 @@ AsyncSelectInput.defaultProps = defaultProps;
|
|
|
222
218
|
// values were removed only. So we have to treat any array we receive as
|
|
223
219
|
// a signal of the field having been touched.
|
|
224
220
|
|
|
225
|
-
AsyncSelectInput.isTouched =
|
|
226
|
-
return Boolean(touched);
|
|
227
|
-
};
|
|
221
|
+
AsyncSelectInput.isTouched = touched => Boolean(touched);
|
|
228
222
|
/**
|
|
229
223
|
* Expose react-select components for customization purposes.
|
|
230
224
|
*/
|
|
@@ -262,7 +256,7 @@ AsyncSelectInput.ValueContainer = reactSelect.components.ValueContainer;
|
|
|
262
256
|
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
263
257
|
|
|
264
258
|
// NOTE: This string will be replaced on build time with the package version.
|
|
265
|
-
var version = "
|
|
259
|
+
var version = "16.0.0";
|
|
266
260
|
|
|
267
261
|
exports["default"] = AsyncSelectInput$1;
|
|
268
262
|
exports.version = version;
|
|
@@ -42,20 +42,18 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
|
|
|
42
42
|
|
|
43
43
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
44
44
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
});
|
|
49
|
-
};
|
|
45
|
+
const LoadingIndicator = () => jsxRuntime.jsx(LoadingSpinner__default["default"], {
|
|
46
|
+
scale: "s"
|
|
47
|
+
});
|
|
50
48
|
|
|
51
49
|
LoadingIndicator.displayName = 'LoadingIndicator';
|
|
52
|
-
|
|
50
|
+
const customizedComponents = {
|
|
53
51
|
DropdownIndicator: selectUtils.DropdownIndicator,
|
|
54
52
|
ClearIndicator: selectUtils.ClearIndicator,
|
|
55
|
-
LoadingIndicator
|
|
53
|
+
LoadingIndicator,
|
|
56
54
|
MultiValueRemove: selectUtils.TagRemove
|
|
57
55
|
};
|
|
58
|
-
|
|
56
|
+
const defaultProps = {
|
|
59
57
|
// Using "null" will ensure that the currently selected value disappears in
|
|
60
58
|
// case "undefined" gets passed as the next value
|
|
61
59
|
value: null,
|
|
@@ -63,11 +61,11 @@ var defaultProps = {
|
|
|
63
61
|
menuPortalZIndex: 1
|
|
64
62
|
};
|
|
65
63
|
|
|
66
|
-
|
|
67
|
-
|
|
64
|
+
const AsyncSelectInput = props => {
|
|
65
|
+
const intl = reactIntl.useIntl();
|
|
68
66
|
|
|
69
|
-
|
|
70
|
-
|
|
67
|
+
const _useTheme = designSystem.useTheme(),
|
|
68
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
71
69
|
|
|
72
70
|
if (!props.isReadOnly) ;
|
|
73
71
|
|
|
@@ -76,9 +74,9 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
76
74
|
menuPortalTarget: props.menuPortalTarget,
|
|
77
75
|
componentName: 'AsyncSelectInput'
|
|
78
76
|
});
|
|
79
|
-
|
|
77
|
+
const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
|
|
80
78
|
|
|
81
|
-
|
|
79
|
+
const loadingMessage = () => {
|
|
82
80
|
if (typeof props.loadingMessage === 'function') {
|
|
83
81
|
return props.loadingMessage();
|
|
84
82
|
}
|
|
@@ -97,11 +95,9 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
97
95
|
autoFocus: props.isAutofocussed,
|
|
98
96
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
99
97
|
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
100
|
-
Input:
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}));
|
|
104
|
-
}
|
|
98
|
+
Input: ownProps => jsxRuntime.jsx(reactSelect.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
99
|
+
readOnly: true
|
|
100
|
+
}))
|
|
105
101
|
} : {}), props.components),
|
|
106
102
|
menuIsOpen: props.isReadOnly ? false : undefined,
|
|
107
103
|
styles: selectUtils.createSelectStyles({
|
|
@@ -114,7 +110,7 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
114
110
|
iconLeft: props.iconLeft,
|
|
115
111
|
isMulti: props.isMulti,
|
|
116
112
|
hasValue: !isEmpty__default["default"](props.value),
|
|
117
|
-
isNewTheme
|
|
113
|
+
isNewTheme
|
|
118
114
|
}),
|
|
119
115
|
filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
|
|
120
116
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
@@ -135,17 +131,17 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
135
131
|
closeMenuOnSelect: props.closeMenuOnSelect,
|
|
136
132
|
name: props.name,
|
|
137
133
|
loadingMessage: loadingMessage,
|
|
138
|
-
noOptionsMessage: props.noOptionsMessage ||
|
|
139
|
-
|
|
134
|
+
noOptionsMessage: props.noOptionsMessage || (_ref => {
|
|
135
|
+
let inputValue = _ref.inputValue;
|
|
140
136
|
return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
|
|
141
|
-
inputValue
|
|
137
|
+
inputValue
|
|
142
138
|
});
|
|
143
|
-
},
|
|
144
|
-
onBlur: props.onBlur ?
|
|
145
|
-
|
|
139
|
+
}),
|
|
140
|
+
onBlur: props.onBlur ? () => {
|
|
141
|
+
const event = {
|
|
146
142
|
target: {
|
|
147
143
|
id: props.id,
|
|
148
|
-
name:
|
|
144
|
+
name: (() => {
|
|
149
145
|
if (!props.name) return undefined;
|
|
150
146
|
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
151
147
|
// state as an array instead of a boolean only.
|
|
@@ -153,16 +149,16 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
153
149
|
// Formik will create an array on submission anyways.
|
|
154
150
|
|
|
155
151
|
return "".concat(props.name, ".0");
|
|
156
|
-
}()
|
|
152
|
+
})()
|
|
157
153
|
},
|
|
158
|
-
persist:
|
|
154
|
+
persist: () => {}
|
|
159
155
|
};
|
|
160
156
|
props.onBlur && props.onBlur(event);
|
|
161
157
|
} : undefined,
|
|
162
|
-
onChange:
|
|
158
|
+
onChange: (value, info) => {
|
|
163
159
|
var _props$onChange;
|
|
164
160
|
|
|
165
|
-
|
|
161
|
+
let newValue = value;
|
|
166
162
|
|
|
167
163
|
if (props.isMulti && !newValue) {
|
|
168
164
|
newValue = [];
|
|
@@ -174,7 +170,7 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
174
170
|
name: props.name,
|
|
175
171
|
value: newValue
|
|
176
172
|
},
|
|
177
|
-
persist:
|
|
173
|
+
persist: () => {}
|
|
178
174
|
}, info);
|
|
179
175
|
},
|
|
180
176
|
onFocus: props.onFocus,
|
|
@@ -206,9 +202,7 @@ AsyncSelectInput.defaultProps = defaultProps;
|
|
|
206
202
|
// values were removed only. So we have to treat any array we receive as
|
|
207
203
|
// a signal of the field having been touched.
|
|
208
204
|
|
|
209
|
-
AsyncSelectInput.isTouched =
|
|
210
|
-
return Boolean(touched);
|
|
211
|
-
};
|
|
205
|
+
AsyncSelectInput.isTouched = touched => Boolean(touched);
|
|
212
206
|
/**
|
|
213
207
|
* Expose react-select components for customization purposes.
|
|
214
208
|
*/
|
|
@@ -246,7 +240,7 @@ AsyncSelectInput.ValueContainer = reactSelect.components.ValueContainer;
|
|
|
246
240
|
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
247
241
|
|
|
248
242
|
// NOTE: This string will be replaced on build time with the package version.
|
|
249
|
-
var version = "
|
|
243
|
+
var version = "16.0.0";
|
|
250
244
|
|
|
251
245
|
exports["default"] = AsyncSelectInput$1;
|
|
252
246
|
exports.version = version;
|
|
@@ -23,20 +23,18 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
|
|
|
23
23
|
|
|
24
24
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
});
|
|
30
|
-
};
|
|
26
|
+
const LoadingIndicator = () => jsx(LoadingSpinner, {
|
|
27
|
+
scale: "s"
|
|
28
|
+
});
|
|
31
29
|
|
|
32
30
|
LoadingIndicator.displayName = 'LoadingIndicator';
|
|
33
|
-
|
|
34
|
-
DropdownIndicator
|
|
35
|
-
ClearIndicator
|
|
36
|
-
LoadingIndicator
|
|
31
|
+
const customizedComponents = {
|
|
32
|
+
DropdownIndicator,
|
|
33
|
+
ClearIndicator,
|
|
34
|
+
LoadingIndicator,
|
|
37
35
|
MultiValueRemove: TagRemove
|
|
38
36
|
};
|
|
39
|
-
|
|
37
|
+
const defaultProps = {
|
|
40
38
|
// Using "null" will ensure that the currently selected value disappears in
|
|
41
39
|
// case "undefined" gets passed as the next value
|
|
42
40
|
value: null,
|
|
@@ -44,11 +42,11 @@ var defaultProps = {
|
|
|
44
42
|
menuPortalZIndex: 1
|
|
45
43
|
};
|
|
46
44
|
|
|
47
|
-
|
|
48
|
-
|
|
45
|
+
const AsyncSelectInput = props => {
|
|
46
|
+
const intl = useIntl();
|
|
49
47
|
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
const _useTheme = useTheme(),
|
|
49
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
52
50
|
|
|
53
51
|
if (!props.isReadOnly) {
|
|
54
52
|
process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'AsyncSelectInput: `onChange` is required when input is not read only.') : void 0;
|
|
@@ -59,9 +57,9 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
59
57
|
menuPortalTarget: props.menuPortalTarget,
|
|
60
58
|
componentName: 'AsyncSelectInput'
|
|
61
59
|
});
|
|
62
|
-
|
|
60
|
+
const placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
|
|
63
61
|
|
|
64
|
-
|
|
62
|
+
const loadingMessage = () => {
|
|
65
63
|
if (typeof props.loadingMessage === 'function') {
|
|
66
64
|
return props.loadingMessage();
|
|
67
65
|
}
|
|
@@ -80,11 +78,9 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
80
78
|
autoFocus: props.isAutofocussed,
|
|
81
79
|
backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
|
|
82
80
|
components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? customComponentsWithIcons : {}), props.isReadOnly ? {
|
|
83
|
-
Input:
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}));
|
|
87
|
-
}
|
|
81
|
+
Input: ownProps => jsx(components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
|
|
82
|
+
readOnly: true
|
|
83
|
+
}))
|
|
88
84
|
} : {}), props.components),
|
|
89
85
|
menuIsOpen: props.isReadOnly ? false : undefined,
|
|
90
86
|
styles: createSelectStyles({
|
|
@@ -97,7 +93,7 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
97
93
|
iconLeft: props.iconLeft,
|
|
98
94
|
isMulti: props.isMulti,
|
|
99
95
|
hasValue: !isEmpty(props.value),
|
|
100
|
-
isNewTheme
|
|
96
|
+
isNewTheme
|
|
101
97
|
}),
|
|
102
98
|
filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
|
|
103
99
|
// but we use "id" (for the input) and "containerId" (for the container)
|
|
@@ -118,17 +114,17 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
118
114
|
closeMenuOnSelect: props.closeMenuOnSelect,
|
|
119
115
|
name: props.name,
|
|
120
116
|
loadingMessage: loadingMessage,
|
|
121
|
-
noOptionsMessage: props.noOptionsMessage ||
|
|
122
|
-
|
|
117
|
+
noOptionsMessage: props.noOptionsMessage || (_ref => {
|
|
118
|
+
let inputValue = _ref.inputValue;
|
|
123
119
|
return inputValue === '' ? intl.formatMessage(messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(messages.noOptionsMessageWithInputValue, {
|
|
124
|
-
inputValue
|
|
120
|
+
inputValue
|
|
125
121
|
});
|
|
126
|
-
},
|
|
127
|
-
onBlur: props.onBlur ?
|
|
128
|
-
|
|
122
|
+
}),
|
|
123
|
+
onBlur: props.onBlur ? () => {
|
|
124
|
+
const event = {
|
|
129
125
|
target: {
|
|
130
126
|
id: props.id,
|
|
131
|
-
name:
|
|
127
|
+
name: (() => {
|
|
132
128
|
if (!props.name) return undefined;
|
|
133
129
|
if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
|
|
134
130
|
// state as an array instead of a boolean only.
|
|
@@ -136,16 +132,16 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
136
132
|
// Formik will create an array on submission anyways.
|
|
137
133
|
|
|
138
134
|
return "".concat(props.name, ".0");
|
|
139
|
-
}()
|
|
135
|
+
})()
|
|
140
136
|
},
|
|
141
|
-
persist:
|
|
137
|
+
persist: () => {}
|
|
142
138
|
};
|
|
143
139
|
props.onBlur && props.onBlur(event);
|
|
144
140
|
} : undefined,
|
|
145
|
-
onChange:
|
|
141
|
+
onChange: (value, info) => {
|
|
146
142
|
var _props$onChange;
|
|
147
143
|
|
|
148
|
-
|
|
144
|
+
let newValue = value;
|
|
149
145
|
|
|
150
146
|
if (props.isMulti && !newValue) {
|
|
151
147
|
newValue = [];
|
|
@@ -157,7 +153,7 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
|
|
|
157
153
|
name: props.name,
|
|
158
154
|
value: newValue
|
|
159
155
|
},
|
|
160
|
-
persist:
|
|
156
|
+
persist: () => {}
|
|
161
157
|
}, info);
|
|
162
158
|
},
|
|
163
159
|
onFocus: props.onFocus,
|
|
@@ -202,9 +198,7 @@ AsyncSelectInput.defaultProps = defaultProps;
|
|
|
202
198
|
// values were removed only. So we have to treat any array we receive as
|
|
203
199
|
// a signal of the field having been touched.
|
|
204
200
|
|
|
205
|
-
AsyncSelectInput.isTouched =
|
|
206
|
-
return Boolean(touched);
|
|
207
|
-
};
|
|
201
|
+
AsyncSelectInput.isTouched = touched => Boolean(touched);
|
|
208
202
|
/**
|
|
209
203
|
* Expose react-select components for customization purposes.
|
|
210
204
|
*/
|
|
@@ -242,6 +236,6 @@ AsyncSelectInput.ValueContainer = components.ValueContainer;
|
|
|
242
236
|
var AsyncSelectInput$1 = AsyncSelectInput;
|
|
243
237
|
|
|
244
238
|
// NOTE: This string will be replaced on build time with the package version.
|
|
245
|
-
var version = "
|
|
239
|
+
var version = "16.0.0";
|
|
246
240
|
|
|
247
241
|
export { AsyncSelectInput$1 as default, version };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/async-select-input",
|
|
3
3
|
"description": "An input component getting a selection from an asynchronously loaded list from the user.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "16.0.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,28 +21,28 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/constraints": "
|
|
25
|
-
"@commercetools-uikit/design-system": "
|
|
26
|
-
"@commercetools-uikit/icons": "
|
|
27
|
-
"@commercetools-uikit/loading-spinner": "
|
|
28
|
-
"@commercetools-uikit/select-utils": "
|
|
29
|
-
"@commercetools-uikit/spacings": "
|
|
30
|
-
"@commercetools-uikit/text": "
|
|
31
|
-
"@commercetools-uikit/utils": "
|
|
24
|
+
"@commercetools-uikit/constraints": "16.0.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "16.0.0",
|
|
26
|
+
"@commercetools-uikit/icons": "16.0.0",
|
|
27
|
+
"@commercetools-uikit/loading-spinner": "16.0.0",
|
|
28
|
+
"@commercetools-uikit/select-utils": "16.0.0",
|
|
29
|
+
"@commercetools-uikit/spacings": "16.0.0",
|
|
30
|
+
"@commercetools-uikit/text": "16.0.0",
|
|
31
|
+
"@commercetools-uikit/utils": "16.0.0",
|
|
32
32
|
"@emotion/react": "^11.10.5",
|
|
33
33
|
"@emotion/styled": "^11.10.5",
|
|
34
34
|
"lodash": "4.17.21",
|
|
35
35
|
"prop-types": "15.8.1",
|
|
36
|
-
"react-select": "5.7.
|
|
36
|
+
"react-select": "5.7.2"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"react": "17.0.2",
|
|
40
40
|
"react-dom": "17.0.2",
|
|
41
|
-
"react-intl": "^
|
|
41
|
+
"react-intl": "^6.3.2"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": "17.x",
|
|
45
45
|
"react-dom": "17.x",
|
|
46
|
-
"react-intl": "
|
|
46
|
+
"react-intl": "6.x"
|
|
47
47
|
}
|
|
48
48
|
}
|