fix: improve compatibility with modal from external libraries

.changeset/fix-external-modals-compatibility.md

@@ -0,0 +1,6 @@
+---
+'@tonconnect/ui': patch
+---
+
+fix: improve compatibility with modal from external libraries
+

packages/ui/src/app/components/modal/index.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { Component, createEffect, JSXElement, Show } from 'solid-js';
+import { Component, createEffect, JSXElement, onCleanup, Show } from 'solid-js';
 import { Transition } from 'solid-transition-group';
 import clickOutsideDirective from 'src/app/directives/click-outside';
 import keyPressedDirective from 'src/app/directives/key-pressed';
@@ -17,6 +17,7 @@ import {
 } from './style';
 import { css, useTheme } from 'solid-styled-components';
 import { disableScroll, enableScroll } from 'src/app/utils/web-api';
+import { enableModalInteraction } from 'src/app/utils/fix-external-modals';
 import { WithDataAttributes } from 'src/app/models/with-data-attributes';
 import { useDataAttributes } from 'src/app/hooks/use-data-attributes';
 import { TonConnectBrand } from 'src/app/components';
@@ -45,6 +46,8 @@ export const Modal: Component<ModalProps> = props => {
     createEffect(() => {
         if (props.opened) {
             disableScroll();
+            const cleanupExternalModals = enableModalInteraction();
+            onCleanup(cleanupExternalModals);
         } else {
             enableScroll();
         }

packages/ui/src/app/utils/fix-external-modals.ts

@@ -0,0 +1,33 @@
+/**
+ * Fixes compatibility issues with external modal libraries that block pointer events
+ * on elements outside their content.
+ */
+export function enableModalInteraction(widgetRootId: string = 'tc-widget-root'): () => void {
+    const widgetRoot = document.getElementById(widgetRootId);
+    if (!widgetRoot) {
+        return () => {};
+    }
+
+    const originalPointerEvents = widgetRoot.style.pointerEvents;
+    widgetRoot.style.pointerEvents = 'auto';
+
+    const preventDismiss = (event: Event): void => {
+        const target = event.target as Node;
+        if (widgetRoot.contains(target)) {
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+        }
+    };
+
+    const eventTypes = ['pointerdown', 'mousedown', 'touchstart'];
+    eventTypes.forEach(eventType => {
+        document.addEventListener(eventType, preventDismiss, { capture: true });
+    });
+
+    return () => {
+        widgetRoot.style.pointerEvents = originalPointerEvents;
+        eventTypes.forEach(eventType => {
+            document.removeEventListener(eventType, preventDismiss, { capture: true });
+        });
+    };
+}