@trilogy-ds/react 0.0.1-beta.9 → 0.0.2-alpha-prompt

package/lib/components/textarea/Textarea.js

@@ -1,14 +1,19 @@
+import { __assign, __read, __rest } from "tslib";
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useState } from 'react';
-import clsx from 'clsx';
-import { Text } from '../text';
-import { has, is } from '../../services';
-import { Icon } from '../icon';
-import { hashClass } from '../../helpers';
+import { Icon } from '../../components/icon';
+import { Text, TextLevels, TextMarkup } from '../../components/text';
 import { useTrilogyContext } from '../../context';
+import { hashClass } from '../../helpers';
+import { TypographyColor } from '../../objects';
+import { has, is } from '../../services';
+import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+import { ComponentName } from '../enumsComponentsName';
 /**
  * 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
@@ -17,46 +22,48 @@ import { useTrilogyContext } from '../../context';
  * @param ref Pass a ref for textarea
  * @param maxLength {number} Textarea max length
  * @param rows {number} Textarea rows
+ * @param iconNameLeft {IconName | IconNameValues} display Icon on the left
+ * @param iconNameRight {IconName | IconNameValues} display Icon on the right
+ * @param status {InputStatus} Textarea with status - (SUCCESS|WARNING|ERROR|DEFAULT)
+ * @param required {boolean} Required
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
- * @param hovered {boolean} Hover mode
- * @param focused {boolean} Fucus mode
+ * @param className {string} Additional CSS Classes
  * @param minLength {number} Textarea min length
- * @param status {InputStatus} Textarea with status - (SUCCESS|WARNING|ERROR|DEFAULT)
  * - -------------------------- 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
  */
-const Textarea = ({ className, disabled, onChange, focused = true, placeholder, defaultValue, hovered = true, help, status, statusIconName, dynamicPlaceholder = true, rows, ref, label, maxLength, minLength, iconName, typo, testId, ...others }) => {
-    const [value, setValue] = useState(defaultValue || '');
-    const { styled } = useTrilogyContext();
-    useEffect(() => {
+var Textarea = React.forwardRef(function (_a, ref) {
+    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, rows = _a.rows, 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", "rows", "label", "maxLength", "minLength", "iconNameLeft", "iconNameRight"]);
+    var _b = __read(useState(defaultValue || ''), 2), value = _b[0], setValue = _b[1];
+    var styled = useTrilogyContext().styled;
+    useEffect(function () {
         setValue(defaultValue || '');
     }, [defaultValue]);
-    const wrapperClasses = hashClass(styled, clsx('textarea-wrapper', className, status && is(status)));
-    const classes = hashClass(styled, clsx('textarea', dynamicPlaceholder && has('dynamic-label'), iconName && has('icon')));
-    const helpClasses = clsx('help');
-    const counterClasses = hashClass(styled, clsx('counter', maxLength));
-    return (React.createElement("div", { className: wrapperClasses },
-        !dynamicPlaceholder && React.createElement("label", null, label),
-        React.createElement("textarea", { "data-testid": testId, minLength: minLength, disabled: disabled, ref: ref, ...others, className: classes, value: value, onChange: (e) => {
-                setValue(e.target.value);
-                if (onChange) {
-                    onChange({
-                        textareaName: e.target.name,
-                        textareaValue: e.target.value,
-                    });
-                }
-            }, placeholder: placeholder, rows: rows, maxLength: maxLength }),
-        dynamicPlaceholder && React.createElement("label", null, label),
-        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 }, `${value.length}/${maxLength === null || maxLength === void 0 ? void 0 : maxLength.toString()}`)));
-};
+    var wrapperClasses = hashClass(styled, clsx('field textarea-wrapper', className, status && is(status)));
+    var classes = hashClass(styled, clsx('textarea'));
+    var helpClasses = clsx('help', status && is(status));
+    var counterClasses = hashClass(styled, clsx('counter', maxLength));
+    var controlClasses = hashClass(styled, clsx('control', iconNameLeft && has('icons-left'), iconNameRight && has('icons-right')));
+    return (React.createElement("div", { id: id, className: wrapperClasses },
+        label && (React.createElement("label", { className: hashClass(styled, 'textarea-label'), htmlFor: id },
+            label,
+            ' ',
+            required && (React.createElement(Text, { markup: TextMarkup.SPAN, typo: TypographyColor.TEXT_ERROR }, "*")))),
+        sample && (React.createElement(Text, { className: 'input-sample', level: TextLevels.TWO, id: id }, sample)),
+        React.createElement("div", { className: controlClasses },
+            React.createElement("textarea", __assign({ ref: ref, minLength: minLength, disabled: disabled, 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 }, others)),
+            iconNameLeft && React.createElement(Icon, { name: iconNameLeft, size: 'small', className: 'icon-left' }),
+            iconNameRight && React.createElement(Icon, { name: iconNameRight, size: 'small', className: 'icon-right' }),
+            maxLength && React.createElement("div", { className: counterClasses }, "".concat(value.length, "/").concat(maxLength === null || maxLength === void 0 ? void 0 : maxLength.toString()))),
+        help && React.createElement(Text, { className: helpClasses }, help)));
+});
+Textarea.displayName = ComponentName.Textarea;
 export default Textarea;
-//# sourceMappingURL=Textarea.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGV4dGFyZWEuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RleHRhcmVhL1RleHRhcmVhLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsc0RBQXNEO0FBQ3RELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzNDLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3BDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDbEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBR3REOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FxQkc7QUFDSCxJQUFNLFFBQVEsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUMvQixVQUNFLEVBa0JDLEVBQ0QsR0FBRztJQWxCRCxJQUFBLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLE1BQU0sWUFBQSxFQUNOLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLFdBQVcsaUJBQUEsRUFDWCxZQUFZLGtCQUFBLEVBQ1osSUFBSSxVQUFBLEVBQ0osTUFBTSxZQUFBLEVBQ04sSUFBSSxVQUFBLEVBQ0osS0FBSyxXQUFBLEVBQ0wsU0FBUyxlQUFBLEVBQ1QsU0FBUyxlQUFBLEVBQ1QsWUFBWSxrQkFBQSxFQUNaLGFBQWEsbUJB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

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

@@ -1,4 +1,32 @@
 import React from 'react';
+import { TextInput } from 'react-native';
 import { TextareaNativeProps } from './TextareaProps';
-declare const _default: React.ForwardRefExoticComponent<Omit<TextareaNativeProps, "ref"> & React.RefAttributes<unknown>>;
-export default _default;
+/**
+ * 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 iconNameLeft {IconName | IconNameValues} display Icon on the left
+ * @param iconNameRight {IconName | IconNameValues} display Icon on the right
+ * @param testId {string} Test Id for Test Integration
+ * @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<Omit<TextareaNativeProps, "ref"> & React.RefAttributes<TextInput>>;
+export default Textarea;

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

@@ -1,70 +1,70 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
-import { Animated, StyleSheet, Text, TextInput, View } from 'react-native';
-import { InputAutoCapitalize, InputKeyboardAppearance, InputKeyboardType, InputTextContentType, } from '../input/InputEnum';
+import { __assign, __read, __rest } from "tslib";
+import { ComponentName } from '../../components/enumsComponentsName';
+import { Icon } from '../../components/icon';
+import { InputAutoCapitalize, InputKeyboardAppearance, InputKeyboardType, InputTextContentType, } from '../../components/input/InputEnum';
+import { TypographyColor } from '../../objects';
 import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
-import { AlertState, getAlertStyle } from '../../objects/facets/Alert';
-import { Icon } from '../icon';
-import { ComponentName } from '../enumsComponentsName';
+import { StatusState } from '../../objects/facets/Status';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Text, TextInput, View } from 'react-native';
+import { SpacerSize } from '../spacer';
+import { Text as TrilogyText } from '../text';
+import { TextLevels } from '../text/TextEnum';
 /**
- * Textarea Native Component
+ * 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 disabled {boolean} Disabled input
- * @param onChange {Function} OnChange Input Event
- * @param placeholder {string} Placeholder Input
- * @param defaultValue {string} Default Value for Input
- * @param help {string} Help for input
+ * @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 iconNameLeft {IconName | IconNameValues} display Icon on the left
+ * @param iconNameRight {IconName | IconNameValues} display Icon on the right
+ * @param testId {string} Test Id for Test Integration
+ * @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 status {InputStatus} Textarea with status - (SUCCESS|WARNING|ERROR|DEFAULT)
  * @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 maxLength {number} Textarea max length
+ * @param value {string} Value for textarea
+ * @param customHeight {number} custom textarea height
+ * @param required {boolean} Required
  */
-const Textarea = ({ defaultValue, name, onChange, disabled, help, placeholder, keyboardStyle, autoCapitalize, autoCorrect, textContentType, keyboardType, status, maxLength, dynamicPlaceholder = true, label, iconName, statusIconName, customHeight = 100, value, ...others }, 
-// eslint-disable-next-line
-ref) => {
-    const [_value, setValue] = useState(value || '');
-    const [isFocus, setIsFocus] = useState(false);
-    const [height, setHeight] = useState(customHeight);
-    const [displayDynamicLabel, setDisplayDynamicLabel] = useState(false);
-    const textareaColor = isFocus ? getColorStyle(TrilogyColor.SECONDARY) : getColorStyle(TrilogyColor.GREY);
-    const animation = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
-        if (displayDynamicLabel) {
-            Animated.timing(animation, {
-                toValue: 1,
-                duration: 5000,
-                useNativeDriver: false,
-            }).start();
-        }
-    }, [displayDynamicLabel, animation]);
-    const styles = StyleSheet.create({
+var Textarea = React.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, label = _a.label, iconNameLeft = _a.iconNameLeft, iconNameRight = _a.iconNameRight, _b = _a.customHeight, customHeight = _b === void 0 ? 120 : _b, value = _a.value, required = _a.required, others = __rest(_a, ["defaultValue", "name", "sample", "onChange", "disabled", "help", "placeholder", "keyboardStyle", "autoCapitalize", "autoCorrect", "textContentType", "keyboardType", "status", "maxLength", "label", "iconNameLeft", "iconNameRight", "customHeight", "value", "required"]);
+    var _c = __read(useState(value || ''), 2), _value = _c[0], setValue = _c[1];
+    var _d = __read(useState(false), 2), isFocus = _d[0], setIsFocus = _d[1];
+    var textareaColor = isFocus ? getColorStyle(TrilogyColor.MAIN) : getColorStyle(TrilogyColor.NEUTRAL);
+    var styles = StyleSheet.create({
         textarea: {
             borderWidth: isFocus ? 2 : 1,
             borderRadius: 3,
-            borderColor: (status && status === 'success' && getAlertStyle(AlertState.SUCCESS)) ||
-                (status && status === 'warning' && getAlertStyle(AlertState.WARNING)) ||
-                (status && status === 'error' && getAlertStyle(AlertState.ERROR)) ||
+            borderColor: (status && status === 'success' && getColorStyle(StatusState.SUCCESS)) ||
+                (status && status === 'warning' && getColorStyle(StatusState.WARNING)) ||
+                (status && status === 'error' && getColorStyle(StatusState.ERROR)) ||
                 (status && status === 'default' && textareaColor) ||
                 textareaColor,
-            height,
+            height: customHeight,
             justifyContent: 'flex-start',
-            paddingLeft: iconName ? 48 : 16,
-            paddingRight: maxLength ? 48 : 16,
-            paddingTop: dynamicPlaceholder && displayDynamicLabel ? 24 : 8,
+            paddingLeft: (iconNameLeft && isFocus && 47) || (iconNameLeft && 48) || 16,
+            paddingRight: (iconNameRight && 48) || 16,
+            paddingTop: isFocus ? 10 : 11,
             textAlignVertical: 'top',
-            color: getColorStyle(TrilogyColor.TERTIARY),
-            backgroundColor: disabled ? getColorStyle(TrilogyColor.GREY_DISABLED) : getColorStyle(TrilogyColor.WHITE),
-            /*  width: '',*/
+            color: getColorStyle(TrilogyColor.MAIN),
+            backgroundColor: disabled ? getColorStyle(TrilogyColor.DISABLED_FADE) : getColorStyle(TrilogyColor.BACKGROUND),
         },
         help: {
             fontSize: 12,
-            color: (status && status === 'success' && getAlertStyle(AlertState.SUCCESS)) ||
-                (status && status === 'warning' && getAlertStyle(AlertState.WARNING)) ||
-                (status && status === 'error' && getAlertStyle(AlertState.ERROR)) ||
+            color: (status && status === 'success' && getColorStyle(StatusState.SUCCESS)) ||
+                (status && status === 'warning' && getColorStyle(StatusState.WARNING)) ||
+                (status && status === 'error' && getColorStyle(StatusState.ERROR)) ||
                 (status && status === 'default' && textareaColor) ||
                 textareaColor,
             paddingLeft: 4,
@@ -72,39 +72,38 @@ ref) => {
         },
         counter: {
             fontSize: 10,
-            color: getColorStyle(TrilogyColor.TERTIARY),
+            color: getColorStyle(TrilogyColor.MAIN),
             position: 'absolute',
             bottom: help ? 24 : 8,
             right: 8,
-            backgroundColor: disabled ? getColorStyle(TrilogyColor.GREY_DISABLED) : 'white',
+            backgroundColor: disabled ? getColorStyle(TrilogyColor.DISABLED) : 'white',
             padding: 3,
         },
-        dynamicLabel: {
-            position: 'absolute',
-            top: 2,
-            left: iconName ? 40 : 8,
-            fontSize: 12,
-            color: getColorStyle(TrilogyColor.GREY_DARK),
-            backgroundColor: 'transparent',
-            padding: 8,
-            paddingBottom: 4,
-        },
         leftIcon: {
             position: 'absolute',
-            top: 16,
+            top: (label && sample && 67) || (label && !sample && 42) || 45,
             left: 16,
+            zIndex: 10,
         },
         rightIcon: {
             position: 'absolute',
-            top: dynamicPlaceholder ? 16 : 32,
+            top: (label && sample && 67) || (label && !sample && 42) || 45,
             right: 16,
+            zIndex: 10,
         },
     });
-    return (React.createElement(View, null,
-        !dynamicPlaceholder && React.createElement(Text, null, label),
-        iconName && React.createElement(Icon, { style: styles.leftIcon, name: iconName, size: 'small' }),
-        React.createElement(TextInput, { 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: (text) => {
-                setDisplayDynamicLabel(text.length > 0);
+    useEffect(function () {
+        setValue(value !== null && value !== void 0 ? value : "");
+    }, [value]);
+    return (React.createElement(View, { style: { gap: SpacerSize.THREE } },
+        label && (React.createElement(TrilogyText, { typo: TypographyColor.TEXT_MAIN },
+            label,
+            " ",
+            label && required && React.createElement(TrilogyText, { typo: TypographyColor.TEXT_ERROR }, "*"))),
+        sample && (React.createElement(TrilogyText, { level: TextLevels.THREE, typo: TypographyColor.TEXT_MAIN }, sample)),
+        iconNameLeft && (React.createElement(Text, { style: styles.leftIcon },
+            React.createElement(Icon, { name: iconNameLeft, size: 'small' }))),
+        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) {
                 setValue(text);
                 if (onChange) {
                     onChange({
@@ -112,13 +111,12 @@ ref) => {
                         textareaValue: text,
                     });
                 }
-            }, placeholder: placeholder, style: styles.textarea, onFocus: () => setIsFocus(true), onBlur: () => setIsFocus(false), ...others, ref: ref, onContentSizeChange: (event) => _value.length > 0 && setHeight(event.nativeEvent.contentSize.height + 33) }),
-        statusIconName && (React.createElement(Text, { style: styles.rightIcon },
-            React.createElement(Icon, { name: statusIconName, size: 'small', color: status && status.toUpperCase() }))),
-        displayDynamicLabel && dynamicPlaceholder && React.createElement(Text, { style: styles.dynamicLabel }, label),
-        maxLength && (React.createElement(Text, { style: styles.counter }, value ? `${value === null || value === void 0 ? void 0 : value.length} / ${maxLength}` : `0 / ${maxLength}`)),
+            }, placeholder: placeholder, style: styles.textarea, onFocus: function () { return setIsFocus(true); }, onBlur: function () { return setIsFocus(false); }, placeholderTextColor: disabled ? getColorStyle(TrilogyColor.DISABLED) : getColorStyle(TrilogyColor.FONT_PLACEHOLDER) }, others)),
+        iconNameRight && (React.createElement(Text, { style: styles.rightIcon },
+            React.createElement(Icon, { name: iconNameRight, size: 'small', color: status && status.toUpperCase() }))),
+        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)));
-};
+});
 Textarea.displayName = ComponentName.Textarea;
-export default forwardRef(Textarea);
-//# sourceMappingURL=Textarea.native.js.map
+export default Textarea;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGV4dGFyZWEubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy90ZXh0YXJlYS9UZXh0YXJlYS5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBYSxNQUFNLG1CQUFtQixDQUFBO0FBQ25ELE9BQU8sRUFDTCxtQkFBbUIsRUFDbkIsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixvQkFBb0IsR0FDckIsTUFBTSw4QkFBOEIsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzNDLE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDcEUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLHlCQUF5QixDQUFBO0FBQ3JELE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUNsRCxPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDdEMsT0FBTyxFQUFFLElBQUksSUFBSSxXQUFXLEVBQUUsTUFBTSxTQUFTLENBQUE7QUFDN0MsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGtCQUFrQixDQUFBO0FBRzdDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTBCRztBQUNILElBQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQy9CLFVBQ0UsRUFzQkMsRUFDRCxHQUFHO0lBdEJELElBQUEsWUFBWSxrQkFBQSxFQUNaLElBQUksVUFBQSxFQUNKLE1BQU0sWUFBQSxFQUNOLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxF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

package/lib/components/textarea/TextareaChangeEventDefaults.js

@@ -0,0 +1,10 @@
+export default {
+  "textareaName": {
+    "type": "string",
+    "values": []
+  },
+  "textareaValue": {
+    "type": "string",
+    "values": []
+  }
+};

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

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

package/lib/components/textarea/TextareaProps.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=TextareaProps.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGV4dGFyZWFQcm9wcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvdGV4dGFyZWEvVGV4dGFyZWFQcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=

package/lib/components/textarea/index.js

@@ -1,3 +1,3 @@
 import Textarea from './Textarea';
 export { Textarea };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RleHRhcmVhL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sUUFBUSxNQUFNLFlBQVksQ0FBQTtBQUVqQyxPQUFPLEVBQUUsUUFBUSxFQUFFLENBQUEifQ==

package/lib/components/timeline/Timeline.d.ts

@@ -1,12 +1,11 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TimelineProps } from './TimelineProps';
 /**
  * Timeline Component
  * @param notifications {boolean} Timeline notification rendering
- * @param children {ReactNode}
  * - --------------- WEB PROPERTIES ----------------------------------
  * @param horizontal {boolean} timeline horizontal
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  */
-declare const Timeline: ({ className, notifications, horizontal, ...others }: TimelineProps) => JSX.Element;
+declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLDivElement>>;
 export default Timeline;

package/lib/components/timeline/Timeline.js

@@ -1,21 +1,23 @@
-import React from 'react';
+import { __assign, __rest } from "tslib";
+import * as React from 'react';
 import { hashClass } from '../../helpers';
 import clsx from 'clsx';
 import { useTrilogyContext } from '../../context';
 import { is } from '../../services';
+import { ComponentName } from '../enumsComponentsName';
 /**
  * Timeline Component
  * @param notifications {boolean} Timeline notification rendering
- * @param children {ReactNode}
  * - --------------- WEB PROPERTIES ----------------------------------
  * @param horizontal {boolean} timeline horizontal
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  */
-const Timeline = ({ className, notifications, horizontal, ...others }) => {
-    const { styled } = useTrilogyContext();
-    const timelineRef = React.useRef(null);
-    const classes = hashClass(styled, clsx('timeline', notifications && notifications, horizontal && is('horizontal'), className));
-    return React.createElement("div", { ref: timelineRef, className: classes, ...others });
-};
+var Timeline = React.forwardRef(function (_a, ref) {
+    var className = _a.className, id = _a.id, horizontal = _a.horizontal, others = __rest(_a, ["className", "id", "horizontal"]);
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('timeline', horizontal && is('horizontal'), className));
+    return React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others));
+});
+Timeline.displayName = ComponentName.Timeline;
 export default Timeline;
-//# sourceMappingURL=Timeline.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RpbWVsaW5lL1RpbWVsaW5lLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDL0IsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBRXREOzs7Ozs7R0FNRztBQUNILElBQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQTZCLFVBQUMsRUFBd0MsRUFBRSxHQUFHO0lBQTNDLElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFLLE1BQU0sY0FBdEMsaUNBQXdDLENBQUY7SUFDM0YsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsVUFBVSxFQUFFLFVBQVUsSUFBSSxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUU5RixPQUFPLHNDQUFLLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU0sRUFBSSxDQUFBO0FBQ2xFLENBQUMsQ0FBQyxDQUFBO0FBRUYsUUFBUSxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsUUFBUSxDQUFBO0FBQzdDLGVBQWUsUUFBUSxDQUFBIn0=

package/lib/components/timeline/Timeline.native.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { TimelineProps } from './TimelineProps';
-import { ComponentName } from '../enumsComponentsName';
+import * as React from "react";
+import { View } from "react-native";
+import { TimelineProps } from "./TimelineProps";
 interface IContext {
     height: number;
     setHeight: React.Dispatch<React.SetStateAction<number>>;
@@ -11,8 +11,5 @@ export declare const TimelineHeightContext: React.Context<IContext>;
  * @param children {ReactNode} Text child
 
  */
-declare const Timeline: {
-    ({ children }: TimelineProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<View>>;
 export default Timeline;

package/lib/components/timeline/Timeline.native.js

@@ -1,28 +1,30 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { ComponentName } from '../enumsComponentsName';
-export const TimelineHeightContext = React.createContext({
+import { __read } from "tslib";
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import { ComponentName } from "../../components/enumsComponentsName";
+export var TimelineHeightContext = React.createContext({
     height: 0,
-    setHeight: () => undefined,
+    setHeight: function () { return undefined; },
 });
 /**
  * Timeline Native Component
  * @param children {ReactNode} Text child
 
  */
-const Timeline = ({ children }) => {
-    const styles = StyleSheet.create({
+var Timeline = React.forwardRef(function (_a, ref) {
+    var children = _a.children;
+    var styles = StyleSheet.create({
         container: {
-            flexDirection: 'column',
+            flexDirection: "column",
         },
     });
-    const [height, setHeight] = React.useState(0);
+    var _b = __read(React.useState(0), 2), height = _b[0], setHeight = _b[1];
     return (React.createElement(TimelineHeightContext.Provider, { value: {
-            height,
-            setHeight,
+            height: height,
+            setHeight: setHeight,
         } },
-        React.createElement(View, { style: styles.container }, children)));
-};
+        React.createElement(View, { ref: ref, style: styles.container }, children)));
+});
 Timeline.displayName = ComponentName.Timeline;
 export default Timeline;
-//# sourceMappingURL=Timeline.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmUubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy90aW1lbGluZS9UaW1lbGluZS5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUUvQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFPaEUsTUFBTSxDQUFDLElBQU0scUJBQXFCLEdBQUcsS0FBSyxDQUFDLGFBQWEsQ0FBVztJQUNqRSxNQUFNLEVBQUUsQ0FBQztJQUNULFNBQVMsRUFBRSxjQUFNLE9BQUEsU0FBUyxFQUFULENBQVM7Q0FDM0IsQ0FBQyxDQUFBO0FBRUY7Ozs7R0FJRztBQUNILElBQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQW1DLFVBQUMsRUFBWSxFQUFFLEdBQUc7UUFBZixRQUFRLGNBQUE7SUFDN0UsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixTQUFTLEVBQUU7WUFDVCxhQUFhLEVBQUUsUUFBUTtTQUN4QjtLQUNGLENBQUMsQ0FBQTtJQUVJLElBQUEsS0FBQSxPQUFzQixLQUFLLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFBLEVBQXRDLE1BQU0sUUFBQSxFQUFFLFNBQVMsUUFBcUIsQ0FBQTtJQUU3QyxPQUFPLENBQ0wsb0JBQUMscUJBQXFCLENBQUMsUUFBUSxJQUM3QixLQUFLLEVBQUU7WUFDTCxNQUFNLFFBQUE7WUFDTixTQUFTLFdBQUE7U0FDVjtRQUVELG9CQUFDLElBQUksSUFBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxNQUFNLENBQUMsU0FBUyxJQUFHLFFBQVEsQ0FBUSxDQUMzQixDQUNsQyxDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixRQUFRLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxRQUFRLENBQUE7QUFFN0MsZUFBZSxRQUFRLENBQUEifQ==

package/lib/components/timeline/TimelineProps.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { View } from 'react-native';
+import { CommonProps } from '../../objects/facets/CommonProps';
 /**
  * Timeline Interface
  */
-export interface TimelineProps {
-    className?: string;
+export interface TimelineProps extends CommonProps {
     children: React.ReactNode;
-    notifications?: boolean;
     horizontal?: boolean;
 }
+export type TimelineRef = HTMLDivElement;
+export type TimelineNativeRef = View;

package/lib/components/timeline/TimelineProps.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=TimelineProps.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmVQcm9wcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvdGltZWxpbmUvVGltZWxpbmVQcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=