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

package/lib/components/modal/Modal.js

@@ -1,13 +1,11 @@
-import { __assign, __read, __rest } from "tslib";
+import { __assign, __rest } from "tslib";
 import { ButtonType } from '../../components/button';
+import { useModal } from '../../components/modal/hooks/useModal';
 import { Title, TitleLevels, TitleMarkup } from '../../components/title';
-import { useTrilogyContext } from '../../context/index';
 import { hashClass } from '../../helpers/hashClassesHelpers';
 import { is } from '../../services';
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import shortid from 'shortid';
-var modalGeneratedId = shortid.generate();
+import React from 'react';
 /**
  * Modal Component
  * @param active {boolean} Activated Modal
@@ -24,78 +22,20 @@ var modalGeneratedId = shortid.generate();
  */
 var Modal = function (_a) {
     var children = _a.children, className = _a.className, id = _a.id, _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'Close' : _b, active = _a.active, onClose = _a.onClose, onOpen = _a.onOpen, panel = _a.panel, size = _a.size, _c = _a.hideCloseButton, hideCloseButton = _c === void 0 ? false : _c, trigger = _a.trigger, _d = _a.unClosable, unClosable = _d === void 0 ? false : _d, title = _a.title, others = __rest(_a, ["children", "className", "id", "accessibilityLabel", "active", "onClose", "onOpen", "panel", "size", "hideCloseButton", "trigger", "unClosable", "title"]);
-    var modal = useRef(null);
-    var _e = __read(useState(active || false), 2), display = _e[0], setDisplay = _e[1];
-    var styled = useTrilogyContext().styled;
-    var refsActions = useRef([]);
-    var refBtnModal = useRef(null);
-    var refModal = useRef(null);
-    var _f = __read(useState(0), 2), setIndexFocusable = _f[1];
-    var handleClose = React.useCallback(function (onCloseFunc, e) {
-        setDisplay(false);
-        refBtnModal.current && refBtnModal.current.focus();
-        setIndexFocusable(0);
-        if (onCloseFunc)
-            onCloseFunc(e);
-    }, [refBtnModal.current]);
-    var classes = React.useMemo(function () { return hashClass(styled, clsx('modal', display && is('active'), size && is(size), panel && is('panel'), className)); }, [display, panel, className, styled]);
-    var onKeyDown = useCallback(function (event) {
-        if (display && refsActions.current) {
-            var refs_1 = refsActions.current.filter(function (ref) { return ref; });
-            var key = event.key;
-            if (key === 'Tab') {
-                event.preventDefault();
-                setIndexFocusable(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(false);
-                refBtnModal.current && refBtnModal.current.focus();
-                setIndexFocusable(0);
-                onClose && onClose();
-            }
-        }
-    }, [refsActions.current.length, display]);
-    useEffect(function () {
-        display && refsActions.current[0] && refsActions.current[0].focus();
-    }, [display, refsActions === null || refsActions === void 0 ? void 0 : refsActions.current.length]);
-    useEffect(function () {
-        setDisplay(function (prev) {
-            if (prev) {
-                refBtnModal.current && refBtnModal.current.focus();
-                setIndexFocusable(0);
-            }
-            return active || false;
-        });
-    }, [active]);
-    useEffect(function () {
-        if (refModal.current) {
-            var footer = refModal.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.current[i + 1] = el); });
-        }
-    }, [refModal.current]);
+    var modalGeneratedId = React.useId();
+    var _e = useModal({
+        active: active,
+        onClose: onClose,
+    }), display = _e.display, refModal = _e.refModal, onKeyDown = _e.onKeyDown, handleClickModal = _e.handleClickModal, modal = _e.modal, refBtnModal = _e.refBtnModal, buttonRef = _e.buttonRef, handleCloseModal = _e.handleCloseModal;
+    var classes = React.useMemo(function () { return hashClass(clsx('modal', display && is('active'), size && is(size), panel && is('panel'), className)); }, [display, panel, className]);
     return (React.createElement("div", { onKeyDown: onKeyDown, ref: refModal },
         trigger && React.cloneElement(trigger, { ref: refBtnModal, 'aria-haspopup': 'dialog' }),
-        React.createElement("div", __assign({ id: id, className: classes, role: 'dialog', "aria-labelledby": modalGeneratedId, "aria-modal": true, onClick: function (e) {
-                var _a;
-                if (!((_a = modal === null || modal === void 0 ? void 0 : modal.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-                    handleClose(onClose, e);
-                }
-            } }, others),
-            React.createElement("div", { ref: modal, className: hashClass(styled, clsx('modal-content')) },
-                React.createElement("div", { className: hashClass(styled, clsx('modal-header')) },
-                    hideCloseButton !== true && (React.createElement("button", { onClick: function (e) {
-                            handleClose(onClose, e);
-                        }, className: hashClass(styled, clsx('modal-close', is('large'))), type: ButtonType.BUTTON, ref: function (el) { return el && (refsActions.current[0] = el); } }, accessibilityLabel && React.createElement("span", { className: 'sr-only' }, accessibilityLabel))),
+        React.createElement("div", __assign({ id: id, className: classes, role: 'dialog', "aria-labelledby": modalGeneratedId, "aria-modal": true, onClick: handleClickModal }, others),
+            React.createElement("div", { ref: modal, className: hashClass(clsx('modal-content')) },
+                React.createElement("div", { className: hashClass(clsx('modal-header')) },
+                    hideCloseButton !== true && (React.createElement("button", { onClick: handleCloseModal, className: hashClass(clsx('modal-close', is('large'))), type: ButtonType.BUTTON, ref: buttonRef }, accessibilityLabel && React.createElement("span", { className: 'sr-only' }, accessibilityLabel))),
                     React.createElement(Title, { id: modalGeneratedId, level: TitleLevels.THREE, markup: TitleMarkup.H1 }, title)),
                 children && children))));
 };
 export default Modal;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL01vZGFsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQ2hELE9BQU8sRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLFdBQVcsRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBRW5ELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQy9CLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssRUFBRSxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN2RSxPQUFPLE9BQU8sTUFBTSxTQUFTLENBQUE7QUFHN0IsSUFBTSxnQkFBZ0IsR0FBRyxPQUFPLENBQUMsUUFBUSxFQUFFLENBQUE7QUFFM0M7Ozs7Ozs7Ozs7Ozs7R0FhRztBQUNILElBQU0sS0FBSyxHQUFHLFVBQUMsRUFlRjtJQWRYLElBQUEsUUFBUSxjQUFBLEVBQ1IsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsMEJBQTRCLEVBQTVCLGtCQUFrQixtQkFBRyxPQUFPLEtBQUEsRUFDNUIsTUFBTSxZQUFBLEVBQ04sT0FBTyxhQUFBLEVBQ1AsTUFBTSxZQUFBLEVBQ04sS0FBSyxXQUFBLEVBQ0wsSUFBSSxVQUFBLEVBQ0osdUJBQXVCLEVBQXZCLGVBQWUsbUJBQUcsS0FBSyxLQUFBLEVBQ3ZCLE9BQU8sYUFBQSxFQUNQLGtCQUFrQixFQUFsQixVQUFVLG1CQUFHLEtBQUssS0FBQSxFQUNsQixLQUFLLFdBQUEsRUFDRixNQUFNLGNBZEksMEpBZWQsQ0FE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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL01vZGFsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBRWhELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQTtBQUM1RCxPQUFPLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQTtBQUNwRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUMvQixPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCOzs7Ozs7Ozs7Ozs7O0dBYUc7QUFDSCxJQUFNLEtBQUssR0FBRyxVQUFDLEVBZUY7SUFkWCxJQUFBLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLDBCQUE0QixFQUE1QixrQkFBa0IsbUJBQUcsT0FBTyxLQUFBLEVBQzVCLE1BQU0sWUFBQSxFQUNOLE9BQU8sYUFBQSxFQUNQLE1BQU0sWUFBQSxFQUNOLEtBQUssV0FBQSxFQUNMLElBQUksVUFBQSxFQUNKLHVCQUF1QixFQUF2QixlQUFlLG1CQUFHLEtBQUssS0FBQSxFQUN2QixPQUFPLGFBQUEsRUFDUCxrQkFBa0IsRUFBbEIsVUFBVSxtQkFBRyxLQUFLLEtBQUEsRUFDbEIsS0FBSyxXQUFBLEVBQ0YsTUFBTSxjQWRJLDBKQWVkLENBRFU7SUFFVCxJQUFNLGdCQUFnQixHQUFHLEtBQUssQ0FBQyxLQUFLLEVBQUUsQ0FBQTtJQUNoQyxJQUFBLEtBQXNHLFFBQVEsQ0FBQztRQUNuSCxNQUFNLFFBQUE7UUFDTixPQUFPLFNBQUE7S0FDUixDQUFDLEVBSE0sT0FBTyxhQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsZ0JBQWdCLHNCQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsV0FBVyxpQkFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLGdCQUFnQixzQkFHckcsQ0FBQTtJQUVGLElBQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQzNCLGNBQU0sT0FBQSxTQUFTLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLElBQUksRUFBRSxDQUFDLFFBQVEsQ0FBQyxFQUFFLElBQUksSUFBSSxFQUFFLENBQUMsSUFBSSxDQUFDLEVBQUUsS0FBSyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxFQUFwRyxDQUFvRyxFQUMxRyxDQUFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsU0FBUyxDQUFDLENBQzVCLENBQUE7SUFFRCxPQUFPLENBQ0wsNkJBQUssU0FBUyxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUUsUUFBUTtRQUNyQyxPQUFPLElBQUksS0FBSyxDQUFDLFlBQVksQ0FBQyxPQUE2QixFQUFFLEVBQUUsR0FBRyxFQUFFLFdBQVcsRUFBRSxlQUFlLEVBQUUsUUFBUSxFQUFFLENBQUM7UUFDOUcsc0NBQ0UsRUFBRSxFQUFFLEVBQUUsRUFDTixTQUFTLEVBQUUsT0FBTyxFQUNsQixJQUFJLEVBQUMsUUFBUSxxQkFDSSxnQkFBZ0IsZ0JBQ3JCLElBQUksRUFDaEIsT0FBTyxFQUFFLGdCQUFnQixJQUNyQixNQUFNO1lBRVYsNkJBQUssR0FBRyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsQ0FBQztnQkFDMUQsNkJBQUssU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7b0JBQzVDLGVBQWUsS0FBSyxJQUFJLElBQUksQ0FDM0IsZ0NBQ0UsT0FBTyxFQUFFLGdCQUFnQixFQUN6QixTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUUsRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFDdEQsSUFBSSxFQUFFLFVBQVUsQ0FBQyxNQUFNLEVBQ3ZCLEdBQUcsRUFBRSxTQUFTLElBRWIsa0JBQWtCLElBQUksOEJBQU0sU0FBUyxFQUFDLFNBQVMsSUFBRSxrQkFBa0IsQ0FBUSxDQUNyRSxDQUNWO29CQUNELG9CQUFDLEtBQUssSUFBQyxFQUFFLEVBQUUsZ0JBQWdCLEVBQUUsS0FBSyxFQUFFLFdBQVcsQ0FBQyxLQUFLLEVBQUUsTUFBTSxFQUFFLFdBQVcsQ0FBQyxFQUFFLElBQzFFLEtBQUssQ0FDQSxDQUNKO2dCQUNMLFFBQVEsSUFBSSxRQUFRLENBQ2pCLENBQ0YsQ0FDRixDQUNQLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLEtBQUssQ0FBQSJ9

package/lib/components/modal/Modal.native.js

@@ -1,14 +1,13 @@
 import { __assign, __read, __rest } from "tslib";
 import { ComponentName } from '../../components/enumsComponentsName';
-import { Icon, IconName, IconSize } from '../../components/icon';
-import { Alignable } from '../../objects/facets/Alignable';
-import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
+import { Alignable, getColorStyle, TrilogyColor } from '../../objects';
 import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
-import NativeModal from 'react-native-modal';
+import { Dimensions, StyleSheet, TouchableOpacity, View, } from 'react-native';
+import ModalRN from 'react-native-modal';
 import { Column, Columns } from '../columns';
-import { SpacerSize } from '../spacer';
+import { Icon, IconName, IconSize } from '../icon';
 import { Title } from '../title';
+import { ModalContext } from './context/ModalContext';
 /**
  * Modal Component
  * @param active {boolean} Activated Modal
@@ -21,114 +20,57 @@ import { Title } from '../title';
  */
 var Modal = function (_a) {
     var children = _a.children, _b = _a.active, active = _b === void 0 ? false : _b, onClose = _a.onClose, onModalHide = _a.onModalHide, _c = _a.hideCloseButton, hideCloseButton = _c === void 0 ? false : _c, _d = _a.unClosable, unClosable = _d === void 0 ? false : _d, trigger = _a.trigger, title = _a.title, others = __rest(_a, ["children", "active", "onClose", "onModalHide", "hideCloseButton", "unClosable", "trigger", "title"]);
-    var styles = StyleSheet.create({
-        centeredView: {
-            justifyContent: 'flex-end',
-            alignItems: 'center',
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        },
-        iconCenter: {
-            alignSelf: 'center',
-            marginBottom: 30,
-        },
-        modalView: {
-            margin: 0,
-            backgroundColor: getColorStyle(TrilogyColor.BACKGROUND),
-            borderRadius: 6,
-            padding: 17,
-            shadowColor: '#000',
-            shadowOffset: {
-                width: 0,
-                height: 2,
-            },
-            shadowOpacity: 0.25,
-            shadowRadius: 3.84,
-            elevation: 5,
-            flex: 1,
-        },
-        title: {
-            textAlign: 'center',
-            fontSize: 21,
-            fontWeight: '600',
-        },
-        content: {
-            textAlign: 'center',
-            fontSize: 15,
-            paddingTop: 10,
-        },
-        overlay: {
-            flexDirection: 'row',
-            width: '100%',
-            height: '100%',
-        },
-        middleModal: {
-            justifyContent: 'center',
-        },
-        bottomModal: {
-            justifyContent: 'flex-end',
-        },
-        childrenContainer: {
-            flexWrap: 'wrap',
-            borderRadius: 6,
-            backgroundColor: getColorStyle(TrilogyColor.BACKGROUND),
-            width: '100%',
-        },
-        horizontalMargin: {
-            marginTop: 50,
-            marginBottom: 0,
-        },
-    });
-    var defaultAnimPosition = Dimensions.get('window').height;
-    var translateAnim = useRef(new Animated.Value(defaultAnimPosition)).current;
-    var _e = __read(useState(active || false), 2), visible = _e[0], setVisible = _e[1];
-    useEffect(function () {
-        setVisible(active);
-    }, [active]);
-    useEffect(function () {
-        if (visible) {
-            Animated.timing(translateAnim, {
-                toValue: 0,
-                duration: 500,
-                useNativeDriver: true,
-            }).start();
-        }
-        else {
-            translateAnim.setValue(defaultAnimPosition);
-        }
-    }, [visible]);
-    var close = function (e) {
+    var scrollViewRef = useRef(null);
+    var _e = __read(useState(0), 2), scrollOffset = _e[0], setScrollOffset = _e[1];
+    var _f = __read(useState(active || false), 2), visible = _f[0], setVisible = _f[1];
+    var _g = __read(useState(active || false), 2), isFooter = _g[0], setIsFooter = _g[1];
+    var handleOnScroll = function (event) {
+        setScrollOffset(event.nativeEvent.contentOffset.y);
+    };
+    var handleScrollTo = function (p) {
+        if (scrollViewRef.current)
+            scrollViewRef.current.scrollTo(p);
+    };
+    var handleClose = function (e) {
         if (onClose)
             onClose(e);
         setVisible(false);
     };
-    return (React.createElement(React.Fragment, null,
+    useEffect(function () {
+        setVisible(active);
+    }, [active]);
+    return (React.createElement(ModalContext.Provider, { value: { scrollViewRef: scrollViewRef, handleOnScroll: handleOnScroll, isFooter: isFooter, setIsFooter: setIsFooter } },
         trigger,
-        React.createElement(NativeModal, __assign({ onSwipeComplete: function (e) { return close(e); }, onModalHide: onModalHide, swipeDirection: unClosable ? undefined : 'down', isVisible: visible, statusBarTranslucent: true, style: { width: '100%', padding: 0, margin: 0 }, propagateSwipe: true }, others),
-            React.createElement(View, { style: [styles.overlay, styles.bottomModal] },
-                React.createElement(TouchableOpacity, { activeOpacity: 1, style: { width: 0, height: '100%' }, onPress: close }),
-                React.createElement(View, { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        flex: 1,
-                    } },
-                    React.createElement(TouchableOpacity, { activeOpacity: 1, style: { width: '100%', minHeight: 50, flexGrow: 1 }, onPress: close }),
-                    React.createElement(View, { style: { flexShrink: 1 } },
-                        React.createElement(Animated.View, { style: [styles.childrenContainer, { transform: [{ translateY: translateAnim }], overflow: 'hidden' }] },
-                            !hideCloseButton && (React.createElement(View, { style: { paddingHorizontal: SpacerSize.FOUR, paddingVertical: 16 } },
-                                React.createElement(Columns, { verticalAlign: Alignable.ALIGNED_CENTER },
-                                    React.createElement(Column, null,
-                                        React.createElement(Title, { level: 4 }, title)),
-                                    React.createElement(Column, { narrow: true },
-                                        React.createElement(TouchableOpacity, { onPress: close },
-                                            React.createElement(Icon, { name: IconName.TIMES, size: IconSize.MEDIUM, color: TrilogyColor.MAIN })))))),
-                            children)),
-                    React.createElement(TouchableOpacity, { activeOpacity: 1, style: {
-                            width: '100%',
-                            minHeight: 0,
-                            flexGrow: 0,
-                        }, onPress: close })),
-                React.createElement(TouchableOpacity, { onPress: close, activeOpacity: 1, style: { width: 0, height: '100%' } })))));
+        React.createElement(ModalRN, __assign({ isVisible: visible, onSwipeComplete: handleClose, swipeDirection: unClosable ? undefined : ['down'], scrollTo: handleScrollTo, scrollOffset: scrollOffset, scrollOffsetMax: 100, propagateSwipe: true, style: [styles.modal], onModalHide: onModalHide }, others),
+            React.createElement(View, { style: [styles.body, { backgroundColor: getColorStyle(TrilogyColor.BACKGROUND) }] },
+                React.createElement(View, { style: { paddingVertical: !title && hideCloseButton ? 8 : 16 } },
+                    React.createElement(Columns, { verticalAlign: Alignable.ALIGNED_CENTER },
+                        React.createElement(Column, null,
+                            React.createElement(Title, { level: 4 }, title)),
+                        !hideCloseButton && (React.createElement(Column, { narrow: true },
+                            React.createElement(TouchableOpacity, { onPress: handleClose },
+                                React.createElement(Icon, { name: IconName.TIMES, size: IconSize.MEDIUM, color: TrilogyColor.MAIN })))))),
+                children))));
 };
 Modal.displayName = ComponentName.Modal;
 export default Modal;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9Nb2RhbC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDNUQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQ3RELE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDcEUsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUMxRCxPQUFPLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBeUIsVUFBVSxFQUFFLGdCQUFnQixFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUM5RyxPQUFPLFdBQXNDLE1BQU0sb0JBQW9CLENBQUE7QUFDdkUsT0FBTyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDNUMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUN0QyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sVUFBVSxDQUFBO0FBR2hDOzs7Ozs7Ozs7R0FTRztBQUNILElBQU0sS0FBSyxHQUFHLFVBQUMsRUFVRjtJQVRYLElBQUEsUUFBUSxjQUFBLEVBQ1IsY0FBYyxFQUFkLE1BQU0sbUJBQUcsS0FBSyxLQUFBLEVBQ2QsT0FBTyxhQUFBLEVBQ1AsV0FBVyxpQkFBQSxFQUNYLHVCQUF1QixFQUF2QixlQUFlLG1CQUFHLEtBQUssS0FBQSxFQUN2QixrQkFBa0IsRUFBbEIsVUFBVSxtQkFBRyxLQUFLLEtBQUEsRUFDbEIsT0FBTyxhQUFBLEVBQ1AsS0FBSyxX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
+var styles = StyleSheet.create({
+    modal: {
+        justifyContent: 'flex-end',
+        margin: 0,
+    },
+    body: {
+        paddingHorizontal: 16,
+        maxHeight: Dimensions.get('screen').height / 1.1,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+        borderRadius: 6,
+    },
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9Nb2RhbC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLFNBQVMsRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ2xFLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDMUQsT0FBTyxFQUNMLFVBQVUsRUFLVixVQUFVLEVBQ1YsZ0JBQWdCLEVBQ2hCLElBQUksR0FDTCxNQUFNLGNBQWMsQ0FBQTtBQUNyQixPQUFPLE9BQWtDLE1BQU0sb0JBQW9CLENBQUE7QUFDbkUsT0FBTyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDNUMsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLE1BQU0sU0FBUyxDQUFBO0FBQ2xELE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxVQUFVLENBQUE7QUFFaEMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBRXJEOzs7Ozs7Ozs7R0FTRztBQUNILElBQU0sS0FBSyxHQUFHLFVBQUMsRUFVRjtJQVRYLElBQUEsUUFBUSxjQUFBLEVBQ1IsY0FBYyxFQUFkLE1BQU0sbUJBQUcsS0FBSyxLQUFBLEVBQ2QsT0FBTyxhQUFBLEVBQ1AsV0FBVyxpQkFBQSxFQUNYLHVCQUF1QixFQUF2QixlQUFlLG1CQUFHLEtBQUssS0FBQSxFQUN2QixrQkFBa0IsRUFBbEIsVUFBVSxtQkFBRyxLQUFLLEtBQUEsRUFDbEIsT0FBTyxhQUFBLEVBQ1AsS0FBSyxXQUFBLEVBQ0YsTUFBTSxjQVRJLHFHQVVkLENBRFU7SUFFVCxJQUFNLGFBQWEs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

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

@@ -1,8 +1,9 @@
-import { ReactNode } from 'react';
 import { ModalSize } from '../../components/modal/ModalEnum';
 import { ClickEvent } from '../../events/OnClickEvent';
-import { Accessibility, Dev } from '../../objects';
+import { Accessibility } from '../../objects/facets/Accessibility';
 import { CommonProps } from '../../objects/facets/CommonProps';
+import { Dev } from '../../objects/facets/Dev';
+import { ReactNode } from 'react';
 /**
  * Modal Interface
  */

package/lib/components/modal/body/ModalBody.d.ts

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

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

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

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