@trilogy-ds/react 0.0.1-beta-148 → 0.0.1-beta-sc-2

package/lib/components/text/TextProps.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
+import { TextLevels, TextLevelValues, TextMarkup, TextMarkupValues } from '../../components/text/TextEnum';
 import { TypographyAlign, TypographyAlignValues } from '../../objects/Typography/TypographyAlign';
 import { TypographyBold, TypographyBoldValues } from '../../objects/Typography/TypographyBold';
 import { TypographyColor, TypographyColorValues } from '../../objects/Typography/TypographyColor';
 import { TypographyTransform, TypographyTransformValues } from '../../objects/Typography/TypographyTransform';
 import { Accessibility, Dev, Invertable } from '../../objects/facets';
-import { TextLevels, TextLevelValues, TextMarkup, TextMarkupValues } from './TextEnum';
-import { CommonProps } from '../../objects/facets/CommonProps';
+import { Clickable } from '../../objects/facets/Clickable';
 type Styles = {
     [key: string]: any;
 };
@@ -13,14 +13,19 @@ type Typo = TypographyColor | TypographyColorValues | TypographyTransform | Typo
 /**
  * Text Interface
  */
-export interface TextProps extends Invertable, Accessibility, Dev, CommonProps {
+export interface TextProps extends Invertable, Accessibility, Clickable, Dev {
     level?: TextLevels | TextLevelValues;
     children?: React.ReactNode;
     typo?: Typo | Array<string>;
     markup?: TextMarkup | TextMarkupValues;
+    className?: string;
+    href?: string;
+    title?: string;
     style?: Styles;
     skeleton?: boolean;
+    htmlContent?: string;
     marginless?: boolean;
+    link?: boolean;
     numberOfLines?: number;
 }
 export {};

package/lib/components/text/TextPropsDefaults.js

@@ -28,6 +28,14 @@ export default {
     "values": [
       "undefined",
       "string[]",
+      "has-text-centered",
+      "has-text-justified",
+      "has-text-left",
+      "has-text-right",
+      "has-text-centered",
+      "has-text-justified",
+      "has-text-left",
+      "has-text-right",
       "has-text-main",
       "has-text-accent",
       "has-text-info",
@@ -61,25 +69,42 @@ export default {
       "has-text-weight-normal",
       "has-text-weight-medium",
       "has-text-weight-semibold",
-      "has-text-weight-bold",
-      "has-text-centered",
-      "has-text-justified",
-      "has-text-left",
-      "has-text-right",
-      "has-text-centered",
-      "has-text-justified",
-      "has-text-left",
-      "has-text-right"
+      "has-text-weight-bold"
     ]
   },
   "markup": {
     "type": "enum",
     "values": [
       "undefined",
+      "a",
+      "div",
       "p",
       "span",
       "p",
-      "span"
+      "span",
+      "div",
+      "a"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "href": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "title": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
     ]
   },
   "style": {
@@ -97,6 +122,13 @@ export default {
       "true"
     ]
   },
+  "htmlContent": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
   "marginless": {
     "type": "boolean",
     "values": [
@@ -105,6 +137,14 @@ export default {
       "true"
     ]
   },
+  "link": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "numberOfLines": {
     "type": "string",
     "values": [
@@ -127,21 +167,14 @@ export default {
       "string"
     ]
   },
-  "testId": {
-    "type": "string",
+  "onClick": {
+    "type": "function",
     "values": [
       "undefined",
-      "string"
+      "ClickEvent"
     ]
   },
-  "id": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "className": {
+  "testId": {
     "type": "string",
     "values": [
       "undefined",

package/lib/components/text/index.d.ts

@@ -1,3 +1,2 @@
-import Text from './Text';
-export * from './TextEnum';
-export { Text };
+export { default as Text } from '../../components/text/Text';
+export * from '../../components/text/TextEnum';

package/lib/components/text/index.js

@@ -1,4 +1,3 @@
-import Text from './Text';
-export * from './TextEnum';
-export { Text };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RleHQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sSUFBSSxNQUFNLFFBQVEsQ0FBQTtBQUV6QixjQUFjLFlBQVksQ0FBQTtBQUUxQixPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUEifQ==
+export { default as Text } from '../../components/text/Text';
+export * from '../../components/text/TextEnum';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RleHQvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sSUFBSSxJQUFJLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUN4RCxjQUFjLDRCQUE0QixDQUFBIn0=

package/lib/components/textarea/Textarea.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { TextareaProps } from './TextareaProps';
+import React from 'react';
+import { TypographyColor } from '../../objects/Typography/TypographyColor';
 /**
  * Textarea Component
  * @param disabled {boolean} Disabled textarea
@@ -15,6 +15,7 @@ import { TextareaProps } from './TextareaProps';
  * @param rows {number} Textarea rows
  * @param iconName {IconName | IconNameValues} display Icon
  * @param statusIconName {IconName | IconNameValues} display status Icon
+ * @param testId {string} Test Id for Test Integration
  * @param dynamicPlaceholder {boolean}
  * @param status {InputStatus} Textarea with status - (SUCCESS|WARNING|ERROR|DEFAULT)
  * @param required {boolean} Required
@@ -23,6 +24,41 @@ import { TextareaProps } from './TextareaProps';
  * @param minLength {number} Textarea min length
  * @param typo {TypographyColor | TypographyColorValues} change help typo
  * - -------------------------- NATIVE PROPERTIES -------------------------------
+ * @param keyboardStyle {InputKeyboardAppearance} Custom appearance for keyboard
+ * @param autoCapitalize {InputAutoCapitalize} Capitalize => NONE | SENTENCES | WORDS | CHARS
+ * @param autoCorrect {boolean} Auto correct sentence
+ * @param autoCompleteType {InputAutoCompleteType} Auto complete input type
+ * @param textContentType {InputTextContentType} Give the keyboard and the system information
+ * @param keyboardType {InputKeyboardType} Keybaord type
+ * @param value {string} Value for textarea
+ * @param customHeight {number} custom textarea height
  */
-declare const Textarea: ({ className, id, sample, required, disabled, onChange, placeholder, defaultValue, help, status, dynamicPlaceholder, rows, ref, label, maxLength, minLength, iconNameLeft, iconNameRight, ...others }: TextareaProps) => JSX.Element;
+declare const Textarea: React.ForwardRefExoticComponent<import("../..").Accessibility & import("../..").Dev & {
+    placeholder?: string | undefined;
+    defaultValue?: string | undefined;
+    value?: string | undefined;
+    disabled?: boolean | undefined;
+    onChange?: import("../../components/textarea/TextareaProps").TextareaChangeEventHandler | undefined;
+    status?: "success" | "warning" | "error" | "default" | import("../../components/icon").IconStatus | import("..").InputStatus | "danger" | undefined;
+    help?: string | undefined;
+    name?: string | undefined;
+    className?: string | undefined;
+    keyboardStyle?: "default" | "dark" | "light" | import("..").InputKeyboardAppearance | undefined;
+    autoCapitalize?: "none" | "sentences" | "words" | "characters" | import("..").InputAutoCapitalize | undefined;
+    autoCorrect?: any;
+    autoCompleteType?: "name" | "off" | "tel" | "url" | "email" | "password" | import("..").InputAutoCompleteType | "additional-name" | "address-line1" | "address-line2" | "cc-csc" | "cc-exp" | "cc-exp-day" | "cc-exp-month" | "cc-exp-year" | "cc-number" | "country" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "postal-code" | "street-address" | "username" | "cc-family-name" | "cc-given-name" | "cc-middle-name" | "cc-name" | "cc-type" | "nickname" | "organization" | "organization-title" | "gender" | "name-family" | "name-given" | "name-middle" | "name-middle-initial" | "name-prefix" | "name-suffix" | "password-new" | "postal-address" | "postal-address-country" | "postal-address-extended" | "postal-address-extended-postal-code" | "postal-address-locality" | "postal-address-region" | "sms-otp" | "tel-country-code" | "tel-device" | "tel-national" | "username-new" | undefined;
+    textContentType?: "none" | "name" | "password" | "username" | "nickname" | import("..").InputTextContentType | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "location" | "middleName" | "namePrefix" | "nameSuffix" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "newPassword" | "oneTimeCode" | undefined;
+    keyboardType?: "default" | "url" | "numeric" | import("..").InputKeyboardType | "email-address" | "phone-pad" | "number-pad" | "decimal-pad" | "visible-password" | "ascii-capable" | "numbers-and-punctuation" | "name-phone-pad" | "twitter" | "web-search" | undefined;
+    minLength?: number | undefined;
+    maxLength?: number | undefined;
+    dynamicPlaceholder?: boolean | undefined;
+    rows?: number | undefined;
+    label?: string | undefined;
+    iconName?: import("../../components/icon").IconName | "tri-alert" | "tri-arrow-down" | "tri-arrow-left" | "tri-arrow-right" | "tri-arrow-up" | "tri-bell" | "tri-check-circle" | "tri-check" | "tri-exclamation-circle" | "tri-eye-slash" | "tri-eye" | "tri-infos-circle" | "tri-search" | "tri-times" | "tri-trash" | "tri-picto-faciliti" | "tri-picto-handicapzero" | "tri-picto-la-fibre" | "tri-picto-payment-americanexpress" | "tri-picto-payment-cb" | "tri-picto-payment-mastercard" | "tri-picto-payment-paypal" | "tri-picto-payment-visa" | undefined;
+    statusIconName?: import("../../components/icon").IconName | "tri-alert" | "tri-arrow-down" | "tri-arrow-left" | "tri-arrow-right" | "tri-arrow-up" | "tri-bell" | "tri-check-circle" | "tri-check" | "tri-exclamation-circle" | "tri-eye-slash" | "tri-eye" | "tri-infos-circle" | "tri-search" | "tri-times" | "tri-trash" | "tri-picto-faciliti" | "tri-picto-handicapzero" | "tri-picto-la-fibre" | "tri-picto-payment-americanexpress" | "tri-picto-payment-cb" | "tri-picto-payment-mastercard" | "tri-picto-payment-paypal" | "tri-picto-payment-visa" | undefined;
+    typo?: TypographyColor | "has-text-main" | "has-text-accent" | "has-text-info" | "has-text-success" | "has-text-warning" | "has-text-error" | "has-text-grey" | "has-text-white" | "has-text-disabled" | undefined;
+    customHeight?: number | undefined;
+    required?: boolean | undefined;
+    sample?: string | undefined;
+} & React.RefAttributes<HTMLTextAreaElement>>;
 export default Textarea;

package/lib/components/textarea/Textarea.js

@@ -1,13 +1,13 @@
-import { __assign, __read, __rest } from "tslib";
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useState } from 'react';
+import { __assign, __rest } from "tslib";
 import clsx from 'clsx';
-import { Text, TextLevels, TextMarkup } from '../../components/text';
-import { has, is } from '../../services';
+import React from 'react';
+import { ComponentName } from '../../components/enumsComponentsName';
 import { Icon } from '../../components/icon';
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
-import { TypographyColor } from '../../objects';
+import { Text, TextLevels, TextMarkup } from '../../components/text';
+import { useTextarea } from '../../components/textarea/hook/useTextarea';
+import { hashClass } from '../../helpers/hashClassesHelpers';
+import { TypographyColor } from '../../objects/Typography/TypographyColor';
+import { has, is } from '../../services/classify';
 /**
  * Textarea Component
  * @param disabled {boolean} Disabled textarea
@@ -23,6 +23,7 @@ import { TypographyColor } from '../../objects';
  * @param rows {number} Textarea rows
  * @param iconName {IconName | IconNameValues} display Icon
  * @param statusIconName {IconName | IconNameValues} display status Icon
+ * @param testId {string} Test Id for Test Integration
  * @param dynamicPlaceholder {boolean}
  * @param status {InputStatus} Textarea with status - (SUCCESS|WARNING|ERROR|DEFAULT)
  * @param required {boolean} Required
@@ -31,38 +32,35 @@ import { TypographyColor } from '../../objects';
  * @param minLength {number} Textarea min length
  * @param typo {TypographyColor | TypographyColorValues} change help typo
  * - -------------------------- NATIVE PROPERTIES -------------------------------
+ * @param keyboardStyle {InputKeyboardAppearance} Custom appearance for keyboard
+ * @param autoCapitalize {InputAutoCapitalize} Capitalize => NONE | SENTENCES | WORDS | CHARS
+ * @param autoCorrect {boolean} Auto correct sentence
+ * @param autoCompleteType {InputAutoCompleteType} Auto complete input type
+ * @param textContentType {InputTextContentType} Give the keyboard and the system information
+ * @param keyboardType {InputKeyboardType} Keybaord type
+ * @param value {string} Value for textarea
+ * @param customHeight {number} custom textarea height
  */
-var Textarea = function (_a) {
-    var className = _a.className, id = _a.id, sample = _a.sample, required = _a.required, disabled = _a.disabled, onChange = _a.onChange, placeholder = _a.placeholder, defaultValue = _a.defaultValue, help = _a.help, status = _a.status, _b = _a.dynamicPlaceholder, dynamicPlaceholder = _b === void 0 ? true : _b, rows = _a.rows, ref = _a.ref, label = _a.label, maxLength = _a.maxLength, minLength = _a.minLength, iconNameLeft = _a.iconNameLeft, iconNameRight = _a.iconNameRight, others = __rest(_a, ["className", "id", "sample", "required", "disabled", "onChange", "placeholder", "defaultValue", "help", "status", "dynamicPlaceholder", "rows", "ref", "label", "maxLength", "minLength", "iconNameLeft", "iconNameRight"]);
-    var _c = __read(useState(defaultValue || ''), 2), value = _c[0], setValue = _c[1];
-    var styled = useTrilogyContext().styled;
-    useEffect(function () {
-        setValue(defaultValue || '');
-    }, [defaultValue]);
-    var wrapperClasses = hashClass(styled, clsx('textarea-wrapper', className, status && is(status)));
-    var classes = hashClass(styled, clsx('textarea', dynamicPlaceholder && has('dynamic-label'), iconNameLeft && has('icon')));
-    var helpClasses = clsx('help', status && is(status));
-    var counterClasses = hashClass(styled, clsx('counter', maxLength));
-    return (React.createElement("div", { id: id, className: wrapperClasses },
+var Textarea = React.forwardRef(function (_a, ref) {
+    var className = _a.className, sample = _a.sample, required = _a.required, disabled = _a.disabled, onChange = _a.onChange, placeholder = _a.placeholder, defaultValue = _a.defaultValue, help = _a.help, status = _a.status, statusIconName = _a.statusIconName, _b = _a.dynamicPlaceholder, dynamicPlaceholder = _b === void 0 ? true : _b, rows = _a.rows, label = _a.label, maxLength = _a.maxLength, minLength = _a.minLength, iconName = _a.iconName, typo = _a.typo, testId = _a.testId, value = _a.value, others = __rest(_a, ["className", "sample", "required", "disabled", "onChange", "placeholder", "defaultValue", "help", "status", "statusIconName", "dynamicPlaceholder", "rows", "label", "maxLength", "minLength", "iconName", "typo", "testId", "value"]);
+    var _c = useTextarea({ inputValue: value, onChange: onChange }), inputValue = _c.inputValue, handleChange = _c.handleChange;
+    var wrapperClasses = hashClass(clsx('textarea-wrapper', className, status && is(status)));
+    var classes = hashClass(clsx('textarea', dynamicPlaceholder && has('dynamic-label'), iconName && has('icon')));
+    var helpClasses = clsx('help');
+    var counterClasses = hashClass(clsx('counter', maxLength));
+    return (React.createElement("div", { className: wrapperClasses },
         !dynamicPlaceholder && (React.createElement("label", { className: 'textarea-label' },
             label,
             ' ',
             label && required && (React.createElement(Text, { markup: TextMarkup.SPAN, typo: TypographyColor.TEXT_ERROR }, "*")))),
         !dynamicPlaceholder && label && sample && (React.createElement(Text, { className: 'textarea-sample', level: TextLevels.TWO, typo: TypographyColor.TEXT_DISABLED }, sample)),
-        React.createElement("textarea", __assign({ minLength: minLength, disabled: disabled, ref: ref }, others, { className: classes, value: value, onChange: function (e) {
-                setValue(e.target.value);
-                if (onChange) {
-                    onChange({
-                        textareaName: e.target.name,
-                        textareaValue: e.target.value,
-                    });
-                }
-            }, placeholder: placeholder, rows: rows, maxLength: maxLength, required: required })),
+        React.createElement("textarea", __assign({ "data-testid": testId, minLength: minLength, disabled: disabled, ref: ref, className: classes, value: inputValue, placeholder: placeholder, rows: rows, maxLength: maxLength, required: required, onChange: handleChange, defaultValue: defaultValue }, others)),
         dynamicPlaceholder && React.createElement("label", null, label),
-        iconNameLeft && React.createElement(Icon, { name: iconNameLeft, size: 'small' }),
-        iconNameRight && React.createElement(Icon, { name: iconNameRight, size: 'small' }),
-        help && (React.createElement(Text, { className: helpClasses }, help)),
-        maxLength && React.createElement("div", { className: counterClasses }, "".concat(value.length, "/").concat(maxLength === null || maxLength === void 0 ? void 0 : maxLength.toString()))));
-};
+        iconName && React.createElement(Icon, { name: iconName, size: 'small' }),
+        statusIconName && React.createElement(Icon, { name: statusIconName, size: 'small' }),
+        help && (React.createElement(Text, { typo: typo, className: helpClasses }, help)),
+        maxLength && React.createElement("div", { className: counterClasses }, "".concat(inputValue === null || inputValue === void 0 ? void 0 : inputValue.length, "/").concat(maxLength === null || maxLength === void 0 ? void 0 : maxLength.toString()))));
+});
+Textarea.displayName = ComponentName.Textarea;
 export default Textarea;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGV4dGFyZWEuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RleHRhcmVhL1RleHRhcmVhLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsc0RBQXNEO0FBQ3RELE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUNsRCxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFaEUsT0FBTyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDcEMsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3hDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFM0M7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBdUJHO0FBQ0gsSUFBTSxRQUFRLEdBQUcsVUFBQyxFQW9CRjtJQW5CZCxJQUFBLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLE1BQU0sWUFBQSxFQUNOLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLFdBQVcsaUJBQUEsRUFDWCxZQUFZLGtCQUFBLEVBQ1osSUFBSSxVQUFBLEVBQ0osTUFBTSxZQUFBLEVBQ04sMEJBQXlCLEVBQXpCLGtCQUFrQixtQkFBRyxJQUFJLEtBQUEsRUFDekIsSUFBSSxVQUFBLEVBQ0osR0FBRyxTQUFBLEVBQ0gsS0FBSyxXQUFBLEVBQ0wsU0FBUyxlQUFBLEVBQ1QsU0FBUyxlQUFBLEVBQ1QsWUFBWSxrQkFBQSxFQUNaLGFBQWEsbUJBQUEsRUFDVixNQUFNLGNB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGV4dGFyZWEuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RleHRhcmVhL1RleHRhcmVhLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3hDLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ2hFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQTtBQUVwRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNDQUFzQyxDQUFBO0FBQ3RFLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFFN0M7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBZ0NHO0FBQ0gsSUFBTSxRQUFRLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDL0IsVUFDRSxFQXFCZ0IsRUFDaEIsR0FBbUM7SUFyQmpDLElBQUEsU0FBUyxlQUFBLEVBQ1QsTUFBTSxZQUFBLEVBQ04sUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsV0FBVyxpQkFBQSxFQUNYLFlBQVksa0JBQUEsRUFDWixJQUFJLFVBQUEsRUFDSixNQUFNLFlBQUEsRUFDTixjQUFjLG9CQUFBLEVBQ2QsMEJBQXlCLEVBQXpCLGtCQUFrQixtQkFBRyxJQUFJLEtBQUEsRUFDekIsSUFBSSxVQUFBLEVBQ0osS0FBSyxXQUFBLEVBQ0wsU0FBUyxlQUFBLEVBQ1QsU0FBUyxlQUFBLEVBQ1QsUUFB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

package/lib/components/textarea/Textarea.native.d.ts

@@ -1,4 +1,61 @@
 import React from 'react';
-import { TextareaNativeProps } from './TextareaProps';
-declare const _default: React.ForwardRefExoticComponent<Omit<TextareaNativeProps, "ref"> & React.RefAttributes<unknown>>;
-export default _default;
+import { TextInput } from 'react-native';
+import { InputAutoCapitalize, InputKeyboardAppearance, InputKeyboardType, InputTextContentType } from '../../components/input/InputEnum';
+import { TypographyColor } from '../../objects';
+/**
+ * Textarea Component
+ * @param disabled {boolean} Disabled textarea
+ * @param label {string} Label for textarea
+ * @param sample {string} Sample for textarea (below label)
+ * @param name {string} Textarea name
+ * @param onChange {Function} OnChange textarea Event
+ * @param placeholder {string} Placeholder textarea
+ * @param defaultValue {string} Default Value for textarea
+ * @param help {string} Help for textarea
+ * @param ref Pass a ref for textarea
+ * @param maxLength {number} Textarea max length
+ * @param rows {number} Textarea rows
+ * @param iconName {IconName | IconNameValues} display Icon
+ * @param statusIconName {IconName | IconNameValues} display status Icon
+ * @param testId {string} Test Id for Test Integration
+ * @param dynamicPlaceholder {boolean}
+ * @param status {InputStatus} Textarea with status - (SUCCESS|WARNING|ERROR|DEFAULT)
+ * @param keyboardStyle {InputKeyboardAppearance} Custom appearance for keyboard
+ * @param autoCapitalize {InputAutoCapitalize} Capitalize => NONE | SENTENCES | WORDS | CHARS
+ * @param autoCorrect {boolean} Auto correct sentence
+ * @param autoCompleteType {InputAutoCompleteType} Auto complete input type
+ * @param textContentType {InputTextContentType} Give the keyboard and the system information
+ * @param keyboardType {InputKeyboardType} Keybaord type
+ * @param value {string} Value for textarea
+ * @param customHeight {number} custom textarea height
+ * @param required {boolean} Required
+ */
+declare const Textarea: React.ForwardRefExoticComponent<import("../../objects").Accessibility & import("../../objects").Dev & {
+    placeholder?: string | undefined;
+    defaultValue?: string | undefined;
+    value?: string | undefined;
+    disabled?: boolean | undefined;
+    onChange?: import("../../components/textarea/TextareaProps").TextareaChangeEventHandler | undefined;
+    status?: "success" | "warning" | "error" | "default" | import("../../components/icon").IconStatus | import("../../components/input/InputEnum").InputStatus | "danger" | undefined;
+    help?: string | undefined;
+    name?: string | undefined;
+    className?: string | undefined;
+    keyboardStyle?: "default" | "dark" | "light" | InputKeyboardAppearance | undefined;
+    autoCapitalize?: "none" | "sentences" | "words" | "characters" | InputAutoCapitalize | undefined;
+    autoCorrect?: any;
+    autoCompleteType?: "name" | "off" | "tel" | "url" | "email" | "password" | import("../../components/input/InputEnum").InputAutoCompleteType | "additional-name" | "address-line1" | "address-line2" | "cc-csc" | "cc-exp" | "cc-exp-day" | "cc-exp-month" | "cc-exp-year" | "cc-number" | "country" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "postal-code" | "street-address" | "username" | "cc-family-name" | "cc-given-name" | "cc-middle-name" | "cc-name" | "cc-type" | "nickname" | "organization" | "organization-title" | "gender" | "name-family" | "name-given" | "name-middle" | "name-middle-initial" | "name-prefix" | "name-suffix" | "password-new" | "postal-address" | "postal-address-country" | "postal-address-extended" | "postal-address-extended-postal-code" | "postal-address-locality" | "postal-address-region" | "sms-otp" | "tel-country-code" | "tel-device" | "tel-national" | "username-new" | undefined;
+    textContentType?: "none" | "name" | "password" | "username" | "nickname" | InputTextContentType | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "location" | "middleName" | "namePrefix" | "nameSuffix" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "newPassword" | "oneTimeCode" | undefined;
+    keyboardType?: "default" | "url" | "numeric" | InputKeyboardType | "email-address" | "phone-pad" | "number-pad" | "decimal-pad" | "visible-password" | "ascii-capable" | "numbers-and-punctuation" | "name-phone-pad" | "twitter" | "web-search" | undefined;
+    minLength?: number | undefined;
+    maxLength?: number | undefined;
+    dynamicPlaceholder?: boolean | undefined;
+    rows?: number | undefined;
+    label?: string | undefined;
+    iconName?: import("../../components/icon").IconName | "tri-alert" | "tri-arrow-down" | "tri-arrow-left" | "tri-arrow-right" | "tri-arrow-up" | "tri-bell" | "tri-check-circle" | "tri-check" | "tri-exclamation-circle" | "tri-eye-slash" | "tri-eye" | "tri-infos-circle" | "tri-search" | "tri-times" | "tri-trash" | "tri-picto-faciliti" | "tri-picto-handicapzero" | "tri-picto-la-fibre" | "tri-picto-payment-americanexpress" | "tri-picto-payment-cb" | "tri-picto-payment-mastercard" | "tri-picto-payment-paypal" | "tri-picto-payment-visa" | undefined;
+    statusIconName?: import("../../components/icon").IconName | "tri-alert" | "tri-arrow-down" | "tri-arrow-left" | "tri-arrow-right" | "tri-arrow-up" | "tri-bell" | "tri-check-circle" | "tri-check" | "tri-exclamation-circle" | "tri-eye-slash" | "tri-eye" | "tri-infos-circle" | "tri-search" | "tri-times" | "tri-trash" | "tri-picto-faciliti" | "tri-picto-handicapzero" | "tri-picto-la-fibre" | "tri-picto-payment-americanexpress" | "tri-picto-payment-cb" | "tri-picto-payment-mastercard" | "tri-picto-payment-paypal" | "tri-picto-payment-visa" | undefined;
+    typo?: TypographyColor | "has-text-main" | "has-text-accent" | "has-text-info" | "has-text-success" | "has-text-warning" | "has-text-error" | "has-text-grey" | "has-text-white" | "has-text-disabled" | undefined;
+    customHeight?: number | undefined;
+    required?: boolean | undefined;
+    sample?: string | undefined;
+} & React.RefAttributes<TextInput>>;
+export default Textarea;

package/lib/components/textarea/Textarea.native.js

@@ -1,15 +1,15 @@
 import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { Animated, StyleSheet, Text, TextInput, View } from 'react-native';
 import { ComponentName } from '../../components/enumsComponentsName';
 import { Icon } from '../../components/icon';
 import { InputAutoCapitalize, InputKeyboardAppearance, InputKeyboardType, InputTextContentType, } from '../../components/input/InputEnum';
+import { Spacer, SpacerSize } from '../../components/spacer';
+import { Text as TrilogyText } from '../../components/text';
+import { TextLevels } from '../../components/text/TextEnum';
 import { grayscale, TypographyColor } from '../../objects';
 import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
 import { StatusState } from '../../objects/facets/Status';
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
-import { Animated, StyleSheet, Text, TextInput, View } from 'react-native';
-import { Spacer, SpacerSize } from '../spacer';
-import { Text as TrilogyText } from '../text';
-import { TextLevels } from '../text/TextEnum';
 /**
  * Textarea Component
  * @param disabled {boolean} Disabled textarea
@@ -38,10 +38,8 @@ import { TextLevels } from '../text/TextEnum';
  * @param customHeight {number} custom textarea height
  * @param required {boolean} Required
  */
-var Textarea = function (_a, 
-// eslint-disable-next-line
-ref) {
-    var defaultValue = _a.defaultValue, name = _a.name, sample = _a.sample, onChange = _a.onChange, disabled = _a.disabled, help = _a.help, placeholder = _a.placeholder, keyboardStyle = _a.keyboardStyle, autoCapitalize = _a.autoCapitalize, autoCorrect = _a.autoCorrect, textContentType = _a.textContentType, keyboardType = _a.keyboardType, status = _a.status, maxLength = _a.maxLength, _b = _a.dynamicPlaceholder, dynamicPlaceholder = _b === void 0 ? true : _b, label = _a.label, iconNameLeft = _a.iconNameLeft, iconNameRight = _a.iconNameRight, _c = _a.customHeight, customHeight = _c === void 0 ? 120 : _c, value = _a.value, required = _a.required, others = __rest(_a, ["defaultValue", "name", "sample", "onChange", "disabled", "help", "placeholder", "keyboardStyle", "autoCapitalize", "autoCorrect", "textContentType", "keyboardType", "status", "maxLength", "dynamicPlaceholder", "label", "iconNameLeft", "iconNameRight", "customHeight", "value", "required"]);
+var Textarea = forwardRef(function (_a, ref) {
+    var defaultValue = _a.defaultValue, name = _a.name, sample = _a.sample, onChange = _a.onChange, disabled = _a.disabled, help = _a.help, placeholder = _a.placeholder, keyboardStyle = _a.keyboardStyle, autoCapitalize = _a.autoCapitalize, autoCorrect = _a.autoCorrect, textContentType = _a.textContentType, keyboardType = _a.keyboardType, status = _a.status, maxLength = _a.maxLength, _b = _a.dynamicPlaceholder, dynamicPlaceholder = _b === void 0 ? true : _b, label = _a.label, iconName = _a.iconName, statusIconName = _a.statusIconName, _c = _a.customHeight, customHeight = _c === void 0 ? 120 : _c, value = _a.value, testId = _a.testId, required = _a.required, others = __rest(_a, ["defaultValue", "name", "sample", "onChange", "disabled", "help", "placeholder", "keyboardStyle", "autoCapitalize", "autoCorrect", "textContentType", "keyboardType", "status", "maxLength", "dynamicPlaceholder", "label", "iconName", "statusIconName", "customHeight", "value", "testId", "required"]);
     var _d = __read(useState(value || ''), 2), _value = _d[0], setValue = _d[1];
     var _e = __read(useState(false), 2), isFocus = _e[0], setIsFocus = _e[1];
     var _f = __read(useState(false), 2), displayDynamicLabel = _f[0], setDisplayDynamicLabel = _f[1];
@@ -67,7 +65,7 @@ ref) {
                 textareaColor,
             height: customHeight,
             justifyContent: 'flex-start',
-            paddingLeft: iconNameLeft ? 48 : 16,
+            paddingLeft: iconName ? 48 : 16,
             paddingRight: maxLength ? 48 : 16,
             paddingTop: dynamicPlaceholder && displayDynamicLabel ? 24 : 8,
             textAlignVertical: 'top',
@@ -97,7 +95,7 @@ ref) {
         dynamicLabel: {
             position: 'absolute',
             top: 2,
-            left: iconNameLeft ? 40 : 8,
+            left: iconName ? 40 : 8,
             fontSize: 12,
             color: grayscale(getColorStyle(TrilogyColor.FONT)),
             backgroundColor: 'transparent',
@@ -127,9 +125,9 @@ ref) {
         !dynamicPlaceholder && label && sample && (React.createElement(React.Fragment, null,
             React.createElement(TrilogyText, { level: TextLevels.THREE, typo: TypographyColor.TEXT_DISABLED }, sample),
             React.createElement(Spacer, { size: SpacerSize.THREE }))),
-        iconNameLeft && (React.createElement(Text, { style: styles.leftIcon },
-            React.createElement(Icon, { name: iconNameLeft, size: 'small' }))),
-        React.createElement(TextInput, __assign({ maxLength: maxLength, value: _value, defaultValue: defaultValue, editable: !disabled, multiline: true, keyboardAppearance: keyboardStyle || InputKeyboardAppearance.DEFAULT, autoCapitalize: autoCapitalize || InputAutoCapitalize.NONE, autoCorrect: autoCorrect || false, textContentType: textContentType || InputTextContentType.NONE, keyboardType: keyboardType || InputKeyboardType.DEFAULT, onChangeText: function (text) {
+        iconName && (React.createElement(Text, { style: styles.leftIcon },
+            React.createElement(Icon, { name: iconName, size: 'small', testId: "".concat(testId, "-icon") }))),
+        React.createElement(TextInput, __assign({ ref: ref, maxLength: maxLength, value: _value, defaultValue: defaultValue, editable: !disabled, multiline: true, keyboardAppearance: keyboardStyle || InputKeyboardAppearance.DEFAULT, autoCapitalize: autoCapitalize || InputAutoCapitalize.NONE, autoCorrect: autoCorrect || false, textContentType: textContentType || InputTextContentType.NONE, keyboardType: keyboardType || InputKeyboardType.DEFAULT, onChangeText: function (text) {
                 setDisplayDynamicLabel(text.length > 0);
                 setValue(text);
                 if (onChange) {
@@ -138,13 +136,13 @@ ref) {
                         textareaValue: text,
                     });
                 }
-            }, placeholder: placeholder, style: styles.textarea, onFocus: function () { return setIsFocus(true); }, onBlur: function () { return setIsFocus(false); } }, others, { ref: ref, placeholderTextColor: disabled ? getColorStyle(TrilogyColor.DISABLED) : grayscale(getColorStyle(TrilogyColor.FONT)) })),
-        iconNameRight && (React.createElement(Text, { style: styles.rightIcon },
-            React.createElement(Icon, { name: iconNameRight, size: 'small', color: status && status.toUpperCase() }))),
+            }, placeholder: placeholder, style: styles.textarea, onFocus: function () { return setIsFocus(true); }, onBlur: function () { return setIsFocus(false); } }, others, { placeholderTextColor: disabled ? getColorStyle(TrilogyColor.DISABLED) : grayscale(getColorStyle(TrilogyColor.FONT)) })),
+        statusIconName && (React.createElement(Text, { style: styles.rightIcon },
+            React.createElement(Icon, { name: statusIconName, size: 'small', color: status && status.toUpperCase(), testId: "".concat(testId, "-statusIcon") }))),
         displayDynamicLabel && dynamicPlaceholder && React.createElement(Text, { style: styles.dynamicLabel }, label),
-        maxLength && (React.createElement(Text, { style: styles.counter }, _value ? "".concat(_value === null || _value === void 0 ? void 0 : _value.length, " / ").concat(maxLength) : "0 / ".concat(maxLength))),
-        help && React.createElement(Text, { style: styles.help }, help)));
-};
+        maxLength && (React.createElement(Text, { style: styles.counter, testID: "".concat(testId, "-maxLength") }, _value ? "".concat(_value === null || _value === void 0 ? void 0 : _value.length, " / ").concat(maxLength) : "0 / ".concat(maxLength))),
+        help && (React.createElement(Text, { style: styles.help, testID: "".concat(testId, "-help") }, help))));
+});
 Textarea.displayName = ComponentName.Textarea;
-export default forwardRef(Textarea);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGV4dGFyZWEubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy90ZXh0YXJlYS9UZXh0YXJlYS5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBYSxNQUFNLG1CQUFtQixDQUFBO0FBQ25ELE9BQU8sRUFDTCxtQkFBbUIsRUFDbkIsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixvQkFBb0IsR0FDckIsTUFBTSw4QkFBOEIsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUN0RCxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQTtBQUNyRCxPQUFPLEtBQUssRUFBRSxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN0RSxPQUFPLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUMxRSxPQUFPLEVBQUUsTUFBTSxFQUFFLFVBQVUsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM5QyxPQUFPLEVBQUUsSUFBSSxJQUFJLFdBQVcsRUFBRSxNQUFNLFNBQVMsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sa0JBQWtCLENBQUE7QUFHN0M7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTJCRztBQUNILElBQU0sUUFBUSxHQUFHLFVBQ2YsRUF1QnNCO0FBQ3RCLDJCQUEyQjtBQUMzQixHQUFRO0lBeEJOLElBQUEsWUFBWSxrQkFBQSxFQUNaLElBQUksVUFBQSxF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
+export default Textarea;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGV4dGFyZWEubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy90ZXh0YXJlYS9UZXh0YXJlYS5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN0RSxPQUFPLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUUxRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBYSxNQUFNLG1CQUFtQixDQUFBO0FBQ25ELE9BQU8sRUFDTCxtQkFBbUIsRUFDbkIsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixvQkFBb0IsR0FDckIsTUFBTSw4QkFBOEIsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsTUFBTSxFQUFFLFVBQVUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQ3hELE9BQU8sRUFBRSxJQUFJLElBQUksV0FBVyxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDdkQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBRXZELE9BQU8sRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3RELE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDcEUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLHlCQUF5QixDQUFBO0FBRXJEOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0EyQkc7QUFDSCxJQUFNLFFBQVEsR0FBRyxVQUFVLENBQ3pCLFVBQ0UsRUF3QnNCLEVBQ3RCLEdBQXlCO0lBeEJ2QixJQUFBLFlBQVksa0JBQUEsRUFDWixJQUFJLFVB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

package/lib/components/textarea/TextareaProps.d.ts

@@ -1,15 +1,12 @@
 import { IconName, IconNameValues } from '../../components/icon/IconNameEnum';
-import { Referenceable, ReferenceableNative } from '../../objects/facets/Referenceable';
 import { IconStatus } from '../../components/icon';
 import { InputAutoCapitalize, InputAutoCapitalizeValues, InputAutoCompleteType, InputAutoCompleteTypeValues, InputKeyboardAppearance, InputKeyboardAppearanceValues, InputKeyboardType, InputKeyboardTypeValues, InputStatus, InputStatusValues, InputTextContentType, InputTextContentTypeValues } from '../../components/input/InputEnum';
-import { Accessibility, Dev } from '../../objects';
-import { TextInput } from 'react-native';
-import { CommonProps } from '../../objects/facets/CommonProps';
+import { Accessibility, Dev, TypographyColor, TypographyColorValues } from '../../objects';
 export interface TextareaChangeEvent {
     textareaName: string;
     textareaValue: string;
 }
-type TextareaChangeEventHandler = (event: TextareaChangeEvent) => void;
+export type TextareaChangeEventHandler = (event: TextareaChangeEvent) => void;
 type TextareaPropsWeb = Accessibility & Dev & {
     placeholder?: string;
     defaultValue?: string;
@@ -20,6 +17,7 @@ type TextareaPropsWeb = Accessibility & Dev & {
     help?: string;
     /** @deprecated */
     name?: string;
+    className?: string;
     keyboardStyle?: InputKeyboardAppearance | InputKeyboardAppearanceValues;
     autoCapitalize?: InputAutoCapitalize | InputAutoCapitalizeValues;
     autoCorrect?: any;
@@ -31,15 +29,16 @@ type TextareaPropsWeb = Accessibility & Dev & {
     dynamicPlaceholder?: boolean;
     rows?: number;
     label?: string;
-    iconNameLeft?: IconName | IconNameValues;
-    iconNameRight?: IconName | IconNameValues;
+    iconName?: IconName | IconNameValues;
+    statusIconName?: IconName | IconNameValues;
+    typo?: TypographyColor | TypographyColorValues;
     customHeight?: number;
     required?: boolean;
     sample?: string;
 };
-export type TextareaNativeProps = TextareaPropsWeb & ReferenceableNative<TextInput>;
+export type TextareaNativeProps = TextareaPropsWeb;
 /**
  * Textarea Interface
  */
-export type TextareaProps = TextareaPropsWeb & Referenceable<HTMLTextAreaElement> & CommonProps;
+export type TextareaProps = TextareaPropsWeb;
 export {};

package/lib/components/textarea/hook/useTextarea.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextareaChangeEventHandler } from '../../../components/textarea/TextareaProps';
+interface IParams {
+    inputValue?: string;
+    onChange?: TextareaChangeEventHandler;
+}
+export declare const useTextarea: ({ inputValue, onChange }: IParams) => {
+    inputValue: string;
+    handleChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+} | {
+    inputValue: string | undefined;
+    handleChange: undefined;
+};
+export {};