import {
  Button
} from "./chunk-FD3JTY5L.js";
import {
  useAutoUpdate
} from "./chunk-K3ECDAUR.js";
import {
  useFloatingPosition
} from "./chunk-26KZYRE6.js";
import {
  useOutsidePress
} from "./chunk-WYJP7HVL.js";
import {
  Arrow
} from "./chunk-CAL44W47.js";
import {
  Icon
} from "./chunk-TKIP5Q5H.js";

// src/components/Popover/Popover.tsx
import { cross } from "@simplybusiness/icons";
import classNames from "classnames/dedupe";
import { cloneElement, useCallback, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { useWindowEvent } from "@simplybusiness/mobius-hooks";
import "@simplybusiness/mobius/src/components/Popover/Popover.css";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var OFFSET_FROM_CONTENT_DEFAULT = 10;
var ARROW_WIDTH = 20;
var Popover = (props) => {
  const { trigger, children, onOpen, onClose, className } = props;
  const referenceRef = useRef(null);
  const floatingRef = useRef(null);
  const arrowRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);
  const [portalTarget, setPortalTarget] = useState(null);
  const isInsideDialog = portalTarget !== null && portalTarget.tagName === "DIALOG";
  const { initialFloatingStyles, initialArrowStyles, update } = useFloatingPosition({
    referenceRef,
    floatingRef,
    arrowRef,
    isOpen,
    offsetPx: OFFSET_FROM_CONTENT_DEFAULT,
    arrowWidth: ARROW_WIDTH,
    useFixedStrategy: isInsideDialog
  });
  useAutoUpdate({
    referenceRef,
    floatingRef,
    onUpdate: update,
    enabled: isOpen
  });
  useOutsidePress({
    referenceRef,
    floatingRef,
    enabled: isOpen,
    onOutsidePress: () => {
      onClose?.();
      setIsOpen(false);
    }
  });
  const containerClasses = classNames(
    "mobius",
    "mobius-popover__container",
    className
  );
  useEffect(() => {
    const el = floatingRef.current;
    if (!el) return;
    const preventLabelActivation = (e) => {
      const target = e.target;
      if (!target.closest("a[href], input, select, textarea")) {
        e.preventDefault();
      }
    };
    el.addEventListener("click", preventLabelActivation);
    return () => el.removeEventListener("click", preventLabelActivation);
  }, [isOpen]);
  const toggleVisibility = () => {
    if (isOpen) {
      setIsOpen(false);
      onClose?.();
      return;
    }
    const dialog = referenceRef.current?.closest("dialog");
    setPortalTarget(dialog ?? document.body);
    setIsOpen(true);
    onOpen?.();
  };
  const setReferenceRef = useCallback((node) => {
    referenceRef.current = node;
  }, []);
  const triggerComponent = cloneElement(trigger, {
    ref: setReferenceRef,
    className: classNames(
      trigger.props.className,
      "mobius-popover__toggle"
    ),
    onClick: toggleVisibility
  });
  useWindowEvent("keydown", (e) => {
    if (e.key === "Escape" && isOpen) {
      setIsOpen(false);
      onClose?.();
      e.preventDefault();
      e.stopPropagation();
    }
  });
  const floatingElement = isOpen ? /* @__PURE__ */ jsxs(
    "div",
    {
      className: containerClasses,
      ref: floatingRef,
      style: initialFloatingStyles,
      children: [
        /* @__PURE__ */ jsxs("div", { className: "mobius-popover", children: [
          /* @__PURE__ */ jsx("header", { className: "mobius-popover__header", children: /* @__PURE__ */ jsx(
            Button,
            {
              type: "button",
              className: "mobius-popover__close-button",
              onClick: toggleVisibility,
              "aria-label": "Close",
              variant: "ghost",
              children: /* @__PURE__ */ jsx(
                Icon,
                {
                  icon: cross,
                  size: "md",
                  className: "mobius-popover__close-icon"
                }
              )
            }
          ) }),
          /* @__PURE__ */ jsx("div", { className: "mobius-popover__body", children })
        ] }),
        /* @__PURE__ */ jsx(
          Arrow,
          {
            ref: arrowRef,
            style: initialArrowStyles,
            className: "mobius-popover__arrow-icon",
            width: ARROW_WIDTH
          }
        )
      ]
    }
  ) : null;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    triggerComponent,
    floatingElement && portalTarget ? createPortal(floatingElement, portalTarget) : null
  ] });
};

export {
  Popover
};
//# sourceMappingURL=chunk-VZ3IWSK6.js.map
