/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
"use client";
import { cx, getStyles } from "../../../styles/styler.js";
import { VStack } from "../../VStack.js";
import { getUnscaledAnchorRect } from "../../../utils/getUnscaledAnchorRect.js";
import { useSelectFieldContext } from "./selectContext.js";
import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
import { jsx } from "react/jsx-runtime";
import { SelectPopover, useSelectContext, useStoreState } from "@ariakit/react";
//#region src/components/client/Select/SelectContent.tsx
/**
* **▾ Select content panel**
*
* @componentType Client component
*
* @description
* The floating listbox container. Renders Ariakit `SelectPopover` with UDS
* styling.
*/
const SelectContent = forwardRef(function SelectContent({ children, className, size = "default", variant = "default", slotProps, gutter = 4, sameWidth = true, portal = true, unmountOnHide = false, keepOpenOnInteractOutside = false, maxHeight = 240, disableAutoBorderRadius, nestedBorderRadius = !disableAutoBorderRadius, nestedBorderRadiusSize, nestedBorderRadiusSpacing, nestedBorderRadiusWidth, ...props }, ref) {
	const { className: rootClassName, style: rootStyle, ...rootSlotProps } = slotProps?.root ?? {};
	const resolvedMaxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
	const select = useSelectContext();
	const { triggerWrapperRef } = useSelectFieldContext();
	const mounted = useStoreState(select, "mounted");
	const hasResetActiveItemRef = useRef(false);
	const getAnchorRect = useCallback((anchor) => {
		const wrapper = triggerWrapperRef.current;
		if (wrapper) return getUnscaledAnchorRect(wrapper);
		return getUnscaledAnchorRect(anchor);
	}, [triggerWrapperRef]);
	useLayoutEffect(() => {
		if (!select) return;
		if (mounted && !hasResetActiveItemRef.current) {
			select.setActiveId(null);
			hasResetActiveItemRef.current = true;
		}
		if (!mounted) hasResetActiveItemRef.current = false;
	}, [mounted, select]);
	return /* @__PURE__ */ jsx(SelectPopover, {
		ref,
		render: /* @__PURE__ */ jsx(VStack, {
			elevation: "3",
			overflow: "auto",
			borderRadius: "md",
			nestedBorderRadius,
			nestedBorderRadiusSize,
			nestedBorderRadiusSpacing,
			nestedBorderRadiusWidth,
			...rootSlotProps,
			style: {
				maxHeight: resolvedMaxHeight,
				...rootStyle
			},
			className: cx(getStyles({
				selectcontentSizeRoot: size,
				selectcontentVariantRoot: variant
			}), "z-50", "focus:outline-none", className, rootClassName),
			children
		}),
		...props,
		gutter,
		sameWidth,
		getAnchorRect,
		portal,
		unmountOnHide,
		hideOnInteractOutside: !keepOpenOnInteractOutside
	});
});
SelectContent.displayName = "SelectContent";
//#endregion
export { SelectContent };
