@trilogy-ds/react 0.0.1-beta.9 → 0.0.2-alpha-prompt

package/lib/components/modal/Modal.js

@@ -1,114 +1,98 @@
-import React, { useEffect, useRef, useState } from 'react';
+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 { Button, ButtonList, ButtonType } from '../button';
-import { Text } from '../text';
-import { ModalMarkup } from './ModalEnum';
-import ModalTitle from './ModalTitle';
-import ModalFooter from './ModalFooter';
-import { hashClass } from '../../helpers';
+import translation from '@trilogy-ds/locales/lib/modal';
 import clsx from 'clsx';
-import { useTrilogyContext } from '../../context';
+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 content {string} Content text for modal
- * @param triggerContent {string} Trigger custom element
- * @param iconName IconName for icon title
- * @param iconColor IconColor for icon title
- * @param ctaCancelOnClick {Function} function for cancel button (appear when set)
- * @param ctaOnClick {Function} On Click Event CTA
- * @param onClose {Function} Additionnal close custom function
- * @param onOpen {Function} Additionnal open custom function
- * @param closeIcon {boolean} Display close icon for Modal
+ * @param onClose {Function} Additional close custom function
+ * @param onOpen {Function} Additional open custom function
  * @param children {React.ReactNode}
- * @param ctaContent {string} Content cta
- * @param fullwidth {boolean} Fullwidth Modal
- * @param disableHandlingClickOutside {boolean} Disable the handling on outside click event
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
- * @param contentClassNames {string} Additionnal CSS Classes for modal content
- * @param triggerMarkup {ModalMarkup} h1|h2|h3|h4|h5|h6|p|span|div|button|a
- * @param triggerClassNames {string} Additionnal CSS Classes for trigger element
+ * @param className {string} Additional CSS Classes
  * @param panel {boolean} Panel Side Modal
+ * @param accessibilityLabel {string} Accessibility label
  * - -------------------------- NATIVE PROPERTIES -------------------------------
- * @param bottom {boolean} If bottom
- * @param swipable {boolean} Swipable Native Modal
  */
-const Modal = ({ children, className, contentClassNames, active, title, content, triggerMarkup, triggerContent, triggerClassNames, ctaContent, ctaOnClick, onClose, onOpen, iconName, ctaCancelOnClick, closeIcon, iconColor, panel, footerClassNames, footer, fullwidth, disableHandlingClickOutside = false, testId, ...others }) => {
-    const modal = useRef(null);
-    const [display, setDisplay] = useState(active || false);
-    const { styled } = useTrilogyContext();
-    const handleClickOutside = (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 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 refBtnModal = useRef(null);
+    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);
         }
-        else {
-            handleClose(onClose, 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();
+            }
         }
-    };
-    useEffect(() => {
-        setDisplay(active || false);
-    }, [active]);
-    useEffect(() => {
-        if (display && !disableHandlingClickOutside) {
-            document.addEventListener('mousedown', handleClickOutside);
+        if (!unClosable && display && e.key === 'Escape') {
+            e.preventDefault();
+            setDisplay(false);
+            refBtnModal.current && refBtnModal.current.focus();
+            currentFocusIndexRef.current = 0;
+            onClose && onClose();
         }
-        else {
-            document.removeEventListener('mousedown', handleClickOutside);
+    }, [display, focusableElementsRef, currentFocusIndexRef, refBtnModal, onClose]);
+    useEffect(function () {
+        setDisplay(function (prev) {
+            if (prev) {
+                refBtnModal.current && refBtnModal.current.focus();
+                currentFocusIndexRef.current = 0;
+            }
+            return active || false;
+        });
+    }, [active, currentFocusIndexRef, refBtnModal]);
+    useEffect(function () {
+        !hideCloseButton && display && focusableElementsRef.current && focusableElementsRef.current[0].focus();
+    }, [hideCloseButton, display, focusableElementsRef]);
+    useEffect(function () {
+        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');
         }
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [display, disableHandlingClickOutside]);
-    const classes = React.useMemo(() => hashClass(styled, clsx('modal', display && is('active'), panel && is('panel'), fullwidth && is('fullwidth'), className)), [active, display, panel, className, styled]);
-    const contentClasses = React.useMemo(() => hashClass(styled, clsx('modal-content', contentClassNames)), [contentClassNames, styled]);
-    const footerClasses = React.useMemo(() => clsx('modal-footer', footerClassNames), [footerClassNames, styled]);
-    function handleClose(onCloseFunc, e) {
-        setDisplay(false);
-        if (onCloseFunc) {
-            onCloseFunc(e);
-        }
-    }
-    function handleOpen(onOpenFunc, e) {
-        setDisplay(true);
-        if (onOpenFunc) {
-            onOpenFunc(e);
-        }
-    }
-    /**
-     * key in Enum works only in TS or with number enum for JS
-     * for string enum (as in this case) we need to use Object.values.includes for JS usage
-     * string enum aren't reverse mapped so the first solution doesn't work
-     */
-    const isCorrectMarkup = (stringMarkup) => {
-        if (stringMarkup in ModalMarkup || Object.values(ModalMarkup).includes(stringMarkup))
-            return true;
-    };
-    const TriggerTag = React.useMemo(() => (triggerMarkup && isCorrectMarkup(triggerMarkup) ? triggerMarkup : 'button'), [triggerMarkup]);
-    const ModalContentButton = ({ ...props }) => (React.createElement(Button, { markup: 'button', className: is('primary'), ...props }));
-    const ModalCancelButton = ({ onCloseFunc }) => (React.createElement(Button, { variant: 'SECONDARY', onClick: (e) => {
-            handleClose(onCloseFunc, e);
-        }, type: ButtonType.BUTTON }, "Annuler"));
-    const CloseButton = ({ onCloseFunc }) => (React.createElement("button", { onClick: (e) => {
-            handleClose(onCloseFunc, e);
-        }, className: hashClass(styled, clsx('modal-close', is('large'))), "aria-label": 'close', type: ButtonType.BUTTON }));
-    return (React.createElement("div", { "data-testid": testId },
-        triggerContent && (React.createElement(TriggerTag, { onClick: (e) => {
-                handleOpen(onOpen, e);
-            }, className: hashClass(styled, clsx(triggerClassNames)) }, triggerContent)),
-        React.createElement("div", { className: classes, ...others },
-            React.createElement("div", { className: hashClass(styled, clsx('modal-background')) }),
-            React.createElement("div", { ref: modal, className: contentClasses },
-                closeIcon && React.createElement(CloseButton, { onCloseFunc: onClose }),
-                (title || iconName) && (React.createElement(ModalTitle, { iconColor: iconColor, iconName: iconName }, title)),
-                content && typeof content === 'string' ? React.createElement(Text, null, content) : content,
-                children != null && children,
-                (ctaOnClick != null || ctaCancelOnClick != null) && (React.createElement(ButtonList, { centered: true, className: is('flex') },
-                    ctaOnClick && React.createElement(ModalContentButton, { onClick: ctaOnClick }, ctaContent),
-                    ctaCancelOnClick && React.createElement(ModalCancelButton, { onCloseFunc: ctaCancelOnClick }))),
-                footer && React.createElement(ModalFooter, { className: footerClasses }, footer)))));
-};
+    }, [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 },
+                        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=Modal.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL01vZGFsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQ2hELE9BQU8sRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLFdBQVcsRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBRW5ELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQy9CLE9BQU8sV0FBVyxNQUFNLCtCQUErQixDQUFBO0FBQ3ZELE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssRUFBRSxFQUFpQixXQUFXLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzdGLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUd0RDs7Ozs7Ozs7Ozs7O0dBWUc7QUFDSCxJQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM1QixVQUNFLEVBY0MsRUFDRCxHQUFHO0lBZEQsSUFBQSxRQUFRLGNBQUEsRUFDUixTQUFTLGVBQUEsRUFDVCxFQUFFLFFBQUEsRUFDRiwwQkFBNEIsRUFBNUIsa0JBQWtCLG1CQUFHLE9BQU8sS0FBQSxFQUM1QixNQUFNLFlBQUEsRUFDTixPQUFPLGFBQUEsRUFDUCxVQUFVLGdCQUFBLEVBQ1YsS0FBSyxXQUFBLEVBQ0wsSUFBSSxVQUFBLEVBQ0osdUJBQXVCLEVBQXZCLGVBQWUsbUJBQUcsS0FBSyxLQUFBLEVBQ3ZCLE9BQU8sYUFBQSxFQUNQLEtBQUssV0FBQSxFQUNGLE1BQU0sY0FiWCxnSkFjQyxDQURVO0lBSVgsSUFBTSxlQUFlLEdBQUcsTUFBTSxDQUFpQixJQUFJLENBQUMsQ0FBQTtJQUM5QyxJQUFBLEtBQUEsT0FBd0IsUUFBUSxDQUFVLE1BQU0sSUFBSSxLQUFLLENBQUMsSUFBQSxFQUF6RCxPQUFPLFFBQUEsRUFBRSxVQUFVLFFBQXNDLENBQUE7SUFDeEQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxXQUFXLEdBQUcsTUFBTSxDQUFNLElBQUksQ0FBQyxDQUFBO0lBQ3JDLElBQU0sUUFBUSxHQUFHLE1BQU0sQ0FBaUIsSUFBSSxDQUFDLENBQUE7SUFDN0MsSUFBTSxnQkFBZ0IsR0FBRyxLQUFLLEVBQUUsQ0FBQTtJQUNoQyxJQUFNLG9CQUFvQixHQUFHLE1BQU0sQ0FBaUMsSUFBSSxDQUFDLENBQUE7SUFDekUsSUFBTSxvQkFBb0IsR0FBRyxNQUFNLENBQVMsQ0FBQyxDQUFDLENBQUE7SUFFOUMsSUFBTSxXQUFXLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FDbkMsVUFBQyxXQUFtQyxFQUFFLENBQWU7UUFDbkQsSUFBSSxDQUFDLFVBQVUsRUFBRTtZQUNmLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQTtZQUNqQixXQUFXLENBQUMsT0FBTyxJQUFJLFdBQVcsQ0FBQyxPQUFPLENBQUMsS0FBSyxFQUFFLENBQUE7WUFDbEQsSUFBSSxXQUFXO2dCQUFFLFdBQVcsQ0FBQyxDQUFDLENBQUMsQ0FBQTtTQUNoQztJQUNILENBQUMsRUFDRCxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FDdEIsQ0FBQTtJQUVELElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FBQyxPQUFPLEVBQUUsT0FBTyxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFBRSxJQUFJLElBQUksRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLEtBQUssSUFBSSxFQUFFLENBQUMsT0FBTyxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQzFGLENBQUE7SUFFRCxJQUFNLFNBQVMsR0FBRyxXQUFXLENBQzNCLFVBQUMsQ0FBZ0M7UUFDL0IsSUFBSSxPQUFPLElBQUksQ0FBQyxDQUFDLEdBQUcsS0FBSyxLQUFLLEVBQUU7WUFDOUIsQ0FBQyxDQUFDLGNBQWMsRUFBRSxDQUFBO1lBQ2xCLElBQUksb0JBQW9CLENBQUMsT0FBTyxFQUFFO2dCQUNoQyxJQUFNLFlBQVksR0FBRyxvQkFBb0IsQ0FBQyxPQUFPLENBQUE7Z0JBQ2pELElBQU0sTUFBTSxHQUFHLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUE7Z0JBRWxDLElBQU0sU0FBUyxHQUNiLENBQUMsWUFBWSxHQUFHLE1BQU0sR0FBRyxvQkFBb0IsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLEdBQUcsb0JBQW9CLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQTtnQkFFckcsb0JBQW9CLENBQUMsT0FBTyxHQUFHLFNBQVMsQ0FBQTtnQkFDeEMsb0JBQW9CLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFBO2FBQ2hEO1NBQ0Y7UUFFRCxJQUFJLENBQUMsVUFBVSxJQUFJLE9BQU8sSUFBSSxDQUFDLENBQUMsR0FBRyxLQUFLLFFBQVEsRUFBRTtZQUNoRCxDQUFDLENBQUMsY0FBYyxFQUFFLENBQUE7WUFDbEIsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUFBO1lBQ2pCLFdBQVcsQ0FBQyxPQUFPLElBQUksV0FBVyxDQUFDLE9BQU8sQ0FBQyxLQUFLLEVBQUUsQ0FBQTtZQUNsRCxvQkFBb0IsQ0FBQyxPQUFPLEdBQUcsQ0FBQyxDQUFBO1lBQ2hDLE9BQU8sSUFBSSxPQUFPLEVBQUUsQ0FBQTtTQUNyQjtJQUNILENBQUMsRUFDRCxDQUFDLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxvQkFBb0IsRUFBRSxXQUFXLEVBQUUsT0FBTyxDQUFDLENBQzVFLENBQUE7SUFFRCxTQUFTLENBQUM7UUFDUixVQUFVLENBQUMsVUFBQyxJQUFJO1lBQ2QsSUFBSSxJQUFJLEVBQUU7Z0JBQ1IsV0FBVyxDQUFDLE9BQU8sSUFBSSxXQUFXLENBQUMsT0FBTyxDQUFDLEtBQUssRUFBRSxDQUFBO2dCQUNsRCxvQkFBb0IsQ0FBQyxPQUFPLEdBQUcsQ0FBQyxDQUFBO2FBQ2pDO1lBQ0QsT0FBTyxNQUFNLElBQUksS0FBSyxDQUFBO1FBQ3hCLENBQUMsQ0FBQyxDQUFBO0lBQ0osQ0FBQyxFQUFFLENBQUMsTUFBTSxFQUFFLG9CQUFvQixFQUFFLFdBQVcsQ0FBQyxDQUFDLENBQUE7SUFFL0MsU0FBUyxDQUFDO1FBQ1IsQ0FBQyxlQUFlLElBQUksT0FBTyxJQUFJLG9CQUFvQixDQUFDLE9BQU8sSUFBSSxvQkFBb0IsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUE7SUFDeEcsQ0FBQyxFQUFFLENBQUMsZUFBZSxFQUFFLE9BQU8sRUFBRSxvQkFBb0IsQ0FBQyxDQUFDLENBQUE7SUFFcEQsU0FBUyxDQUFDO1FBQ1IsSUFBSSxlQUFlLENBQUMsT0FBTyxFQUFFO1lBQzNCLG9CQUFvQixDQUFDLE9BQU8sR0FBRyxlQUFlLENBQUMsT0FBTyxDQUFDLGdCQUFnQixDQUNyRSwrSUFBK0ksQ0FDaEosQ0FBQTtTQUNGO0lBQ0gsQ0FBQyxFQUFFLENBQUMsZUFBZSxFQUFFLG9CQUFvQixDQUFDLENBQUMsQ0FBQTtJQUUzQyxPQUFPLENBQ0wsNkJBQUssU0FBUyxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUUsUUFBUTtRQUNyQyxPQUFPLElBQUksS0FBSyxDQUFDLFlBQVksQ0FBQyxPQUE2QixFQUFFLEVBQUUsR0FBRyxFQUFFLFdBQVcsRUFBRSxlQUFlLEVBQUUsUUFBUSxFQUFFLENBQUM7UUFDOUcsc0NBQ0UsR0FBRyxFQUFFLEdBQUcsRUFDUixFQUFFLEVBQUUsRUFBRSxFQUNOLFNBQVMsRUFBRSxPQUFPLEVBQ2xCLElBQUksRUFBQyxRQUFRLHFCQUNJLGdCQUFnQixnQkFDckIsSUFBSSxFQUNoQixPQUFPLEVBQUUsVUFBQyxDQUFDOztnQkFDVCxJQUFJLENBQUMsQ0FBQSxNQUFBLGVBQWUsYUFBZixlQUFlLHVCQUFmLGVBQWUsQ0FBRSxPQUFPLDBDQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUMsTUFBYyxDQUFDLENBQUEsRUFBRTtvQkFDekQsV0FBVyxDQUFDLE9BQU8sRUFBRSxDQUFDLENBQUMsQ0FBQTtpQkFDeEI7WUFDSCxDQUFDLElBQ0csTUFBTTtZQUVWLDZCQUFLLEdBQUcsRUFBRSxlQUFlLEVBQUUsU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDO2dCQUM1RSw2QkFBSyxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7b0JBQ3BELENBQUMsZUFBZSxJQUFJLENBQUMsVUFBVSxJQUFJLENBQ2xDLGdDQUNFLE9BQU8sRUFBRSxVQUFDLENBQW1COzRCQUMzQixXQUFXLENBQUMsT0FBTyxFQUFFLENBQUMsQ0FBQyxDQUFBO3dCQUN6QixDQUFDLEVBQ0QsU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLGFBQWEsRUFBRSxFQUFFLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUM5RCxJQUFJLEVBQUUsVUFBVSxDQUFDLE1BQU07d0JBRXZCLDhCQUFNLFNBQVMsRUFBRSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxJQUNoRCxXQUFXLENBQUMsNkJBQTZCLENBQ3JDLENBQ0EsQ0FDVjtvQkFDRCxvQkFBQyxLQUFLLElBQUMsRUFBRSxFQUFFLGdCQUFnQixFQUFFLEtBQUssRUFBRSxXQUFXLENBQUMsS0FBSyxFQUFFLE1BQU0sRUFBRSxXQUFXLENBQUMsRUFBRSxJQUMxRSxLQUFLLENBQ0EsQ0FDSjtnQkFDTCxRQUFRLElBQUksUUFBUSxDQUNqQixDQUNGLENBQ0YsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxLQUFLLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxLQUFLLENBQUE7QUFFdkMsZUFBZSxLQUFLLENBQUEifQ==

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

@@ -1,28 +1,15 @@
-/// <reference types="react" />
+import React from 'react';
+import { View } from 'react-native';
 import { ModalProps } from './ModalProps';
-import { ComponentName } from '../enumsComponentsName';
 /**
  * Modal Component
  * @param active {boolean} Activated Modal
  * @param title {string} Title Modal
- * @param content {string} Content text for modal
- * @param triggerContent {string} Trigger custom element
- * @param iconName IconName for icon title
- * @param iconColor IconColor for icon title
- * @param ctaOnClick {Function} On Click Event CTA
- * @param ctaCancelOnClick function for cancel button (appear when set)
- * @param onClose {Function} Additionnal close custom function
- * @param onOpen {Function} Additionnal open custom function
- * @param closeIcon {boolean} Display close icon for Modal
- * @param bottom {boolean} Open modal from bottom
- * @param ctaContent {string} Content cta
+ * @param onClose {Function} Additional close custom function
+ * @param onOpen {Function} Additional open custom function
  * @param children {React.ReactNode}
- * @param fullwidth {boolean} Fullwidth Modal
  * @param onModalHide {Function} Callback on Hide
- * @param swipable {boolean} Swipable Native Modal
+ * @param unClosable {boolean} unClosable Native Modal
  */
-declare const Modal: {
-    ({ children, active, title, content, iconName, iconColor, triggerContent, ctaContent, ctaOnClick, ctaCancelOnClick, onClose, onOpen, closeIcon, bottom, fullwidth, onModalHide, swipable, ...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,153 +1,78 @@
+import { __assign, __read, __rest } from "tslib";
+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 { Animated, Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
-import NativeModal from 'react-native-modal';
-import { Text } from '../text';
-import { Button } from '../button';
-import { View } from '../view';
+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 { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
-import { ComponentName } from '../enumsComponentsName';
+import { Title } from '../title';
+import { ModalContext } from './context/ModalContext';
 /**
  * Modal Component
  * @param active {boolean} Activated Modal
  * @param title {string} Title Modal
- * @param content {string} Content text for modal
- * @param triggerContent {string} Trigger custom element
- * @param iconName IconName for icon title
- * @param iconColor IconColor for icon title
- * @param ctaOnClick {Function} On Click Event CTA
- * @param ctaCancelOnClick function for cancel button (appear when set)
- * @param onClose {Function} Additionnal close custom function
- * @param onOpen {Function} Additionnal open custom function
- * @param closeIcon {boolean} Display close icon for Modal
- * @param bottom {boolean} Open modal from bottom
- * @param ctaContent {string} Content cta
+ * @param onClose {Function} Additional close custom function
+ * @param onOpen {Function} Additional open custom function
  * @param children {React.ReactNode}
- * @param fullwidth {boolean} Fullwidth Modal
  * @param onModalHide {Function} Callback on Hide
- * @param swipable {boolean} Swipable Native Modal
+ * @param unClosable {boolean} unClosable Native Modal
  */
-const Modal = ({ children, active = false, title, content, iconName, iconColor, triggerContent, ctaContent, ctaOnClick, ctaCancelOnClick, onClose, onOpen, closeIcon, bottom, fullwidth, onModalHide, swipable = true, ...others }) => {
-    const styles = StyleSheet.create({
-        centeredView: {
-            justifyContent: bottom ? 'flex-end' : 'center',
-            alignItems: 'center',
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        },
-        iconCenter: {
-            alignSelf: 'center',
-            marginBottom: 30,
-        },
-        modalView: {
-            margin: bottom ? 0 : 20,
-            backgroundColor: getColorStyle(TrilogyColor.WHITE),
-            borderRadius: 6,
-            padding: fullwidth ? 0 : 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.WHITE),
-            width: '100%',
-        },
-        horizontalMargin: {
-            marginTop: 50,
-            marginBottom: bottom ? 0 : 50,
-        },
-    });
-    const defaultAnimPosition = Dimensions.get('window').height;
-    const translateAnim = useRef(new Animated.Value(defaultAnimPosition)).current;
-    const [visible, setVisible] = useState(active || false);
-    useEffect(() => {
-        setVisible(active);
-    }, [active]);
-    useEffect(() => {
-        if (active) {
-            Animated.timing(translateAnim, {
-                toValue: 0,
-                duration: 500,
-                useNativeDriver: true,
-            }).start();
-        }
-        else {
-            translateAnim.setValue(defaultAnimPosition);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [active]);
-    const close = (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);
     };
-    const modalChildren = children !== null && children !== void 0 ? children : (React.createElement(View, { style: { padding: fullwidth ? 0 : 17 } },
-        React.createElement(TouchableOpacity, { onPressIn: close },
-            React.createElement(Icon, { style: { flexDirection: 'row', alignSelf: 'flex-end' }, name: IconName.TIMES, size: IconSize.SMALL, color: TrilogyColor.GREY })),
-        iconName && (React.createElement(View, { style: styles.iconCenter },
-            React.createElement(Icon, { size: IconSize.HUGE, color: iconColor, name: iconName }))),
-        title && React.createElement(Text, { style: styles.title }, title),
-        content && typeof content === 'string' ? React.createElement(Text, { style: styles.content }, content) : content,
-        ctaContent && (React.createElement(View, { style: { paddingTop: 15 } },
-            React.createElement(Button, { variant: 'PRIMARY', onClick: ctaOnClick }, ctaContent))),
-        ctaCancelOnClick && (React.createElement(View, { style: { paddingTop: 15 } },
-            React.createElement(Button, { variant: 'SECONDARY', onClick: (e) => {
-                    ctaCancelOnClick(e);
-                } }, "Annuler")))));
-    return (React.createElement(React.Fragment, null,
-        triggerContent && (React.createElement(Button, { onClick: (e) => {
-                if (onOpen)
-                    onOpen(e);
-            } }, triggerContent)),
-        React.createElement(NativeModal
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        , { 
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            onSwipeComplete: (e) => {
-                setVisible(!visible);
-                close(e);
-            }, onModalHide: onModalHide, swipeDirection: swipable ? 'down' : undefined, isVisible: visible, statusBarTranslucent: true, style: { width: '100%', padding: 0, margin: 0 }, ...others },
-            React.createElement(View, { style: [styles.overlay, bottom ? styles.bottomModal : styles.middleModal] },
-                React.createElement(TouchableOpacity, { activeOpacity: 1, style: { width: bottom ? 0 : 20, height: '100%' }, onPress: close }),
-                React.createElement(View, { style: { display: 'flex', flexDirection: 'column', flex: fullwidth ? 0 : 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 }] }] },
-                            closeIcon && (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.GREY })))),
-                            modalChildren)),
-                    React.createElement(TouchableOpacity, { activeOpacity: 1, style: { width: '100%', minHeight: bottom ? 0 : 50, flexGrow: bottom ? 0 : 1 }, onPress: close })),
-                React.createElement(TouchableOpacity, { onPress: close, activeOpacity: 1, style: { width: bottom ? 0 : 20, 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=Modal.native.js.map
+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/ModalEnum.d.ts

@@ -21,3 +21,8 @@ export declare enum ModalCtaMarkup {
     A = "a"
 }
 export type ModalCtaMarkupValues = `${ModalCtaMarkup}`;
+export declare enum ModalSize {
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large"
+}

package/lib/components/modal/ModalEnum.js

@@ -21,4 +21,10 @@ export var ModalCtaMarkup;
     ModalCtaMarkup["DIV"] = "div";
     ModalCtaMarkup["A"] = "a";
 })(ModalCtaMarkup || (ModalCtaMarkup = {}));
-//# sourceMappingURL=ModalEnum.js.map
+export var ModalSize;
+(function (ModalSize) {
+    ModalSize["SMALL"] = "small";
+    ModalSize["MEDIUM"] = "medium";
+    ModalSize["LARGE"] = "large";
+})(ModalSize || (ModalSize = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxFbnVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9Nb2RhbEVudW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFDSCxNQUFNLENBQU4sSUFBWSxXQVlYO0FBWkQsV0FBWSxXQUFXO0lBQ3JCLHdCQUFTLENBQUE7SUFDVCx3QkFBUyxDQUFBO0lBQ1Qsd0JBQVMsQ0FBQTtJQUNULHdCQUFTLENBQUE7SUFDVCx3QkFBUyxDQUFBO0lBQ1Qsd0JBQVMsQ0FBQTtJQUNULHNCQUFPLENBQUE7SUFDUCw0QkFBYSxDQUFBO0lBQ2IsMEJBQVcsQ0FBQTtJQUNYLGdDQUFpQixDQUFBO0lBQ2pCLHNCQUFPLENBQUE7QUFDVCxDQUFDLEVBWlcsV0FBVyxLQUFYLFdBQVcsUUFZdEI7QUFJRCxNQUFNLENBQU4sSUFBWSxjQUlYO0FBSkQsV0FBWSxjQUFjO0lBQ3hCLG1DQUFpQixDQUFBO0lBQ2pCLDZCQUFXLENBQUE7SUFDWCx5QkFBTyxDQUFBO0FBQ1QsQ0FBQyxFQUpXLGNBQWMsS0FBZCxjQUFjLFFBSXpCO0FBSUQsTUFBTSxDQUFOLElBQVksU0FJWDtBQUpELFdBQVksU0FBUztJQUNuQiw0QkFBZSxDQUFBO0lBQ2YsOEJBQWlCLENBQUE7SUFDakIsNEJBQWUsQ0FBQTtBQUNqQixDQUFDLEVBSlcsU0FBUyxLQUFULFNBQVMsUUFJcEIifQ==

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

@@ -1,40 +1,24 @@
-/// <reference types="react" />
-import { Accessibility, Clickable, Clipped, Fullwidth } from '../../objects';
-import { ModalMarkup, ModalMarkupValues } from './ModalEnum';
+import { ReactNode } from 'react';
+import { ModalSize } from '../../components/modal/ModalEnum';
 import { ClickEvent } from '../../events/OnClickEvent';
-import { IconColor, IconColorValues, IconName, IconNameValues } from '../icon';
-export interface ModalContentButtonProps extends Clickable {
-    children?: string;
-}
-export interface CloseButtonProps {
-    onCloseFunc?: ClickEvent;
-}
+import { Accessibility, Dev } from '../../objects';
+import { CommonProps } from '../../objects/facets/CommonProps';
+import { View } from 'react-native';
 /**
  * Modal Interface
  */
-export interface ModalProps extends Clipped, Fullwidth, Accessibility {
+export interface ModalProps extends Accessibility, Dev, CommonProps {
     children?: React.ReactNode;
     active?: boolean;
-    title?: string;
-    content?: string | React.ReactNode;
-    footer?: string | React.ReactNode;
-    className?: string;
-    contentClassNames?: string;
-    footerClassNames?: string;
-    iconName?: IconName | IconNameValues;
-    iconColor?: IconColor | IconColorValues;
-    triggerContent?: string;
-    triggerClassNames?: string;
-    triggerMarkup?: ModalMarkup | ModalMarkupValues;
-    ctaContent?: string;
-    closeIcon?: boolean;
-    ctaOnClick?: ClickEvent;
-    ctaCancelOnClick?: ClickEvent;
+    trigger?: ReactNode;
+    hideCloseButton?: boolean;
     onClose?: ClickEvent;
     onOpen?: ClickEvent;
-    bottom?: boolean;
     panel?: boolean;
     onModalHide?: () => void;
-    disableHandlingClickOutside?: boolean;
-    swipable?: boolean;
+    unClosable?: boolean;
+    size?: ModalSize;
+    title?: string;
 }
+export type ModalRef = HTMLDivElement;
+export type ModalNativeRef = View;

package/lib/components/modal/ModalProps.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=ModalProps.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxQcm9wcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvbW9kYWwvTW9kYWxQcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=