/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { PopoverInternalContext } from "./PopoverContext.js";
import { usePopoverConfig } from "./UDSPopoverConfigProvider.js";
import { useCallback, useEffect, useId } from "react";
import { jsx } from "react/jsx-runtime";
import { PopoverProvider, usePopoverStore } from "@ariakit/react";
import { useReducedMotion } from "motion/react";
//#region src/components/client/Popover/Popover.tsx
const POPOVER_OPEN_EVENT = "uds:popover-open";
/**
* **⚙️️ A Popover component that anchors to a trigger element
*
* @componentType Client component
*
* @description
* Popover is a floating surface used to display contextual content anchored to a trigger. It is typically used for lightweight interactions such as quick settings, inline actions, previews, and simple selection.
*
* Popover is a container component, the shell is consistent, but the content inside can vary widely depending on product needs.*
* @see
* Check out the {@link https://uds.build/docs/components/popover Popover Docs} for more info
*
* @example
* ```tsx
* 'use client';
* import { Popover, PopoverTrigger, PopoverContent, Button } from "@yahoo/uds";
*
* <Popover>
*   <PopoverTrigger>
*     <Button>Popover Trigger</Button>
*   </PopoverTrigger>
*   <PopoverContent>basic popover content</PopoverContent>
* </Popover>
*```
*
* @related [Toast](https://uds.build/docs/components/toast), [Tooltip](https://uds.build/docs/components/tooltip)
**/
function Popover({ children, placement, open, defaultOpen = false, portal = true, hideArrow = false, hideDismissButton = false, onClose, onOpen, reduceMotion: forceReduceMotion = false, disableAutoFocus = false, disableVerticalSpacing = false, disableHorizontalSpacing = false, sameWidth = false, gutter = 4 }) {
	const controlledProps = open !== void 0 ? {
		showTimeout: 0,
		hideTimeout: 0,
		timeout: 0,
		...open ? { mounted: true } : {}
	} : void 0;
	const { animationDuration: animationDurationConfig, ariaKitPlacement } = usePopoverConfig(void 0, void 0, { placement });
	const id = useId();
	const store = usePopoverStore({ defaultOpen });
	const handleSetOpen = useCallback((newOpen) => {
		if (newOpen) {
			onOpen?.();
			document.dispatchEvent(new CustomEvent(POPOVER_OPEN_EVENT, { detail: id }));
		}
	}, [onOpen, id]);
	useEffect(() => {
		const handler = (e) => {
			if (("detail" in e ? e.detail : void 0) !== id) store?.setState("open", false);
		};
		document.addEventListener(POPOVER_OPEN_EVENT, handler);
		return () => document.removeEventListener(POPOVER_OPEN_EVENT, handler);
	}, [id, store]);
	const isControlled = open !== void 0;
	const reducedMotion = useReducedMotion() || forceReduceMotion;
	const animationDuration = reducedMotion ? 0 : animationDurationConfig;
	return /* @__PURE__ */ jsx(PopoverInternalContext.Provider, {
		value: {
			portal,
			hideArrow,
			hideDismissButton,
			onClose,
			isControlled,
			animationDuration,
			reducedMotion,
			disableAutoFocus,
			disableVerticalSpacing,
			disableHorizontalSpacing,
			sameWidth,
			gutter
		},
		children: /* @__PURE__ */ jsx(PopoverProvider, {
			placement: ariaKitPlacement,
			animated: animationDuration,
			open,
			setOpen: handleSetOpen,
			store,
			...controlledProps,
			children
		})
	});
}
Popover.displayName = "Popover";
//#endregion
export { Popover };
