@trilogy-ds/react 0.0.5-beta-v4 → 0.0.6-alpha-prompt

package/lib/components/modal/Modal.js

@@ -1,100 +1,98 @@
 import { __assign, __read, __rest } from "tslib";
+import { ButtonType } from '../../components/button';
+import { Title, TitleLevels, TitleMarkup } from '../../components/title';
 import { useTrilogyContext } from '../../context/index';
 import { hashClass } from '../../helpers/hashClassesHelpers';
 import { is } from '../../services';
+import translation from '@trilogy-ds/locales/lib/modal';
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import shortid from 'shortid';
-import { ButtonType } from '../../components/button';
-import { Title, TitleLevels, TitleMarkup } from '../../components/title';
-var modalGeneratedId = shortid.generate();
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { ComponentName } from '../enumsComponentsName';
 /**
  * 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 disableHandlingClickOutside {boolean} Disable the handling on outside click event
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param panel {boolean} Panel Side Modal
  * @param accessibilityLabel {string} Accessibility label
  * - -------------------------- NATIVE PROPERTIES -------------------------------
  */
-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 Modal = React.forwardRef(function (_a, ref) {
+    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, unClosable = _a.unClosable, panel = _a.panel, size = _a.size, _c = _a.hideCloseButton, hideCloseButton = _c === void 0 ? false : _c, trigger = _a.trigger, title = _a.title, others = __rest(_a, ["children", "className", "id", "accessibilityLabel", "active", "onClose", "unClosable", "panel", "size", "hideCloseButton", "trigger", "title"]);
+    var modalContentRef = useRef(null);
+    var _d = __read(useState(active || false), 2), display = _d[0], setDisplay = _d[1];
     var styled = useTrilogyContext().styled;
-    var refsActions = useRef([]);
     var refBtnModal = useRef(null);
-    var _f = __read(useState(0), 2), setIndexFocusable = _f[1];
-    var handleClickOutside = 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)) {
-            return;
+    var refModal = useRef(null);
+    var modalGeneratedId = useId();
+    var focusableElementsRef = useRef(null);
+    var currentFocusIndexRef = useRef(0);
+    var handleClose = React.useCallback(function (onCloseFunc, e) {
+        if (!unClosable) {
+            setDisplay(false);
+            refBtnModal.current && refBtnModal.current.focus();
+            if (onCloseFunc)
+                onCloseFunc(e);
+        }
+    }, [refBtnModal.current]);
+    var classes = hashClass(styled, clsx('modal', display && is('active'), size && is(size), panel && is('panel'), className));
+    var onKeyDown = useCallback(function (e) {
+        if (display && e.key === 'Tab') {
+            e.preventDefault();
+            if (focusableElementsRef.current) {
+                var currentIndex = currentFocusIndexRef.current;
+                var offset = e.shiftKey ? -1 : 1;
+                var nextIndex = (currentIndex + offset + focusableElementsRef.current.length) % focusableElementsRef.current.length;
+                currentFocusIndexRef.current = nextIndex;
+                focusableElementsRef.current[nextIndex].focus();
+            }
         }
-        else {
-            handleClose(onClose, e);
+        if (!unClosable && display && e.key === 'Escape') {
+            e.preventDefault();
+            setDisplay(false);
+            refBtnModal.current && refBtnModal.current.focus();
+            currentFocusIndexRef.current = 0;
+            onClose && onClose();
         }
-    };
+    }, [display, focusableElementsRef, currentFocusIndexRef, refBtnModal, onClose]);
     useEffect(function () {
-        setDisplay(active || false);
-    }, [active]);
+        setDisplay(function (prev) {
+            if (prev) {
+                refBtnModal.current && refBtnModal.current.focus();
+                currentFocusIndexRef.current = 0;
+            }
+            return active || false;
+        });
+    }, [active, currentFocusIndexRef, refBtnModal]);
     useEffect(function () {
-        display && refsActions.current[0] && refsActions.current[0].focus();
-    }, [display, refsActions === null || refsActions === void 0 ? void 0 : refsActions.current.length]);
+        !hideCloseButton && display && focusableElementsRef.current && focusableElementsRef.current[0].focus();
+    }, [hideCloseButton, display, focusableElementsRef]);
     useEffect(function () {
-        if (display && !unClosable) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-        else {
-            document.removeEventListener('mousedown', handleClickOutside);
-        }
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [display, unClosable]);
-    var classes = React.useMemo(function () { return hashClass(styled, clsx('modal', display && is('active'), size && is(size), panel && is('panel'), className)); }, [display, panel, className, styled]);
-    function handleClose(onCloseFunc, e) {
-        setDisplay(false);
-        refBtnModal.current && refBtnModal.current.focus();
-        if (onCloseFunc) {
-            onCloseFunc(e);
-        }
-    }
-    function handleOpen(onOpenFunc, e) {
-        setDisplay(true);
-        if (onOpenFunc) {
-            onOpenFunc(e);
-        }
-    }
-    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 (modalContentRef.current) {
+            focusableElementsRef.current = modalContentRef.current.querySelectorAll('button:not(:disabled), input:not(:disabled), a, select:not(:disabled), textarea:not(:disabled), details:not([aria-disabled="true"]) > summary');
         }
-    }, [refsActions.current.length, display]);
-    return (React.createElement("div", { onKeyDown: onKeyDown },
-        trigger && React.cloneElement(trigger, { ref: refBtnModal }),
-        React.createElement("div", __assign({ id: id, className: classes, role: "dialog", "aria-labelledby": modalGeneratedId, "aria-modal": true }, others),
-            React.createElement("div", { ref: modal, className: "modal-content" },
-                React.createElement("div", { className: 'modal-header' },
-                    hideCloseButton !== true && (React.createElement("button", { onClick: function (e) {
+    }, [modalContentRef, focusableElementsRef]);
+    return (React.createElement("div", { onKeyDown: onKeyDown, ref: refModal },
+        trigger && React.cloneElement(trigger, { ref: refBtnModal, 'aria-haspopup': 'dialog' }),
+        React.createElement("div", __assign({ ref: ref, id: id, className: classes, role: 'dialog', "aria-labelledby": modalGeneratedId, "aria-modal": true, onClick: function (e) {
+                var _a;
+                if (!((_a = modalContentRef === null || modalContentRef === void 0 ? void 0 : modalContentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                    handleClose(onClose, e);
+                }
+            } }, others),
+            React.createElement("div", { ref: modalContentRef, className: hashClass(styled, clsx('modal-content')) },
+                React.createElement("div", { className: hashClass(styled, clsx('modal-header')) },
+                    !hideCloseButton && !unClosable && (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))),
+                        }, className: hashClass(styled, clsx('modal-close', is('large'))), type: ButtonType.BUTTON },
+                        React.createElement("span", { className: hashClass(styled, clsx('sr-only')) }, translation.accessibilityLabelButtonClose))),
                     React.createElement(Title, { id: modalGeneratedId, level: TitleLevels.THREE, markup: TitleMarkup.H1 }, title)),
                 children && children))));
-};
+});
+Modal.displayName = ComponentName.Modal;
 export default Modal;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL01vZGFsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUJBQWlCLENBQUE7QUFFbkQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDL0IsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxFQUFFLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ3ZFLE9BQU8sT0FBTyxNQUFNLFNBQVMsQ0FBQTtBQUU3QixPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDaEQsT0FBTyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLE1BQU0sb0JBQW9CLENBQUE7QUFFcEUsSUFBTSxnQkFBZ0IsR0FBRyxPQUFPLENBQUMsUUFBUSxFQUFFLENBQUE7QUFFM0M7Ozs7Ozs7Ozs7Ozs7R0FhRztBQUNILElBQU0sS0FBSyxHQUFHLFVBQUMsRUFlYTtJQWRYLElBQUEsUUFBUSxjQUFBLEVBQ1IsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsMEJBQTRCLEVBQTVCLGtCQUFrQixtQkFBRyxPQUFPLEtBQUEsRUFDNUIsTUFBTSxZQUFBLEVBQ04sT0FBTyxhQUFBLEVBQ1AsTUFBTSxZQUFBLEVBQ04sS0FBSyxXQUFBLEVBQ0wsSUFBSSxVQUFBLEVBQ0osdUJBQXVCLEVBQXZCLGVBQWUsbUJBQUcsS0FBSyxLQUFBLEVBQ3ZCLE9BQU8sYUFBQSxFQUNQLGtCQUFrQixFQUFsQixVQUFVLG1CQUFHLEtBQUssS0FBQSxFQUNsQixLQUFLLFdBQUEsRUFDRixNQUFNLGNBZFgsMEpBZUMsQ0FE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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL01vZGFsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQ2hELE9BQU8sRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLFdBQVcsRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBRW5ELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQy9CLE9BQU8sV0FBVyxNQUFNLCtCQUErQixDQUFBO0FBQ3ZELE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssRUFBRSxFQUFpQixXQUFXLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzdGLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUd0RDs7Ozs7Ozs7Ozs7O0dBWUc7QUFDSCxJQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM1QixVQUNFLEVBY0MsRUFDRCxHQUFHO0lBZEQsSUFBQSxRQUFRLGNBQUEsRUFDUixTQUFTLGVBQUEsRUFDVCxFQUFFLFFBQUEsRUFDRiwwQkFBNEIsRUFBNUIsa0JBQWtCLG1CQUFHLE9BQU8sS0FBQSxFQUM1QixNQUFNLFlBQUEsRUFDTixPQUFPLGFBQUEsRUFDUCxVQUFVLGdCQUFBLEVBQ1YsS0FBSyxXQUFBLEVBQ0wsSUFBSSxVQUFBLEVBQ0osdUJBQXVCLEVBQXZCLGVBQWUsbUJBQUcsS0FBSyxLQUFBLEVBQ3ZCLE9BQU8sYUFBQSxFQUNQLEtBQUssV0FBQSxFQUNGLE1BQU0sY0FiWCxnSkFjQyxDQURV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

package/lib/components/modal/Modal.native.d.ts

@@ -1,18 +1,15 @@
-/// <reference types="react" />
+import React from 'react';
+import { View } from 'react-native';
 import { ModalProps } from './ModalProps';
-import { ComponentName } from '../../components/enumsComponentsName';
 /**
  * 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
  */
-declare const Modal: {
-    ({ children, active, onClose, onOpen, onModalHide, hideCloseButton, unClosable, ...others }: ModalProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<View>>;
 export default Modal;

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: unClosable ? undefined : function () { return handleClose({}); }, onSwipeComplete: unClosable ? undefined : 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 || unClosable) ? 8 : 16 } },
+                    React.createElement(Columns, { verticalAlign: Alignable.ALIGNED_CENTER },
+                        React.createElement(Column, null,
+                            React.createElement(Title, { level: 4 }, title)),
+                        !hideCloseButton && !unClosable && (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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9Nb2RhbC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzFELE9BQU8sRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUF5QixVQUFVLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sY0FBYyxDQUFBO0FBQ3BILE9BQU8sV0FBVyxNQUFNLG9CQUFvQixDQUFBO0FBRTVDLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUM1RCxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7Ozs7O0dBU0c7QUFDSCxJQUFNLEtBQUssR0FBRyxVQUFDLEVBU0Y7SUFSWCxJQUFBLFFBQVEsY0FBQSxFQUNSLGNBQWMsRUFBZCxNQUFNLG1CQUFHLEtBQUssS0FBQSxFQUNkLE9BQU8sYUFBQSxFQUNQLE1BQU0sWUFBQSxFQUNOLFdBQVcsaUJBQUEsRUFDWCx1QkFBdUIsRUFBdkIsZUFBZSxtQkFBRyxLQUFLLEtBQUEsRUFDdkIsa0JBQWtCLEVBQWxCLFVBQVUsbUJBQUcsS0FBSyxLQUFBLEVBQ2YsTUFBTSxjQVJJLDJGQVNkLENBRFU7SUFFVCxJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLFlBQVksRUFBRTtZQUNaLGNBQWMsRUFBRSxVQUFVO1lBQzFCLFVBQVUsRUFBRSxRQUFRO1lBQ3BCLGVBQWUsRUFBRSxvQkFBb0I7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
+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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9Nb2RhbC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLHlCQUF5QixDQUFBO0FBQ25ELE9BQU8sRUFBRSxTQUFTLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNsRSxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzFELE9BQU8sRUFDTCxVQUFVLEVBS1YsVUFBVSxFQUNWLGdCQUFnQixFQUNoQixJQUFJLEdBQ0wsTUFBTSxjQUFjLENBQUE7QUFDckIsT0FBTyxPQUFrQyxNQUFNLG9CQUFvQixDQUFBO0FBQ25FLE9BQU8sRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQzVDLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLFNBQVMsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sVUFBVSxDQUFBO0FBRWhDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUVyRDs7Ozs7Ozs7O0dBU0c7QUFDSCxJQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM1QixVQUNFLEVBVUMsRUFDRCxHQUFHO0lBVkQsSUFBQSxRQUFRLGNBQUEsRUFDUixjQUFjLEVBQWQsTUFBTSxtQkFBRyxLQUFLLEtBQUEsRUFDZCxPQUFPLGFBQUEsRUFDUCxXQUFXLGlCQUFBLEVBQ1gsdUJBQXVCLEVBQXZCLGVBQWUsbUJBQUcsS0FBSyxLQUFBLEVBQ3ZCLGtCQUFrQixFQUFsQixVQUFVLG1CQUFHLEtBQUssS0FB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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