@ballistix.digital/react-components 9.2.2-rc-341.0 → 9.2.2-rc-342.0

package/dist/index.js

@@ -4947,8 +4947,8 @@ var $58654b0ec0449aca$export$2e2bcd8739ae039 = $58654b0ec0449aca$var$styles;
 
 
 var $4d17f0429978b255$var$ModalOverlay = function(props) {
-    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles, dataCy = props.dataCy, onOpen = props.onOpen, onClose = props.onClose;
-    var _b = (0, $iA2ta$react.useState)(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
+    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles, dataCy = props.dataCy, onOpen = props.onOpen, onClose = props.onClose, _b = props.closeOnOutsideClick, closeOnOutsideClick = _b === void 0 ? true : _b, _c = props.closeOnEscape, closeOnEscape = _c === void 0 ? true : _c;
+    var _d = (0, $iA2ta$react.useState)(trigger ? false : true), isOpen = _d[0], setIsOpen = _d[1];
     var handleClose = (0, $iA2ta$react.useCallback)(function() {
         setIsOpen(false);
         if (onClose) setTimeout(onClose, 180);
@@ -4980,6 +4980,39 @@ var $4d17f0429978b255$var$ModalOverlay = function(props) {
         isOpen,
         onOpen
     ]);
+    (0, $iA2ta$react.useEffect)(function() {
+        if (!closeOnEscape || !isOpen) return;
+        var onKeyDown = function(event) {
+            if (event.key === 'Escape') handleClose();
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return function() {
+            window.removeEventListener('keydown', onKeyDown);
+        };
+    }, [
+        closeOnEscape,
+        handleClose,
+        isOpen
+    ]);
+    var isStatic = (0, $iA2ta$react.useMemo)(function() {
+        return !closeOnOutsideClick || !closeOnEscape;
+    }, [
+        closeOnOutsideClick,
+        closeOnEscape
+    ]);
+    var handleClickOutsideDialog = (0, $iA2ta$react.useCallback)(function() {
+        if (isStatic && closeOnOutsideClick) handleClose();
+    }, [
+        isStatic,
+        closeOnOutsideClick,
+        handleClose
+    ]);
+    var handleCloseDialog = (0, $iA2ta$react.useCallback)(function() {
+        if (!isStatic) handleClose();
+    }, [
+        isStatic,
+        handleClose
+    ]);
     return (0, $iA2ta$reactjsxruntime.jsxs)((0, $iA2ta$reactjsxruntime.Fragment), {
         children: [
             (0, $iA2ta$reactjsxruntime.jsx)((0, $iA2ta$headlessuireact.Transition), {
@@ -4988,7 +5021,8 @@ var $4d17f0429978b255$var$ModalOverlay = function(props) {
                 children: (0, $iA2ta$reactjsxruntime.jsxs)((0, $iA2ta$headlessuireact.Dialog), {
                     as: "div",
                     className: styles.container,
-                    onClose: handleClose,
+                    onClose: handleCloseDialog,
+                    static: isStatic,
                     children: [
                         (0, $iA2ta$reactjsxruntime.jsx)((0, $iA2ta$headlessuireact.TransitionChild), {
                             as: (0, $iA2ta$react.Fragment),
@@ -5005,6 +5039,7 @@ var $4d17f0429978b255$var$ModalOverlay = function(props) {
                         (0, $iA2ta$reactjsxruntime.jsx)("div", {
                             className: styles.layout.container,
                             children: (0, $iA2ta$reactjsxruntime.jsx)("div", {
+                                onClick: handleClickOutsideDialog,
                                 className: styles.layout.content,
                                 "data-cy": dataCy,
                                 children: (0, $iA2ta$reactjsxruntime.jsx)((0, $iA2ta$headlessuireact.TransitionChild), {