Feature/container style

eslint.config.js

@@ -60,4 +60,14 @@ module.exports = [
       ],
     },
   },
+  // Web-specific files
+  {
+    files: ['src/**/*.web.{ts,tsx}'],
+    languageOptions: {
+      globals: {
+        document: 'readonly',
+        Element: 'readonly',
+      },
+    },
+  },
 ];

src/ModalView.web.tsx

@@ -1,18 +1,21 @@
 import { useMemo } from 'react';
-import type { FC } from 'react';
 
 import { createPortal } from 'react-dom';
 import { StyleSheet, View, Pressable } from 'react-native';
 
 import { useID } from './hooks/useID';
 import { useModalRegistry } from './hooks/useModalRegistry';
+
+import type { MouseEvent } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { ModalViewProps } from './types';
 
 export type ModalViewWebProps = Omit<
   ModalViewProps,
   'statusBar' | 'disableDefaultStatusBarIOS' | 'statusBarTranslucent'
 > & {
   modalId?: string;
+  containerStyle?: StyleProp<ViewStyle>;
 };
 
 const backdropAccessibilityLabel = 'Backdrop';
@@ -24,16 +27,17 @@ export enum DismissalSource {
   Backdrop = 'Backdrop',
 }
 
-export const ModalView: FC<ModalViewWebProps> = ({
+export const ModalView = ({
   modalId,
   children,
   renderBackdrop,
   onRequestDismiss,
   contentContainerStyle,
+  containerStyle,
   BackdropPressableComponent = Pressable,
   backdropColor = defaultBackdropColor,
   animationType = 'none',
-}) => {
+}: ModalViewWebProps) => {
   const currentModalId = useID(modalId);
   const { modals, isBackdropVisible } = useModalRegistry(currentModalId);
   const modalIsOpen = modals.has(currentModalId);
@@ -57,15 +61,21 @@ export const ModalView: FC<ModalViewWebProps> = ({
   }, [animationType, modalIsOpen]);
 
   return createPortal(
-    <View style={[styles.backdropContainer]}>
+    <View style={[styles.backdropContainer, containerStyle]}>
       <BackdropPressableComponent
         accessibilityLabel={backdropAccessibilityLabel}
         accessibilityHint={backdropAccessibilityHint}
         style={[
           styles.backdropPressable,
           !isBackdropVisible && styles.backdropHidden,
         ]}
-        onPress={() => onRequestDismiss?.(DismissalSource.Backdrop)}
+        onPress={(e) => {
+          const event = e as unknown as MouseEvent<Element>;
+
+          if (event.target === event.currentTarget) {
+            onRequestDismiss?.(DismissalSource.Backdrop);
+          }
+        }}
       >
         {renderBackdrop ? (
           renderBackdrop()