@trilogy-ds/react 0.0.3-beta-v4 → 0.0.3-calendar

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

@@ -1,135 +1,78 @@
 import { __assign, __read, __rest } from "tslib";
-import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Dimensions, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
-import NativeModal from 'react-native-modal';
-import { View } from '../../components/view';
-import { Icon, IconName, IconSize } from '../../components/icon';
-import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
 import { ComponentName } from '../../components/enumsComponentsName';
+import { isAndroid } from '../../helpers/device.native';
+import { Alignable, getColorStyle, TrilogyColor } from '../../objects';
+import React, { useEffect, useRef, useState } from 'react';
+import { Dimensions, StyleSheet, TouchableOpacity, View, } from 'react-native';
+import ModalRN from 'react-native-modal';
+import { Column, Columns } from '../columns';
+import { Icon, IconName, IconSize } from '../icon';
+import { Title } from '../title';
+import { ModalContext } from './context/ModalContext';
 /**
  * Modal Component
  * @param active {boolean} Activated Modal
  * @param title {string} Title Modal
- * @param onClose {Function} Additionnal close custom function
- * @param onOpen {Function} Additionnal open custom function
+ * @param onClose {Function} Additional close custom function
+ * @param onOpen {Function} Additional open custom function
  * @param children {React.ReactNode}
  * @param onModalHide {Function} Callback on Hide
  * @param unClosable {boolean} unClosable Native Modal
  */
-var Modal = function (_a) {
-    var children = _a.children, _b = _a.active, active = _b === void 0 ? false : _b, onClose = _a.onClose, onOpen = _a.onOpen, onModalHide = _a.onModalHide, _c = _a.hideCloseButton, hideCloseButton = _c === void 0 ? false : _c, _d = _a.unClosable, unClosable = _d === void 0 ? false : _d, others = __rest(_a, ["children", "active", "onClose", "onOpen", "onModalHide", "hideCloseButton", "unClosable"]);
-    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',
-            paddingTop: 10,
-            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);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visible]);
-    var close = function (e) {
+var Modal = React.forwardRef(function (_a, ref) {
+    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 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,
-        React.createElement(NativeModal
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        , __assign({ 
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            onSwipeComplete: function (e) {
-                //          setVisible(!visible)
-                close(e);
-            }, onModalHide: onModalHide, swipeDirection: unClosable ? undefined : 'down', isVisible: visible, statusBarTranslucent: true, style: { width: '100%', padding: 0, margin: 0 } }, 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: { width: '100%' } },
-                                React.createElement(TouchableOpacity, { style: { alignSelf: 'flex-end', right: 20 }, onPress: close },
-                                    React.createElement(Icon, { name: IconName.TIMES, size: IconSize.SMALL, color: TrilogyColor.NEUTRAL })))),
-                            React.createElement(ScrollView, { contentContainerStyle: { flexGrow: 1 } }, 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%' } })))));
-};
+    useEffect(function () {
+        setVisible(active);
+    }, [active]);
+    return (React.createElement(ModalContext.Provider, { value: { scrollViewRef: scrollViewRef, handleOnScroll: handleOnScroll, isFooter: isFooter, setIsFooter: setIsFooter } },
+        trigger,
+        React.createElement(ModalRN, __assign({ isVisible: visible, onBackdropPress: function () { return handleClose({}); }, onSwipeComplete: handleClose, swipeDirection: unClosable ? undefined : ['down'], scrollTo: handleScrollTo, scrollOffset: scrollOffset, scrollOffsetMax: 100, propagateSwipe: true, style: [styles.modal], onModalHide: onModalHide }, others),
+            React.createElement(View, { ref: ref, 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9Nb2RhbC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzFELE9BQU8sRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUF5QixVQUFVLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sY0FBYyxDQUFBO0FBQ3BILE9BQU8sV0FBVyxNQUFNLG9CQUFvQixDQUFBO0FBRTVDLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUM1RCxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7Ozs7O0dBU0c7QUFDSCxJQUFNLEtBQUssR0FBRyxVQUFDLEVBU0Y7SUFSWCxJQUFBLFFBQVEsY0FBQSxFQUNSLGNBQWMsRUFBZCxNQUFNLG1CQUFHLEtBQUssS0FBQSxFQUNkLE9BQU8sYUFBQSxFQUNQLE1BQU0sWUFBQSxFQUNOLFdBQVcsaUJBQUEsRUFDWCx1QkFBdUIsRUFBdkIsZUFBZSxtQkFBRyxLQUFLLEtBQUEsRUFDdkIsa0JBQWtCLEVBQWxCLFVBQVUsbUJBQUcsS0FBSyxLQUFBLEVBQ2YsTUFBTSxjQVJJLDJGQVNkLENBRFU7SUFFVCxJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLFlBQVksRUFBRTtZQUNaLGNBQWMsRUFBRSxVQUFVO1lBQzFCLFVBQVUsRUFBRSxRQUFRO1lBQ3BCLGVBQWUsRUFBRSxvQkFBb0I7U0FDdEM7UUFDRCxVQUFVLEVBQUU7WUFDVixTQUFTLEVBQUUsUUFBUTtZQUNuQixZQUFZLEVBQUUsRUFBRTtTQUNqQjtRQUNELFNBQVMsRUFBRTtZQUNULE1BQU0sRUFBRSxDQUFDO1lBQ1QsZUFBZSxFQUFFLGFBQWEsQ0FBQyxZQUFZLENBQUMsVUFBVSxDQUFDO1lBQ3ZELFlBQVksRUFBRSxDQUFDO1lBQ2YsT0FBTyxFQUFFLEVBQUU7WUFDWCxXQUFXLEVBQUUsTUFBTTtZQUNuQixZQUFZLEVBQUU7Z0JBQ1osS0FBSyxFQUFFLENBQUM7Z0JBQ1IsTUFBTSxFQUFFLENBQUM7YUFDVjtZQUNELGFBQWEsRUFBRSxJQUFJO1lBQ25CLFlBQVksRUFBRSxJQUFJO1lBQ2xCLFNBQVMsRUFBRSxDQUFDO1lBQ1osSUFBSSxFQUFFLENBQUM7U0FDUjtRQUNELEtBQUssRUFBRTtZQUNMLFNBQVMsRUFBRSxRQUFRO1lBQ25CLFFBQVEsRUFBRSxFQUFFO1lBQ1osVUFBVSxFQUFFLEtBQUs7U0FDbEI7UUFDRCxPQUFPLEVBQUU7WUFDUCxTQUFTLEVBQUUsUUFBUTtZQUNuQixRQUFRLEVBQUUsRUFBRTtZQUNaLFVBQVUsRUFBRSxFQUFFO1NBQ2Y7UUFDRCxPQUFPLEVBQUU7WUFDUCxhQUFhLEVBQUUsS0FBSztZQUNwQixLQUFLLEVBQUUsTUFBTTtZQUNiLE1BQU0sRUFBRSxNQUFNO1NBQ2Y7UUFDRCxXQUFXLEVBQUU7WUFDWCxjQUFjLEVBQUUsUUFBUTtTQUN6QjtRQUNELFdBQVcsRUFBRTtZQUNYLGNBQWMsRUFBRSxVQUFVO1NBQzNCO1FBQ0QsaUJBQWlCLEVBQUU7WUFDakIsUUFBUSxFQUFFLE1BQU07WUFDaEIsVUFBVSxFQUFFLEVBQUU7WUFDZCxZQUFZLEVBQUUsQ0FBQztZQUNmLGVBQWUsRUFBRSxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQztZQUN2RCxLQUFLLEVBQUUsTUFBTTtTQUNkO1FBQ0QsZ0JBQWdCLEVBQUU7WUFDaEIsU0FBUyxFQUFFLEVBQUU7WUFDYixZQUFZLEVBQUUsQ0FBQztTQUNoQjtLQUNGLENBQUMsQ0FBQTtJQUVGLElBQU0sbUJBQW1CLEdBQUcsVUFBVSxDQUFDLEdBQUcsQ0FBQyxRQUFRLENBQUMsQ0FBQyxNQUFNLENBQUE7SUFDM0QsSUFBTSxhQUFhLEdBQUcsTUFBTSxDQUFDLElBQUksUUFBUSxDQUFDLEtBQUssQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFBO0lBQ3ZFLElBQUEsS0FBQSxPQUF3QixRQUFRLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQWhELE9BQU8sUUFBQSxFQUFFLFVBQVUsUUFBNkIsQ0FBQTtJQUV2RCxTQUFTLENBQUM7UUFDUixVQUFVLENBQUMsTUFBTSxDQUFDLENBQUE7SUFDcEIsQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQTtJQUVaLFNBQVMsQ0FBQztRQUNSLElBQUksT0FBTyxFQUFFO1lBQ1gsUUFBUSxDQUFDLE1BQU0sQ0FBQyxhQUFhLEVBQUU7Z0JBQzdCLE9BQU8sRUFBRSxDQUFDO2dCQUNWLFFBQVEsRUFBRSxHQUFHO2dCQUNiLGVBQWUsRUFBRSxJQUFJO2FBQ3RCLENBQUMsQ0FBQyxLQUFLLEVBQUUsQ0FBQTtTQUNYO2FBQU07WUFDTCxhQUFhLENBQUMsUUFBUSxDQUFDLG1CQUFtQixDQUFDLENBQUE7U0FDNUM7UUFDRCx1REFBdUQ7SUFDekQsQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQTtJQUViLElBQU0sS0FBSyxHQUFHLFVBQUMsQ0FBd0I7UUFDckMsSUFBSSxPQUFPO1lBQUUsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFBO1FBQ3ZCLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUNuQixDQUFDLENBQUE7SUFFRCxPQUFPLENBQ0w7UUFZRSxvQkFBQyxXQUFXO1FBQ1YsOERBQThEOztZQUE5RCw4REFBOEQ7WUFDOUQsZUFBZSxFQUFFLFVBQUMsQ0FBTTtnQkFDdEIsZ0NBQWdDO2dCQUNoQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUE7WUFDVixDQUFDLEVBQ0QsV0FBVyxFQUFFLFdBQVcsRUFDeEIsY0FBYyxFQUFFLFVBQVUsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxNQUFNLEVBQy9DLFNBQVMsRUFBRSxPQUFPLEVBQ2xCLG9CQUFvQixFQUFFLElBQUksRUFDMUIsS0FBSyxFQUFFLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLE1BQU0sRUFBRSxDQUFDLEVBQUUsSUFDM0MsTUFBTTtZQUVWLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsT0FBTyxFQUFFLE1BQU0sQ0FBQyxXQUFXLENBQUM7Z0JBQy9DLG9CQUFDLGdCQUFnQixJQUFDLGFBQWEsRUFBRSxDQUFDLEVBQUUsS0FBSyxFQUFFLEVBQUUsS0FBSyxFQUFFLENBQUMsRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLEVBQUUsT0FBTyxFQUFFLEtBQUssR0FBSTtnQkFDM0Ysb0JBQUMsSUFBSSxJQUNILEtBQUssRUFBRTt3QkFDTCxPQUFPLEVBQUUsTUFBTTt3QkFDZixhQUFhLEVBQUUsUUFBUTt3QkFDdkIsSUFBSSxFQUFFLENBQUM7cUJBQ1I7b0JBRUQsb0JBQUMsZ0JBQWdCLElBQUMsYUFBYSxFQUFFLENBQUMsRUFBRSxLQUFLLEVBQUUsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxFQUFFLEVBQUUsUUFBUSxFQUFFLENBQUMsRUFBRSxFQUFFLE9BQU8sRUFBRSxLQUFLLEdBQUk7b0JBRTVHLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsRUFBRSxVQUFVLEVBQUUsQ0FBQyxFQUFFO3dCQUM1QixvQkFBQyxRQUFRLENBQUMsSUFBSSxJQUNaLEtBQUssRUFBRSxDQUFDLE1BQU0sQ0FBQyxpQkFBaUIsRUFBRSxFQUFFLFNBQVMsRUFBRSxDQUFDLEVBQUUsVUFBVSxFQUFFLGFBQWEsRUFBRSxDQUFDLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxDQUFDOzRCQUVwRyxDQUFDLGVBQWUsSUFBSSxDQUNuQixvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRTtnQ0FDNUIsb0JBQUMsZ0JBQWdCLElBQUMsS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLEVBQUUsT0FBTyxFQUFFLEtBQUs7b0NBQzNFLG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsUUFBUSxDQUFDLEtBQUssRUFBRSxJQUFJLEVBQUUsUUFBUSxDQUFDLEtBQUssRUFBRSxLQUFLLEVBQUUsWUFBWSxDQUFDLE9BQU8sR0FBSSxDQUNoRSxDQUNkLENBQ1I7NEJBQ0Qsb0JBQUMsVUFBVSxJQUFDLHFCQUFxQixFQUFFLEVBQUUsUUFBUSxFQUFFLENBQUMsRUFBRSxJQUFHLFFBQVEsQ0FBYyxDQUM3RCxDQUNYO29CQUNQLG9CQUFDLGdCQUFnQixJQUNmLGFBQWEsRUFBRSxDQUFDLEVBQ2hCLEtBQUssRUFBRTs0QkFDTCxLQUFLLEVBQUUsTUFBTTs0QkFDYixTQUFTLEVBQUUsQ0FBQzs0QkFDWixRQUFRLEVBQUUsQ0FBQzt5QkFDWixFQUNELE9BQU8sRUFBRSxLQUFLLEdBQ2QsQ0FDRztnQkFDUCxvQkFBQyxnQkFBZ0IsSUFBQyxPQUFPLEVBQUUsS0FBSyxFQUFFLGFBQWEsRUFBRSxDQUFDLEVBQUUsS0FBSyxFQUFFLEVBQUUsS0FBSyxFQUFFLENBQUMsRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLEdBQUksQ0FDdEYsQ0FDSyxDQUNiLENBQ0osQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELEtBQUssQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLEtBQUssQ0FBQTtBQUV2QyxlQUFlLEtBQUssQ0FBQSJ9
+var styles = StyleSheet.create({
+    modal: {
+        justifyContent: 'flex-end',
+        margin: 0,
+    },
+    body: {
+        paddingHorizontal: 16,
+        maxHeight: isAndroid ? Dimensions.get('screen').height / 1.15 : Dimensions.get('screen').height / 1.1,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+        borderTopLeftRadius: 6,
+        borderTopRightRadius: 6,
+    },
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9Nb2RhbC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLHlCQUF5QixDQUFBO0FBQ25ELE9BQU8sRUFBRSxTQUFTLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNsRSxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzFELE9BQU8sRUFDTCxVQUFVLEVBS1YsVUFBVSxFQUNWLGdCQUFnQixFQUNoQixJQUFJLEdBQ0wsTUFBTSxjQUFjLENBQUE7QUFDckIsT0FBTyxPQUFrQyxNQUFNLG9CQUFvQixDQUFBO0FBQ25FLE9BQU8sRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQzVDLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLFNBQVMsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sVUFBVSxDQUFBO0FBRWhDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUVyRDs7Ozs7Ozs7O0dBU0c7QUFDSCxJQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsVUFBVSxDQUE2QixVQUFDLEVBVTNELEVBQUUsR0FBRztJQVRKLElBQUEsUUFBUSxjQUFBLEVBQ1IsY0FBYyxFQUFkLE1BQU0sbUJBQUcsS0FBSyxLQUFBLEVBQ2QsT0FBTyxhQUFBLEVBQ1AsV0FBVyxpQkFBQSxFQUNYLHVCQUF1QixFQUF2QixlQUFlLG1CQUFHLEtBQUssS0FBQSxFQUN2QixrQkFBa0IsRUFBbEIsVUFBVSxtQkFBRyxLQUFLLEtB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

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

@@ -1,8 +1,9 @@
-import { ClickEvent } from '../../events/OnClickEvent';
-import { Accessibility, Dev } from '../../objects';
 import { ReactNode } from 'react';
 import { ModalSize } from '../../components/modal/ModalEnum';
+import { ClickEvent } from '../../events/OnClickEvent';
+import { Accessibility, Dev } from '../../objects';
 import { CommonProps } from '../../objects/facets/CommonProps';
+import { View } from 'react-native';
 /**
  * Modal Interface
  */
@@ -17,5 +18,7 @@ export interface ModalProps extends Accessibility, Dev, CommonProps {
     onModalHide?: () => void;
     unClosable?: boolean;
     size?: ModalSize;
-    title: string;
+    title?: string;
 }
+export type ModalRef = HTMLDivElement;
+export type ModalNativeRef = View;

package/lib/components/modal/ModalPropsDefaults.js

@@ -91,7 +91,10 @@ export default {
   },
   "title": {
     "type": "string",
-    "values": []
+    "values": [
+      "undefined",
+      "string"
+    ]
   },
   "accessibilityLabel": {
     "type": "string",

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

@@ -1,11 +1,11 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ModalBodyProps } from './ModalBodyProps';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal css classes
+ * @param className {string} Additional css classes
  * @param id
  */
-declare const ModalBody: ({ children, className, id }: ModalBodyProps) => JSX.Element;
+declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
 export default ModalBody;

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

@@ -2,17 +2,19 @@ import * as React from 'react';
 import { hashClass } from '../../../helpers';
 import clsx from 'clsx';
 import { useTrilogyContext } from '../../../context';
+import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal css classes
+ * @param className {string} Additional css classes
  * @param id
  */
-var ModalBody = function (_a) {
+var ModalBody = React.forwardRef(function (_a, ref) {
     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", { ref: ref, id: id, className: hashClass(styled, clsx('modal-body', className)) }, children));
+});
+ModalBody.displayName = ComponentName.ModalBody;
 export default ModalBody;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxCb2R5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9ib2R5L01vZGFsQm9keS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7R0FNRztBQUNILElBQU0sU0FBUyxHQUFHLFVBQUMsRUFBMkM7UUFBekMsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBO0lBQ2xDLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLE9BQU8sQ0FDTCw2QkFBSyxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxZQUFZLEVBQUUsU0FBUyxDQUFDLENBQUMsSUFDckUsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsU0FBUyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxCb2R5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9ib2R5L01vZGFsQm9keS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7O0dBTUc7QUFDSCxJQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUErQixVQUFDLEVBQTJCLEVBQUUsR0FBRztRQUE5QixRQUFRLGNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUE7SUFDakYsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsT0FBTyxDQUNMLDZCQUFLLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsWUFBWSxFQUFFLFNBQVMsQ0FBQyxDQUFDLElBQy9FLFFBQVEsQ0FDTCxDQUNQLENBQUE7QUFDSCxDQUFDLENBQUMsQ0FBQTtBQUVGLFNBQVMsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFNBQVMsQ0FBQTtBQUMvQyxlQUFlLFNBQVMsQ0FBQSJ9

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

@@ -1,13 +1,10 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { View } from 'react-native';
 import { ModalBodyProps } from './ModalBodyProps';
-import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}
  * @param others
  */
-declare const ModalBody: {
-    ({ children, ...others }: ModalBodyProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<View>>;
 export default ModalBody;

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

@@ -1,23 +1,27 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
 import { ComponentName } from '../../../components/enumsComponentsName';
-import { View } from '../../../components/view';
-var styles = {
-    position: 'sticky',
-    bottom: 0,
-    width: '100%',
-    textAlign: 'right',
-    padding: 16,
-};
+import { isIOS } from '../../../helpers/device.native';
+import { getColorStyle, TrilogyColor } from '../../../objects';
+import * as React from 'react';
+import { ScrollView, View } from 'react-native';
+import { ModalContext } from '../context/ModalContext';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}
  * @param others
  */
-var ModalBody = function (_a) {
+var ModalBody = React.forwardRef(function (_a, ref) {
     var children = _a.children, others = __rest(_a, ["children"]);
-    return (React.createElement(View, __assign({}, others, { style: styles }), 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({ ref: ref, style: [
+                {
+                    backgroundColor: getColorStyle(TrilogyColor.BACKGROUND),
+                    paddingTop: 8,
+                    paddingBottom: isFooter ? 8 : isIOS ? 40 : 16,
+                },
+            ] }, others), children)));
+});
 ModalBody.displayName = ComponentName.ModalBody;
 export default ModalBody;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxCb2R5Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvbW9kYWwvYm9keS9Nb2RhbEJvZHkubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUV4QyxJQUFNLE1BQU0sR0FBRztJQUNiLFFBQVEsRUFBRSxRQUFRO0lBQ2xCLE1BQU0sRUFBRSxDQUFDO0lBQ1QsS0FBSyxFQUFFLE1BQU07SUFDYixTQUFTLEVBQUUsT0FBTztJQUNsQixPQUFPLEVBQUUsRUFBRTtDQUNaLENBQUE7QUFFRDs7OztHQUlHO0FBQ0gsSUFBTSxTQUFTLEdBQUcsVUFBQyxFQUF1QztJQUFyQyxJQUFBLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBckIsWUFBdUIsQ0FBRjtJQUN0QyxPQUFPLENBQ0wsb0JBQUMsSUFBSSxlQUFLLE1BQU0sSUFBRSxLQUFLLEVBQUUsTUFBTSxLQUM1QixRQUFRLENBQ0osQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsU0FBUyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFBO0FBRS9DLGVBQWUsU0FBUyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxCb2R5Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvbW9kYWwvYm9keS9Nb2RhbEJvZHkubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQTtBQUMvQyxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUN2RCxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUMvQyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0seUJBQXlCLENBQUE7QUFHdEQ7Ozs7R0FJRztBQUNILElBQU0sU0FBUyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQXFDLFVBQUMsRUFBdUIsRUFBRSxHQUFHO0lBQTFCLElBQUEsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUFyQixZQUF1QixDQUFGO0lBQ3JGLElBQUEsS0FBOEMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxZQUFZLENBQUMsRUFBMUUsY0FBYyxvQkFBQSxFQUFFLGFBQWEsbUJBQUEsRUFBRSxRQUFRLGNBQW1DLENBQUE7SUFFbEYsT0FBTyxDQUNMLG9CQUFDLFVBQVUsSUFDVCxHQUFHLEVBQUUsYUFBYSxFQUNsQixtQkFBbUIsRUFBRSxFQUFFLEVBQ3ZCLFFBQVEsRUFBRSxjQUFjLEVBQ3hCLDRCQUE0QixFQUFFLEtBQUs7UUFFbkMsb0JBQUMsSUFBSSxhQUNILEdBQUcsRUFBRSxHQUFHLEVBQ1IsS0FBSyxFQUFFO2dCQUNMO29CQUNFLGVBQWUsRUFBRSxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQztvQkFDdkQsVUFBVSxFQUFFLENBQUM7b0JBQ2IsYUFBYSxFQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRTtpQkFDOUM7YUFDRixJQUNHLE1BQU0sR0FFVCxRQUFRLENBQ0osQ0FDSSxDQUNkLENBQUE7QUFDSCxDQUFDLENBQUMsQ0FBQTtBQUVGLFNBQVMsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFNBQVMsQ0FBQTtBQUUvQyxlQUFlLFNBQVMsQ0FBQSJ9

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { View } from 'react-native';
 import { CommonProps } from '../../../objects/facets/CommonProps';
 /**
  * Modal Footer Interface
@@ -6,3 +7,5 @@ import { CommonProps } from '../../../objects/facets/CommonProps';
 export interface ModalBodyProps extends CommonProps {
     children: React.ReactNode;
 }
+export type ModalBodyRef = HTMLDivElement;
+export type ModalBodyNativeRef = View;

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,11 +1,11 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ModalFooterProps } from './ModalFooterProps';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal css classes
+ * @param className {string} Additional css classes
  * @param id
  */
-declare const ModalFooter: ({ children, className, id }: ModalFooterProps) => JSX.Element;
+declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
 export default ModalFooter;

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

@@ -1,18 +1,20 @@
-import * as React from 'react';
+import { useTrilogyContext } from '../../../context';
 import { hashClass } from '../../../helpers';
 import clsx from 'clsx';
-import { useTrilogyContext } from '../../../context';
+import * as React from 'react';
+import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal css classes
+ * @param className {string} Additional css classes
  * @param id
  */
-var ModalFooter = function (_a) {
+var ModalFooter = React.forwardRef(function (_a, ref) {
     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-footer', className)) }, children));
-};
+    return (React.createElement("div", { ref: ref, "data-modal-footer": '', id: id, className: hashClass(styled, clsx('modal-footer', className)) }, children));
+});
+ModalFooter.displayName = ComponentName.ModalFooter;
 export default ModalFooter;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxGb290ZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2Zvb3Rlci9Nb2RhbEZvb3Rlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7R0FNRztBQUNILElBQU0sV0FBVyxHQUFHLFVBQUMsRUFBNkM7UUFBM0MsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBO0lBQ3BDLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLE9BQU8sQ0FDTCw2QkFBSyxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxjQUFjLEVBQUUsU0FBUyxDQUFDLENBQUMsSUFDdkUsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsV0FBVyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxGb290ZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2Zvb3Rlci9Nb2RhbEZvb3Rlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7O0dBTUc7QUFDSCxJQUFNLFdBQVcsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFtQyxVQUFDLEVBQTJCLEVBQUUsR0FBRztRQUE5QixRQUFRLGNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUE7SUFDdkYsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsT0FBTyxDQUNMLDZCQUFLLEdBQUcsRUFBRSxHQUFHLHVCQUFvQixFQUFFLEVBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsY0FBYyxFQUFFLFNBQVMsQ0FBQyxDQUFDLElBQ3RHLFFBQVEsQ0FDTCxDQUNQLENBQUE7QUFDSCxDQUFDLENBQUMsQ0FBQTtBQUVGLFdBQVcsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFdBQVcsQ0FBQTtBQUNuRCxlQUFlLFdBQVcsQ0FBQSJ9

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

@@ -1,12 +1,9 @@
-/// <reference types="react" />
-import { ModalFooterProps } from "./ModalFooterProps";
-import { ComponentName } from "../../../components/enumsComponentsName";
+import * as React from 'react';
+import { View } from 'react-native';
+import { ModalFooterProps } from './ModalFooterProps';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}
  */
-declare const ModalFooter: {
-    ({ children, ...others }: ModalFooterProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<View>>;
 export default ModalFooter;

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

@@ -1,23 +1,35 @@
 import { __assign, __rest } from "tslib";
-import * as React from "react";
-import { ComponentName } from "../../../components/enumsComponentsName";
-import { View } from "../../../components/view";
-import { Title, TitleLevels } from "../../../components/title";
-var styles = {
-    position: "sticky",
-    bottom: 0,
-    width: "100%",
-    textAlign: 'right',
-    padding: 16,
-};
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { Title, TitleLevels } from '../../../components/title';
+import { isIOS } from '../../../helpers/device.native';
+import { getColorStyle, TrilogyColor } from '../../../objects';
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { ModalContext } from '../context';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}
  */
-var ModalFooter = function (_a) {
+var ModalFooter = React.forwardRef(function (_a, ref) {
     var children = _a.children, others = __rest(_a, ["children"]);
-    return React.createElement(View, __assign({}, others, { style: styles }), typeof children === "string" && (React.createElement(Title, { level: TitleLevels.THREE, style: { width: "100%", textAlign: 'center' } }, children)) || (children));
-};
+    var setIsFooter = React.useContext(ModalContext).setIsFooter;
+    React.useEffect(function () {
+        setIsFooter(true);
+        return function () {
+            setIsFooter(false);
+        };
+    }, []);
+    return (React.createElement(View, __assign({ ref: ref, 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxGb290ZXIubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9mb290ZXIvTW9kYWxGb290ZXIubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBRXZELElBQU0sTUFBTSxHQUFHO0lBQ2IsUUFBUSxFQUFFLFFBQVE7SUFDbEIsTUFBTSxFQUFFLENBQUM7SUFDVCxLQUFLLEVBQUUsTUFBTTtJQUNiLFNBQVMsRUFBRSxPQUFPO0lBQ2xCLE9BQU8sRUFBRSxFQUFFO0NBQ1osQ0FBQTtBQUVEOzs7R0FHRztBQUNILElBQU0sV0FBVyxHQUFHLFVBQUMsRUFBeUM7SUFBdkMsSUFBQSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXJCLFlBQXVCLENBQUY7SUFDeEMsT0FBTyxvQkFBQyxJQUFJLGVBQUssTUFBTSxJQUFFLEtBQUssRUFBRSxNQUFNLEtBQ2xDLE9BQU8sUUFBUSxLQUFLLFFBQVEsSUFBSSxDQUNsQyxvQkFBQyxLQUFLLElBQUMsS0FBSyxFQUFFLFdBQVcsQ0FBQyxLQUFLLEVBQUcsS0FBSyxFQUFFLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLElBQUcsUUFBUSxDQUFTLENBQ2xHLElBQUksQ0FDTCxRQUFRLENBQ1AsQ0FBUSxDQUFBO0FBQ2IsQ0FBQyxDQUFBO0FBRUQsV0FBVyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsV0FBVyxDQUFBO0FBRW5ELGVBQWUsV0FBVyxDQUFBIn0=
+var styles = StyleSheet.create({
+    container: {
+        paddingBottom: isIOS ? 40 : 18,
+        paddingTop: 16,
+    },
+    title: { width: '100%', textAlign: 'center' },
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxGb290ZXIubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9mb290ZXIvTW9kYWxGb290ZXIubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLE1BQU0sb0JBQW9CLENBQUE7QUFDdkQsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLHlCQUF5QixDQUFBO0FBQy9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3ZELE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBQy9DLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFHekM7OztHQUdHO0FBQ0gsSUFBTSxXQUFXLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBeUMsVUFBQyxFQUF1QixFQUFFLEdBQUc7SUFBMUIsSUFBQSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXJCLFlBQXVCLENBQUY7SUFDekYsSUFBQSxXQUFXLEdBQUssS0FBSyxDQUFDLFVBQVUsQ0FBQyxZQUFZLENBQUMsWUFBbkMsQ0FBbUM7SUFFdEQsS0FBSyxDQUFDLFNBQVMsQ0FBQztRQUNkLFdBQVcsQ0FBQyxJQUFJLENBQUMsQ0FBQTtRQUVqQixPQUFPO1lBQ0wsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFBO1FBQ3BCLENBQUMsQ0FBQTtJQUNILENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQTtJQUVOLE9BQU8sQ0FDTCxvQkFBQyxJQUFJLGFBQUMsR0FBRyxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLElBQU0sTUFBTTtRQUNuRCxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLENBQUMsRUFBRSxlQUFlLEVBQUUsYUFBYSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDLElBQ3ZFLENBQUMsT0FBTyxRQUFRLEtBQUssUUFBUSxJQUFJLENBQ2hDLG9CQUFDLEtBQUssSUFBQyxLQUFLLEVBQUUsV0FBVyxDQUFDLEtBQUssRUFBRSxLQUFLLEVBQUUsTUFBTSxDQUFDLEtBQUssSUFDakQsUUFBUSxDQUNILENBQ1QsQ0FBQztZQUNBLFFBQVEsQ0FDTCxDQUNGLENBQ1IsQ0FBQTtBQUNILENBQUMsQ0FBQyxDQUFBO0FBRUYsV0FBVyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsV0FBVyxDQUFBO0FBRW5ELGVBQWUsV0FBVyxDQUFBO0FBRTFCLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7SUFDL0IsU0FBUyxFQUFFO1FBQ1QsYUFBYSxFQUFFLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFO1FBQzlCLFVBQVUsRUFBRSxFQUFFO0tBQ2Y7SUFDRCxLQUFLLEVBQUUsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUU7Q0FDOUMsQ0FBQyxDQUFBIn0=

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { View } from 'react-native';
 import { CommonProps } from '../../../objects/facets/CommonProps';
 /**
  * Modal Footer Interface
@@ -6,3 +7,5 @@ import { CommonProps } from '../../../objects/facets/CommonProps';
 export interface ModalFooterProps extends CommonProps {
     children: React.ReactNode;
 }
+export type ModalFooterRef = HTMLDivElement;
+export type ModalFooterNativeRef = View;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { OtpProps } from './OtpProps';
 /**
  * OTP Code Component
@@ -13,7 +13,7 @@ import { OtpProps } from './OtpProps';
  * @param label {string} Label for OTP
  * @param help {string} error message to display
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal css classes
+ * @param className {string} Additional css classes
  */
-declare const Otp: ({ className, id, value, length, disabled, error, onCompleted, onChange, onFocus, label, help, autoFocus, ...others }: OtpProps) => JSX.Element;
+declare const Otp: React.ForwardRefExoticComponent<OtpProps & React.RefAttributes<HTMLDivElement>>;
 export default Otp;