@tamagui/react-native-web-lite/dist/esm/Modal/ModalContent.mjs

React Native for Web

import * as React from "react";
import { StyleSheet, canUseDOM } from "@tamagui/react-native-web-internals";
import View from "../View";
var ModalContent = /* @__PURE__ */React.forwardRef((props, forwardedRef) => {
    const {
      active,
      children,
      onRequestClose,
      transparent,
      ...rest
    } = props;
    React.useEffect(() => {
      if (canUseDOM) {
        var closeOnEscape = e => {
          active && e.key === "Escape" && (e.stopPropagation(), onRequestClose && onRequestClose());
        };
        return document.addEventListener("keyup", closeOnEscape, !1), () => document.removeEventListener("keyup", closeOnEscape, !1);
      }
    }, [active, onRequestClose]);
    var style = React.useMemo(() => [styles.modal, transparent ? styles.modalTransparent : styles.modalOpaque], [transparent]);
    return /* @__PURE__ */React.createElement(View, {
      ...rest,
      accessibilityModal: !0,
      accessibilityRole: active ? "dialog" : null,
      ref: forwardedRef,
      style
    }, /* @__PURE__ */React.createElement(View, {
      style: styles.container
    }, children));
  }),
  styles = StyleSheet.create({
    modal: {
      position: "fixed",
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    },
    modalTransparent: {
      backgroundColor: "transparent"
    },
    modalOpaque: {
      backgroundColor: "white"
    },
    container: {
      top: 0,
      flex: 1
    }
  }),
  ModalContent_default = ModalContent;
export { ModalContent_default as default };
//# sourceMappingURL=ModalContent.mjs.map