import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { h as $a11501f3d1d39e6c$export$ea8f71083e90600f, i as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, j as $337b884510726a0d$export$14c98a7594375490, k as $5e3802645cc19319$export$1c3ebcada18427bf, l as $de32f1b87079253c$export$d2f961adcb0afbe, m as $86ea4cb521eb2e37$export$2317d149ed6f78c4, n as $337b884510726a0d$export$c6fdb837b070b4ff, g as $de32f1b87079253c$export$2e1e1122cf0cba88, f as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../../Dialog-CQ8H6Noi.js";
import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-bh1HU5HH.js";
import { n as $b5e257d569688ac6$export$535bd6ca7f90a273, b as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-cvK1vxO7.js";
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
import React__default, { useState, useEffect, forwardRef, useContext, createContext, useRef, useMemo } from "react";
import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $d3f049242431219c$export$45fda7c47f93fd48, b as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../OverlayArrow-DivvkAVb.js";
import { Button } from "../button/button.js";
import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import { icons } from "../../icons/icons.js";
import "../../react-jsx-parser.min-LF707GK8.js";
import { HStack } from "../layout/hstack.js";
let $5df64b3807dc15ee$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
function $5df64b3807dc15ee$export$d699905dd57c73ca() {
  let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
  let [size, setSize] = useState(() => isSSR ? {
    width: 0,
    height: 0
  } : $5df64b3807dc15ee$var$getViewportSize());
  useEffect(() => {
    let onResize = () => {
      setSize((size2) => {
        let newSize = $5df64b3807dc15ee$var$getViewportSize();
        if (newSize.width === size2.width && newSize.height === size2.height) return size2;
        return newSize;
      });
    };
    if (!$5df64b3807dc15ee$var$visualViewport) window.addEventListener("resize", onResize);
    else $5df64b3807dc15ee$var$visualViewport.addEventListener("resize", onResize);
    return () => {
      if (!$5df64b3807dc15ee$var$visualViewport) window.removeEventListener("resize", onResize);
      else $5df64b3807dc15ee$var$visualViewport.removeEventListener("resize", onResize);
    };
  }, []);
  return size;
}
function $5df64b3807dc15ee$var$getViewportSize() {
  return {
    width: $5df64b3807dc15ee$var$visualViewport && ($5df64b3807dc15ee$var$visualViewport === null || $5df64b3807dc15ee$var$visualViewport === void 0 ? void 0 : $5df64b3807dc15ee$var$visualViewport.width) || window.innerWidth,
    height: $5df64b3807dc15ee$var$visualViewport && ($5df64b3807dc15ee$var$visualViewport === null || $5df64b3807dc15ee$var$visualViewport === void 0 ? void 0 : $5df64b3807dc15ee$var$visualViewport.height) || window.innerHeight
  };
}
function $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, ref) {
  let { overlayProps, underlayProps } = $a11501f3d1d39e6c$export$ea8f71083e90600f({
    ...props,
    isOpen: state.isOpen,
    onClose: state.close
  }, ref);
  $49c51c25361d4cd2$export$ee0f7cc6afcd1c18({
    isDisabled: !state.isOpen
  });
  $337b884510726a0d$export$14c98a7594375490();
  useEffect(() => {
    if (state.isOpen && ref.current) return $5e3802645cc19319$export$1c3ebcada18427bf([
      ref.current
    ], {
      shouldUseInert: true
    });
  }, [
    state.isOpen,
    ref
  ]);
  return {
    modalProps: $3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps),
    underlayProps
  };
}
const $f3f84453ead64de5$export$ab57792b9b6974a6 = /* @__PURE__ */ createContext(null);
const $f3f84453ead64de5$var$InternalModalContext = /* @__PURE__ */ createContext(null);
const $f3f84453ead64de5$export$2b77a92f1a5ad772 = /* @__PURE__ */ forwardRef(function Modal(props, ref) {
  let ctx = useContext($f3f84453ead64de5$var$InternalModalContext);
  if (ctx) {
    if (process.env.NODE_ENV !== "production" && (props.onOpenChange || props.defaultOpen !== void 0 || props.isOpen !== void 0)) {
      const invalidSet = /* @__PURE__ */ new Set([
        "isDismissable",
        "isKeyboardDismissDisabled",
        "isOpen",
        "defaultOpen",
        "onOpenChange",
        "isEntering",
        "isExiting",
        "UNSTABLE_portalContainer",
        "shouldCloseOnInteractOutside"
      ]);
      const invalidProps = Object.keys(props).filter((key) => invalidSet.has(key));
      console.warn(`This modal is already wrapped in a ModalOverlay, props [${invalidProps.join(", ")}] should be placed on the ModalOverlay instead.`);
    }
    return /* @__PURE__ */ React__default.createElement($f3f84453ead64de5$var$ModalContent, {
      ...props,
      modalRef: ref
    }, props.children);
  }
  let { isDismissable, isKeyboardDismissDisabled, isOpen, defaultOpen, onOpenChange, children, isEntering, isExiting, UNSTABLE_portalContainer, shouldCloseOnInteractOutside, ...otherProps } = props;
  return /* @__PURE__ */ React__default.createElement($f3f84453ead64de5$export$8948f78d83984c69, {
    isDismissable,
    isKeyboardDismissDisabled,
    isOpen,
    defaultOpen,
    onOpenChange,
    isEntering,
    isExiting,
    UNSTABLE_portalContainer,
    shouldCloseOnInteractOutside
  }, /* @__PURE__ */ React__default.createElement($f3f84453ead64de5$var$ModalContent, {
    ...otherProps,
    modalRef: ref
  }, children));
});
function $f3f84453ead64de5$var$ModalOverlayWithForwardRef(props, ref) {
  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $f3f84453ead64de5$export$ab57792b9b6974a6);
  let contextState = useContext($de32f1b87079253c$export$d2f961adcb0afbe);
  let localState = $fc909762b330b746$export$61c6a8c84e605fb6(props);
  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
  if (state === contextState) {
    if (process.env.NODE_ENV !== "production" && (props.onOpenChange || props.defaultOpen !== void 0 || props.isOpen !== void 0)) console.warn("This modals state is controlled by a trigger, place onOpenChange on the trigger instead.");
  }
  let objectRef = $df56164dff5785e2$export$4338b53315abf666(ref);
  let modalRef = useRef(null);
  let isOverlayExiting = $d3f049242431219c$export$45fda7c47f93fd48(objectRef, state.isOpen);
  let isModalExiting = $d3f049242431219c$export$45fda7c47f93fd48(modalRef, state.isOpen);
  let isExiting = isOverlayExiting || isModalExiting || props.isExiting || false;
  let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
  if (!state.isOpen && !isExiting || isSSR) return null;
  return /* @__PURE__ */ React__default.createElement($f3f84453ead64de5$var$ModalOverlayInner, {
    ...props,
    state,
    isExiting,
    overlayRef: objectRef,
    modalRef
  });
}
const $f3f84453ead64de5$export$8948f78d83984c69 = /* @__PURE__ */ forwardRef($f3f84453ead64de5$var$ModalOverlayWithForwardRef);
function $f3f84453ead64de5$var$ModalOverlayInner({ UNSTABLE_portalContainer, ...props }) {
  let modalRef = props.modalRef;
  let { state } = props;
  let { modalProps, underlayProps } = $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, modalRef);
  let entering = $d3f049242431219c$export$6d3443f2c48bfc20(props.overlayRef) || props.isEntering || false;
  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
    ...props,
    defaultClassName: "react-aria-ModalOverlay",
    values: {
      isEntering: entering,
      isExiting: props.isExiting,
      state
    }
  });
  let viewport = $5df64b3807dc15ee$export$d699905dd57c73ca();
  let style = {
    ...renderProps.style,
    "--visual-viewport-height": viewport.height + "px"
  };
  return /* @__PURE__ */ React__default.createElement($337b884510726a0d$export$c6fdb837b070b4ff, {
    isExiting: props.isExiting,
    portalContainer: UNSTABLE_portalContainer
  }, /* @__PURE__ */ React__default.createElement("div", {
    ...$3ef42575df84b30b$export$9d1611c77c2fe928($65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
      global: true
    }), underlayProps),
    ...renderProps,
    style,
    ref: props.overlayRef,
    "data-entering": entering || void 0,
    "data-exiting": props.isExiting || void 0
  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
    values: [
      [
        $f3f84453ead64de5$var$InternalModalContext,
        {
          modalProps,
          modalRef,
          isExiting: props.isExiting,
          isDismissable: props.isDismissable
        }
      ],
      [
        $de32f1b87079253c$export$d2f961adcb0afbe,
        state
      ]
    ]
  }, renderProps.children)));
}
function $f3f84453ead64de5$var$ModalContent(props) {
  let { modalProps, modalRef, isExiting, isDismissable } = useContext($f3f84453ead64de5$var$InternalModalContext);
  let state = useContext($de32f1b87079253c$export$d2f961adcb0afbe);
  let mergedRefs = useMemo(() => $5dc95899b306f630$export$c9058316764c140e(props.modalRef, modalRef), [
    props.modalRef,
    modalRef
  ]);
  let ref = $df56164dff5785e2$export$4338b53315abf666(mergedRefs);
  let entering = $d3f049242431219c$export$6d3443f2c48bfc20(ref);
  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
    ...props,
    defaultClassName: "react-aria-Modal",
    values: {
      isEntering: entering,
      isExiting,
      state
    }
  });
  return /* @__PURE__ */ React__default.createElement("div", {
    ...$3ef42575df84b30b$export$9d1611c77c2fe928($65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
      global: true
    }), modalProps),
    ...renderProps,
    ref,
    "data-entering": entering || void 0,
    "data-exiting": isExiting || void 0
  }, isDismissable && /* @__PURE__ */ React__default.createElement($86ea4cb521eb2e37$export$2317d149ed6f78c4, {
    onDismiss: state.close
  }), renderProps.children);
}
/**
 * Modal dialog.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {boolean} [props.open] - **Controlled mode ** - whether the modal is open.
 * @param {boolean} [props.defaultOpen] - **Uncontrolled mode ** - whether the modal is initially open.
 * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the modal footer, typically buttons.
 * @param {JSX.Element|JSX.Element[]} [props.headerActions] - Actions to display in the modal header, next to the close button (if enabled).
 * @param {string|JSX.Element} [props.triggerLabel] - Label for the trigger button.
 * @param {JSX.Element} [props.triggerIcon] - Trigger button icon.
 * @param {ButtonProps} [props.triggerProps] - Props to pass to the trigger button.
 * @param {ReactNode} [props.customTrigger] - If provided, replaces the default trigger button. The passed component should be something button-related that can open the modal.
 * @param {string|JSX.Element} [props.title] - Title of the modal.
 * @param {boolean} [props.noCloseButton] - If `true`, the close button will not be displayed.
 * @param {boolean} [props.noClickToDismiss] - If `true`, the modal will not close when clicking outside of it.
 * @param {boolean} [props.noKeyboardDismiss] - If `true`, the modal will not close when pressing the `Esc` key.
 * @param {string} [props.className] - Classes to pass to the modal container.
 * @param {string} [props.overlayClassName] - Classes to pass to the modal backdrop.
 * @param {string} [props.actionsClassName] - Classes to pass to the modal footer (actions) container.
 * @param {string} [props.headerClassName] - Classes to pass to the modal header container.
 * @param {string} [props.contentContainerClassName] - Classes to pass to the modal content container.
 * @param {Function} [props.shouldCloseOnInteractOutside=() => true] - Allows ignoring close events for certain elements. `(element: HTMLElement) => boolean`.
 * @param {Function} [props.onOpenChange] - Function called when the modal's open state changes. `(isOpen: boolean) => void`
 *
 * @returns {JSX.Element} The Modal component.
 *
 * @example
 * <Modal>
 *  <p>Modal content</p>
 * </Modal>
 *
 * @preserve
 */
const Modal2 = (props) => {
  const { triggerLabel, triggerIcon, triggerProps, customTrigger, open } = props;
  if (typeof open !== "undefined") {
    return /* @__PURE__ */ jsx(ModalInternal, { ...props });
  }
  return /* @__PURE__ */ jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, { children: [
    !customTrigger && /* @__PURE__ */ jsx(
      Button,
      {
        icon: triggerIcon,
        ...triggerProps,
        children: triggerLabel ?? (!triggerIcon && __("Open", "eightshift-frontend-libs"))
      }
    ),
    customTrigger,
    /* @__PURE__ */ jsx(ModalInternal, { ...props })
  ] });
};
const ModalInternal = (props) => {
  const {
    children,
    shouldCloseOnInteractOutside,
    open,
    defaultOpen,
    onOpenChange,
    title,
    actions,
    headerActions,
    noCloseButton,
    noClickToDismiss,
    noKeyboardDismiss,
    "aria-label": ariaLabel,
    className,
    headerClassName,
    actionsClassName,
    overlayClassName,
    contentContainerClassName,
    ...rest
  } = props;
  return /* @__PURE__ */ jsx(
    $f3f84453ead64de5$export$8948f78d83984c69,
    {
      isDismissable: !noClickToDismiss,
      defaultOpen,
      isOpen: open,
      shouldCloseOnInteractOutside,
      onOpenChange,
      isKeyboardDismissDisabled: noKeyboardDismiss,
      className: ({ isEntering, isExiting }) => clsx(
        "es:fixed es:inset-0 es:z-9999 es:flex es:min-h-full es:items-center es:justify-center es:overflow-y-auto es:p-4 es:text-center es:bg-black/30 es:backdrop-blur-sm",
        isEntering && "es:motion-opacity-in es:motion-duration-150",
        isExiting && "es:motion-opacity-out es:motion-duration-150",
        overlayClassName
      ),
      ...rest,
      children: /* @__PURE__ */ jsx(
        $f3f84453ead64de5$export$2b77a92f1a5ad772,
        {
          className: ({ isEntering, isExiting }) => clsx(
            "es:w-full es:max-w-lg es:overflow-hidden es:rounded-3xl es:border es:border-secondary-100 es:bg-white es:text-left es:align-middle es:shadow-xl es:inset-ring es:inset-ring-secondary-50",
            isEntering && "es:motion-safe:motion-scale-in-95 es:motion-fade-in es:motion-duration-300 es:motion-ease-spring-smooth/scale",
            isExiting && "es:motion-safe:motion-scale-out-95 es:motion-fade-out es:motion-duration-250 es:motion-ease-spring-smooth/scale",
            className
          ),
          children: /* @__PURE__ */ jsx(
            $de32f1b87079253c$export$3ddf2d174ce01153,
            {
              className: "es:relative es:text-sm es:outline-hidden",
              "aria-label": ariaLabel,
              children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
                /* @__PURE__ */ jsxs(HStack, { className: clsx(title && "es:px-5 es:py-3 es:justify-between es:bg-secondary-50 es:border-b es:border-secondary-200", headerClassName), children: [
                  title && /* @__PURE__ */ jsx(
                    $5cb03073d3f54797$export$a8a3e93435678ff9,
                    {
                      className: "es:text-balance es:text-base! es:my-0! es:font-medium!",
                      slot: "title",
                      children: title
                    }
                  ),
                  (!noCloseButton || headerActions) && /* @__PURE__ */ jsxs(HStack, { className: !title && "es:absolute es:top-4 es:right-4 es:z-20", children: [
                    headerActions,
                    !noCloseButton && /* @__PURE__ */ jsx(
                      Button,
                      {
                        className: !title && "es:bg-white/60 es:backdrop-blur-lg",
                        onPress: close,
                        type: "ghost",
                        size: "small",
                        icon: icons.clear,
                        "aria-label": __("Close", "eightshift-frontend-libs"),
                        tooltip: true
                      }
                    )
                  ] })
                ] }),
                children && /* @__PURE__ */ jsx("div", { className: clsx("es:p-5 es:space-y-2.5", contentContainerClassName), children }),
                actions && /* @__PURE__ */ jsx(HStack, { className: clsx("es:justify-end es:px-5 es:py-3 es:border-t es:border-secondary-100", actionsClassName), children: actions })
              ] })
            }
          )
        }
      )
    }
  );
};
export {
  Modal2 as Modal
};
