@commercetools-uikit/creatable-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-creatable-select-input.cjs.dev.js +12 -3
  3. package/dist/commercetools-uikit-creatable-select-input.cjs.prod.js +9 -2
  4. package/dist/commercetools-uikit-creatable-select-input.esm.js +13 -4
  5. package/dist/declarations/src/creatable-select-input.d.ts +4 -3
  6. package/package.json +9 -9
package/README.md CHANGED
@@ -83,7 +83,7 @@ export default Example;
83
83
  | `name` | `CreatableProps['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#creatable-props) |
84
84
  | `noOptionsMessage` | `CreatableProps['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#creatable-props) |
85
85
  | `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Handle blur events on the control |
86
- | `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`. |
86
+ | `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`. |
87
87
  | `onFocus` | `CreatableProps['onFocus']` | | | Handle focus events on the control&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props) |
88
88
  | `onInputChange` | `CreatableProps['onInputChange']` | | | Handle change events on the input&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props) |
89
89
  | `options` | `union`<br/>Possible values:<br/>`TValue[] , { options: TValue[] }[]` | | | Array of options that populate the select menu |
@@ -104,13 +104,13 @@ export default Example;
104
104
  ### Signature `onBlur`
105
105
 
106
106
  ```ts
107
- (event: TEvent) => void
107
+ (event: TCustomEvent) => void
108
108
  ```
109
109
 
110
110
  ### Signature `onChange`
111
111
 
112
112
  ```ts
113
- (event: TEvent, info: ActionMeta<unknown>) => void
113
+ (event: TCustomEvent, info: ActionMeta<unknown>) => void
114
114
  ```
115
115
 
116
116
  This input is built on top of [`react-select`](https://github.com/JedWatson/react-select) v2.
package/dist/commercetools-uikit-creatable-select-input.cjs.dev.js CHANGED
@@ -62,6 +62,11 @@ var defaultProps = {
62
62
  var CreatableSelectInput = function CreatableSelectInput(props) {
63
63
  var intl = reactIntl.useIntl();
64
64
  var theme = react.useTheme();
65
+
66
+ if (!props.isReadOnly) {
67
+ process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'CreatableSelectInput: `onChange` is required when input is not read only.') : void 0;
68
+ }
69
+
65
70
  var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
66
71
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
67
72
  max: props.horizontalConstraint,
@@ -119,6 +124,7 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
119
124
  onBlur: typeof props.onBlur === 'function' ? function () {
120
125
  var event = {
121
126
  target: {
127
+ id: props.id,
122
128
  name: function () {
123
129
  if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
124
130
  // state as an array instead of a boolean only.
@@ -133,6 +139,8 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
133
139
  props.onBlur && props.onBlur(event);
134
140
  } : undefined,
135
141
  onChange: function onChange(value, info) {
142
+ var _props$onChange;
143
+
136
144
  // selectedOptions is either an array, or a single option, or null
137
145
  // depending on whether we're in multi-mode or not (isMulti)
138
146
  var newValue = value;
@@ -141,8 +149,9 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
141
149
  newValue = [];
142
150
  }
143
151
 
144
- props.onChange({
152
+ (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
145
153
  target: {
154
+ id: props.id,
146
155
  name: props.name,
147
156
  value: newValue
148
157
  },
@@ -183,7 +192,7 @@ CreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
183
192
  isAutofocussed: _pt__default["default"].bool,
184
193
  menuPortalZIndex: _pt__default["default"].number.isRequired,
185
194
  onBlur: _pt__default["default"].func,
186
- onChange: _pt__default["default"].func.isRequired,
195
+ onChange: _pt__default["default"].func,
187
196
  options: _pt__default["default"].oneOfType([_pt__default["default"].arrayOf(_pt__default["default"].shape({
188
197
  value: _pt__default["default"].string.isRequired
189
198
  })), _pt__default["default"].arrayOf(_pt__default["default"].shape({
@@ -240,7 +249,7 @@ CreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer;
240
249
  var CreatableSelectInput$1 = CreatableSelectInput;
241
250
 
242
251
  // NOTE: This string will be replaced on build time with the package version.
243
- var version = "14.0.1";
252
+ var version = "15.0.0";
244
253
 
245
254
  exports["default"] = CreatableSelectInput$1;
246
255
  exports.version = version;
package/dist/commercetools-uikit-creatable-select-input.cjs.prod.js CHANGED
@@ -61,6 +61,9 @@ var defaultProps = {
61
61
  var CreatableSelectInput = function CreatableSelectInput(props) {
62
62
  var intl = reactIntl.useIntl();
63
63
  var theme = react.useTheme();
64
+
65
+ if (!props.isReadOnly) ;
66
+
64
67
  var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
65
68
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
66
69
  max: props.horizontalConstraint,
@@ -118,6 +121,7 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
118
121
  onBlur: typeof props.onBlur === 'function' ? function () {
119
122
  var event = {
120
123
  target: {
124
+ id: props.id,
121
125
  name: function () {
122
126
  if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
123
127
  // state as an array instead of a boolean only.
@@ -132,6 +136,8 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
132
136
  props.onBlur && props.onBlur(event);
133
137
  } : undefined,
134
138
  onChange: function onChange(value, info) {
139
+ var _props$onChange;
140
+
135
141
  // selectedOptions is either an array, or a single option, or null
136
142
  // depending on whether we're in multi-mode or not (isMulti)
137
143
  var newValue = value;
@@ -140,8 +146,9 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
140
146
  newValue = [];
141
147
  }
142
148
 
143
- props.onChange({
149
+ (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
144
150
  target: {
151
+ id: props.id,
145
152
  name: props.name,
146
153
  value: newValue
147
154
  },
@@ -221,7 +228,7 @@ CreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer;
221
228
  var CreatableSelectInput$1 = CreatableSelectInput;
222
229
 
223
230
  // NOTE: This string will be replaced on build time with the package version.
224
- var version = "14.0.1";
231
+ var version = "15.0.0";
225
232
 
226
233
  exports["default"] = CreatableSelectInput$1;
227
234
  exports.version = version;
package/dist/commercetools-uikit-creatable-select-input.esm.js CHANGED
@@ -14,7 +14,7 @@ import { useTheme } from '@emotion/react';
14
14
  import { components } from 'react-select';
15
15
  import CreatableSelect from 'react-select/creatable';
16
16
  import Constraints from '@commercetools-uikit/constraints';
17
- import { filterDataAttributes } from '@commercetools-uikit/utils';
17
+ import { warning, filterDataAttributes } from '@commercetools-uikit/utils';
18
18
  import { messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
19
19
  import { jsx } from '@emotion/react/jsx-runtime';
20
20
 
@@ -43,6 +43,11 @@ var defaultProps = {
43
43
  var CreatableSelectInput = function CreatableSelectInput(props) {
44
44
  var intl = useIntl();
45
45
  var theme = useTheme();
46
+
47
+ if (!props.isReadOnly) {
48
+ process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'CreatableSelectInput: `onChange` is required when input is not read only.') : void 0;
49
+ }
50
+
46
51
  var placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
47
52
  return jsx(Constraints.Horizontal, {
48
53
  max: props.horizontalConstraint,
@@ -100,6 +105,7 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
100
105
  onBlur: typeof props.onBlur === 'function' ? function () {
101
106
  var event = {
102
107
  target: {
108
+ id: props.id,
103
109
  name: function () {
104
110
  if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
105
111
  // state as an array instead of a boolean only.
@@ -114,6 +120,8 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
114
120
  props.onBlur && props.onBlur(event);
115
121
  } : undefined,
116
122
  onChange: function onChange(value, info) {
123
+ var _props$onChange;
124
+
117
125
  // selectedOptions is either an array, or a single option, or null
118
126
  // depending on whether we're in multi-mode or not (isMulti)
119
127
  var newValue = value;
@@ -122,8 +130,9 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
122
130
  newValue = [];
123
131
  }
124
132
 
125
- props.onChange({
133
+ (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
126
134
  target: {
135
+ id: props.id,
127
136
  name: props.name,
128
137
  value: newValue
129
138
  },
@@ -164,7 +173,7 @@ CreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
164
173
  isAutofocussed: _pt.bool,
165
174
  menuPortalZIndex: _pt.number.isRequired,
166
175
  onBlur: _pt.func,
167
- onChange: _pt.func.isRequired,
176
+ onChange: _pt.func,
168
177
  options: _pt.oneOfType([_pt.arrayOf(_pt.shape({
169
178
  value: _pt.string.isRequired
170
179
  })), _pt.arrayOf(_pt.shape({
@@ -221,6 +230,6 @@ CreatableSelectInput.ValueContainer = components.ValueContainer;
221
230
  var CreatableSelectInput$1 = CreatableSelectInput;
222
231
 
223
232
  // NOTE: This string will be replaced on build time with the package version.
224
- var version = "14.0.1";
233
+ var version = "15.0.0";
225
234
 
226
235
  export { CreatableSelectInput$1 as default, version };
package/dist/declarations/src/creatable-select-input.d.ts CHANGED
@@ -7,8 +7,9 @@ declare type TValue = {
7
7
  declare type TOptions = TValue[] | {
8
8
  options: TValue[];
9
9
  }[];
10
- declare type TEvent = {
10
+ declare type TCustomEvent = {
11
11
  target: {
12
+ id?: string;
12
13
  name?: string;
13
14
  value?: unknown;
14
15
  };
@@ -44,8 +45,8 @@ declare type TCreatableSelectInputProps = {
44
45
  closeMenuOnSelect?: ReactSelectCreatableProps['closeMenuOnSelect'];
45
46
  name?: ReactSelectCreatableProps['name'];
46
47
  noOptionsMessage?: ReactSelectCreatableProps['noOptionsMessage'];
47
- onBlur?: (event: TEvent) => void;
48
- onChange: (event: TEvent, info: ActionMeta<unknown>) => void;
48
+ onBlur?: (event: TCustomEvent) => void;
49
+ onChange?: (event: TCustomEvent, info: ActionMeta<unknown>) => void;
49
50
  onFocus?: ReactSelectCreatableProps['onFocus'];
50
51
  onInputChange?: ReactSelectCreatableProps['onInputChange'];
51
52
  options?: TOptions;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/creatable-select-input",
3
3
  "description": "An input component getting a selection from the user, and where options can also be created by 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,18 +21,18 @@
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/select-utils": "14.0.1",
28
- "@commercetools-uikit/spacings": "14.0.1",
29
- "@commercetools-uikit/text": "14.0.1",
30
- "@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/select-utils": "15.0.0",
28
+ "@commercetools-uikit/spacings": "15.0.0",
29
+ "@commercetools-uikit/text": "15.0.0",
30
+ "@commercetools-uikit/utils": "15.0.0",
31
31
  "@emotion/react": "^11.4.0",
32
32
  "@emotion/styled": "^11.3.0",
33
33
  "lodash": "4.17.21",
34
34
  "prop-types": "15.8.1",
35
- "react-select": "5.2.2"
35
+ "react-select": "5.3.0"
36
36
  },
37
37
  "devDependencies": {
38
38
  "react": "17.0.2",