@commercetools-uikit/localized-multiline-text-field 19.9.0 → 19.10.0

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

@@ -201,7 +201,7 @@ LocalizedMultilineTextField.propTypes = process.env.NODE_ENV !== "production" ?
 var LocalizedMultilineTextField$1 = LocalizedMultilineTextField;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.9.0";
+var version = "19.10.0";
 
 exports["default"] = LocalizedMultilineTextField$1;
 exports.version = version;

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

@@ -168,7 +168,7 @@ LocalizedMultilineTextField.propTypes = {};
 var LocalizedMultilineTextField$1 = LocalizedMultilineTextField;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.9.0";
+var version = "19.10.0";
 
 exports["default"] = LocalizedMultilineTextField$1;
 exports.version = version;

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

@@ -176,6 +176,6 @@ LocalizedMultilineTextField.propTypes = process.env.NODE_ENV !== "production" ?
 var LocalizedMultilineTextField$1 = LocalizedMultilineTextField;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.9.0";
+var version = "19.10.0";
 
 export { LocalizedMultilineTextField$1 as default, version };

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

@@ -10,45 +10,157 @@ interface HTMLLocalizedTextAreaElement extends HTMLTextAreaElement {
     language: string;
 }
 export type TLocalizedMultilineTextFieldProps = {
+    /**
+     * Used as HTML id property. An id is auto-generated when it is not specified.
+     */
     id?: string;
+    /**
+     * Horizontal size limit of the input fields.
+     */
     horizontalConstraint?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
+    /**
+     * A map of errors. Error messages for known errors are rendered automatically.
+     * <br />
+     * Unknown errors will be forwarded to `renderError`
+     */
     errors?: TFieldErrors;
+    /**
+     * Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
+     */
     renderError?: TErrorRenderer;
+    /**
+     * A map of warnings. Warning messages for known warnings are rendered automatically.
+     * <br/>
+     * Unknown warnings will be forwarded to renderWarning.
+     */
     warnings?: TFieldWarnings;
+    /**
+     * Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
+     * <br />
+     * It can also return null to show no warning.
+     */
     renderWarning?: (key: string, warning?: boolean) => ReactNode;
+    /**
+     * An object mapping locales to additional messages to be rendered below each input element.
+      Example:
+      {
+        en: 'Some value',
+        es: 'Algún valor',
+      }
+     */
     additionalInfo?: Record<string, string | ReactNode | (MessageDescriptor & {
         values: Record<string, ReactNode>;
     })>;
+    /**
+     * Indicates if the value is required. Shows an the "required asterisk" if so.
+     */
     isRequired?: boolean;
+    /**
+     * Indicates whether the field was touched. Errors will only be shown when the field was touched.
+     */
     touched?: boolean;
+    /**
+     * Used as HTML `autocomplete` property
+     */
     autoComplete?: string;
+    /**
+     * Used as HTML `name` property for each input field. Each input field name will have the language as a suffix (`${namePrefix}.${lang}`), e.g. `foo.en`
+     */
     name?: string;
+    /**
+     * Values to use. Keyed by language, the values are the actual values, e.g. `{ en: 'Horse', de: 'Pferd' }`
+     * <br />
+     * The input doesn't accept a "languages" prop, instead all possible
+     * languages have to exist (with empty or filled strings) on the value:
+     * <br />
+     * { en: 'foo', de: '', es: '' }
+     */
     value: {
         [key: string]: string;
     };
+    /**
+     * Gets called when any input is changed. Is called with the change event of the changed input.
+     */
     onChange?: ChangeEventHandler<HTMLLocalizedTextAreaElement>;
+    /**
+     * Specifies which language will be shown in case the `LocalizedTextInput` is collapsed.
+     */
     selectedLanguage: string;
+    /**
+     * Called when input is blurred
+     */
     onBlur?: FocusEventHandler<HTMLLocalizedTextAreaElement>;
+    /**
+     * Called when input is focused
+     */
     onFocus?: () => void;
+    /**
+     * Expands input components holding multiline values instead of collapsing them by default.
+     */
     defaultExpandMultilineText?: boolean;
+    /**
+     * Use this property to turn off caching input measurements.
+     */
     cacheMeasurements?: boolean;
+    /**
+     * Will hide the language expansion controls when set to `true`. All languages will be shown when set to `true`.
+     */
     hideLanguageExpansionControls?: boolean;
+    /**
+     * Controls whether one or all languages are visible by default. Pass `true` to show all languages by default.
+     */
     defaultExpandLanguages?: boolean;
+    /**
+     * Sets the focus on the first input when `true` is passed.
+     */
     isAutofocussed?: boolean;
+    /**
+     * Whether the text inputs for each localization should render with condensed paddings.
+     */
     isCondensed?: boolean;
+    /**
+     * Disables all input fields.
+     */
     isDisabled?: boolean;
+    /**
+     * Disables all input fields and shows them in read-only mode.
+     */
     isReadOnly?: boolean;
+    /**
+     * Placeholders for each language. Object of the same shape as `value`.
+     */
     placeholder?: {
         [key: string]: string;
     };
+    /**
+     * Errors for each translation. These are forwarded to the `errors` prop of `LocalizedTextInput`.
+     */
     errorsByLanguage?: {
         [key: string]: ReactNode;
     };
+    /**
+     * Title of the label
+     */
     title: string | ReactNode;
+    /**
+     * Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth. Can also receive a hintIcon.
+     */
     hint?: string | ReactNode;
+    /**
+     * Provides a description for the title.
+     */
     description?: string | ReactNode;
+    /**
+     * 	Function called when info button is pressed. Info button will only be visible when this prop is passed.
+     */
     onInfoButtonClick?: () => void;
+    /**
+     * Icon to be displayed beside the hint text. Will only get rendered when hint is passed as well.
+     */
     hintIcon?: ReactElement;
+    /**
+     * Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email)
+     */
     badge?: ReactNode;
 };
 type TLocalizedMultilineTextFieldState = Pick<TLocalizedMultilineTextFieldProps, 'id'>;
@@ -61,6 +173,11 @@ declare class LocalizedMultilineTextField extends Component<TLocalizedMultilineT
     static getDerivedStateFromProps: (props: TLocalizedMultilineTextFieldProps, state: TLocalizedMultilineTextFieldState) => {
         id: string;
     };
+    /**
+     * Use this function to convert the Formik `errors` object type to
+     * our custom field errors type.
+     * This is primarly useful when using TypeScript.
+     */
     static toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/localized-multiline-text-field",
   "description": "A controlled text input component for localized multi-line strings with validation states.",
-  "version": "19.9.0",
+  "version": "19.10.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/constraints": "19.9.0",
-    "@commercetools-uikit/design-system": "19.9.0",
-    "@commercetools-uikit/field-errors": "19.9.0",
-    "@commercetools-uikit/field-label": "19.9.0",
-    "@commercetools-uikit/field-warnings": "19.9.0",
-    "@commercetools-uikit/localized-multiline-text-input": "19.9.0",
-    "@commercetools-uikit/spacings": "19.9.0",
-    "@commercetools-uikit/utils": "19.9.0",
+    "@commercetools-uikit/constraints": "19.10.0",
+    "@commercetools-uikit/design-system": "19.10.0",
+    "@commercetools-uikit/field-errors": "19.10.0",
+    "@commercetools-uikit/field-label": "19.10.0",
+    "@commercetools-uikit/field-warnings": "19.10.0",
+    "@commercetools-uikit/localized-multiline-text-input": "19.10.0",
+    "@commercetools-uikit/spacings": "19.10.0",
+    "@commercetools-uikit/utils": "19.10.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "prop-types": "15.8.1",