(refactor): Change web behavior to render above default modal, fix stacking logic

README.md

@@ -155,7 +155,9 @@ I would love if you would let me know what you are missing in the library. _Toge
 ## Roadmap
 
 - Align web modal behavior and API with mobile
-- Build CI verification against nightly RN
+  - play exit animations (fade-out / slide-out) on dismiss
+  - focus trap, body scroll-lock, and `aria-modal` for accessibility
+  - guard `document.body` access for SSR (Next.js / server rendering)
 - Drop old architecture support & deprecated props
 - Change versioning to {LIB}.{RN_VERSION}.{PATCH}
 - Create separate documentation page

eslint.config.js

@@ -30,6 +30,7 @@ module.exports = [
         document: 'readonly',
         require: 'readonly',
         console: 'readonly',
+        KeyboardEvent: 'readonly',
       },
     },
     plugins: {

src/ModalView.web.tsx

@@ -1,11 +1,10 @@
-import { useMemo } from 'react';
+import { useEffect, useId, useMemo, useState } 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 { useModalStack } from './hooks/useModalStack';
 import type { ModalViewProps } from './types';
 
 export type ModalViewWebProps = Omit<
@@ -19,6 +18,8 @@ const backdropAccessibilityLabel = 'Backdrop';
 const backdropAccessibilityHint = 'Double-tap to close the modal';
 const defaultBackdropColor = 'rgba(0, 0, 0, 0.3)';
 
+const MODAL_Z_INDEX = 10000; // react-native-web's default <Modal> renders at zIndex 9999
+
 export enum DismissalSource {
   BackButton = 'BackButton',
   Backdrop = 'Backdrop',
@@ -35,38 +36,56 @@ export const ModalView: FC<ModalViewWebProps> = ({
   backdropColor = defaultBackdropColor,
   animationType = 'none',
 }) => {
-  const currentModalId = useID(modalId);
-  const { modals, isBackdropVisible } = useModalRegistry(currentModalId);
-  const modalIsOpen = modals.has(currentModalId);
+  const reactId = useId();
+  const currentModalId = modalId ?? reactId;
+  const { isTopmost } = useModalStack(currentModalId);
 
-  const animatedStyle = useMemo(() => {
-    if (animationType === 'fade') {
-      return {
-        opacity: modalIsOpen ? 1 : 0,
-        transition: 'opacity 0.3s',
-      };
-    }
-    if (animationType === 'slide') {
-      return {
-        transform: modalIsOpen ? 'translateY(0)' : 'translateY(100%)',
-        opacity: modalIsOpen ? 1 : 0,
-        transition: 'transform 0.3s, opacity 0.3s',
-      };
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    setIsOpen(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isTopmost || !onRequestDismiss) {
+      return;
     }
 
-    return {};
-  }, [animationType, modalIsOpen]);
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onRequestDismiss(DismissalSource.BackButton);
+      }
+    };
+
+    document.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [isTopmost, onRequestDismiss]);
+
+  const animatedStyle = useMemo(() => {
+    switch (animationType) {
+      case 'fade':
+        return { opacity: isOpen ? 1 : 0, transition: 'opacity 0.3s' };
+      case 'slide':
+        return {
+          transform: isOpen ? 'translateY(0)' : 'translateY(100%)',
+          opacity: isOpen ? 1 : 0,
+          transition: 'transform 0.3s, opacity 0.3s',
+        };
+      default:
+        return {};
+    }
+  }, [animationType, isOpen]);
 
   return createPortal(
-    <View style={[showBackdrop && styles.backdropContainer]}>
+    <View pointerEvents='box-none' style={styles.container}>
       {showBackdrop && (
         <BackdropPressableComponent
           accessibilityLabel={backdropAccessibilityLabel}
           accessibilityHint={backdropAccessibilityHint}
-          style={[
-            styles.backdropPressable,
-            !isBackdropVisible && styles.backdropHidden,
-          ]}
+          style={styles.backdropPressable}
           onPress={() => onRequestDismiss?.(DismissalSource.Backdrop)}
         >
           {renderBackdrop ? (
@@ -95,9 +114,6 @@ const styles = StyleSheet.create({
     opacity: 1,
     alignSelf: 'stretch',
   },
-  backdropHidden: {
-    opacity: 0,
-  },
   flex: {
     flex: 1,
   },
@@ -108,14 +124,14 @@ const styles = StyleSheet.create({
     position: 'absolute',
     zIndex: 1,
   },
-  backdropContainer: {
+  container: {
     bottom: 0,
     display: 'flex',
     flexDirection: 'column',
     left: 0,
     position: 'fixed',
     right: 0,
     top: 0,
-    zIndex: 0,
+    zIndex: MODAL_Z_INDEX,
   },
 } as const);

src/hooks/useModalStack.ts

@@ -0,0 +1,32 @@
+import { useEffect, useSyncExternalStore } from 'react';
+
+let stack: string[] = [];
+const listeners = new Set<() => void>();
+
+const emit = () => listeners.forEach(listener => listener());
+
+const subscribe = (listener: () => void) => {
+  listeners.add(listener);
+
+  return () => {
+    listeners.delete(listener);
+  };
+};
+
+export function useModalStack(id: string) {
+  const getIsTopmost = () => stack[stack.length - 1] === id;
+
+  const isTopmost = useSyncExternalStore(subscribe, getIsTopmost, getIsTopmost);
+
+  useEffect(() => {
+    stack = [...stack, id];
+    emit();
+
+    return () => {
+      stack = stack.filter(entry => entry !== id);
+      emit();
+    };
+  }, [id]);
+
+  return { isTopmost };
+}