@trilogy-ds/react 4.0.6-beta-2 → 4.0.7-SC-beta-1

package/lib/components/modal/body/ModalBody.native.js

@@ -1,7 +1,9 @@
 import { __assign, __rest } from "tslib";
 import { ComponentName } from '../../../components/enumsComponentsName';
+import { getColorStyle, TrilogyColor } from '../../../objects';
 import * as React from 'react';
-import { Platform, ScrollView, TouchableOpacity } from 'react-native';
+import { Platform, ScrollView, View } from 'react-native';
+import { ModalContext } from '../context/ModalContext';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}
@@ -9,13 +11,16 @@ import { Platform, ScrollView, TouchableOpacity } from 'react-native';
  */
 var ModalBody = function (_a) {
     var children = _a.children, others = __rest(_a, ["children"]);
-    return (React.createElement(ScrollView, { contentContainerStyle: { flexGrow: 1, paddingBottom: Platform.OS === 'ios' ? 40 : 10 } },
-        React.createElement(TouchableOpacity, __assign({ activeOpacity: 1 }, others, { style: {
-                bottom: 0,
-                width: '100%',
-                paddingHorizontal: 16,
-            } }), children)));
+    var _b = React.useContext(ModalContext), handleOnScroll = _b.handleOnScroll, scrollViewRef = _b.scrollViewRef, isFooter = _b.isFooter;
+    return (React.createElement(ScrollView, { ref: scrollViewRef, scrollEventThrottle: 16, onScroll: handleOnScroll, showsVerticalScrollIndicator: false },
+        React.createElement(View, __assign({ style: [
+                {
+                    backgroundColor: getColorStyle(TrilogyColor.BACKGROUND),
+                    paddingTop: 8,
+                    paddingBottom: isFooter ? 8 : Platform.OS === 'ios' ? 40 : 16,
+                },
+            ] }, others), children)));
 };
 ModalBody.displayName = ComponentName.ModalBody;
 export default ModalBody;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxCb2R5Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvbW9kYWwvYm9keS9Nb2RhbEJvZHkubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sY0FBYyxDQUFBO0FBR3JFOzs7O0dBSUc7QUFDSCxJQUFNLFNBQVMsR0FBRyxVQUFDLEVBQXVDO0lBQXJDLElBQUEsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUFyQixZQUF1QixDQUFGO0lBQ3RDLE9BQU8sQ0FDTCxvQkFBQyxVQUFVLElBQUMscUJBQXFCLEVBQUUsRUFBRSxRQUFRLEVBQUUsQ0FBQyxFQUFFLGFBQWEsRUFBRSxRQUFRLENBQUMsRUFBRSxLQUFLLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUU7UUFDaEcsb0JBQUMsZ0JBQWdCLGFBQ2YsYUFBYSxFQUFFLENBQUMsSUFDWixNQUFNLElBQ1YsS0FBSyxFQUFFO2dCQUNMLE1BQU0sRUFBRSxDQUFDO2dCQUNULEtBQUssRUFBRSxNQUFNO2dCQUNiLGlCQUFpQixFQUFFLEVBQUU7YUFDdEIsS0FFQSxRQUFRLENBQ1EsQ0FDUixDQUNkLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxTQUFTLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxTQUFTLENBQUE7QUFFL0MsZUFBZSxTQUFTLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxCb2R5Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvbW9kYWwvYm9keS9Nb2RhbEJvZHkubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3ZELE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUN6RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0seUJBQXlCLENBQUE7QUFHdEQ7Ozs7R0FJRztBQUNILElBQU0sU0FBUyxHQUFHLFVBQUMsRUFBdUM7SUFBckMsSUFBQSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXJCLFlBQXVCLENBQUY7SUFDaEMsSUFBQSxLQUE4QyxLQUFLLENBQUMsVUFBVSxDQUFDLFlBQVksQ0FBQyxFQUExRSxjQUFjLG9CQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFFLFFBQVEsY0FBbUMsQ0FBQTtJQUVsRixPQUFPLENBQ0wsb0JBQUMsVUFBVSxJQUNULEdBQUcsRUFBRSxhQUFhLEVBQ2xCLG1CQUFtQixFQUFFLEVBQUUsRUFDdkIsUUFBUSxFQUFFLGNBQWMsRUFDeEIsNEJBQTRCLEVBQUUsS0FBSztRQUVuQyxvQkFBQyxJQUFJLGFBQ0gsS0FBSyxFQUFFO2dCQUNMO29CQUNFLGVBQWUsRUFBRSxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQztvQkFDdkQsVUFBVSxFQUFFLENBQUM7b0JBQ2IsYUFBYSxFQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsRUFBRSxLQUFLLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFO2lCQUM5RDthQUNGLElBQ0csTUFBTSxHQUVULFFBQVEsQ0FDSixDQUNJLENBQ2QsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELFNBQVMsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFNBQVMsQ0FBQTtBQUUvQyxlQUFlLFNBQVMsQ0FBQSJ9

package/lib/components/modal/context/ModalContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ModalContextProps } from './ModalContextProps';
+export declare const ModalContext: React.Context<ModalContextProps>;

package/lib/components/modal/context/ModalContext.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export var ModalContext = React.createContext({
+    scrollViewRef: null,
+    handleOnScroll: function () { return null; },
+    isFooter: false,
+    setIsFooter: function () { return false; },
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxDb250ZXh0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9jb250ZXh0L01vZGFsQ29udGV4dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBR3pCLE1BQU0sQ0FBQyxJQUFNLFlBQVksR0FBRyxLQUFLLENBQUMsYUFBYSxDQUFvQjtJQUNqRSxhQUFhLEVBQUUsSUFBSTtJQUNuQixjQUFjLEVBQUUsY0FBTSxPQUFBLElBQUksRUFBSixDQUFJO0lBQzFCLFFBQVEsRUFBRSxLQUFLO0lBQ2YsV0FBVyxFQUFFLGNBQU0sT0FBQSxLQUFLLEVBQUwsQ0FBSztDQUN6QixDQUFDLENBQUEifQ==

package/lib/components/modal/context/ModalContextProps.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NativeScrollEvent, NativeSyntheticEvent, type ScrollView } from 'react-native';
+export interface ModalContextProps {
+    scrollViewRef: React.Ref<ScrollView>;
+    handleOnScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    isFooter: boolean;
+    setIsFooter: React.Dispatch<React.SetStateAction<boolean>>;
+}

package/lib/components/modal/context/ModalContextProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxDb250ZXh0UHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2NvbnRleHQvTW9kYWxDb250ZXh0UHJvcHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9

package/lib/components/modal/context/ModalContextPropsDefaults.js

@@ -0,0 +1,25 @@
+export default {
+  "scrollViewRef": {
+    "type": "function",
+    "values": [
+      "null",
+      "ScrollView | null) => void",
+      "ScrollView>"
+    ]
+  },
+  "handleOnScroll": {
+    "type": "string",
+    "values": []
+  },
+  "isFooter": {
+    "type": "boolean",
+    "values": [
+      "false",
+      "true"
+    ]
+  },
+  "setIsFooter": {
+    "type": "string",
+    "values": []
+  }
+};

package/lib/components/modal/context/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ModalContext';
+export * from './ModalContextProps';

package/lib/components/modal/context/index.js

@@ -0,0 +1,3 @@
+export * from './ModalContext';
+export * from './ModalContextProps';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2NvbnRleHQvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxnQkFBZ0IsQ0FBQTtBQUM5QixjQUFjLHFCQUFxQixDQUFBIn0=

package/lib/components/modal/footer/ModalFooter.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ModalFooterProps } from './ModalFooterProps';
+import { ModalFooterProps } from '../../../components/modal/footer/ModalFooterProps';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}

package/lib/components/modal/footer/ModalFooter.js

@@ -1,7 +1,6 @@
-import { useTrilogyContext } from '../../../context';
-import { hashClass } from '../../../helpers';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
 import clsx from 'clsx';
-import * as React from 'react';
+import React from 'react';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}
@@ -11,8 +10,7 @@ import * as React from 'react';
  */
 var ModalFooter = function (_a) {
     var children = _a.children, className = _a.className, id = _a.id;
-    var styled = useTrilogyContext().styled;
-    return (React.createElement("div", { "data-modal-footer": '', id: id, className: hashClass(styled, clsx('modal-footer', className)) }, children));
+    return (React.createElement("div", { "data-modal-footer": '', id: id, className: hashClass(clsx('modal-footer', className)) }, children));
 };
 export default ModalFooter;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxGb290ZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2Zvb3Rlci9Nb2RhbEZvb3Rlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRzlCOzs7Ozs7R0FNRztBQUNILElBQU0sV0FBVyxHQUFHLFVBQUMsRUFBNkM7UUFBM0MsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBO0lBQ3BDLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLE9BQU8sQ0FDTCxrREFBdUIsRUFBRSxFQUFDLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLGNBQWMsRUFBRSxTQUFTLENBQUMsQ0FBQyxJQUM1RixRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxXQUFXLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxGb290ZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2Zvb3Rlci9Nb2RhbEZvb3Rlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekI7Ozs7OztHQU1HO0FBQ0gsSUFBTSxXQUFXLEdBQUcsVUFBQyxFQUE2QztRQUEzQyxRQUFRLGNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUE7SUFDNUMsT0FBTyxDQUNMLGtEQUF1QixFQUFFLEVBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsU0FBUyxDQUFDLENBQUMsSUFDcEYsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsV0FBVyxDQUFBIn0=

package/lib/components/modal/footer/ModalFooter.native.js

@@ -1,24 +1,34 @@
 import { __assign, __rest } from "tslib";
 import { ComponentName } from '../../../components/enumsComponentsName';
 import { Title, TitleLevels } from '../../../components/title';
-import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
+import { getColorStyle, TrilogyColor } from '../../../objects';
 import * as React from 'react';
-import { Platform, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
+import { ModalContext } from '../context';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}
  */
 var ModalFooter = function (_a) {
     var children = _a.children, others = __rest(_a, ["children"]);
-    return (React.createElement(View, __assign({}, others, { style: {
-            bottom: 0,
-            width: '100%',
-            paddingBottom: Platform.OS === 'ios' ? 40 : 10,
-        } }),
-        React.createElement(View, { style: { width: '100%', height: 16, marginTop: -16, backgroundColor: getColorStyle(TrilogyColor.BACKGROUND) } }),
-        React.createElement(View, { style: { paddingHorizontal: 16 } }, (typeof children === 'string' && (React.createElement(Title, { level: TitleLevels.THREE, style: { width: '100%', textAlign: 'center' } }, children))) ||
+    var setIsFooter = React.useContext(ModalContext).setIsFooter;
+    React.useEffect(function () {
+        setIsFooter(true);
+        return function () {
+            setIsFooter(false);
+        };
+    }, []);
+    return (React.createElement(View, __assign({ style: [styles.container] }, others),
+        React.createElement(View, { style: [{ backgroundColor: getColorStyle(TrilogyColor.BACKGROUND) }] }, (typeof children === 'string' && (React.createElement(Title, { level: TitleLevels.THREE, style: styles.title }, children))) ||
             children)));
 };
 ModalFooter.displayName = ComponentName.ModalFooter;
 export default ModalFooter;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxGb290ZXIubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9mb290ZXIvTW9kYWxGb290ZXIubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLE1BQU0sb0JBQW9CLENBQUE7QUFDdkQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUc3Qzs7O0dBR0c7QUFDSCxJQUFNLFdBQVcsR0FBRyxVQUFDLEVBQXlDO0lBQXZDLElBQUEsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUFyQixZQUF1QixDQUFGO0lBQ3hDLE9BQU8sQ0FDTCxvQkFBQyxJQUFJLGVBQ0MsTUFBTSxJQUNWLEtBQUssRUFBRTtZQUNMLE1BQU0sRUFBRSxDQUFDO1lBQ1QsS0FBSyxFQUFFLE1BQU07WUFDYixhQUFhLEVBQUUsUUFBUSxDQUFDLEVBQUUsS0FBSyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRTtTQUMvQztRQUVELG9CQUFDLElBQUksSUFDSCxLQUFLLEVBQUUsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLENBQUMsRUFBRSxFQUFFLGVBQWUsRUFBRSxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxFQUFFLEdBQzdHO1FBQ0Ysb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxFQUFFLGlCQUFpQixFQUFFLEVBQUUsRUFBRSxJQUNuQyxDQUFDLE9BQU8sUUFBUSxLQUFLLFFBQVEsSUFBSSxDQUNoQyxvQkFBQyxLQUFLLElBQUMsS0FBSyxFQUFFLFdBQVcsQ0FBQyxLQUFLLEVBQUUsS0FBSyxFQUFFLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLElBQzNFLFFBQVEsQ0FDSCxDQUNULENBQUM7WUFDQSxRQUFRLENBQ0wsQ0FDRixDQUNSLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxXQUFXLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxXQUFXLENBQUE7QUFFbkQsZUFBZSxXQUFXLENBQUEifQ==
+var styles = StyleSheet.create({
+    container: {
+        paddingBottom: Platform.OS === 'ios' ? 40 : 10,
+        paddingTop: 16,
+    },
+    title: { width: '100%', textAlign: 'center' },
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxGb290ZXIubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9mb290ZXIvTW9kYWxGb290ZXIubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLE1BQU0sb0JBQW9CLENBQUE7QUFDdkQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDdkQsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLFFBQVEsRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBQ3pELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFHekM7OztHQUdHO0FBQ0gsSUFBTSxXQUFXLEdBQUcsVUFBQyxFQUF5QztJQUF2QyxJQUFBLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBckIsWUFBdUIsQ0FBRjtJQUNoQyxJQUFBLFdBQVcsR0FBSyxLQUFLLENBQUMsVUFBVSxDQUFDLFlBQVksQ0FBQyxZQUFuQyxDQUFtQztJQUV0RCxLQUFLLENBQUMsU0FBUyxDQUFDO1FBQ2QsV0FBVyxDQUFDLElBQUksQ0FBQyxDQUFBO1FBRWpCLE9BQU87WUFDTCxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUE7UUFDcEIsQ0FBQyxDQUFBO0lBQ0gsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFBO0lBRU4sT0FBTyxDQUNMLG9CQUFDLElBQUksYUFBQyxLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLElBQU0sTUFBTTtRQUN6QyxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLENBQUMsRUFBRSxlQUFlLEVBQUUsYUFBYSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDLElBQ3ZFLENBQUMsT0FBTyxRQUFRLEtBQUssUUFBUSxJQUFJLENBQ2hDLG9CQUFDLEtBQUssSUFBQyxLQUFLLEVBQUUsV0FBVyxDQUFDLEtBQUssRUFBRSxLQUFLLEVBQUUsTUFBTSxDQUFDLEtBQUssSUFDakQsUUFBUSxDQUNILENBQ1QsQ0FBQztZQUNBLFFBQVEsQ0FDTCxDQUNGLENBQ1IsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELFdBQVcsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFdBQVcsQ0FBQTtBQUVuRCxlQUFlLFdBQVcsQ0FBQTtBQUUxQixJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO0lBQy9CLFNBQVMsRUFBRTtRQUNULGFBQWEsRUFBRSxRQUFRLENBQUMsRUFBRSxLQUFLLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFO1FBQzlDLFVBQVUsRUFBRSxFQUFFO0tBQ2Y7SUFDRCxLQUFLLEVBQUUsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUU7Q0FDOUMsQ0FBQyxDQUFBIn0=

package/lib/components/modal/hooks/useModal.d.ts

@@ -0,0 +1,26 @@
+import { ClickEvent } from '../../../events/OnClickEvent';
+import React from 'react';
+interface IProps {
+    active?: boolean;
+    onClose?: ClickEvent;
+}
+export declare const useModal: ({ active, onClose }: IProps) => {
+    modal: React.RefObject<HTMLDivElement>;
+    display: boolean;
+    onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    handleClickModal: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    refModal: React.RefObject<HTMLDivElement>;
+    refBtnModal: React.MutableRefObject<any>;
+    handleCloseModal: (e: React.MouseEvent) => void;
+    buttonRef: (el: HTMLButtonElement | null) => HTMLButtonElement | null;
+} | {
+    display: boolean;
+    modal?: undefined;
+    onKeyDown?: undefined;
+    handleClickModal?: undefined;
+    refModal?: undefined;
+    refBtnModal?: undefined;
+    handleCloseModal?: undefined;
+    buttonRef?: undefined;
+};
+export {};

package/lib/components/modal/hooks/useModal.js

@@ -0,0 +1,86 @@
+import { __read } from "tslib";
+import React from 'react';
+export var useModal = function (_a) {
+    var active = _a.active, onClose = _a.onClose;
+    try {
+        var modal_1 = React.useRef(null);
+        var _b = __read(React.useState(active || false), 2), display_1 = _b[0], setDisplay_1 = _b[1];
+        var refsActions_1 = React.useRef([]);
+        var refBtnModal_1 = React.useRef(null);
+        var refModal_1 = React.useRef(null);
+        var _c = __read(React.useState(0), 2), setIndexFocusable_1 = _c[1];
+        var handleClose_1 = React.useCallback(function (onCloseFunc, e) {
+            setDisplay_1(false);
+            refBtnModal_1.current && refBtnModal_1.current.focus();
+            setIndexFocusable_1(0);
+            if (onCloseFunc)
+                onCloseFunc(e);
+        }, [refBtnModal_1.current]);
+        var onKeyDown = React.useCallback(function (event) {
+            if (display_1 && refsActions_1.current) {
+                var refs_1 = refsActions_1.current.filter(function (ref) { return ref; });
+                var key = event.key;
+                if (key === 'Tab') {
+                    event.preventDefault();
+                    setIndexFocusable_1(function (prev) {
+                        var _a;
+                        var nextIndex = (prev + 1) % refs_1.length;
+                        refs_1[nextIndex] && ((_a = refs_1[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus());
+                        return nextIndex;
+                    });
+                }
+                if (key === 'Escape') {
+                    event.preventDefault();
+                    setDisplay_1(false);
+                    refBtnModal_1.current && refBtnModal_1.current.focus();
+                    setIndexFocusable_1(0);
+                    onClose && onClose();
+                }
+            }
+        }, [refsActions_1.current.length, display_1]);
+        var handleClickModal = React.useCallback(function (e) {
+            var _a;
+            if (!((_a = modal_1 === null || modal_1 === void 0 ? void 0 : modal_1.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                handleClose_1(onClose, e);
+            }
+        }, [modal_1, handleClose_1]);
+        var handleCloseModal = React.useCallback(function (e) {
+            handleClose_1(onClose, e);
+        }, [handleClose_1, onClose]);
+        var buttonRef = React.useCallback(function (el) { return el && refsActions_1 && (refsActions_1.current[0] = el); }, []);
+        React.useEffect(function () {
+            display_1 && refsActions_1.current[0] && refsActions_1.current[0].focus();
+        }, [display_1, refsActions_1 === null || refsActions_1 === void 0 ? void 0 : refsActions_1.current.length]);
+        React.useEffect(function () {
+            setDisplay_1(function (prev) {
+                if (prev) {
+                    refBtnModal_1.current && refBtnModal_1.current.focus();
+                    setIndexFocusable_1(0);
+                }
+                return active || false;
+            });
+        }, [active]);
+        React.useEffect(function () {
+            if (refModal_1.current) {
+                var footer = refModal_1.current.querySelector('[data-modal-footer]');
+                var getCTA = footer === null || footer === void 0 ? void 0 : footer.querySelectorAll('button');
+                if (getCTA)
+                    getCTA.forEach(function (el, i) { return (refsActions_1.current[i + 1] = el); });
+            }
+        }, [refModal_1.current]);
+        return {
+            modal: modal_1,
+            display: display_1,
+            onKeyDown: onKeyDown,
+            handleClickModal: handleClickModal,
+            refModal: refModal_1,
+            refBtnModal: refBtnModal_1,
+            handleCloseModal: handleCloseModal,
+            buttonRef: buttonRef,
+        };
+    }
+    catch (_d) {
+        return { display: active || false };
+    }
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlTW9kYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2hvb2tzL3VzZU1vZGFsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBT3pCLE1BQU0sQ0FBQyxJQUFNLFFBQVEsR0FBRyxVQUFDLEVBQTJCO1FBQXpCLE1BQU0sWUFBQSxFQUFFLE9BQU8sYUFBQTtJQUN4QyxJQUFJO1FBQ0YsSUFBTSxPQUFLLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBaUIsSUFBSSxDQUFDLENBQUE7UUFDMUMsSUFBQSxLQUFBLE9BQXdCLEtBQUssQ0FBQyxRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQS9ELFNBQU8sUUFBQSxFQUFFLFlBQVUsUUFBNEMsQ0FBQTtRQUV0RSxJQUFNLGFBQVcsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFrQyxFQUFFLENBQUMsQ0FBQTtRQUNyRSxJQUFNLGFBQVcsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFNLElBQUksQ0FBQyxDQUFBO1FBQzNDLElBQU0sVUFBUSxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQWlCLElBQUksQ0FBQyxDQUFBO1FBQzdDLElBQUEsS0FBQSxPQUF3QixLQUFLLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFBLEVBQXRDLG1CQUFpQixRQUFxQixDQUFBO1FBRS9DLElBQU0sYUFBVyxHQUFHLEtBQUssQ0FBQyxXQUFXLENBQ25DLFVBQUMsV0FBbUMsRUFBRSxDQUFlO1lBQ25ELFlBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQTtZQUNqQixhQUFXLENBQUMsT0FBTyxJQUFJLGFBQVcsQ0FBQyxPQUFPLENBQUMsS0FBSyxFQUFFLENBQUE7WUFDbEQsbUJBQWlCLENBQUMsQ0FBQyxDQUFDLENBQUE7WUFDcEIsSUFBSSxXQUFXO2dCQUFFLFdBQVcsQ0FBQyxDQUFDLENBQUMsQ0FBQTtRQUNq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

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

@@ -1,5 +1,5 @@
-import Modal from './Modal';
-import ModalFooter from './footer/ModalFooter';
-import ModalBody from './body/ModalBody';
-export * from './ModalEnum';
+import Modal from '../../components/modal/Modal';
+import ModalBody from '../../components/modal/body/ModalBody';
+import ModalFooter from '../../components/modal/footer/ModalFooter';
+export * from '../../components/modal/ModalEnum';
 export { Modal, ModalBody, ModalFooter };

package/lib/components/modal/index.js

@@ -1,6 +1,6 @@
-import Modal from './Modal';
-import ModalFooter from './footer/ModalFooter';
-import ModalBody from './body/ModalBody';
-export * from './ModalEnum';
+import Modal from '../../components/modal/Modal';
+import ModalBody from '../../components/modal/body/ModalBody';
+import ModalFooter from '../../components/modal/footer/ModalFooter';
+export * from '../../components/modal/ModalEnum';
 export { Modal, ModalBody, ModalFooter };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLFNBQVMsQ0FBQTtBQUMzQixPQUFPLFdBQVcsTUFBTSxzQkFBc0IsQ0FBQTtBQUM5QyxPQUFPLFNBQVMsTUFBTSxrQkFBa0IsQ0FBQTtBQUV4QyxjQUFjLGFBQWEsQ0FBQTtBQUUzQixPQUFPLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLDBCQUEwQixDQUFBO0FBQzVDLE9BQU8sU0FBUyxNQUFNLG1DQUFtQyxDQUFBO0FBQ3pELE9BQU8sV0FBVyxNQUFNLHVDQUF1QyxDQUFBO0FBRS9ELGNBQWMsOEJBQThCLENBQUE7QUFDNUMsT0FBTyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLENBQUEifQ==

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { OtpProps } from './OtpProps';
+import { OtpProps } from '../../components/otp/OtpProps';
 /**
  * OTP Code Component
  * @param value {string} Code Text Input

package/lib/components/otp/Otp.js

@@ -1,69 +1,11 @@
-import { __assign, __read, __rest } from "tslib";
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import { useOtp } from '../../components/otp/hooks/useOtp';
 import { Text, TextMarkup } from '../../components/text';
-import { useTrilogyContext } from '../../context/index';
 import { hashClass } from '../../helpers/hashClassesHelpers';
 import { TypographyColor } from '../../objects/Typography';
 import { is } from '../../services/classify';
 import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
-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);
-    }
-};
+import React from 'react';
 /**
  * OTP Code Component
  * @param value {string} Code Text Input
@@ -81,47 +23,29 @@ var inputOnKeyUp = function (e) {
  */
 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 classes = hashClass(clsx('otp-list', error && is('error'), className));
+    var _c = useOtp({
+        value: value,
+        disabled: disabled,
+        onChange: onChange,
+        onCompleted: onCompleted,
+        length: length,
+    }), codeInput = _c.codeInput, inputOnChange = _c.inputOnChange, inputOnFocus = _c.inputOnFocus, inputOnKeyUp = _c.inputOnKeyUp;
     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);
+        React.createElement("div", { id: id, className: classes, onClick: onFocus
+                ? 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: hashClass(styled, clsx('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))));
+                : undefined }, __spreadArray([], __read(Array(length).keys()), false).map(function (_, index) {
+            var _a;
+            return (React.createElement("input", __assign({ "aria-disabled": disabled, tabIndex: 0, key: index, type: 'text', inputMode: 'numeric', autoComplete: 'one-time-code', autoFocus: index === 0 && autoFocus, pattern: '\\d{1}', maxLength: length, className: hashClass(clsx('otp')), value: value ? "".concat((_a = codeInput[index]) !== null && _a !== void 0 ? _a : '') : undefined, onKeyUp: inputOnKeyUp, onFocus: inputOnFocus, onChange: inputOnChange ? function (e) { return inputOnChange(e, index); } : undefined, disabled: disabled }, others)));
+        })),
+        help && (React.createElement(Text, { className: hashClass(clsx('help')), markup: TextMarkup.P, typo: (error && TypographyColor.TEXT_ERROR) || TypographyColor.TEXT_MAIN }, help))));
 };
 export default Otp;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9vdHAvT3RwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ3RELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUsxRCxJQUFNLFlBQVksR0FBRyxVQUFDLEdBQXVCLEVBQUUsUUFBZ0I7SUFDN0QsSUFBSSxDQUFDLEdBQUc7UUFBRSxPQUFPLElBQUksS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUMvQyxPQUFPLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLFVBQUMsSUFBSSxJQUFLLE9BQUEsQ0FBQyxJQUFJLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQyxFQUFuQyxDQUFtQyxDQUFDLENBQUE7QUFDekUsQ0FBQyxDQUFBO0FBRUQsSUFBTSxZQUFZLEdBQUcsVUFBQyxJQUFvQjtJQUN4QyxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsVUFBQyxJQUFJLElBQUssT0FBQSxDQUFDLElBQUksS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9vdHAvT3RwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLCtCQUErQixDQUFBO0FBQ3RELE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUN0RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6Qjs7Ozs7Ozs7Ozs7Ozs7R0FjRztBQUNILElBQU0sR0FBRyxHQUFHLFVBQUMsRUFjRjtJQWJULElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsS0FBSyxXQUFBLEVBQ0wsY0FBVSxFQUFWLE1BQU0sbUJBQUcsQ0FBQyxLQUFBLEVBQ1YsUUFBUSxjQUFBLEVBQ1IsS0FBSyxXQUFBLEVBQ0wsV0FBVyxpQkFBQSxFQUNYLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLEtBQUssV0FBQSxFQUNMLElBQUksVUFBQSxFQUNKLFNBQVMsZUFBQSxFQUNOLE1BQU0sY0FiRSwrSEFjWixDQURVO0lBRVQsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsS0FBSyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBQ3RFLElBQUEsS0FBMkQsTUFBTSxDQUFDO1FBQ3RFLEtBQUssT0FBQTtRQUNMLFFBQVEsVUFBQTtRQUNSLFFBQVEsVUFBQTtRQUNSLFdBQVcsYUFBQTtRQUNYLE1BQU0sUUFBQTtLQUNQLENBQUMsRUFOTSxTQUFTLGVBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUUsWUFBWSxrQkFBQSxFQUFFLFlBQVksa0JBTTFELENBQUE7SUFFRixPQUFPLENBQ0w7UUFDRyxLQUFLLElBQUksQ0FDUixvQkFBQyxJQUFJLElBQ0gsTUFBTSxFQUFFLFVBQVUsQ0FBQyxDQUFDLEVBQ3BCLElBQUksRUFDRixDQUFDLFFBQVEsSUFBSSxlQUFlLENBQUMsWUFBWSxDQUFDO2dCQUMxQyxDQUFDLEtBQUssSUFBSSxlQUFlLENBQUMsVUFBVSxDQUFDO2dCQUNyQyxlQUFlLENBQUMsU0FBUyxJQUcxQixLQUFLLENBQ0QsQ0FDUjtRQUNELDZCQUNFLEVBQUUsRUFBRSxFQUFFLEVBQ04sU0FBUyxFQUFFLE9BQU8sRUFDbEIsT0FBTyxFQUNMLE9BQU87Z0JBQ0wsQ0FBQyxDQUFDO29CQUNFLElBQUksQ0FBQyxRQUFRLEVBQUU7d0JBQ2IsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLElBQUksQ0FBQyxDQUFBO3FCQUNoQjtnQkFDSCxDQUFDO2dCQUNILENBQUMsQ0FBQyxTQUFTLElBR2QseUJBQUksS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLElBQUksRUFBRSxVQUFFLEdBQUcsQ0FBQyxVQUFDLENBQUMsRUFBRSxLQUFLOztZQUFLLE9BQUEsQ0FDM0MseURBQ2lCLFFBQVEsRUFDdkIsUUFBUSxFQUFFLENBQUMsRUFDWCxHQUFHLEVBQUUsS0FBSyxFQUNWLElBQUksRUFBQyxNQUFNLEVBQ1gsU0FBUyxFQUFDLFNBQVMsRUFDbkIsWUFBWSxFQUFDLGVBQWUsRUFDNUIsU0FBUyxFQUFFLEtBQUssS0FBSyxDQUFDLElBQUksU0FBUyxFQUNuQyxPQUFPLEVBQUMsUUFBTyxFQUNmLFNBQVMsRUFBRSxNQUFNLEVBQ2pCLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQ2pDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDLFVBQUcsTUFBQSxTQUFTLENBQUMsS0FBSyxDQUFDLG1DQUFJLEVBQUUsQ0FBRSxDQUFDLENBQUMsQ0FBQyxTQUFTLEVBQ3RELE9BQU8sRUFBRSxZQUFZLEVBQ3JCLE9BQU8sRUFBRSxZQUFZLEVBQ3JCLFFBQVEsRUFBRSxhQUFhLENBQUMsQ0FBQyxDQUFDLFVBQUMsQ0FBQyxJQUFLLE9BQUEsYUFBYSxDQUFDLENBQUMsRUFBRSxLQUFLLENBQUMsRUFBdkIsQ0FBdUIsQ0FBQyxDQUFDLENBQUMsU0FBUyxFQUNwRSxRQUFRLEVBQUUsUUFBUSxJQUNkLE1BQU0sRUFDVixDQUNILENBQUE7U0FBQSxDQUFDLENBQ0U7UUFDTCxJQUFJLElBQUksQ0FDUCxvQkFBQyxJQUFJLElBQ0gsU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsRUFDbEMsTUFBTSxFQUFFLFVBQVUsQ0FBQyxDQUFDLEVBQ3BCLElBQUksRUFBRSxDQUFDLEtBQUssSUFBSSxlQUFlLENBQUMsVUFBVSxDQUFDLElBQUksZUFBZSxDQUFDLFNBQVMsSUFFdkUsSUFBSSxDQUNBLENBQ1IsQ0FDQSxDQUNKLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLEdBQUcsQ0FBQSJ9

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

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