@commercetools-uikit/multiline-text-field 13.0.4 → 14.0.2

package/README.md

@@ -104,3 +104,21 @@ Known error keys are:
 ## Main Functions and use cases are:
 
 - Input field for multi-line strings
+
+## Static methods
+
+### `MultilineTextField.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;
+};
+
+<MultilineTextField
+  // ...
+  name="my-field"
+  errors={MultilineTextField.toFieldErrors<FormValues>(formik.errors).myField}
+/>;
+```

package/dist/commercetools-uikit-multiline-text-field.cjs.dev.js

@@ -98,7 +98,7 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
       var hasError = this.props.touched && hasErrors(this.props.errors);
 
       if (!this.props.isReadOnly) {
-        process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'MultilineField: "onChange" is required when is not read only.') : void 0;
+        process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'MultilineField: "onChange" is required when field is not read only.') : void 0;
       }
 
       if (this.props.hint) {
@@ -145,6 +145,17 @@ var MultilineTextField = /*#__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 MultilineTextField;
@@ -189,7 +200,7 @@ MultilineTextField.propTypes = process.env.NODE_ENV !== "production" ? {
 var MultilineTextField$1 = MultilineTextField;
 
 // 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"] = MultilineTextField$1;
 exports.version = version;

package/dist/commercetools-uikit-multiline-text-field.cjs.prod.js

@@ -140,6 +140,17 @@ var MultilineTextField = /*#__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 MultilineTextField;
@@ -160,7 +171,7 @@ MultilineTextField.propTypes = {};
 var MultilineTextField$1 = MultilineTextField;
 
 // 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"] = MultilineTextField$1;
 exports.version = version;

package/dist/commercetools-uikit-multiline-text-field.esm.js

@@ -73,7 +73,7 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
       var hasError = this.props.touched && hasErrors(this.props.errors);
 
       if (!this.props.isReadOnly) {
-        process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'MultilineField: "onChange" is required when is not read only.') : void 0;
+        process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'MultilineField: "onChange" is required when field is not read only.') : void 0;
       }
 
       if (this.props.hint) {
@@ -120,6 +120,17 @@ var MultilineTextField = /*#__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 MultilineTextField;
@@ -164,6 +175,6 @@ MultilineTextField.propTypes = process.env.NODE_ENV !== "production" ? {
 var MultilineTextField$1 = MultilineTextField;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.4";
+var version = "14.0.2";
 
 export { MultilineTextField$1 as default, version };

package/dist/declarations/src/multiline-text-field.d.ts

@@ -1,5 +1,8 @@
 import { type ChangeEventHandler, type FocusEventHandler, type ReactElement, type ReactNode, Component } from 'react';
 export declare type TFieldErrors = Record<string, boolean>;
+declare type TCustomFormErrors<Values> = {
+    [K in keyof Values]?: TFieldErrors;
+};
 export declare type TMultiTextFieldProps = {
     id?: string;
     horizontalConstraint?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
@@ -9,9 +12,9 @@ export declare type TMultiTextFieldProps = {
     autoComplete?: string;
     name?: string;
     value: string;
-    onChange?: ChangeEventHandler;
-    onBlur?: FocusEventHandler;
-    onFocus?: FocusEventHandler;
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
     isAutofocussed?: boolean;
     defaultExpandMultilineText?: boolean;
     isDisabled?: boolean;
@@ -38,6 +41,7 @@ declare class MultilineTextField extends Component<TMultiTextFieldProps, TState>
     static getDerivedStateFromProps: (props: TMultiTextFieldProps, state: TState) => {
         id: string;
     };
+    static toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
 export default MultilineTextField;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/multiline-text-field",
   "description": "A controlled text input component for multi-line strings with validation states and a label.",
-  "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/multiline-text-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-multiline-text-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/design-system": "13.0.0",
-    "@commercetools-uikit/field-errors": "13.0.4",
-    "@commercetools-uikit/field-label": "13.0.4",
-    "@commercetools-uikit/multiline-text-input": "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/design-system": "14.0.0",
+    "@commercetools-uikit/field-errors": "14.0.1",
+    "@commercetools-uikit/field-label": "14.0.2",
+    "@commercetools-uikit/multiline-text-input": "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",