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

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 {};

package/lib/components/otp/hooks/useOtp.js

@@ -0,0 +1,101 @@
+import { __read } from "tslib";
+import React from 'react';
+export var useOtp = function (_a) {
+    var value = _a.value, disabled = _a.disabled, length = _a.length, onChange = _a.onChange, onCompleted = _a.onCompleted;
+    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);
+        }
+    };
+    try {
+        var _b = __read(React.useState(stringToCode(value, length) || new Array(length).fill(null)), 2), codeInput_1 = _b[0], setCodeInput_1 = _b[1];
+        var hasChanged_1 = React.useRef(false);
+        React.useEffect(function () {
+            if (!disabled) {
+                isCompleted(codeInput_1) && (onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(codeToString(codeInput_1)));
+            }
+        }, [length, codeInput_1, onCompleted, disabled]);
+        React.useEffect(function () {
+            hasChanged_1.current = codeInput_1.find(function (code) { return code !== null; }) !== undefined;
+            if (hasChanged_1.current) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(codeToString(codeInput_1));
+            }
+        }, [codeInput_1]);
+        var inputOnChange = function (e, idx) {
+            var target = e.target;
+            var targetValue = target.value.trim();
+            if (targetValue.length > 0) {
+                setCodeInput_1(updateCodeInput(targetValue, idx, codeInput_1));
+            }
+            else {
+                setCodeInput_1(codeInput_1.map(function (code, index) {
+                    return index === idx ? null : code;
+                }));
+            }
+        };
+        var inputOnFocus = function (e) {
+            var target = e.target;
+            target.setSelectionRange(0, target.value.length);
+        };
+        return { codeInput: codeInput_1, inputOnKeyUp: inputOnKeyUp, inputOnFocus: inputOnFocus, inputOnChange: inputOnChange };
+    }
+    catch (_c) {
+        return {
+            codeInput: stringToCode(value, length) || new Array(length).fill(null),
+        };
+    }
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlT3RwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9vdHAvaG9va3MvdXNlT3RwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBVXpCLE1BQU0sQ0FBQyxJQUFNLE1BQU0sR0FBRyxVQUFDLEVBQTBEO1FBQXhELEtBQUssV0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLE1BQU0sWUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFdBQVcsaUJBQUE7SUFHckUsSUFBTSxZQUFZLEdBQUcsVUFBQyxHQUF1QixFQUFFLFFBQWdCO1FBQzdELElBQUksQ0FBQyxHQUFHO1lBQUUsT0FBTyxJQUFJLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUE7UUFDL0MsT0FBTyxHQUFHLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxVQUFDLElBQUksSUFBSyxPQUFBLENBQUMsSUFBSSxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBbkMsQ0FBbUMsQ0FBQyxDQUFBO0lBQ3pFLENBQUMsQ0FBQTtJQUVELElBQU0sWUFBWSxHQUFHLFVBQUMsSUFBb0I7UUFDeEMsT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDLFVBQUMsSUFBSSxJQUFLLE9BQUEsQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxFQUE1QixDQUE0QixDQUFDLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFBO0lBQ2xFLENBQUMsQ0FBQTtJQUVELElBQU0sV0FBVyxHQUFHLFVBQUMsTUFBc0I7UUFDekMsT0FBTyxNQUFNLENBQUMsS0FBSyxDQUFDLFVBQUMsSUFBSSxJQUFLLE9BQUEsSUFBSSxL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

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

@@ -1,2 +1,2 @@
-import Otp from './Otp';
+import Otp from '../../components/otp/Otp';
 export { Otp };

package/lib/components/otp/index.js

@@ -1,3 +1,3 @@
-import Otp from './Otp';
+import Otp from '../../components/otp/Otp';
 export { Otp };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL290cC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEdBQUcsTUFBTSxPQUFPLENBQUE7QUFFdkIsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL290cC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEdBQUcsTUFBTSxzQkFBc0IsQ0FBQTtBQUV0QyxPQUFPLEVBQUUsR0FBRyxFQUFFLENBQUEifQ==

package/lib/components/pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PaginationProps } from './PaginationProps';
+import { PaginationProps } from '../../components/pagination/PaginationProps';
 /**
  * Pagination Component
  * @param count {number} Number elements

package/lib/components/pagination/Pagination.js

@@ -1,9 +1,9 @@
-import { __assign, __read, __rest, __spreadArray } from "tslib";
-import React, { useEffect, useRef, useState } from 'react';
+import { __assign, __rest } from "tslib";
 import { Icon, IconName } from '../../components/icon';
-import { hashClass } from '../../helpers';
+import { usePagination } from '../../components/pagination/hooks/usePagination';
+import { hashClass } from '../../helpers/hashClassesHelpers';
 import clsx from 'clsx';
-import { useTrilogyContext } from '../../context';
+import React from 'react';
 /**
  * Pagination Component
  * @param count {number} Number elements
@@ -17,73 +17,24 @@ import { useTrilogyContext } from '../../context';
  */
 var Pagination = function (_a) {
     var className = _a.className, id = _a.id, length = _a.length, _b = _a.defaultPage, defaultPage = _b === void 0 ? 1 : _b, onClick = _a.onClick, href = _a.href, others = __rest(_a, ["className", "id", "length", "defaultPage", "onClick", "href"]);
-    var _c = __read(useState(defaultPage), 2), currentPage = _c[0], setCurrentPage = _c[1];
-    var styled = useTrilogyContext().styled;
-    var classes = hashClass(styled, clsx('pagination', className));
-    var prevCurrentPage = useRef(currentPage);
-    var pager = React.useMemo(function () {
-        // Calculate total pages
-        var startPage = 1;
-        var endPage = 5;
-        if (length <= 5) {
-            // less than pageSize(default is 5) total pages so show all
-            startPage = 1;
-            endPage = length;
-        }
-        else {
-            // more than 3 total pages so calculate start and end pages
-            if (currentPage <= 3) {
-                startPage = 1;
-                endPage = 4;
-            }
-            else if (currentPage + 3 >= length) {
-                startPage = length - 3;
-                endPage = length;
-            }
-            else {
-                startPage = currentPage - 1;
-                endPage = currentPage + 1;
-            }
-        }
-        // Create an array of pages
-        var pages = __spreadArray([], __read(Array(endPage + 1 - startPage).keys()), false).map(function (i) { return startPage + i; });
-        // Set pager object
-        return {
-            currentPage: currentPage,
-            length: length,
-            endPage: endPage,
-            pages: pages,
-        };
-    }, [currentPage, length]);
-    useEffect(function () {
-        if (onClick && prevCurrentPage.current !== pager.currentPage) {
-            onClick(pager);
-        }
-        setCurrentPage(pager.currentPage);
-        prevCurrentPage.current = pager.currentPage;
-    }, [pager.currentPage]);
+    var classes = hashClass(clsx('pagination', className));
+    var _c = usePagination({
+        defaultPage: defaultPage,
+        onClick: onClick,
+        length: length,
+    }), currentPage = _c.currentPage, handleClickNext = _c.handleClickNext, handleClickPage = _c.handleClickPage, handleClickPrev = _c.handleClickPrev, pager = _c.pager;
     return (React.createElement("nav", __assign({ id: id, className: classes }, others),
-        React.createElement("a", __assign({ className: hashClass(styled, clsx('pagination-previous')) }, (currentPage === 1 ? { 'aria-disabled': true } : {}), { onClick: function () {
-                if (currentPage !== 1) {
-                    setCurrentPage(currentPage - 1);
-                }
-            }, href: href === null || href === void 0 ? void 0 : href(currentPage - 1) }),
+        React.createElement("a", __assign({ className: hashClass(clsx('pagination-previous')) }, (currentPage === 1 ? { 'aria-disabled': true } : {}), { onClick: handleClickPrev, href: href === null || href === void 0 ? void 0 : href(currentPage - 1) }),
             React.createElement(Icon, { name: IconName.ARROW_LEFT })),
-        React.createElement("ul", { className: hashClass(styled, clsx('pagination-list')) },
+        React.createElement("ul", { className: hashClass(clsx('pagination-list')) },
             !pager.pages.includes(1) && (React.createElement("li", null,
-                React.createElement("span", { className: hashClass(styled, clsx('pagination-ellipsis')) }, "\u2026"))),
+                React.createElement("span", { className: hashClass(clsx('pagination-ellipsis')) }, "\u2026"))),
             pager.pages.map(function (pageNumber) { return (React.createElement("li", { key: pageNumber },
-                React.createElement("a", __assign({ className: hashClass(styled, clsx('pagination-link')) }, (currentPage === pageNumber ? { 'aria-current': true } : {}), { "aria-label": "Aller \u00E0 la page ".concat(pageNumber), onClick: function () {
-                        setCurrentPage(pageNumber);
-                    }, href: href === null || href === void 0 ? void 0 : href(pageNumber) }), pageNumber))); }),
+                React.createElement("a", __assign({ className: hashClass(clsx('pagination-link')) }, (currentPage === pageNumber ? { 'aria-current': true } : {}), { "aria-label": "Aller \u00E0 la page ".concat(pageNumber), onClick: handleClickPage ? function () { return handleClickPage(pageNumber); } : undefined, href: href === null || href === void 0 ? void 0 : href(pageNumber) }), pageNumber))); }),
             !pager.pages.includes(length) && (React.createElement("li", null,
-                React.createElement("span", { className: hashClass(styled, clsx('pagination-ellipsis')) }, "\u2026")))),
-        React.createElement("a", __assign({ className: hashClass(styled, clsx('pagination-next')) }, (currentPage === Math.max(length) ? { 'aria-disabled': true } : {}), { onClick: function () {
-                if (currentPage !== Math.max(length)) {
-                    setCurrentPage(currentPage + 1);
-                }
-            }, href: href === null || href === void 0 ? void 0 : href(currentPage + 1) }),
+                React.createElement("span", { className: hashClass(clsx('pagination-ellipsis')) }, "\u2026")))),
+        React.createElement("a", __assign({ className: hashClass(clsx('pagination-next')) }, (currentPage === Math.max(length) ? { 'aria-disabled': true } : {}), { onClick: handleClickNext, href: href === null || href === void 0 ? void 0 : href(currentPage + 1) }),
             React.createElement(Icon, { name: IconName.ARROW_RIGHT }))));
 };
 export default Pagination;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFnaW5hdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcGFnaW5hdGlvbi9QYWdpbmF0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUMxRCxPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRWxELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUc3Qzs7Ozs7Ozs7OztHQVVHO0FBQ0gsSUFBTSxVQUFVLEdBQUcsVUFBQyxFQVFGO0lBUGhCLElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsTUFBTSxZQUFBLEVBQ04sbUJBQWUsRUFBZixXQUFXLG1CQUFHLENBQUMsS0FBQSxFQUNmLE9BQU8sYUFBQSxFQUNQLElBQUksVUFBQSxFQUNELE1BQU0sY0FQUywrREFRbkIsQ0FEVTtJQUVILElBQUEsS0FBQSxPQUFnQyxRQUFRLENBQVMsV0FBVyxDQUFDLElBQUEsRUFBNUQsV0FBVyxRQUFBLEVBQUUsY0FBYyxRQUFpQyxDQUFBO0lBQzNELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFlBQVksRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRWhFLElBQU0sZUFBZSxHQUFHLE1BQU0sQ0FBUyxXQUFXLENBQUMsQ0FBQTtJQUNuRCxJQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFRO1FBQ2pDLHdCQUF3QjtRQUV4QixJQUFJLFNBQVMsR0FBRyxD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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFnaW5hdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcGFnaW5hdGlvbi9QYWdpbmF0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sNkNBQTZDLENBQUE7QUFFM0UsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekI7Ozs7Ozs7Ozs7R0FVRztBQUNILElBQU0sVUFBVSxHQUFHLFVBQUMsRUFRRjtJQVBoQixJQUFBLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLE1BQU0sWUFBQSxFQUNOLG1CQUFlLEVBQWYsV0FBVyxtQkFBRyxDQUFDLEtBQUEsRUFDZixPQUFPLGFBQUEsRUFDUCxJQUFJLFVBQUEsRUFDRCxNQUFNLGNBUFMsK0RBUW5CLENBRFU7SUFFVCxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRWxELElBQUEsS0FBNEUsYUFBYSxDQUFDO1FBQzlGLFdBQVcsYUFBQTtRQUNYLE9BQU8sU0FBQTtRQUNQLE1BQU0sUUFBQTtLQUNQLENBQUMsRUFKTSxXQUFXLGlCQUFBLEVBQUUsZUFBZSxxQkFBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxlQUFlLHFCQUFBLEVBQUUsS0FBSyxXQUkzRSxDQUFBO0lBRUYsT0FBTyxDQUNMLHNDQUFLLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNO1FBQ3pDLG9DQUNFLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLHFCQUFxQixDQUFDLENBQUMsSUFDN0MsQ0FBQyxXQUFXLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLGVBQWUsRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQ3hELE9BQU8sRUFBRSxlQUFlLEVBQ3hCLElBQUksRUFBRSxJQUFJLGFBQUosSUFBSSx1QkFBSixJQUFJLENBQUcsV0FBVyxHQUFHLENBQUMsQ0FBQztZQUU3QixvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxVQUFVLEdBQUksQ0FDakM7UUFDSiw0QkFBSSxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1lBQzlDLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FDM0I7Z0JBQ0UsOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMsQ0FBQyxhQUFVLENBQzlELENBQ047WUFDQSxLQUFLLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxVQUFDLFVBQVUsSUFBSyxPQUFBLENBQy9CLDRCQUFJLEdBQUcsRUFBRSxVQUFVO2dCQUNqQixvQ0FDRSxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLElBQ3pDLENBQUMsV0FBVyxLQUFLLFVBQVUsQ0FBQyxDQUFDLENBQUMsRUFBRSxjQUFjLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxrQkFDcEQsK0JBQW1CLFVBQVUsQ0FBRSxFQUMzQyxPQUFPLEVBQUUsZUFBZSxDQUFDLENBQUMsQ0FBQyxjQUFNLE9BQUEsZUFBZSxDQUFDLFVBQVUsQ0FBQyxFQUEzQixDQUEyQixDQUFDLENBQUMsQ0FBQyxTQUFTLEVBQ3hFLElBQUksRUFBRSxJQUFJLGFBQUosSUFBSSx1QkFBSixJQUFJLENBQUcsVUFBVSxDQUFDLEtBRXZCLFVBQVUsQ0FDVCxDQUNELENBQ04sRUFaZ0MsQ0FZaEMsQ0FBQztZQUNELENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLElBQUksQ0FDaEM7Z0JBQ0UsOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMsQ0FBQyxhQUFVLENBQzlELENBQ04sQ0FDRTtRQUNMLG9DQUNFLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLENBQUMsSUFDekMsQ0FBQyxXQUFXLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxlQUFlLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxJQUN2RSxPQUFPLEVBQUUsZUFBZSxFQUN4QixJQUFJLEVBQUUsSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFHLFdBQVcsR0FBRyxDQUFDLENBQUM7WUFFN0Isb0JBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxRQUFRLENBQUMsV0FBVyxHQUFJLENBQ2xDLENBQ0EsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxVQUFVLENBQUEifQ==

package/lib/components/pagination/PaginationProps.d.ts

@@ -1,6 +1,7 @@
-import { Accessibility, Dev } from '../../objects';
-import { Pager } from './PaginationEnum';
+import { Pager } from '../../components/pagination/PaginationEnum';
+import { Accessibility } from '../../objects/facets/Accessibility';
 import { CommonProps } from '../../objects/facets/CommonProps';
+import { Dev } from '../../objects/facets/Dev';
 /**
  * Pagination Interface
  */

package/lib/components/pagination/hooks/usePagination.d.ts

@@ -0,0 +1,25 @@
+import { Pager } from '../../../components/pagination/PaginationEnum';
+interface IProps {
+    length: number;
+    defaultPage: number;
+    onClick?: (pager: Pager) => void;
+}
+export declare const usePagination: ({ defaultPage, onClick, length }: IProps) => {
+    currentPage: number;
+    handleClickNext: () => void;
+    handleClickPage: (pageNumber: number) => void;
+    handleClickPrev: () => void;
+    pager: Pager;
+} | {
+    currentPage: number;
+    pager: {
+        currentPage: number;
+        length: number;
+        endPage: number;
+        pages: number[];
+    };
+    handleClickNext?: undefined;
+    handleClickPage?: undefined;
+    handleClickPrev?: undefined;
+};
+export {};