/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a795c5b | Cube Dev Team */
import { DropIndicatorElement } from "./styled.js";
import { useEffect, useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";
import { useDropIndicator } from "react-aria";

//#region src/components/navigation/Tabs/TabDropIndicator.tsx
/**
* Visual drop indicator for drag-and-drop tab reordering.
*
* Renders a vertical line showing where the dragged tab will be dropped.
* Only visible when the drop target is active.
*/
function TabDropIndicator({ target, dropState, position }) {
	const ref = useRef(null);
	const [, setTick] = useState(0);
	const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator({ target }, dropState, ref);
	useEffect(() => {
		const element = ref.current;
		if (!element) return;
		const tabList = element.closest("[data-element=\"TabList\"]");
		if (!tabList) return;
		const observer = new ResizeObserver(() => {
			setTick((n) => n + 1);
		});
		observer.observe(tabList);
		return () => observer.disconnect();
	}, [isHidden]);
	if (isHidden) return null;
	return /* @__PURE__ */ jsx(DropIndicatorElement, {
		ref,
		role: "option",
		...dropIndicatorProps,
		mods: {
			"drop-target": isDropTarget,
			after: position === "after",
			before: position === "before"
		}
	});
}

//#endregion
export { TabDropIndicator };
//# sourceMappingURL=TabDropIndicator.js.map