/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
"use client";
import { cx } from "../../../styles/styler.js";
import { IconSlot } from "../../IconSlot.js";
import { Box } from "../../Box.js";
import { HStack } from "../../HStack.js";
import { useSelectFieldContext } from "./selectContext.js";
import { getSelectEndIconClassName, getSelectStartIconClassName, getSelectTriggerClassName, getSelectTriggerWrapperClassName } from "./selectFieldStyles.js";
import { SelectValue as SelectValue$1 } from "./SelectValue.js";
import { ChevronDown } from "@yahoo/uds-icons";
import { forwardRef, memo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Select, useSelectContext, useStoreState } from "@ariakit/react";
import { m } from "motion/react";
//#region src/components/client/Select/SelectTrigger.tsx
const StartIcon = memo(function StartIcon({ icon, className, iconProps }) {
	if (!icon) return null;
	return /* @__PURE__ */ jsx(IconSlot, {
		icon,
		className,
		iconProps: {
			variant: "outline",
			...iconProps
		}
	});
});
StartIcon.displayName = "StartIcon";
const EndIcon = memo(function EndIcon({ icon, className, iconProps }) {
	if (!icon) return null;
	return /* @__PURE__ */ jsx(IconSlot, {
		icon,
		className,
		iconProps: {
			variant: "outline",
			...iconProps
		}
	});
});
EndIcon.displayName = "EndIcon";
const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
	const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, triggerWrapperRef } = useSelectFieldContext();
	const select = useSelectContext();
	const value = useStoreState(select, "value");
	const open = useStoreState(select, "open");
	const useAnimatedChevron = endIcon === void 0;
	const hasValue = value != null && value !== "";
	const isDisabled = disabledProp ?? disabled;
	const { className: triggerWrapperClassName, ...triggerWrapperProps } = slotProps?.triggerWrapper ?? {};
	const { className: triggerClassName, onClick, ...triggerProps } = slotProps?.trigger ?? {};
	const handlePointerDown = (event) => {
		if (readOnly) {
			event.preventDefault();
			event.stopPropagation();
			return;
		}
		triggerPassthroughOnPointerDown?.(event);
	};
	const handleClick = (event) => {
		if (readOnly) {
			event.preventDefault();
			event.stopPropagation();
			return;
		}
		triggerPassthroughOnClick?.(event);
		onClick?.(event);
	};
	return /* @__PURE__ */ jsx(Box, {
		ref: triggerWrapperRef,
		position: "relative",
		display: "flex",
		alignItems: "center",
		width: "full",
		...triggerWrapperProps,
		className: getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName),
		children: /* @__PURE__ */ jsxs(Select, {
			ref,
			id: uid,
			name,
			disabled: isDisabled,
			required,
			"aria-describedby": helpTextId,
			"aria-invalid": hasError,
			"aria-readonly": readOnly || void 0,
			...triggerPassthroughProps,
			...triggerProps,
			onPointerDown: handlePointerDown,
			onClick: handleClick,
			className: cx("flex", "w-full", "min-w-0", "items-center", "border-0", "bg-transparent", "rounded-[inherit]", "outline-none", "shadow-none", "uds-hit-target", isDisabled ? "cursor-not-allowed" : "cursor-pointer"),
			children: [
				/* @__PURE__ */ jsx(StartIcon, {
					icon: startIcon,
					className: getSelectStartIconClassName(size, hasValue),
					iconProps: slotProps?.startIcon
				}),
				/* @__PURE__ */ jsx("span", {
					className: getSelectTriggerClassName({
						size,
						hasValue,
						disabled: isDisabled,
						className: cx("flex", "min-w-0", "items-center", "self-stretch", className, triggerClassName)
					}),
					children: /* @__PURE__ */ jsx("span", {
						className: "w-full truncate text-left",
						children: /* @__PURE__ */ jsx(SelectValue$1, { fallback: placeholder })
					})
				}),
				(useAnimatedChevron || endIcon) && /* @__PURE__ */ jsx(HStack, {
					alignItems: "center",
					gap: "1",
					className: "shrink-0",
					children: useAnimatedChevron ? /* @__PURE__ */ jsx(m.div, {
						animate: { rotate: open ? 180 : 0 },
						transition: reduceMotion ? { duration: 0 } : {
							duration: .2,
							ease: "easeInOut"
						},
						"data-testid": "select-chevron",
						children: /* @__PURE__ */ jsx(EndIcon, {
							icon: ChevronDown,
							className: getSelectEndIconClassName(size, hasValue),
							iconProps: slotProps?.endIcon
						})
					}) : /* @__PURE__ */ jsx(EndIcon, {
						icon: endIcon,
						className: getSelectEndIconClassName(size, hasValue),
						iconProps: slotProps?.endIcon
					})
				})
			]
		})
	});
});
SelectTrigger.displayName = "SelectTrigger";
//#endregion
export { SelectTrigger };
