@teamsparta/stack-custom-modal/dist/chunk-FE6RQUXX.mjs

stack custom modal

"use client";

import {
  CustomModalOverlay
} from "./chunk-YJU76QNH.mjs";
import {
  useCustomModal
} from "./chunk-VHPHVMAP.mjs";
import {
  contentCss,
  contentVariants,
  contentWrapperCss,
  modalSizeVariants
} from "./chunk-YJGPPUJG.mjs";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-FUJQIYOF.mjs";

// src/compounds/CustomModalContent.tsx
import * as Dialog from "@radix-ui/react-dialog";
import { usePreserveCallback } from "@teamsparta/react";
import { StackThemeProvider } from "@teamsparta/stack-core";
import { AnimatePresence, motion } from "motion/react";
import {
  forwardRef,
  useCallback
} from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
var noop = () => {
};
var CustomModalContent = forwardRef(
  (_a, ref) => {
    var _b = _a, {
      children,
      onInteractOutside,
      style: styleFromProps,
      asChild = true,
      overlay = /* @__PURE__ */ jsx(CustomModalOverlay, { forceMount: true })
    } = _b, restProps = __objRest(_b, [
      "children",
      "onInteractOutside",
      "style",
      "asChild",
      "overlay"
    ]);
    const {
      open,
      closeOnInteractOutside: closeOnInteractOutsideFromContext,
      size,
      theme
    } = useCustomModal("CustomModalContent");
    const onInteractOutsideCallbackRef = usePreserveCallback(
      onInteractOutside != null ? onInteractOutside : noop
    );
    const style = __spreadValues(__spreadValues({}, modalSizeVariants[size]), styleFromProps);
    const hasOverlay = overlay !== null;
    const closeOnInteractOutside = hasOverlay ? closeOnInteractOutsideFromContext : false;
    const handleInteractOutside = useCallback(
      (e) => {
        const { target } = e.detail.originalEvent;
        if (target instanceof Element && target.closest("[data-stack-toast]")) {
          e.preventDefault();
          onInteractOutsideCallbackRef(e);
          return;
        }
        if (!closeOnInteractOutside) {
          e.preventDefault();
        }
        onInteractOutsideCallbackRef(e);
      },
      [onInteractOutsideCallbackRef, closeOnInteractOutside]
    );
    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(Dialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsxs(StackThemeProvider, { theme, children: [
      overlay,
      /* @__PURE__ */ jsx(
        Dialog.Content,
        __spreadProps(__spreadValues({
          ref,
          asChild,
          style,
          onOpenAutoFocus: (e) => e.preventDefault(),
          onInteractOutside: handleInteractOutside
        }, restProps), {
          children: /* @__PURE__ */ jsx("div", { css: contentWrapperCss, children: /* @__PURE__ */ jsx(
            motion.div,
            {
              css: contentCss,
              variants: contentVariants,
              initial: "initial",
              animate: "animate",
              exit: "exit",
              children
            }
          ) })
        })
      )
    ] }) }) });
  }
);
CustomModalContent.displayName = "CustomModalContent";

export {
  CustomModalContent
};