// src/components/user-action/Menu.tsx
import { useRef } from "react";
import clsx from "clsx";

// src/hooks/useOutsideClick.ts
import { useEffect } from "react";
var useOutsideClick = (refs, handler) => {
  useEffect(() => {
    const listener = (event) => {
      if (event.target === null) return;
      if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
        return;
      }
      handler();
    };
    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);
    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [refs, handler]);
};

// src/hooks/useHoverState.ts
import { useEffect as useEffect2, useState } from "react";
var defaultUseHoverStateProps = {
  closingDelay: 200,
  isDisabled: false
};
var useHoverState = (props = void 0) => {
  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
  const [isHovered, setIsHovered] = useState(false);
  const [timer, setTimer] = useState();
  const onMouseEnter = () => {
    if (isDisabled) {
      return;
    }
    clearTimeout(timer);
    setIsHovered(true);
  };
  const onMouseLeave = () => {
    if (isDisabled) {
      return;
    }
    setTimer(setTimeout(() => {
      setIsHovered(false);
    }, closingDelay));
  };
  useEffect2(() => {
    if (timer) {
      return () => {
        clearTimeout(timer);
      };
    }
  });
  useEffect2(() => {
    if (timer) {
      clearTimeout(timer);
    }
  }, [isDisabled]);
  return {
    isHovered,
    setIsHovered,
    handlers: { onMouseEnter, onMouseLeave }
  };
};

// src/util/PropsWithFunctionChildren.ts
var resolve = (children, bag) => {
  if (typeof children === "function") {
    return children(bag);
  }
  return children ?? void 0;
};
var BagFunctionUtil = {
  resolve
};

// src/components/user-action/Menu.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var MenuItem = ({
  children,
  onClick,
  alignment = "left",
  isDisabled = false,
  className
}) => /* @__PURE__ */ jsx(
  "div",
  {
    className: clsx("block px-3 py-1.5 bg-menu-background first:rounded-t-lg last:rounded-b-lg text-sm font-semibold", {
      "text-right": alignment === "right",
      "text-left": alignment === "left",
      "text-disabled-text cursor-not-allowed": isDisabled,
      "text-menu-text hover:bg-primary/20": !isDisabled,
      "cursor-pointer": !!onClick
    }, className),
    onClick,
    children
  }
);
var Menu = ({
  trigger,
  children,
  alignment = "tl",
  showOnHover = false,
  menuClassName = ""
}) => {
  const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover });
  const triggerRef = useRef(null);
  const menuRef = useRef(null);
  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
  const bag = { isOpen, close: () => setIsOpen(false) };
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: "relative",
      ...handlers,
      children: [
        trigger(() => setIsOpen(!isOpen), triggerRef),
        /* @__PURE__ */ jsx(
          "div",
          {
            ref: menuRef,
            onClick: (e) => e.stopPropagation(),
            className: clsx(
              "absolute top-full mt-1 min-w-40 rounded-lg bg-menu-background text-menu-text shadow-around-lg z-10",
              {
                "top-0": alignment[0] === "t",
                "bottom-0": alignment[0] === "b",
                "left-0": alignment[1] === "l",
                "right-0": alignment[1] === "r",
                "hidden": !isOpen
              },
              menuClassName
            ),
            children: BagFunctionUtil.resolve(children, bag)
          }
        )
      ]
    }
  );
};
export {
  Menu,
  MenuItem
};
//# sourceMappingURL=Menu.mjs.map