@webority-technologies/mobile-ui 0.0.1

package/lib/commonjs/components/Modal/Modal.js

@@ -0,0 +1,356 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Modal = exports.MODAL_DISMISS_GRACE_MS = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _index = require("../../theme/index.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Local shape mirror — see types.ts ModalTokens for the canonical definition.
+
+/**
+ * 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.
+ */
+const MODAL_DISMISS_GRACE_MS = exports.MODAL_DISMISS_GRACE_MS = 300;
+const Modal = exports.Modal = /*#__PURE__*/(0, _react.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 = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const duration = animationDuration ?? theme.motion.duration.normal;
+  const screenHeight = _reactNative.Dimensions.get('window').height;
+  const modalTokens = theme.components.modal;
+  const scaleStartValue = modalTokens?.scaleStartValue ?? 0.9;
+  const scaleAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(scaleStartValue)).current;
+  const opacityAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const translateYAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(screenHeight)).current;
+  const containerRef = (0, _react.useRef)(null);
+  const wasVisibleRef = (0, _react.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] = (0, _react.useState)(visible);
+  const styles = (0, _react.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 = (0, _react.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.
+  (0, _react.useEffect)(() => {
+    if (visible) {
+      setRendered(true);
+    }
+  }, [visible]);
+  (0, _react.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 = _reactNative.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 = _reactNative.Animated.parallel([_reactNative.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
+        }), _reactNative.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 = _reactNative.Easing.bezier(...theme.motion.easing.accelerate);
+      const exit = _reactNative.Animated.parallel([presentation === 'bottom' ? _reactNative.Animated.timing(translateYAnim, {
+        toValue: screenHeight,
+        duration: exitDuration,
+        easing: accelerate,
+        useNativeDriver: true
+      }) : _reactNative.Animated.parallel([_reactNative.Animated.timing(scaleAnim, {
+        toValue: scaleStartValue,
+        duration: exitDuration,
+        easing: accelerate,
+        useNativeDriver: true
+      }), _reactNative.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.
+  (0, _react.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) {
+          _reactNative.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) {
+            _reactNative.AccessibilityInfo.sendAccessibilityEvent(target, 'focus');
+          }
+        }, duration);
+      }
+    }
+    return () => {
+      if (openTimer) {
+        clearTimeout(openTimer);
+      }
+      if (closeTimer) {
+        clearTimeout(closeTimer);
+      }
+    };
+  }, [visible, duration, restoreFocusRef]);
+  const wasOpenRef = (0, _react.useRef)(false);
+  (0, _react.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 = (0, _react.useCallback)(() => {
+    if (!backdropPressClose) {
+      return;
+    }
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _hapticUtils.triggerHaptic)(h);
+    }
+    onRequestClose();
+  }, [backdropPressClose, onRequestClose, haptic]);
+  const handleHardwareBack = (0, _react.useCallback)(() => {
+    if (hardwareBackPress) {
+      onRequestClose();
+    }
+  }, [hardwareBackPress, onRequestClose]);
+  const containerStyle = (0, _react.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 = (0, _react.useMemo)(() => {
+    if (presentation === 'bottom') {
+      return styles.bottomWrapper;
+    }
+    if (presentation === 'fullScreen') {
+      return styles.fullScreenWrapper;
+    }
+    return styles.centeredWrapper;
+  }, [presentation, styles]);
+  const animatedTransform = (0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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: [_reactNative.StyleSheet.absoluteFill, wrapperStyle, {
+          backgroundColor: backdropColor
+        }, backdropStyle],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          style: _reactNative.StyleSheet.absoluteFill,
+          onPress: handleBackdropPress,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close modal",
+          disabled: !backdropPressClose
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+          style: [containerStyle, animatedTransform, contentStyle],
+          pointerEvents: "auto",
+          children: children
+        })]
+      })
+    })
+  });
+});
+Modal.displayName = 'Modal';
+const buildStyles = _theme => _reactNative.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
+  }
+});
+var _default = exports.default = Modal;
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MODAL_DISMISS_GRACE_MS", {
+  enumerable: true,
+  get: function () {
+    return _Modal.MODAL_DISMISS_GRACE_MS;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _Modal.Modal;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Modal.default;
+  }
+});
+var _Modal = _interopRequireWildcard(require("./Modal.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map