@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/index.mjs";
const ModalContent = /* @__PURE__ */React.forwardRef((props, forwardedRef) => {
  const {
    active,
    children,
    onRequestClose,
    transparent,
    ...rest
  } = props;
  React.useEffect(() => {
    if (canUseDOM) {
      var closeOnEscape = e => {
        if (active && e.key === "Escape") {
          e.stopPropagation();
          if (onRequestClose) {
            onRequestClose();
          }
        }
      };
      document.addEventListener("keyup", closeOnEscape, false);
      return () => document.removeEventListener("keyup", closeOnEscape, false);
    }
  }, [active, onRequestClose]);
  var style = React.useMemo(() => {
    return [styles.modal, transparent ? styles.modalTransparent : styles.modalOpaque];
  }, [transparent]);
  return /* @__PURE__ */React.createElement(View, {
    ...rest,
    accessibilityModal: true,
    accessibilityRole: active ? "dialog" : null,
    ref: forwardedRef,
    style
  }, /* @__PURE__ */React.createElement(View, {
    style: styles.container
  }, children));
});
var 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
  }
});
export { ModalContent };
//# sourceMappingURL=ModalContent.mjs.map