@commercetools-uikit/async-select-field 14.0.1 → 14.0.2

package/README.md

@@ -79,7 +79,7 @@ export default Example;
 | `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)                                                                                                           |
 | `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).&#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.&#xA;<br />&#xA;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.&#xA;<br />&#xA;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`                | `FocusEventHandler`                                                                                   |          |           | Handle focus events on the control                                                                                                                                                                                                                                    |
 | `onInputChange`          | `AsyncProps['onInputChange']`                                                                         |          |           | Handle change events on the input&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                     |
 | `placeholder`            | `AsyncProps['placeholder']`                                                                           |          |           | Placeholder text for the select value&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                 |
@@ -110,13 +110,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
 ```
 
 ### Signature `onInfoButtonClick`

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

@@ -99,6 +99,10 @@ var AsyncSelectField = /*#__PURE__*/function (_Component) {
     value: function render() {
       var hasError = AsyncSelectInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
 
+      if (!this.props.isReadOnly) {
+        process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'AsyncSelectField: `onChange` is required when field is not read only.') : void 0;
+      }
+
       if (this.props.hintIcon) {
         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;
       }
@@ -208,7 +212,7 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
   hasWarning: _pt__default["default"].bool,
   menuPortalZIndex: _pt__default["default"].number,
   onBlur: _pt__default["default"].func,
-  onChange: _pt__default["default"].func.isRequired,
+  onChange: _pt__default["default"].func,
   onFocus: _pt__default["default"].func,
   loadingMessage: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].func]),
   showOptionGroupDivider: _pt__default["default"].bool,
@@ -223,7 +227,7 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "14.0.1";
+var version = "14.0.2";
 
 exports["default"] = AsyncSelectField;
 exports.version = version;

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

@@ -97,6 +97,8 @@ var AsyncSelectField = /*#__PURE__*/function (_Component) {
     value: function render() {
       var hasError = AsyncSelectInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
 
+      if (!this.props.isReadOnly) ;
+
       if (this.props.hintIcon) ;
 
       if (this.props.isMulti) ;
@@ -193,7 +195,7 @@ AsyncSelectField.getDerivedStateFromProps = function (props, state) {
 AsyncSelectField.propTypes = {};
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "14.0.1";
+var version = "14.0.2";
 
 exports["default"] = AsyncSelectField;
 exports.version = version;

package/dist/commercetools-uikit-async-select-field.esm.js

@@ -73,6 +73,10 @@ var AsyncSelectField = /*#__PURE__*/function (_Component) {
     value: function render() {
       var hasError = AsyncSelectInput.isTouched(this.props.touched) && hasErrors(this.props.errors);
 
+      if (!this.props.isReadOnly) {
+        process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'AsyncSelectField: `onChange` is required when field is not read only.') : void 0;
+      }
+
       if (this.props.hintIcon) {
         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;
       }
@@ -182,7 +186,7 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
   hasWarning: _pt.bool,
   menuPortalZIndex: _pt.number,
   onBlur: _pt.func,
-  onChange: _pt.func.isRequired,
+  onChange: _pt.func,
   onFocus: _pt.func,
   loadingMessage: _pt.oneOfType([_pt.string, _pt.func]),
   showOptionGroupDivider: _pt.bool,
@@ -197,6 +201,6 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "14.0.1";
+var version = "14.0.2";
 
 export { AsyncSelectField as default, version };

package/dist/declarations/src/async-select-field.d.ts

@@ -7,9 +7,10 @@ declare type TFieldErrors = Record<string, boolean>;
 declare type TCustomFormErrors<Values> = {
     [K in keyof Values]?: TFieldErrors;
 };
-declare type TEvent = {
+declare type TCustomEvent = {
     target: {
-        name?: string;
+        id?: ReactSelectAsyncProps['inputId'];
+        name?: ReactSelectAsyncProps['name'];
         value?: unknown;
     };
     persist: () => void;
@@ -41,8 +42,8 @@ declare type TAsyncSelectFieldProps = {
     menuShouldBlockScroll?: ReactSelectAsyncProps['menuShouldBlockScroll'];
     name?: ReactSelectAsyncProps['name'];
     noOptionsMessage?: ReactSelectAsyncProps['noOptionsMessage'];
-    onBlur?: (event: TEvent) => void;
-    onChange: (event: TEvent, info: ActionMeta<unknown>) => void;
+    onBlur?: (event: TCustomEvent) => void;
+    onChange?: (event: TCustomEvent, info: ActionMeta<unknown>) => void;
     onFocus?: FocusEventHandler;
     onInputChange?: ReactSelectAsyncProps['onInputChange'];
     placeholder?: ReactSelectAsyncProps['placeholder'];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/async-select-field",
   "description": "A controlled input component with validation states and a label getting a selection from an asynchronously loaded list from the user.",
-  "version": "14.0.1",
+  "version": "14.0.2",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,11 +21,11 @@
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@babel/runtime-corejs3": "^7.17.2",
-    "@commercetools-uikit/async-select-input": "14.0.1",
+    "@commercetools-uikit/async-select-input": "14.0.2",
     "@commercetools-uikit/constraints": "14.0.1",
     "@commercetools-uikit/design-system": "14.0.0",
     "@commercetools-uikit/field-errors": "14.0.1",
-    "@commercetools-uikit/field-label": "14.0.1",
+    "@commercetools-uikit/field-label": "14.0.2",
     "@commercetools-uikit/spacings": "14.0.1",
     "@commercetools-uikit/utils": "14.0.1",
     "@emotion/react": "^11.4.0",