@crossed/primitive/lib/commonjs/Modal/index.js

A universal & performant styling library for React Native, Next.js & React

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Modal_exports = {};
__export(Modal_exports, {
  Modal: () => Modal,
  ModalBody: () => ModalBody,
  ModalContent: () => ModalContent,
  ModalOverlay: () => ModalOverlay,
  ModalPortal: () => ModalPortal,
  ModalTitle: () => ModalTitle,
  ModalTrigger: () => ModalTrigger,
  createModal: () => createModal
});
module.exports = __toCommonJS(Modal_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = require("react");
var import_core = require("@crossed/core");
var import_react_native = require("react-native");
var import_portal = require("@gorhom/portal");
var import_Focus = require("./Focus");
__reExport(Modal_exports, require("./types"), module.exports);
const createModal = () => {
  const modalContext = (0, import_react.createContext)({});
  const Modal2 = ({
    children,
    open: openProps,
    defaultOpen = false,
    onOpenChange
  }) => {
    const titleIdRef = (0, import_react.useRef)();
    const descriptionIdRef = (0, import_react.useRef)();
    const [open, setOpen] = (0, import_core.useUncontrolled)({
      value: openProps,
      defaultValue: defaultOpen,
      onChange: onOpenChange
    });
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      modalContext.Provider,
      {
        value: { open, setOpen, titleIdRef, descriptionIdRef },
        children
      }
    );
  };
  const ModalContent2 = (props) => {
    const { titleIdRef, descriptionIdRef, setOpen } = (0, import_react.useContext)(modalContext);
    const escapeProps = (0, import_Focus.useEscape)(() => setOpen(false));
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_react_native.View,
      {
        role: "dialog",
        "aria-modal": true,
        "aria-labelledby": titleIdRef.current,
        "aria-describedby": descriptionIdRef.current,
        ...props,
        ...escapeProps
      }
    );
  };
  const ModalOverlay2 = ({ closeOnPress, ...props }) => {
    const { setOpen } = (0, import_react.useContext)(modalContext);
    const onPress = (0, import_react.useCallback)(() => {
      setOpen(false);
    }, [setOpen]);
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_react_native.Pressable,
      {
        ...props,
        disabled: !closeOnPress,
        focusable: false,
        "aria-hidden": true,
        ...{ tabIndex: "-1" },
        onPress: (0, import_core.composeEventHandlers)(props.onPress, onPress)
      }
    );
  };
  const ModalTitle2 = ({
    nativeID,
    id: idProps,
    ...props
  }) => {
    const { titleIdRef } = (0, import_react.useContext)(modalContext);
    const localId = (0, import_react.useId)();
    const id = idProps || nativeID || `modal-title${localId}`;
    titleIdRef.current = id;
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { ...props, id });
  };
  const ModalBody2 = ({
    nativeID,
    id: idProps,
    ...props
  }) => {
    const { descriptionIdRef } = (0, import_react.useContext)(modalContext);
    const localId = (0, import_react.useId)();
    const id = idProps || nativeID || `modal-body${localId}`;
    descriptionIdRef.current = id;
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { ...props, id });
  };
  const ModalPortal2 = ({ children, ...props }) => {
    const context = (0, import_react.useContext)(modalContext);
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(modalContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Focus.Focus, { open: context.open, ...props, children }) }) });
  };
  const ModalTrigger2 = ({
    children,
    asChild = false,
    ...props
  }) => {
    const { open, setOpen } = (0, import_react.useContext)(modalContext);
    const onPressOut = (0, import_react.useCallback)(() => {
      setOpen(!open);
    }, [open, setOpen]);
    return asChild && (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(children, {
      role: "button",
      ...props,
      onPressOut: (0, import_core.composeEventHandlers)(props.onPressOut, onPressOut)
    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_react_native.Pressable,
      {
        role: "button",
        ...props,
        onPressOut: (0, import_core.composeEventHandlers)(props.onPressOut, onPressOut),
        onPress: (0, import_core.composeEventHandlers)(props.onPress, () => {
        }),
        children
      }
    );
  };
  return {
    modalContext,
    Modal: Modal2,
    ModalContent: ModalContent2,
    ModalOverlay: ModalOverlay2,
    ModalTitle: ModalTitle2,
    ModalTrigger: ModalTrigger2,
    ModalPortal: ModalPortal2,
    ModalBody: ModalBody2
  };
};
const {
  Modal,
  ModalContent,
  ModalOverlay,
  ModalTitle,
  ModalTrigger,
  ModalPortal,
  ModalBody
} = createModal();
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Modal,
  ModalBody,
  ModalContent,
  ModalOverlay,
  ModalPortal,
  ModalTitle,
  ModalTrigger,
  createModal,
  ...require("./types")
});
//# sourceMappingURL=index.js.map