@commercetools-uikit/creatable-select-field 13.0.4 → 14.0.2

package/README.md

@@ -78,7 +78,7 @@ export default Example;
 | `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)                                                                                                                                                                                                                              |
 | `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).&#xA;<br>&#xA;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) |
 | `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`                 | `CreatableProps['onFocus']`                                                                           |          |           | Handle focus events on the control&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                                                       |
 | `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)                                                                                                                                                                                                                                                                        |
 | `options`                 | `union`<br/>Possible values:<br/>`TValue[] , { options: TValue[] }[]`                                 |          |           | Array of options that populate the select menu                                                                                                                                                                                                                                                                                                                                                           |
@@ -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
 ```
 
 ### Signature `onInfoButtonClick`
@@ -147,3 +147,21 @@ When the `key` is known, and when the value is truthy, and when `renderError` re
 Known error keys are:
 
 - `missing`: tells the user that this field is required
+
+## Static methods
+
+### `CreatableSelectField.toFieldErrors`
+
+Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
+
+```ts
+type FormValues = {
+  myField: string;
+};
+
+<CreatableSelectField
+  // ...
+  name="my-field"
+  errors={CreatableSelectField.toFieldErrors<FormValues>(formik.errors).myField}
+/>;
+```

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

@@ -99,6 +99,10 @@ var CreatableSelectField = /*#__PURE__*/function (_Component) {
     value: function render() {
       var hasError = CreatableSelectInput__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', 'CreatableSelectField: `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), 'CreatableSelectField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
       }
@@ -173,6 +177,17 @@ var CreatableSelectField = /*#__PURE__*/function (_Component) {
         })
       });
     }
+  }], [{
+    key: "toFieldErrors",
+    value:
+    /**
+     * Use this function to convert the Formik `errors` object type to
+     * our custom field errors type.
+     * This is primarly useful when using TypeScript.
+     */
+    function toFieldErrors(errors) {
+      return errors;
+    }
   }]);
 
   return CreatableSelectField;
@@ -199,7 +214,7 @@ CreatableSelectField.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,
   options: _pt__default["default"].oneOfType([_pt__default["default"].arrayOf(_pt__default["default"].shape({
     value: _pt__default["default"].string.isRequired
   })), _pt__default["default"].arrayOf(_pt__default["default"].shape({
@@ -218,7 +233,7 @@ CreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.4";
+var version = "14.0.2";
 
 exports["default"] = CreatableSelectField;
 exports.version = version;

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

@@ -97,6 +97,8 @@ var CreatableSelectField = /*#__PURE__*/function (_Component) {
     value: function render() {
       var hasError = CreatableSelectInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
 
+      if (!this.props.isReadOnly) ;
+
       if (this.props.hintIcon) ;
 
       if (this.props.isMulti) ;
@@ -166,6 +168,17 @@ var CreatableSelectField = /*#__PURE__*/function (_Component) {
         })
       });
     }
+  }], [{
+    key: "toFieldErrors",
+    value:
+    /**
+     * Use this function to convert the Formik `errors` object type to
+     * our custom field errors type.
+     * This is primarly useful when using TypeScript.
+     */
+    function toFieldErrors(errors) {
+      return errors;
+    }
   }]);
 
   return CreatableSelectField;
@@ -184,7 +197,7 @@ CreatableSelectField.getDerivedStateFromProps = function (props, state) {
 CreatableSelectField.propTypes = {};
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.4";
+var version = "14.0.2";
 
 exports["default"] = CreatableSelectField;
 exports.version = version;

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

@@ -73,6 +73,10 @@ var CreatableSelectField = /*#__PURE__*/function (_Component) {
     value: function render() {
       var hasError = CreatableSelectInput.isTouched(this.props.touched) && hasErrors(this.props.errors);
 
+      if (!this.props.isReadOnly) {
+        process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'CreatableSelectField: `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), 'CreatableSelectField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
       }
@@ -147,6 +151,17 @@ var CreatableSelectField = /*#__PURE__*/function (_Component) {
         })
       });
     }
+  }], [{
+    key: "toFieldErrors",
+    value:
+    /**
+     * Use this function to convert the Formik `errors` object type to
+     * our custom field errors type.
+     * This is primarly useful when using TypeScript.
+     */
+    function toFieldErrors(errors) {
+      return errors;
+    }
   }]);
 
   return CreatableSelectField;
@@ -173,7 +188,7 @@ CreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
   hasWarning: _pt.bool,
   menuPortalZIndex: _pt.number,
   onBlur: _pt.func,
-  onChange: _pt.func.isRequired,
+  onChange: _pt.func,
   options: _pt.oneOfType([_pt.arrayOf(_pt.shape({
     value: _pt.string.isRequired
   })), _pt.arrayOf(_pt.shape({
@@ -192,6 +207,6 @@ CreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.4";
+var version = "14.0.2";
 
 export { CreatableSelectField as default, version };

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

@@ -4,14 +4,18 @@ import type { CreatableProps } from 'react-select/creatable';
 declare type ReactSelectCreatableProps = CreatableProps<unknown, boolean, GroupBase<unknown>>;
 declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
 declare type TFieldErrors = Record<string, boolean>;
+declare type TCustomFormErrors<Values> = {
+    [K in keyof Values]?: TFieldErrors;
+};
 declare type TValue = {
     value: string;
 };
 declare type TOptions = TValue[] | {
     options: TValue[];
 }[];
-declare type TEvent = {
+declare type TCustomEvent = {
     target: {
+        id?: string;
         name?: string;
         value?: unknown;
     };
@@ -44,8 +48,8 @@ declare type TCreatableSelectFieldProps = {
     menuShouldBlockScroll?: ReactSelectCreatableProps['menuShouldBlockScroll'];
     name?: ReactSelectCreatableProps['name'];
     noOptionsMessage?: ReactSelectCreatableProps['noOptionsMessage'];
-    onBlur?: (event: TEvent) => void;
-    onChange: (event: TEvent, info: ActionMeta<unknown>) => void;
+    onBlur?: (event: TCustomEvent) => void;
+    onChange?: (event: TCustomEvent, info: ActionMeta<unknown>) => void;
     onFocus?: ReactSelectCreatableProps['onFocus'];
     onInputChange?: ReactSelectCreatableProps['onInputChange'];
     options?: TOptions;
@@ -80,6 +84,7 @@ export default class CreatableSelectField extends Component<TCreatableSelectFiel
     static getDerivedStateFromProps: (props: TCreatableSelectFieldProps, state: TCreatableSelectFieldState) => {
         id: string;
     };
+    static toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/creatable-select-field",
   "description": "A controlled input component with validation states and a label getting a selection from the user, and where options can also be created by the user.",
-  "version": "13.0.4",
+  "version": "14.0.2",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
     "directory": "packages/components/fields/creatable-select-field"
   },
   "homepage": "https://uikit.commercetools.com",
-  "keywords": ["javascript", "design system", "react", "uikit"],
+  "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -19,15 +19,15 @@
   "module": "dist/commercetools-uikit-creatable-select-field.esm.js",
   "files": ["dist"],
   "dependencies": {
-    "@babel/runtime": "7.17.2",
-    "@babel/runtime-corejs3": "7.17.2",
-    "@commercetools-uikit/constraints": "13.0.2",
-    "@commercetools-uikit/creatable-select-input": "13.0.4",
-    "@commercetools-uikit/design-system": "13.0.0",
-    "@commercetools-uikit/field-errors": "13.0.4",
-    "@commercetools-uikit/field-label": "13.0.4",
-    "@commercetools-uikit/spacings": "13.0.2",
-    "@commercetools-uikit/utils": "13.0.2",
+    "@babel/runtime": "^7.17.2",
+    "@babel/runtime-corejs3": "^7.17.2",
+    "@commercetools-uikit/constraints": "14.0.1",
+    "@commercetools-uikit/creatable-select-input": "14.0.2",
+    "@commercetools-uikit/design-system": "14.0.0",
+    "@commercetools-uikit/field-errors": "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",
     "@emotion/styled": "^11.3.0",
     "prop-types": "15.8.1",