@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/Modal/Modal.js

@@ -0,0 +1,352 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Dimensions, Easing, Pressable, Modal as RNModal, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
+
+// Local shape mirror — see types.ts ModalTokens for the canonical definition.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Grace period between `visible` flipping false and the native modal being
+ * safely gone. Unmounting the tree (navigation reset, auth flip) before this
+ * elapses races Android's ReactModalHostView dismiss and NPE-crashes.
+ */
+export const MODAL_DISMISS_GRACE_MS = 300;
+const Modal = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    visible,
+    onRequestClose,
+    presentation = 'centered',
+    backdropOpacity,
+    backdropPressClose = true,
+    animationDuration,
+    accessibilityLabel,
+    hardwareBackPress = true,
+    children,
+    contentStyle,
+    backdropStyle,
+    restoreFocusRef,
+    onDismissed,
+    haptic,
+    testID
+  } = props;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const duration = animationDuration ?? theme.motion.duration.normal;
+  const screenHeight = Dimensions.get('window').height;
+  const modalTokens = theme.components.modal;
+  const scaleStartValue = modalTokens?.scaleStartValue ?? 0.9;
+  const scaleAnim = useRef(createAnimatedValue(scaleStartValue)).current;
+  const opacityAnim = useRef(createAnimatedValue(0)).current;
+  const translateYAnim = useRef(createAnimatedValue(screenHeight)).current;
+  const containerRef = useRef(null);
+  const wasVisibleRef = useRef(false);
+  // The native modal must stay mounted while the exit plays; unmounting on the
+  // `visible` flip is what made the modal snap away after springing in. Exit
+  // finishes well inside MODAL_DISMISS_GRACE_MS, so `onDismissed` still lands
+  // after the content is actually gone.
+  const [rendered, setRendered] = useState(visible);
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+
+  // The backdrop is a pre-baked colour, not an animated opacity (see the render
+  // comment for the Fabric reason), so `backdropOpacity` has to override the
+  // token's alpha channel rather than drive an Animated value.
+  const backdropColor = useMemo(() => {
+    const token = theme.colors.background.overlay;
+    if (typeof backdropOpacity !== 'number') {
+      return token;
+    }
+    const rgba = token.match(/^rgba?\(([^)]+)\)$/);
+    if (!rgba) {
+      return token;
+    }
+    const [r, g, b] = rgba[1].split(',').map(part => part.trim());
+    return `rgba(${r}, ${g}, ${b}, ${backdropOpacity})`;
+  }, [theme.colors.background.overlay, backdropOpacity]);
+
+  // Mounting is its own effect: folding it into the animation effect below
+  // would make `rendered` flipping true re-run that effect and replay the
+  // enter animation.
+  useEffect(() => {
+    if (visible) {
+      setRendered(true);
+    }
+  }, [visible]);
+  useEffect(() => {
+    const running = [];
+    if (visible && rendered) {
+      // The backdrop is NOT animated: it is a pre-baked colour, because on
+      // RN 0.85 / Fabric / iOS an animated opacity on a View that also sets
+      // backgroundColor renders as 0 and the dim layer never appears (see the
+      // render comment). It used to be tweened here and in the exit below, but
+      // nothing consumed the value — a dead animation on every open and close.
+
+      if (presentation === 'bottom') {
+        const slide = Animated.spring(translateYAnim, {
+          toValue: 0,
+          damping: theme.motion.spring.gentle.damping,
+          stiffness: theme.motion.spring.gentle.stiffness,
+          mass: theme.motion.spring.gentle.mass,
+          useNativeDriver: true
+        });
+        slide.start();
+        running.push(slide);
+      } else {
+        const enter = Animated.parallel([Animated.spring(scaleAnim, {
+          toValue: 1,
+          damping: theme.motion.spring.gentle.damping,
+          stiffness: theme.motion.spring.gentle.stiffness,
+          mass: theme.motion.spring.gentle.mass,
+          useNativeDriver: true
+        }), Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration,
+          useNativeDriver: true
+        })]);
+        enter.start();
+        running.push(enter);
+      }
+    } else if (rendered) {
+      // Leave decisively: timing + accelerate, never a spring on the way out
+      // (theme.motion.spring documents the rule).
+      const exitDuration = theme.motion.duration.fast;
+      const accelerate = Easing.bezier(...theme.motion.easing.accelerate);
+      const exit = Animated.parallel([presentation === 'bottom' ? Animated.timing(translateYAnim, {
+        toValue: screenHeight,
+        duration: exitDuration,
+        easing: accelerate,
+        useNativeDriver: true
+      }) : Animated.parallel([Animated.timing(scaleAnim, {
+        toValue: scaleStartValue,
+        duration: exitDuration,
+        easing: accelerate,
+        useNativeDriver: true
+      }), Animated.timing(opacityAnim, {
+        toValue: 0,
+        duration: exitDuration,
+        easing: accelerate,
+        useNativeDriver: true
+      })])]);
+      exit.start(({
+        finished
+      }) => {
+        if (finished) {
+          setRendered(false);
+        }
+      });
+      running.push(exit);
+    }
+    // Stop in-flight tweens on unmount / visibility flip so an enter animation
+    // never resolves against a torn-down tree (fixes the jest async leak and
+    // the equivalent post-unmount work in the real app).
+    return () => running.forEach(animation => animation.stop());
+  }, [visible, rendered, presentation, duration, scaleAnim, opacityAnim, translateYAnim, screenHeight, theme.motion.spring.gentle.damping, theme.motion.spring.gentle.stiffness, theme.motion.spring.gentle.mass, theme.motion.duration.fast, theme.motion.easing.accelerate, scaleStartValue]);
+
+  // Accessibility focus trap: when the modal opens, push screen-reader focus
+  // into the dialog container after the mount animation; when it closes,
+  // restore focus to the trigger element if the consumer provided a ref.
+  useEffect(() => {
+    let openTimer;
+    let closeTimer;
+    if (visible) {
+      openTimer = setTimeout(() => {
+        // sendAccessibilityEvent takes the host instance directly; the older
+        // setAccessibilityFocus needs a react tag via the deprecated findNodeHandle.
+        if (containerRef.current) {
+          AccessibilityInfo.sendAccessibilityEvent(containerRef.current, 'focus');
+        }
+      }, 150);
+      wasVisibleRef.current = true;
+    } else if (wasVisibleRef.current) {
+      wasVisibleRef.current = false;
+      if (restoreFocusRef && restoreFocusRef.current) {
+        closeTimer = setTimeout(() => {
+          const target = restoreFocusRef.current;
+          if (target) {
+            AccessibilityInfo.sendAccessibilityEvent(target, 'focus');
+          }
+        }, duration);
+      }
+    }
+    return () => {
+      if (openTimer) {
+        clearTimeout(openTimer);
+      }
+      if (closeTimer) {
+        clearTimeout(closeTimer);
+      }
+    };
+  }, [visible, duration, restoreFocusRef]);
+  const wasOpenRef = useRef(false);
+  useEffect(() => {
+    if (visible) {
+      wasOpenRef.current = true;
+      return;
+    }
+    if (!wasOpenRef.current) {
+      return;
+    }
+    wasOpenRef.current = false;
+    if (!onDismissed) {
+      return;
+    }
+    const timer = setTimeout(onDismissed, MODAL_DISMISS_GRACE_MS);
+    return () => clearTimeout(timer);
+  }, [visible, onDismissed]);
+  const handleBackdropPress = useCallback(() => {
+    if (!backdropPressClose) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    onRequestClose();
+  }, [backdropPressClose, onRequestClose, haptic]);
+  const handleHardwareBack = useCallback(() => {
+    if (hardwareBackPress) {
+      onRequestClose();
+    }
+  }, [hardwareBackPress, onRequestClose]);
+  const containerStyle = useMemo(() => {
+    if (presentation === 'fullScreen') {
+      return [styles.fullScreenContent, {
+        backgroundColor: theme.colors.background.elevated
+      }];
+    }
+    if (presentation === 'bottom') {
+      // paddingBottom includes the Android navigation-bar / iOS home-indicator
+      // inset so sheet content never lands behind the system chrome.
+      return [styles.bottomContent, {
+        backgroundColor: theme.colors.background.elevated,
+        borderTopLeftRadius: theme.radius.xl,
+        borderTopRightRadius: theme.radius.xl,
+        paddingTop: theme.spacing.lg,
+        paddingHorizontal: theme.spacing.lg,
+        paddingBottom: theme.spacing.lg + insets.bottom
+      }, theme.shadows.xl];
+    }
+    return [styles.centeredContent, {
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.xl,
+      padding: theme.spacing.xl
+    }, theme.shadows.xl];
+  }, [presentation, theme, styles, insets.bottom]);
+  const wrapperStyle = useMemo(() => {
+    if (presentation === 'bottom') {
+      return styles.bottomWrapper;
+    }
+    if (presentation === 'fullScreen') {
+      return styles.fullScreenWrapper;
+    }
+    return styles.centeredWrapper;
+  }, [presentation, styles]);
+  const animatedTransform = useMemo(() => {
+    if (presentation === 'bottom') {
+      return {
+        transform: [{
+          translateY: translateYAnim
+        }]
+      };
+    }
+    if (presentation === 'fullScreen') {
+      return {
+        opacity: opacityAnim
+      };
+    }
+    return {
+      opacity: opacityAnim,
+      transform: [{
+        scale: scaleAnim
+      }]
+    };
+  }, [presentation, scaleAnim, opacityAnim, translateYAnim]);
+  return /*#__PURE__*/_jsx(RNModal, {
+    visible: rendered,
+    transparent: true,
+    statusBarTranslucent: true
+    // Android-only API (RN 0.71+). On iOS the prop is harmless / ignored.
+    // Lets the backdrop and sheet extend behind the system navigation bar
+    // so the dim layer covers the entire screen and gesture-nav devices
+    // don't show a gap under the sheet.
+    ,
+    navigationBarTranslucent: true,
+    animationType: "none",
+    onRequestClose: handleHardwareBack,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(View, {
+      ref: node => {
+        containerRef.current = node;
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      style: styles.root,
+      accessible: true,
+      accessibilityViewIsModal: true,
+      accessibilityRole: "alert",
+      accessibilityLabel: accessibilityLabel,
+      children: /*#__PURE__*/_jsxs(View
+      // Backdrop wraps the dialog content (not sibling) — empirically,
+      // on RN 0.85 / Fabric / iOS a sibling backdrop is occluded by the
+      // wrapper View regardless of render order or pointerEvents.
+      // collapsable={false} prevents the backdrop View from being
+      // flattened out of the native tree. The backdrop uses a pre-baked
+      // rgba colour (no animated opacity) because Animated.View opacity
+      // on a coloured View doesn't update visibly on Fabric.
+      , {
+        collapsable: false,
+        style: [StyleSheet.absoluteFill, wrapperStyle, {
+          backgroundColor: backdropColor
+        }, backdropStyle],
+        children: [/*#__PURE__*/_jsx(Pressable, {
+          style: StyleSheet.absoluteFill,
+          onPress: handleBackdropPress,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close modal",
+          disabled: !backdropPressClose
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: [containerStyle, animatedTransform, contentStyle],
+          pointerEvents: "auto",
+          children: children
+        })]
+      })
+    })
+  });
+});
+Modal.displayName = 'Modal';
+const buildStyles = _theme => StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  centeredWrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 16
+  },
+  centeredContent: {
+    maxWidth: '90%',
+    width: '90%'
+  },
+  bottomWrapper: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  bottomContent: {
+    width: '100%'
+  },
+  fullScreenWrapper: {
+    flex: 1
+  },
+  fullScreenContent: {
+    flex: 1
+  }
+});
+export { Modal };
+export default Modal;
+//# sourceMappingURL=Modal.js.map

package/lib/module/components/Modal/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default, MODAL_DISMISS_GRACE_MS, Modal } from "./Modal.js";
+//# sourceMappingURL=index.js.map