@commercetools-uikit/async-creatable-select-input 14.0.1 → 15.0.0

package/README.md

@@ -89,7 +89,7 @@ export default Example;
 | `name`                    | `AsyncCreatableProps['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)                                                                                                                                                                                                                 |
 | `noOptionsMessage`        | `AsyncCreatableProps['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) |
 | `onBlur`                  | `Function`<br/>[See signature.](#signature-onBlur)                                                    |          |         | Handle blur events on the control                                                                                                                                                                                                                                                                                                                                           |
-| `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`.                                                                                                                     |
+| `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`.                                                                                                                     |
 | `onFocus`                 | `AsyncCreatableProps['onFocus']`                                                                      |          |         | Handle focus events on the control&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                          |
 | `onInputChange`           | `AsyncCreatableProps['onInputChange']`                                                                |          |         | Handle change events on the input&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                           |
 | `placeholder`             | `AsyncCreatableProps['placeholder']`                                                                  |          |         | Placeholder text for the select value&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                       |
@@ -112,13 +112,13 @@ export default Example;
 ### Signature `onBlur`
 
 ```ts
-(event: TEvent) => void
+(event: TCustomEvent) => void
 ```
 
 ### Signature `onChange`
 
 ```ts
-(event: TEvent, info: ActionMeta<unknown>) => void
+(event: TCustomEvent, info: ActionMeta<unknown>) => void
 ```
 
 This input is built on top of [`react-select`](https://github.com/JedWatson/react-select) v2.

package/dist/commercetools-uikit-async-creatable-select-input.cjs.dev.js

@@ -71,6 +71,10 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
   var theme = react.useTheme();
   var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
 
+  if (!props.isReadOnly) {
+    process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'AsyncCreatableSelectInput: `onChange` is required when input is not read only.') : void 0;
+  }
+
   if (props.isMulti) {
     process.env.NODE_ENV !== "production" ? utils.warning(_Array$isArray__default["default"](props.value), 'AsyncCreatableSelectInput: `value` is expected to be an array when isMulti is true') : void 0;
   }
@@ -131,6 +135,7 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         onBlur: props.onBlur ? function () {
           var event = {
             target: {
+              id: props.id,
               name: function () {
                 if (!props.name) return undefined;
                 if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
@@ -146,6 +151,8 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
           props.onBlur && props.onBlur(event);
         } : undefined,
         onChange: function onChange(value, info) {
+          var _props$onChange;
+
           // wrapping breaking changes made in react-select v3
           var newValue = value;
 
@@ -153,8 +160,9 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
             newValue = [];
           }
 
-          props.onChange({
+          (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
             target: {
+              id: props.id,
               name: props.name,
               value: newValue
             },
@@ -198,7 +206,7 @@ AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
   isAutofocussed: _pt__default["default"].bool,
   menuPortalZIndex: _pt__default["default"].number.isRequired,
   onBlur: _pt__default["default"].func,
-  onChange: _pt__default["default"].func.isRequired,
+  onChange: _pt__default["default"].func,
   showOptionGroupDivider: _pt__default["default"].bool
 } : {};
 AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
@@ -251,7 +259,7 @@ AsyncCreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer
 var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "14.0.1";
+var version = "15.0.0";
 
 exports["default"] = AsyncCreatableSelectInput$1;
 exports.version = version;

package/dist/commercetools-uikit-async-creatable-select-input.cjs.prod.js

@@ -69,6 +69,8 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
   var theme = react.useTheme();
   var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
 
+  if (!props.isReadOnly) ;
+
   if (props.isMulti) ;
 
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
@@ -127,6 +129,7 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         onBlur: props.onBlur ? function () {
           var event = {
             target: {
+              id: props.id,
               name: function () {
                 if (!props.name) return undefined;
                 if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
@@ -142,6 +145,8 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
           props.onBlur && props.onBlur(event);
         } : undefined,
         onChange: function onChange(value, info) {
+          var _props$onChange;
+
           // wrapping breaking changes made in react-select v3
           var newValue = value;
 
@@ -149,8 +154,9 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
             newValue = [];
           }
 
-          props.onChange({
+          (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
             target: {
+              id: props.id,
               name: props.name,
               value: newValue
             },
@@ -236,7 +242,7 @@ AsyncCreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer
 var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "14.0.1";
+var version = "15.0.0";
 
 exports["default"] = AsyncCreatableSelectInput$1;
 exports.version = version;

package/dist/commercetools-uikit-async-creatable-select-input.esm.js

@@ -50,6 +50,10 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
   var theme = useTheme();
   var placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
 
+  if (!props.isReadOnly) {
+    process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'AsyncCreatableSelectInput: `onChange` is required when input is not read only.') : void 0;
+  }
+
   if (props.isMulti) {
     process.env.NODE_ENV !== "production" ? warning(_Array$isArray(props.value), 'AsyncCreatableSelectInput: `value` is expected to be an array when isMulti is true') : void 0;
   }
@@ -110,6 +114,7 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         onBlur: props.onBlur ? function () {
           var event = {
             target: {
+              id: props.id,
               name: function () {
                 if (!props.name) return undefined;
                 if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
@@ -125,6 +130,8 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
           props.onBlur && props.onBlur(event);
         } : undefined,
         onChange: function onChange(value, info) {
+          var _props$onChange;
+
           // wrapping breaking changes made in react-select v3
           var newValue = value;
 
@@ -132,8 +139,9 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
             newValue = [];
           }
 
-          props.onChange({
+          (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
             target: {
+              id: props.id,
               name: props.name,
               value: newValue
             },
@@ -177,7 +185,7 @@ AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
   isAutofocussed: _pt.bool,
   menuPortalZIndex: _pt.number.isRequired,
   onBlur: _pt.func,
-  onChange: _pt.func.isRequired,
+  onChange: _pt.func,
   showOptionGroupDivider: _pt.bool
 } : {};
 AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
@@ -230,6 +238,6 @@ AsyncCreatableSelectInput.ValueContainer = components.ValueContainer;
 var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "14.0.1";
+var version = "15.0.0";
 
 export { AsyncCreatableSelectInput$1 as default, version };

package/dist/declarations/src/async-creatable-select-input.d.ts

@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
 import { type ActionMeta, type GroupBase } from 'react-select';
 import { type AsyncCreatableProps } from 'react-select/async-creatable';
-declare type TEvent = {
+declare type TCustomEvent = {
     target: {
+        id?: string;
         name?: string;
         value?: unknown;
     };
@@ -38,8 +39,8 @@ declare type TAsyncCreatableSelectInputProps = {
     closeMenuOnSelect?: ReactSelectAsyncCreatableProps['closeMenuOnSelect'];
     name?: ReactSelectAsyncCreatableProps['name'];
     noOptionsMessage?: ReactSelectAsyncCreatableProps['noOptionsMessage'];
-    onBlur?: (event: TEvent) => void;
-    onChange: (event: TEvent, info: ActionMeta<unknown>) => void;
+    onBlur?: (event: TCustomEvent) => void;
+    onChange?: (event: TCustomEvent, info: ActionMeta<unknown>) => void;
     onFocus?: ReactSelectAsyncCreatableProps['onFocus'];
     onInputChange?: ReactSelectAsyncCreatableProps['onInputChange'];
     placeholder?: ReactSelectAsyncCreatableProps['placeholder'];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/async-creatable-select-input",
   "description": "An input component getting a selection from an asynchronously loaded list from the user, and where options can be created by the user.",
-  "version": "14.0.1",
+  "version": "15.0.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,20 +21,20 @@
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@babel/runtime-corejs3": "^7.17.2",
-    "@commercetools-uikit/constraints": "14.0.1",
-    "@commercetools-uikit/design-system": "14.0.0",
-    "@commercetools-uikit/icons": "14.0.1",
-    "@commercetools-uikit/loading-spinner": "14.0.1",
-    "@commercetools-uikit/select-utils": "14.0.1",
-    "@commercetools-uikit/spacings": "14.0.1",
-    "@commercetools-uikit/text": "14.0.1",
-    "@commercetools-uikit/utils": "14.0.1",
+    "@commercetools-uikit/constraints": "15.0.0",
+    "@commercetools-uikit/design-system": "15.0.0",
+    "@commercetools-uikit/icons": "15.0.0",
+    "@commercetools-uikit/loading-spinner": "15.0.0",
+    "@commercetools-uikit/select-utils": "15.0.0",
+    "@commercetools-uikit/spacings": "15.0.0",
+    "@commercetools-uikit/text": "15.0.0",
+    "@commercetools-uikit/utils": "15.0.0",
     "@emotion/is-prop-valid": "1.1.2",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-select": "5.2.2"
+    "react-select": "5.3.0"
   },
   "devDependencies": {
     "react": "17.0.2",