@trilogy-ds/react 0.0.1-beta-143 → 0.0.1-beta-sc-1

package/lib/components/{stepper/step/StepPropsDefaults.js → modal/title/ModalTitlePropsDefaults.js}

@@ -1,29 +1,12 @@
 export default {
-  "active": {
-    "type": "boolean",
-    "values": [
-      "undefined",
-      "false",
-      "true"
-    ]
-  },
-  "current": {
-    "type": "boolean",
-    "values": [
-      "undefined",
-      "false",
-      "true"
-    ]
-  },
-  "done": {
-    "type": "boolean",
+  "children": {
+    "type": "string",
     "values": [
       "undefined",
-      "false",
-      "true"
+      "string"
     ]
   },
-  "label": {
+  "className": {
     "type": "string",
     "values": [
       "undefined",
@@ -82,26 +65,28 @@ export default {
       "tri-picto-payment-visa"
     ]
   },
-  "error": {
-    "type": "boolean",
-    "values": [
-      "undefined",
-      "false",
-      "true"
-    ]
-  },
-  "id": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "className": {
-    "type": "string",
+  "iconColor": {
+    "type": "enum",
     "values": [
       "undefined",
-      "string"
+      "SUCCESS",
+      "INFO",
+      "WARNING",
+      "ERROR",
+      "WHITE",
+      "MAIN",
+      "ACCENT",
+      "NEUTRAL",
+      "SUCCESS",
+      "ERROR",
+      "INFO",
+      "WARNING",
+      "MAIN",
+      "BACKGROUND",
+      "ACCENT",
+      "NEUTRAL",
+      "WHITE",
+      "BACKGROUND"
     ]
   }
 };

package/lib/components/otp/Otp.d.ts

@@ -1,19 +1,4 @@
-/// <reference types="react" />
-import { OtpProps } from './OtpProps';
-/**
- * OTP Code Component
- * @param value {string} Code Text Input
- * @param length {number} Code Size Number
- * @param disabled {boolean} Disabled OTP Code Input
- * @param error {boolean} OTP Code Input has error | Display error icon
- * @param onCompleted {Function} Return code input string
- * @param onChange {Function} onChange Input return current code
- * @param onFocus {Function} onFocus return if focused opt
- * @param autoFocus {boolean} Should auto focus otp
- * @param label {string} Label for OTP
- * @param help {string} error message to display
- * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal css classes
- */
-declare const Otp: ({ className, id, value, length, disabled, error, onCompleted, onChange, onFocus, label, help, autoFocus, ...others }: OtpProps) => JSX.Element;
-export default Otp;
+import React from 'react';
+import { OtpProps } from '../../components/otp/OtpProps';
+declare const _default: React.ForwardRefExoticComponent<OtpProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/lib/components/otp/Otp.js

@@ -1,73 +1,15 @@
-import { __assign, __read, __rest } from "tslib";
-import { Text, TextMarkup } from '../../components/text';
-import React, { useEffect, useRef, useState } from 'react';
-import { TypographyColor } from '../../objects/Typography';
+import { __assign, __rest } from "tslib";
 import clsx from 'clsx';
+import React from 'react';
+import { useOtp } from '../../components/otp/hook/useOtp';
+import { Text, TextMarkup } from '../../components/text';
 import { hashClass } from '../../helpers/hashClassesHelpers';
+import { TypographyColor } from '../../objects/Typography';
 import { is } from '../../services/classify';
-import { useTrilogyContext } from '../../context/index';
-var stringToCode = function (str, codeSize) {
-    if (!str)
-        return new Array(codeSize).fill(null);
-    return str.split('').map(function (char) { return (char === '' ? null : Number(char)); });
-};
-var codeToString = function (code) {
-    return code.map(function (char) { return (char === null ? '_' : char); }).join('');
-};
-var isCompleted = function (myCode) {
-    return myCode.every(function (code) { return code !== null; });
-};
-var focusToNextInput = function (target, value) {
-    var nextElementSibling = target.nextElementSibling;
-    if (nextElementSibling) {
-        if (value)
-            nextElementSibling.value = value;
-        if (target.value.length)
-            nextElementSibling.focus();
-    }
-    else {
-        target.focus();
-    }
-};
-var focusToPrevInput = function (target) {
-    var previousElementSibling = target.previousElementSibling;
-    if (previousElementSibling) {
-        previousElementSibling.focus();
-    }
-    else {
-        target.focus();
-    }
-};
-var updateCodeInput = function (value, index, code) {
-    var numberValue = Number(value);
-    if (isNaN(numberValue) || value.length < 1) {
-        return code;
-    }
-    var newCodeInput = code.map(function (code, idx) {
-        return idx === index ? Number(value.slice(0, 1)) : code;
-    });
-    return updateCodeInput(value.slice(1), index + 1, newCodeInput);
-};
-var inputOnKeyUp = function (e) {
-    var key = e.key;
-    var target = e.target;
-    if (key === 'ArrowRight' || key === 'ArrowDown') {
-        return focusToNextInput(target);
-    }
-    if (key === 'ArrowLeft' || key === 'ArrowUp') {
-        return focusToPrevInput(target);
-    }
-    if (key === 'Backspace') {
-        return target.value === '' && focusToPrevInput(target);
-    }
-    if (key >= '0' && key <= '9') {
-        focusToNextInput(target);
-    }
-};
 /**
  * OTP Code Component
- * @param value {string} Code Text Input
- * @param length {number} Code Size Number
+ * @param code {string} Code Text Input
+ * @param codeSize {number} Code Size Number
  * @param disabled {boolean} Disabled OTP Code Input
  * @param error {boolean} OTP Code Input has error | Display error icon
  * @param onCompleted {Function} Return code input string
@@ -75,53 +17,27 @@ var inputOnKeyUp = function (e) {
  * @param onFocus {Function} onFocus return if focused opt
  * @param autoFocus {boolean} Should auto focus otp
  * @param label {string} Label for OTP
- * @param help {string} error message to display
+ * @param errorMessage {string} error message to display
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal css classes
  */
-var Otp = function (_a) {
-    var className = _a.className, id = _a.id, value = _a.value, _b = _a.length, length = _b === void 0 ? 6 : _b, disabled = _a.disabled, error = _a.error, onCompleted = _a.onCompleted, onChange = _a.onChange, onFocus = _a.onFocus, label = _a.label, help = _a.help, autoFocus = _a.autoFocus, others = __rest(_a, ["className", "id", "value", "length", "disabled", "error", "onCompleted", "onChange", "onFocus", "label", "help", "autoFocus"]);
-    var _c = __read(useState(stringToCode(value, length) || new Array(length).fill(null)), 2), codeInput = _c[0], setCodeInput = _c[1];
-    var hasChanged = useRef(false);
-    var styled = useTrilogyContext().styled;
-    var classes = hashClass(styled, clsx('otp-list', error && is('error'), className));
-    useEffect(function () {
-        if (!disabled) {
-            isCompleted(codeInput) && (onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(codeToString(codeInput)));
-        }
-    }, [length, codeInput, onCompleted, disabled]);
-    useEffect(function () {
-        hasChanged.current = codeInput.find(function (code) { return code !== null; }) !== undefined;
-        if (hasChanged.current) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(codeToString(codeInput));
-        }
-    }, [codeInput]);
-    var inputOnChange = function (e, idx) {
-        var target = e.target;
-        var targetValue = target.value.trim();
-        if (targetValue.length > 0) {
-            setCodeInput(updateCodeInput(targetValue, idx, codeInput));
-        }
-        else {
-            setCodeInput(codeInput.map(function (code, index) {
-                return index === idx ? null : code;
-            }));
-        }
-    };
-    var inputOnFocus = function (e) {
-        var target = e.target;
-        target.setSelectionRange(0, target.value.length);
-    };
+var Otp = function (_a, ref) {
+    var className = _a.className, code = _a.code, _b = _a.codeSize, codeSize = _b === void 0 ? 6 : _b, disabled = _a.disabled, error = _a.error, onCompleted = _a.onCompleted, onChange = _a.onChange, onFocus = _a.onFocus, label = _a.label, errorMessage = _a.errorMessage, autoFocus = _a.autoFocus, others = __rest(_a, ["className", "code", "codeSize", "disabled", "error", "onCompleted", "onChange", "onFocus", "label", "errorMessage", "autoFocus"]);
+    var classes = hashClass(clsx('otp-list', error && is('error'), className));
+    var _c = useOtp({
+        code: code,
+        codeSize: codeSize,
+        disabled: disabled,
+        onCompleted: onCompleted,
+        onChange: onChange,
+        onFocus: onFocus,
+    }), codeInput = _c.codeInput, inputOnFocus = _c.inputOnFocus, inputOnKeyUp = _c.inputOnKeyUp, inputOnChange = _c.inputOnChange, handleClick = _c.handleClick;
     return (React.createElement(React.Fragment, null,
         label && (React.createElement(Text, { markup: TextMarkup.P, typo: (disabled && TypographyColor.TEXT_NEUTRAL) ||
                 (error && TypographyColor.TEXT_ERROR) ||
                 TypographyColor.TEXT_MAIN }, label)),
-        React.createElement("div", { id: id, className: classes, onClick: function () {
-                if (!disabled) {
-                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(true);
-                }
-            } }, codeInput.map(function (digit, idx) { return (React.createElement("input", __assign({ "aria-disabled": disabled, tabIndex: 0, key: idx, type: 'text', inputMode: 'numeric', autoComplete: 'one-time-code', autoFocus: idx === 0 && autoFocus, pattern: '\\d{1}', maxLength: length, className: 'otp', value: "".concat(digit !== null && digit !== void 0 ? digit : ''), onKeyUp: inputOnKeyUp, onFocus: inputOnFocus, onChange: function (e) { return inputOnChange(e, idx); }, disabled: disabled }, others))); })),
-        help && (React.createElement(Text, { className: hashClass(styled, clsx('help')), markup: TextMarkup.P, typo: (error && TypographyColor.TEXT_ERROR) || TypographyColor.TEXT_MAIN }, help))));
+        React.createElement("div", { "data-testid": 'otp-input', className: classes, onClick: handleClick }, codeInput.map(function (digit, idx) { return (React.createElement("input", __assign({ ref: ref, "aria-disabled": disabled, tabIndex: 0, key: idx, type: 'text', inputMode: 'numeric', autoComplete: 'one-time-code', autoFocus: idx === 0 && autoFocus, pattern: '\\d{1}', maxLength: codeSize, className: 'otp', value: "".concat(digit !== null && digit !== void 0 ? digit : ''), onKeyUp: inputOnKeyUp, onFocus: inputOnFocus, onChange: inputOnChange ? function (e) { return inputOnChange(e, idx); } : undefined, disabled: disabled }, others))); })),
+        errorMessage && (React.createElement(Text, { className: hashClass(clsx('otp-error-message')), markup: TextMarkup.P, typo: (error && TypographyColor.TEXT_ERROR) || TypographyColor.TEXT_MAIN }, errorMessage))));
 };
-export default Otp;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9vdHAvT3RwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBRTFELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUN0RCxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUluRCxJQUFNLFlBQVksR0FBRyxVQUFDLEdBQXVCLEVBQUUsUUFBZ0I7SUFDN0QsSUFBSSxDQUFDLEdBQUc7UUFBRSxPQUFPLElBQUksS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUMvQyxPQUFPLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLFVBQUMsSUFBSSxJQUFLLE9BQUEsQ0FBQyxJQUFJLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQyxFQUFuQyxDQUFtQyxDQUFDLENBQUE7QUFDekUsQ0FBQyxDQUFBO0FBRUQsSUFBTSxZQUFZLEdBQUcsVUFBQyxJQUFvQjtJQUN4QyxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsVUFBQyxJQUFJLElBQUssT0FBQSxDQUFDLElBQUksS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENB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
+export default React.forwardRef(Otp);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9vdHAvT3RwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6QixPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFFckQsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ3RELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUV4Qzs7Ozs7Ozs7Ozs7Ozs7R0FjRztBQUNILElBQU0sR0FBRyxHQUFHLFVBQ1YsRUFhVyxFQUNYLEdBQWdDO0lBYjlCLElBQUEsU0FBUyxlQUFBLEVBQ1QsSUFBSSxVQUFBLEVBQ0osZ0JBQVksRUFBWixRQUFRLG1CQUFHLENBQUMsS0FBQSxFQUNaLFFBQVEsY0FBQSxFQUNSLEtBQUssV0FBQSxFQUNMLFdBQVcsaUJBQUEsRUFDWCxRQUFRLGNBQUEsRUFDUixPQUFPLGFBQUEsRUFDUCxLQUFLLFdBQUEsRUFDTCxZQUFZLGtCQUFBLEVBQ1osU0FBUyxlQUFBLEVBQ04sTUFBTSxjQVpYLGtJQWFDLENBRFU7SUFJWCxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsRUFBRSxLQUFLLElBQUksRUFBRSxDQUFDLE9BQU8sQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFFdEUsSUFBQSxLQUF3RSxNQUFNLENBQUM7UUFDbkYsSUFBSSxNQUFBO1FBQ0osUUFBUSxVQUFBO1FBQ1IsUUFBUSxVQUFBO1FBQ1IsV0FBVyxhQUFBO1FBQ1gsUUFBUSxVQUFBO1FBQ1IsT0FBTyxTQUFBO0tBQ1IsQ0FBQyxFQVBNLFNBQVMsZUFBQSxFQUFFLFlBQVksa0JBQUEsRUFBRSxZQUFZLGtCQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFFLFdBQVcsaUJBT3ZFLENBQUE7SUFFRixPQUFPLENBQ0w7UUFDRyxLQUFLLElBQUksQ0FDUixvQkFBQyxJQUFJLElBQ0gsTUFBTSxFQUFFLFVBQVUsQ0FBQyxDQUFDLEVBQ3BCLElBQUksRUFDRixDQUFDLFFBQVEsSUFBSSxlQUFlLENBQUMsWUFBWSxDQUFDO2dCQUMxQyxDQUFDLEtBQUssSUFBSSxlQUFlLENBQUMsVUFBVSxDQUFDO2dCQUNyQyxlQUFlLENBQUMsU0FBUyxJQUcxQixLQUFLLENBQ0QsQ0FDUjtRQUNELDRDQUFrQixXQUFXLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsV0FBVyxJQUNwRSxTQUFTLENBQUMsR0FBRyxDQUFDLFVBQUMsS0FBSyxFQUFFLEdBQUcsSUFBSyxPQUFBLENBQzdCLHdDQUNFLEdBQUcsRUFBRSxHQUFHLG1CQUNPLFFBQVEsRUFDdkIsUUFBUSxFQUFFLENBQUMsRUFDWCxHQUFHLEVBQUUsR0FBRyxFQUNSLElBQUksRUFBQyxNQUFNLEVBQ1gsU0FBUyxFQUFDLFNBQVMsRUFDbkIsWUFBWSxFQUFDLGVBQWUsRUFDNUIsU0FBUyxFQUFFLEdBQUcsS0FBSyxDQUFDLElBQUksU0FBUyxFQUNqQyxPQUFPLEVBQUMsUUFBTyxFQUNmLFNBQVMsRUFBRSxRQUFRLEVBQ25CLFNBQVMsRUFBQyxLQUFLLEVBQ2YsS0FBSyxFQUFFLFVBQUcsS0FBSyxhQUFMLEtBQUssY0FBTCxLQUFLLEdBQUksRUFBRSxDQUFFLEVBQ3ZCLE9BQU8sRUFBRSxZQUFZLEVBQ3JCLE9BQU8sRUFBRSxZQUFZLEVBQ3JCLFFBQVEsRUFBRSxhQUFhLENBQUMsQ0FBQyxDQUFDLFVBQUMsQ0FBQyxJQUFLLE9BQUEsYUFBYSxDQUFDLENBQUMsRUFBRSxHQUFHLENBQUMsRUFBckIsQ0FBcUIsQ0FBQyxDQUFDLENBQUMsU0FBUyxFQUNsRSxRQUFRLEVBQUUsUUFBUSxJQUNkLE1BQU0sRUFDVixDQUNILEVBcEI4QixDQW9COUIsQ0FBQyxDQUNFO1FBQ0wsWUFBWSxJQUFJLENBQ2Ysb0JBQUMsSUFBSSxJQUNILFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLENBQUMsRUFDL0MsTUFBTSxFQUFFLFVBQVUsQ0FBQyxDQUFDLEVBQ3BCLElBQUksRUFBRSxDQUFDLEtBQUssSUFBSSxlQUFlLENBQUMsVUFBVSxDQUFDLElBQUksZUFBZSxDQUFDLFNBQVMsSUFFdkUsWUFBWSxDQUNSLENBQ1IsQ0FDQSxDQUNKLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLEtBQUssQ0FBQyxVQUFVLENBQUMsR0FBRyxDQUFDLENBQUEifQ==

package/lib/components/otp/Otp.native.d.ts

@@ -1,20 +1,5 @@
-/// <reference types="react" />
-import { OtpProps } from "./OtpProps";
-import { ComponentName } from "../../components/enumsComponentsName";
-/**
- * OTP Code Component
- * @param value {string} Code Text Input
- * @param length {number} Code Size Number
- * @param disabled {boolean} Disabled OTP Code Input
- * @param error {boolean} OTP Code Input has error | Display error icon
- * @param onCompleted {Function} Return code input string
- * @param onFocus {Function} onFocus return if focused opt
- * @param activated {boolean} Activated OTP
- * @param onChange {Function} onChange Input return current code
- * @param label {string} Label for OTP
- */
-declare const Otp: {
-    ({ value, length, disabled, error, onCompleted, onFocus, activated, onChange, label, ...others }: OtpProps): JSX.Element;
-    displayName: ComponentName;
-};
-export default Otp;
+import React from 'react';
+import { SafeAreaView } from 'react-native';
+import { OtpProps } from '../../components/otp/OtpProps';
+declare const _default: React.ForwardRefExoticComponent<OtpProps & React.RefAttributes<SafeAreaView>>;
+export default _default;

package/lib/components/otp/Otp.native.js

@@ -1,16 +1,16 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
-import React, { useEffect, useRef, useState } from "react";
-import { Pressable, SafeAreaView, StyleSheet, TextInput, View, } from "react-native";
-import { getColorStyle, TrilogyColor } from "../../objects/facets/Color";
-import { Icon, IconColor, IconName, IconSize } from "../../components/icon";
-import { Title, TitleLevels } from "../../components/title";
-import { Text, TextLevels } from "../../components/text";
-import { TypographyAlign } from "../../objects";
-import { ComponentName } from "../../components/enumsComponentsName";
+import React, { useEffect, useRef, useState } from 'react';
+import { Pressable, SafeAreaView, StyleSheet, TextInput, View } from 'react-native';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { Icon, IconColor, IconName, IconSize } from '../../components/icon';
+import { Text, TextLevels } from '../../components/text';
+import { Title, TitleLevels } from '../../components/title';
+import { TypographyAlign } from '../../objects';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
 /**
  * OTP Code Component
- * @param value {string} Code Text Input
- * @param length {number} Code Size Number
+ * @param code {string} Code Text Input
+ * @param codeSize {number} Code Size Number
  * @param disabled {boolean} Disabled OTP Code Input
  * @param error {boolean} OTP Code Input has error | Display error icon
  * @param onCompleted {Function} Return code input string
@@ -18,12 +18,13 @@ import { ComponentName } from "../../components/enumsComponentsName";
  * @param activated {boolean} Activated OTP
  * @param onChange {Function} onChange Input return current code
  * @param label {string} Label for OTP
+ * @param errorMessage {string} error message to display
  */
-var Otp = function (_a) {
-    var value = _a.value, _b = _a.length, length = _b === void 0 ? 6 : _b, disabled = _a.disabled, error = _a.error, onCompleted = _a.onCompleted, onFocus = _a.onFocus, activated = _a.activated, onChange = _a.onChange, label = _a.label, others = __rest(_a, ["value", "length", "disabled", "error", "onCompleted", "onFocus", "activated", "onChange", "label"]);
-    var _c = __read(useState(value || ""), 2), codeInput = _c[0], setCodeInput = _c[1];
+var Otp = function (_a, reff) {
+    var code = _a.code, _b = _a.codeSize, codeSize = _b === void 0 ? 6 : _b, disabled = _a.disabled, error = _a.error, onCompleted = _a.onCompleted, onFocus = _a.onFocus, activated = _a.activated, onChange = _a.onChange, label = _a.label, others = __rest(_a, ["code", "codeSize", "disabled", "error", "onCompleted", "onFocus", "activated", "onChange", "label"]);
+    var _c = __read(useState(code || ''), 2), codeInput = _c[0], setCodeInput = _c[1];
     // eslint-disable-next-line prefer-spread
-    var _d = __read(useState(__spreadArray([], __read(Array(length).keys()), false)), 1), codeDigitsArray = _d[0];
+    var _d = __read(useState(__spreadArray([], __read(Array(codeSize).keys()), false)), 1), codeDigitsArray = _d[0];
     var _e = __read(useState(false), 2), focused = _e[0], setFocused = _e[1];
     var color = (disabled && getColorStyle(TrilogyColor.DISABLED)) ||
         (activated && getColorStyle(TrilogyColor.MAIN)) ||
@@ -32,14 +33,14 @@ var Otp = function (_a) {
         getColorStyle(TrilogyColor.MAIN);
     useEffect(function () {
         if (/^-?\d*\.?\d*$/.test(codeInput) && !disabled) {
-            setCodeInput(value || "");
+            setCodeInput(code || '');
         }
-    }, [value]);
+    }, [code]);
     useEffect(function () {
-        if (!disabled && codeInput && codeInput.length >= length) {
+        if (!disabled && codeInput && codeInput.length >= codeSize) {
             onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(codeInput);
         }
-    }, [value, length, codeInput]);
+    }, [code, codeSize, codeInput]);
     var ref = useRef(null);
     var handleOnPress = function () {
         var _a;
@@ -48,14 +49,14 @@ var Otp = function (_a) {
     var style = StyleSheet.create({
         container: {
             flex: 1,
-            alignItems: "flex-start",
-            justifyContent: "center",
-            alignSelf: "center",
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            alignSelf: 'center',
         },
         inputsContainer: {
-            flexDirection: "row",
-            justifyContent: "center",
-            alignItems: "center",
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
         },
         inputContainer: {
             borderColor: (disabled && getColorStyle(TrilogyColor.DISABLED)) ||
@@ -65,9 +66,9 @@ var Otp = function (_a) {
             borderWidth: 1,
             borderRadius: 4,
             marginHorizontal: 5,
-            justifyContent: "center",
-            alignContent: "center",
-            alignItems: "center",
+            justifyContent: 'center',
+            alignContent: 'center',
+            alignItems: 'center',
             width: 28,
             height: 35,
         },
@@ -76,14 +77,14 @@ var Otp = function (_a) {
             borderWidth: 1,
             borderRadius: 4,
             marginHorizontal: 5,
-            justifyContent: "center",
-            alignContent: "center",
-            alignItems: "center",
+            justifyContent: 'center',
+            alignContent: 'center',
+            alignItems: 'center',
             width: 28,
             height: 35,
         },
         hiddenCodeInput: {
-            position: "absolute",
+            position: 'absolute',
             height: 1,
             width: 1,
             opacity: 0,
@@ -95,7 +96,7 @@ var Otp = function (_a) {
         currentInput: {
             width: 15,
             height: 1,
-            backgroundColor: (focused && getColorStyle(TrilogyColor.MAIN)) || "transparent",
+            backgroundColor: (focused && getColorStyle(TrilogyColor.MAIN)) || 'transparent',
         },
         text: {
             paddingLeft: 5,
@@ -104,20 +105,20 @@ var Otp = function (_a) {
         },
     });
     var toDigitInput = function (_value, idx) {
-        var emptyInputChar = " ";
+        var emptyInputChar = ' ';
         var digit = codeInput[idx] || emptyInputChar;
         if (idx <= codeInput.length) {
             return (React.createElement(View, { key: idx, style: style.inputSelectedContainer },
                 React.createElement(Text, { typo: TypographyAlign.TEXT_CENTERED, level: TextLevels.TWO }, digit),
-                Boolean(idx === codeInput.length) && (React.createElement(View, { style: style.currentInput }))));
+                Boolean(idx === codeInput.length) && React.createElement(View, { style: style.currentInput })));
         }
         return (React.createElement(View, { key: idx, style: style.inputContainer },
             React.createElement(Title, { level: TitleLevels.FOUR }, digit)));
     };
-    return (React.createElement(SafeAreaView, __assign({ style: style.container }, others),
-        React.createElement(View, { style: { flexDirection: "row", alignItems: "center" } },
+    return (React.createElement(SafeAreaView, __assign({ style: style.container, ref: reff }, others),
+        React.createElement(View, { style: { flexDirection: 'row', alignItems: 'center' } },
             Boolean(label) && (React.createElement(Text, { style: style.text, level: TextLevels.FOUR }, label)),
-            error && (React.createElement(Icon, { name: IconName.EXCLAMATION_CIRCLE, color: IconColor.ERROR, size: IconSize.SMALL }))),
+            error && (React.createElement(Icon, { style: style.icon, name: IconName.EXCLAMATION_CIRCLE, color: IconColor.ERROR, size: IconSize.SMALL }))),
         React.createElement(Pressable, { style: style.inputsContainer, onPress: handleOnPress }, codeDigitsArray.map(function (_item, index) { return (React.createElement(View, { key: index }, toDigitInput(index, index))); })),
         React.createElement(TextInput, { ref: ref, value: codeInput, onChangeText: function (code) {
                 if (/^-?\d*\.?\d*$/.test(code) && !disabled) {
@@ -126,7 +127,7 @@ var Otp = function (_a) {
                     }
                     setCodeInput(code);
                 }
-            }, keyboardType: "numeric", returnKeyType: "send", textContentType: 'oneTimeCode', maxLength: length, onFocus: function () {
+            }, keyboardType: 'numeric', returnKeyType: 'send', textContentType: 'oneTimeCode', maxLength: codeSize, onFocus: function () {
                 if (!disabled) {
                     setFocused(true);
                     onFocus === null || onFocus === void 0 ? void 0 : onFocus(true);
@@ -137,5 +138,5 @@ var Otp = function (_a) {
             }, editable: !disabled, style: style.hiddenCodeInput, testID: 'input-id' })));
 };
 Otp.displayName = ComponentName.Otp;
-export default Otp;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvb3RwL090cC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzFELE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsSUFBSSxHQUFHLE1BQU0sY0FBYyxDQUFBO0FBRXBGLE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDcEUsT0FBTyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3ZFLE9BQU8sRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLE1BQU0sb0JBQW9CLENBQUE7QUFDdkQsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzNDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7Ozs7Ozs7R0FXRztBQUNILElBQU0sR0FBRyxHQUFHLFVBQUMsRUFXRjtJQVZULElBQUEsS0FBSyxXQUFBLEVBQ0wsY0FBVSxFQUFWLE1BQU0sbUJBQUcsQ0FBQyxLQUFBLEVBQ1YsUUFBUSxjQUFBLEVBQ1IsS0FBSyxXQUFBLEVBQ0wsV0FBVyxpQkFBQSxFQUNYLE9BQU8sYUFBQSxFQUNQLFNBQVMsZUFBQSxFQUNULFFBQVEsY0FBQSxFQUNSLEtBQUssV0FBQSxFQUNGLE1BQU0sY0FWRSxvR0FXWixDQURVO0lBRUgsSUFBQSxLQUFBLE9BQTRCLFFBQVEsQ0FBUyxLQUFLLElBQUksRUFBRSxDQUFDLElBQUEsRUFBeEQsU0FB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
+export default React.forwardRef(Otp);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvb3RwL090cC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzFELE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRW5GLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFdkUsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBQ3ZELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDM0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUVwRTs7Ozs7Ozs7Ozs7O0dBWUc7QUFDSCxJQUFNLEdBQUcsR0FBRyxVQUNWLEVBQThHLEVBQzlHLElBQTZCO0lBRDNCLElBQUEsSUFBSSxVQUFBLEVBQUUsZ0JBQVksRUFBWixRQUFRLG1CQUFHLENBQUMsS0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLEtBQUssV0FBQSxFQUFFLFdBQVcsaUJBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxLQUFLLFdBQUEsRUFBSyxNQUFNLGNBQWxHLHFHQUFvRyxDQUFGO0lBRzVGLElBQUEsS0FBQSxPQUE0QixRQUFRLENBQVMsSUFBSSxJQUFJLEVBQUUs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

package/lib/components/otp/OtpProps.d.ts

@@ -1,17 +1,18 @@
-import { CommonProps } from '../../objects/facets/CommonProps';
+/// <reference types="react" />
 /**
  * Otp Interface
  */
-export interface OtpProps extends CommonProps {
-    value?: string;
-    length?: number;
+export interface OtpProps {
+    className?: string;
+    code?: string;
+    codeSize?: number;
     disabled?: boolean;
     error?: boolean;
-    help?: string;
     onCompleted?: (code?: string) => void;
     onFocus?: (focused: boolean) => void;
     onChange?: (code?: string) => void;
     activated?: boolean;
     label?: string;
+    errorMessage?: React.ReactNode | string;
     autoFocus?: boolean;
 }

package/lib/components/otp/OtpPropsDefaults.js

@@ -1,12 +1,19 @@
 export default {
-  "value": {
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "code": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "length": {
+  "codeSize": {
     "type": "string",
     "values": [
       "undefined",
@@ -29,13 +36,6 @@ export default {
       "true"
     ]
   },
-  "help": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
   "onCompleted": {
     "type": "function",
     "values": [
@@ -72,26 +72,26 @@ export default {
       "string"
     ]
   },
-  "autoFocus": {
-    "type": "boolean",
+  "errorMessage": {
+    "type": "react",
     "values": [
       "undefined",
+      "null",
+      "string",
+      "number",
       "false",
-      "true"
-    ]
-  },
-  "id": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
     ]
   },
-  "className": {
-    "type": "string",
+  "autoFocus": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "string"
+      "false",
+      "true"
     ]
   }
 };

package/lib/components/otp/hook/useOtp.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+type NumberOrNull = number | null;
+interface IParams {
+    code?: string;
+    codeSize: number;
+    disabled?: boolean;
+    onCompleted?: (code?: string) => void;
+    onChange?: (code?: string) => void;
+    onFocus?: (focused: boolean) => void;
+}
+export declare const useOtp: ({ code, codeSize, disabled, onCompleted, onChange, onFocus }: IParams) => {
+    codeInput: NumberOrNull[];
+    inputOnFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    inputOnKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => false | void;
+    inputOnChange: (e: React.ChangeEvent<HTMLInputElement>, idx: number) => void;
+    handleClick: () => void;
+} | {
+    codeInput: NumberOrNull[];
+    inputOnFocus?: undefined;
+    inputOnKeyUp?: undefined;
+    inputOnChange?: undefined;
+    handleClick?: undefined;
+};
+export {};