"use client";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { useDirection } from "../../../core/DirectionProvider/DirectionProvider.mjs";
import { getFloatingPosition } from "../../../utils/Floating/get-floating-position/get-floating-position.mjs";
import { Popover } from "../../Popover/Popover.mjs";
import { useMenuContext } from "../Menu.context.mjs";
import { SubMenuContext } from "./MenuSub.context.mjs";
import { MenuSubDropdown } from "../MenuSubDropdown/MenuSubDropdown.mjs";
import { MenuSubItem } from "../MenuSubItem/MenuSubItem.mjs";
import { MenuSubTarget } from "../MenuSubTarget/MenuSubTarget.mjs";
import { use, useCallback, useRef } from "react";
import { useDisclosure, useId as useId$1 } from "@mantine/hooks";
import { jsx } from "react/jsx-runtime";
import { safePolygon, useFloating, useHover, useInteractions } from "@floating-ui/react";
//#region packages/@mantine/core/src/components/Menu/MenuSub/MenuSub.tsx
const defaultProps = {
	offset: 0,
	position: "right-start",
	safeAreaPolygon: true,
	transitionProps: { duration: 0 },
	openDelay: 0,
	middlewares: { shift: { crossAxis: true } }
};
function MenuSub(_props) {
	const { children, closeDelay, openDelay, position, safeAreaPolygon, ...others } = useProps("MenuSub", defaultProps, _props);
	const id = useId$1();
	const [opened, { open, close }] = useDisclosure(false);
	const parentSubCtx = use(SubMenuContext);
	const menuCtx = useMenuContext();
	const { dir } = useDirection();
	const resolvedPosition = getFloatingPosition(dir, position);
	const levelRegister = parentSubCtx?.registerOpenSub ?? menuCtx.registerOpenSub;
	const unregisterRef = useRef(null);
	const activeChildCloseRef = useRef(null);
	const registerOpenSub = useCallback((closeFn) => {
		const prev = activeChildCloseRef.current;
		if (prev && prev !== closeFn) prev();
		activeChildCloseRef.current = closeFn;
		return () => {
			if (activeChildCloseRef.current === closeFn) activeChildCloseRef.current = null;
		};
	}, []);
	const handleOpen = useCallback(() => {
		unregisterRef.current = levelRegister(close);
		open();
	}, [
		close,
		levelRegister,
		open
	]);
	const handleClose = useCallback(() => {
		unregisterRef.current?.();
		unregisterRef.current = null;
		close();
	}, [close]);
	const { context, refs } = useFloating({
		placement: resolvedPosition,
		open: opened,
		onOpenChange: (nextOpen) => {
			if (nextOpen) handleOpen();
			else handleClose();
		}
	});
	const { getReferenceProps, getFloatingProps } = useInteractions([useHover(context, {
		handleClose: safeAreaPolygon ? safePolygon(typeof safeAreaPolygon === "object" ? safeAreaPolygon : void 0) : void 0,
		delay: {
			open: openDelay,
			close: closeDelay
		}
	})]);
	const focusFirstItem = () => window.setTimeout(() => {
		document.getElementById(`${id}-dropdown`)?.querySelectorAll("[data-menu-item]:not([data-disabled])")[0]?.focus();
	}, 16);
	const focusParentItem = () => window.setTimeout(() => {
		document.getElementById(`${id}-target`)?.focus();
	}, 16);
	return /* @__PURE__ */ jsx(SubMenuContext, {
		value: {
			opened,
			close: handleClose,
			open: handleOpen,
			focusFirstItem,
			focusParentItem,
			parentContext: parentSubCtx,
			setReference: refs.setReference,
			setFloating: refs.setFloating,
			getReferenceProps,
			getFloatingProps,
			registerOpenSub
		},
		children: /* @__PURE__ */ jsx(Popover, {
			opened,
			withinPortal: false,
			withArrow: false,
			id,
			position,
			...others,
			children
		})
	});
}
MenuSub.extend = (input) => input;
MenuSub.displayName = "@mantine/core/MenuSub";
MenuSub.Target = MenuSubTarget;
MenuSub.Dropdown = MenuSubDropdown;
MenuSub.Item = MenuSubItem;
//#endregion
export { MenuSub };

//# sourceMappingURL=MenuSub.mjs.map