import {
  ModalContext
} from "./chunk-TBKQA5ZF.js";
import {
  useDialog
} from "./chunk-7LSDEZNB.js";
import {
  mergeRefs
} from "./chunk-QGGILW3D.js";
import {
  supportsDialog
} from "./chunk-74GPBJTH.js";

// src/components/Modal/Modal.tsx
import classNames from "classnames/dedupe";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import "@simplybusiness/mobius/src/components/Modal/Modal.css";
import { jsx } from "react/jsx-runtime";
var TRANSITION_CSS_VARIABLE = "--modal-transition-duration";
var Modal = ({ ref, ...props }) => {
  const {
    isOpen,
    onClose,
    preventEscapeKey = false,
    onOpen,
    children,
    className,
    closeLabel,
    isFullScreen,
    animation,
    ...rest
  } = props;
  const [shouldTransition, setShouldTransition] = useState(false);
  useEffect(() => {
    setShouldTransition(supportsDialog());
  }, []);
  const dialogRef = useRef(null);
  const { close } = useDialog({
    ref: dialogRef,
    isOpen,
    onOpen,
    onClose,
    transition: {
      isEnabled: !!animation,
      CSSVariable: TRANSITION_CSS_VARIABLE
    }
  });
  const modalClasses = classNames(
    "mobius",
    "mobius-modal",
    {
      "--no-dialog-support": !shouldTransition,
      // This class is used to correctly position modal in x/y middle on iOS <= 15.2
      "--should-transition": shouldTransition && animation,
      "--slide-up": animation === "slideUp",
      "--fade": animation === "fade",
      "--is-fullscreen": isFullScreen
    },
    className
  );
  const [titleId, setTitleId] = useState(void 0);
  const handleSetTitleId = useCallback((id) => {
    setTitleId(id);
  }, []);
  const contextValue = useMemo(
    () => ({
      onClose: close,
      closeLabel,
      titleId,
      setTitleId: handleSetTitleId
    }),
    [close, closeLabel, titleId, handleSetTitleId]
  );
  return /* @__PURE__ */ jsx(
    "dialog",
    {
      ref: mergeRefs([dialogRef, ref]),
      onCancel: close,
      onKeyDown: (event) => {
        if (preventEscapeKey && event.key === "Escape") {
          event.preventDefault();
        }
      },
      className: modalClasses,
      "aria-labelledby": titleId,
      ...rest,
      children: /* @__PURE__ */ jsx(ModalContext.Provider, { value: contextValue, children })
    }
  );
};
Modal.displayName = "Modal";

export {
  Modal
};
//# sourceMappingURL=chunk-JJUTS5ET.js.map
