@commercetools-uikit/async-select-input 14.0.1 → 15.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.
Files changed (6) hide show
  1. package/README.md +3 -3
  2. package/dist/commercetools-uikit-async-select-input.cjs.dev.js +14 -4
  3. package/dist/commercetools-uikit-async-select-input.cjs.prod.js +11 -3
  4. package/dist/commercetools-uikit-async-select-input.esm.js +15 -5
  5. package/dist/declarations/src/async-select-input.d.ts +5 -4
  6. package/package.json +10 -10
package/README.md CHANGED
@@ -88,7 +88,7 @@ export default Example;
88
88
  | `name` | `AsyncProps['name']` | | | Name of the HTML Input (optional - without this, no input will be rendered)&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
89
89
  | `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.&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
90
90
  | `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Handle blur events on the control |
91
- | `onChange` | `Function`<br/>[See signature.](#signature-onChange) | ✅ | | Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. |
91
+ | `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. |
92
92
  | `onFocus` | `AsyncProps['onFocus']` | | | Handle focus events on the control&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
93
93
  | `onInputChange` | `AsyncProps['onInputChange']` | | | Handle change events on the input&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
94
94
  | `placeholder` | `AsyncProps['placeholder']` | | | Placeholder text for the select value&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
@@ -107,13 +107,13 @@ export default Example;
107
107
  ### Signature `onBlur`
108
108
 
109
109
  ```ts
110
- (event: TEvent) => void
110
+ (event: TCustomEvent) => void
111
111
  ```
112
112
 
113
113
  ### Signature `onChange`
114
114
 
115
115
  ```ts
116
- (event: TEvent, info: ActionMeta<unknown>) => void
116
+ (event: TCustomEvent, info: ActionMeta<unknown>) => void
117
117
  ```
118
118
 
119
119
  This input is built on top of [`react-select`](https://github.com/JedWatson/react-select) v2.
package/dist/commercetools-uikit-async-select-input.cjs.dev.js CHANGED
@@ -67,6 +67,11 @@ var defaultProps = {
67
67
  var AsyncSelectInput = function AsyncSelectInput(props) {
68
68
  var theme = react.useTheme();
69
69
  var intl = reactIntl.useIntl();
70
+
71
+ if (!props.isReadOnly) {
72
+ process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'AsyncSelectInput: `onChange` is required when input is not read only.') : void 0;
73
+ }
74
+
70
75
  var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
71
76
 
72
77
  var loadingMessage = function loadingMessage() {
@@ -134,6 +139,7 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
134
139
  onBlur: props.onBlur ? function () {
135
140
  var event = {
136
141
  target: {
142
+ id: props.id,
137
143
  name: function () {
138
144
  if (!props.name) return undefined;
139
145
  if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
@@ -149,14 +155,17 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
149
155
  props.onBlur && props.onBlur(event);
150
156
  } : undefined,
151
157
  onChange: function onChange(value, info) {
158
+ var _props$onChange;
159
+
152
160
  var newValue = value;
153
161
 
154
162
  if (props.isMulti && !newValue) {
155
163
  newValue = [];
156
164
  }
157
165
 
158
- props.onChange({
166
+ (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
159
167
  target: {
168
+ id: props.id,
160
169
  name: props.name,
161
170
  value: newValue
162
171
  },
@@ -172,7 +181,8 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
172
181
  ,
173
182
  defaultOptions: props.defaultOptions,
174
183
  loadOptions: props.loadOptions,
175
- cacheOptions: props.cacheOptions // @ts-ignore
184
+ cacheOptions: props.cacheOptions // Extra props
185
+ // @ts-ignore: passed to the react-select components via `selectProps`.
176
186
  ,
177
187
  iconLeft: props.iconLeft
178
188
  })
@@ -188,7 +198,7 @@ AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
188
198
  isAutofocussed: _pt__default["default"].bool,
189
199
  menuPortalZIndex: _pt__default["default"].number.isRequired,
190
200
  onBlur: _pt__default["default"].func,
191
- onChange: _pt__default["default"].func.isRequired,
201
+ onChange: _pt__default["default"].func,
192
202
  loadingMessage: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].func]),
193
203
  defaultOptions: _pt__default["default"].oneOfType([_pt__default["default"].any, _pt__default["default"].bool]),
194
204
  showOptionGroupDivider: _pt__default["default"].bool,
@@ -244,7 +254,7 @@ AsyncSelectInput.ValueContainer = reactSelect.components.ValueContainer;
244
254
  var AsyncSelectInput$1 = AsyncSelectInput;
245
255
 
246
256
  // NOTE: This string will be replaced on build time with the package version.
247
- var version = "14.0.1";
257
+ var version = "15.0.0";
248
258
 
249
259
  exports["default"] = AsyncSelectInput$1;
250
260
  exports.version = version;
package/dist/commercetools-uikit-async-select-input.cjs.prod.js CHANGED
@@ -66,6 +66,9 @@ var defaultProps = {
66
66
  var AsyncSelectInput = function AsyncSelectInput(props) {
67
67
  var theme = react.useTheme();
68
68
  var intl = reactIntl.useIntl();
69
+
70
+ if (!props.isReadOnly) ;
71
+
69
72
  var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
70
73
 
71
74
  var loadingMessage = function loadingMessage() {
@@ -133,6 +136,7 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
133
136
  onBlur: props.onBlur ? function () {
134
137
  var event = {
135
138
  target: {
139
+ id: props.id,
136
140
  name: function () {
137
141
  if (!props.name) return undefined;
138
142
  if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
@@ -148,14 +152,17 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
148
152
  props.onBlur && props.onBlur(event);
149
153
  } : undefined,
150
154
  onChange: function onChange(value, info) {
155
+ var _props$onChange;
156
+
151
157
  var newValue = value;
152
158
 
153
159
  if (props.isMulti && !newValue) {
154
160
  newValue = [];
155
161
  }
156
162
 
157
- props.onChange({
163
+ (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
158
164
  target: {
165
+ id: props.id,
159
166
  name: props.name,
160
167
  value: newValue
161
168
  },
@@ -171,7 +178,8 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
171
178
  ,
172
179
  defaultOptions: props.defaultOptions,
173
180
  loadOptions: props.loadOptions,
174
- cacheOptions: props.cacheOptions // @ts-ignore
181
+ cacheOptions: props.cacheOptions // Extra props
182
+ // @ts-ignore: passed to the react-select components via `selectProps`.
175
183
  ,
176
184
  iconLeft: props.iconLeft
177
185
  })
@@ -230,7 +238,7 @@ AsyncSelectInput.ValueContainer = reactSelect.components.ValueContainer;
230
238
  var AsyncSelectInput$1 = AsyncSelectInput;
231
239
 
232
240
  // NOTE: This string will be replaced on build time with the package version.
233
- var version = "14.0.1";
241
+ var version = "15.0.0";
234
242
 
235
243
  exports["default"] = AsyncSelectInput$1;
236
244
  exports.version = version;
package/dist/commercetools-uikit-async-select-input.esm.js CHANGED
@@ -13,7 +13,7 @@ import isEmpty from 'lodash/isEmpty';
13
13
  import { useTheme } from '@emotion/react';
14
14
  import { components } from 'react-select';
15
15
  import AsyncSelect from 'react-select/async';
16
- import { filterDataAttributes } from '@commercetools-uikit/utils';
16
+ import { warning, filterDataAttributes } from '@commercetools-uikit/utils';
17
17
  import Constraints from '@commercetools-uikit/constraints';
18
18
  import LoadingSpinner from '@commercetools-uikit/loading-spinner';
19
19
  import { messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
@@ -47,6 +47,11 @@ var defaultProps = {
47
47
  var AsyncSelectInput = function AsyncSelectInput(props) {
48
48
  var theme = useTheme();
49
49
  var intl = useIntl();
50
+
51
+ if (!props.isReadOnly) {
52
+ process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'AsyncSelectInput: `onChange` is required when input is not read only.') : void 0;
53
+ }
54
+
50
55
  var placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
51
56
 
52
57
  var loadingMessage = function loadingMessage() {
@@ -114,6 +119,7 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
114
119
  onBlur: props.onBlur ? function () {
115
120
  var event = {
116
121
  target: {
122
+ id: props.id,
117
123
  name: function () {
118
124
  if (!props.name) return undefined;
119
125
  if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
@@ -129,14 +135,17 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
129
135
  props.onBlur && props.onBlur(event);
130
136
  } : undefined,
131
137
  onChange: function onChange(value, info) {
138
+ var _props$onChange;
139
+
132
140
  var newValue = value;
133
141
 
134
142
  if (props.isMulti && !newValue) {
135
143
  newValue = [];
136
144
  }
137
145
 
138
- props.onChange({
146
+ (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
139
147
  target: {
148
+ id: props.id,
140
149
  name: props.name,
141
150
  value: newValue
142
151
  },
@@ -152,7 +161,8 @@ var AsyncSelectInput = function AsyncSelectInput(props) {
152
161
  ,
153
162
  defaultOptions: props.defaultOptions,
154
163
  loadOptions: props.loadOptions,
155
- cacheOptions: props.cacheOptions // @ts-ignore
164
+ cacheOptions: props.cacheOptions // Extra props
165
+ // @ts-ignore: passed to the react-select components via `selectProps`.
156
166
  ,
157
167
  iconLeft: props.iconLeft
158
168
  })
@@ -168,7 +178,7 @@ AsyncSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
168
178
  isAutofocussed: _pt.bool,
169
179
  menuPortalZIndex: _pt.number.isRequired,
170
180
  onBlur: _pt.func,
171
- onChange: _pt.func.isRequired,
181
+ onChange: _pt.func,
172
182
  loadingMessage: _pt.oneOfType([_pt.string, _pt.func]),
173
183
  defaultOptions: _pt.oneOfType([_pt.any, _pt.bool]),
174
184
  showOptionGroupDivider: _pt.bool,
@@ -224,6 +234,6 @@ AsyncSelectInput.ValueContainer = components.ValueContainer;
224
234
  var AsyncSelectInput$1 = AsyncSelectInput;
225
235
 
226
236
  // NOTE: This string will be replaced on build time with the package version.
227
- var version = "14.0.1";
237
+ var version = "15.0.0";
228
238
 
229
239
  export { AsyncSelectInput$1 as default, version };
package/dist/declarations/src/async-select-input.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import type { ReactNode } from 'react';
2
2
  import { type ActionMeta, type GroupBase, type OptionsOrGroups } from 'react-select';
3
3
  import { type AsyncProps } from 'react-select/async';
4
- declare type TEvent = {
4
+ declare type TCustomEvent = {
5
5
  target: {
6
- name?: string;
6
+ id?: ReactSelectAsyncProps['inputId'];
7
+ name?: ReactSelectAsyncProps['name'];
7
8
  value?: unknown;
8
9
  };
9
10
  persist: () => void;
@@ -37,8 +38,8 @@ declare type TAsyncSelectInputProps = {
37
38
  closeMenuOnSelect?: ReactSelectAsyncProps['closeMenuOnSelect'];
38
39
  name?: ReactSelectAsyncProps['name'];
39
40
  noOptionsMessage?: ReactSelectAsyncProps['noOptionsMessage'];
40
- onBlur?: (event: TEvent) => void;
41
- onChange: (event: TEvent, info: ActionMeta<unknown>) => void;
41
+ onBlur?: (event: TCustomEvent) => void;
42
+ onChange?: (event: TCustomEvent, info: ActionMeta<unknown>) => void;
42
43
  onFocus?: ReactSelectAsyncProps['onFocus'];
43
44
  onInputChange?: ReactSelectAsyncProps['onInputChange'];
44
45
  placeholder?: ReactSelectAsyncProps['placeholder'];
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": "14.0.1",
4
+ "version": "15.0.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,19 +21,19 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.17.2",
23
23
  "@babel/runtime-corejs3": "^7.17.2",
24
- "@commercetools-uikit/constraints": "14.0.1",
25
- "@commercetools-uikit/design-system": "14.0.0",
26
- "@commercetools-uikit/icons": "14.0.1",
27
- "@commercetools-uikit/loading-spinner": "14.0.1",
28
- "@commercetools-uikit/select-utils": "14.0.1",
29
- "@commercetools-uikit/spacings": "14.0.1",
30
- "@commercetools-uikit/text": "14.0.1",
31
- "@commercetools-uikit/utils": "14.0.1",
24
+ "@commercetools-uikit/constraints": "15.0.0",
25
+ "@commercetools-uikit/design-system": "15.0.0",
26
+ "@commercetools-uikit/icons": "15.0.0",
27
+ "@commercetools-uikit/loading-spinner": "15.0.0",
28
+ "@commercetools-uikit/select-utils": "15.0.0",
29
+ "@commercetools-uikit/spacings": "15.0.0",
30
+ "@commercetools-uikit/text": "15.0.0",
31
+ "@commercetools-uikit/utils": "15.0.0",
32
32
  "@emotion/react": "^11.4.0",
33
33
  "@emotion/styled": "^11.3.0",
34
34
  "lodash": "4.17.21",
35
35
  "prop-types": "15.8.1",
36
- "react-select": "5.2.2"
36
+ "react-select": "5.3.0"
37
37
  },
38
38
  "devDependencies": {
39
39
  "react": "17.0.2",