/** @license MIT | @cube-dev/ui-kit v0.147.0 | Cube Dev Team */
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
import { Portal } from "../../portal/Portal.js";
import { useI18n } from "../../../i18n/useI18n.js";
import { ListBox } from "../ListBox/ListBox.js";
import { tasty } from "@tenphi/tasty";
import React, { useCallback, useEffect, useRef } from "react";
import { jsx } from "react/jsx-runtime";
import { useOverlay, useOverlayPosition } from "react-aria";

//#region src/components/fields/ListBoxPopover/ListBoxPopover.tsx
const ListBoxPopoverWrapper = tasty({
	qa: "ComboBoxOverlayWrapper",
	styles: {
		position: "absolute",
		zIndex: 1e3
	}
});
const ListBoxPopoverElement = tasty({
	qa: "ComboBoxOverlay",
	styles: {
		display: "grid",
		gridRows: "1sf",
		gridColumns: "1sf",
		width: "$overlay-min-width max-content 50vw",
		height: "initial max-content (50vh - 5x)",
		overflow: "auto",
		fill: "#surface",
		radius: "1cr",
		shadow: true,
		padding: "0",
		border: "#border",
		hide: {
			"": false,
			hidden: true
		},
		boxSizing: "border-box",
		transition: "translate $transition ease-out, scale $transition ease-out, theme $transition ease-out",
		translate: {
			"": "0 0",
			"open & [data-placement=\"top\"]": "0 0",
			"!open & [data-placement=\"top\"]": "0 1x",
			"open & ([data-placement=\"bottom\"] | ![data-placement])": "0 0",
			"!open & ([data-placement=\"bottom\"] | ![data-placement])": "0 -1x"
		},
		transformOrigin: {
			"": "top center",
			"[data-placement=\"top\"]": "bottom center"
		},
		scale: {
			"": "1 1",
			"!open": "1 .9"
		},
		opacity: {
			"": 1,
			"!open": .001
		},
		"$overlay-min-width": "min 30x"
	}
});
const ListBoxPopover = function ListBoxPopover(props) {
	const { t } = useI18n();
	const { isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, containerPadding, comboBoxWidth, listBoxId, overlayStyles, listBoxStyles, optionStyles, optionHighlight, sectionStyles, headingStyles, selectedKey, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, compositeFocusProps, filter, size = "medium", emptyLabel, positionTargetRef, positionApiRef } = props;
	const mergedPopoverRef = popoverRef;
	const overlayScrollRef = useRef(null);
	const { overlayProps: overlayPositionProps, placement, updatePosition } = useOverlayPosition({
		targetRef: positionTargetRef ?? triggerRef,
		overlayRef: mergedPopoverRef,
		scrollRef: overlayScrollRef,
		placement: `${direction} start`,
		shouldFlip,
		isOpen,
		offset: overlayOffset,
		containerPadding
	});
	const { maxHeight, maxWidth, ...positionStyle } = overlayPositionProps.style ?? {};
	useEffect(() => {
		if (positionApiRef) positionApiRef.current = { updatePosition };
		return () => {
			if (positionApiRef) positionApiRef.current = null;
		};
	}, [positionApiRef, updatePosition]);
	const { overlayProps: overlayBehaviorProps } = useOverlay({
		onClose,
		shouldCloseOnBlur: true,
		isOpen,
		isDismissable: true,
		shouldCloseOnInteractOutside: (el) => {
			const menuTriggerEl = el.closest("[data-popover-trigger]");
			if (!menuTriggerEl) {
				if (el.closest("[data-popover-keep]")) return false;
				if (el.closest("[data-popover-dismiss]")) {
					setTimeout(onClose, 0);
					return false;
				}
				return true;
			}
			if (menuTriggerEl === triggerRef?.current) return true;
			return false;
		}
	}, mergedPopoverRef);
	const placementDirection = placement?.split(" ")[0] || direction;
	const transitionRefHolder = useRef(null);
	const setScrollRef = useCallback((node) => {
		overlayScrollRef.current = node;
		transitionRefHolder.current?.(node);
	}, []);
	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DisplayTransition, {
		isShown: isOpen,
		children: ({ phase, isShown, ref: transitionRef }) => {
			transitionRefHolder.current = transitionRef;
			return /* @__PURE__ */ jsx(ListBoxPopoverWrapper, {
				...mergeProps$1({
					...overlayPositionProps,
					style: positionStyle
				}, overlayBehaviorProps, compositeFocusProps),
				ref: mergedPopoverRef,
				style: positionStyle,
				children: /* @__PURE__ */ jsx(ListBoxPopoverElement, {
					ref: setScrollRef,
					"data-placement": placementDirection,
					"data-phase": phase,
					mods: {
						open: isShown,
						hidden: phase === "unmounted"
					},
					styles: overlayStyles,
					style: {
						"--overlay-min-width": comboBoxWidth ? `${comboBoxWidth}px` : void 0,
						maxHeight,
						maxWidth
					},
					children: /* @__PURE__ */ jsx(ListBox, {
						ref: listBoxRef,
						focusOnHover: true,
						disableSelectionToggle: true,
						id: listBoxId,
						"aria-label": ariaLabel || (typeof label === "string" ? label : t("listBoxPopover.options", "Options")),
						selectedKey,
						selectionMode: "single",
						isDisabled,
						disabledKeys,
						shouldUseVirtualFocus: true,
						items,
						filter,
						styles: listBoxStyles,
						optionStyles,
						optionHighlight,
						sectionStyles,
						headingStyles,
						stateRef: listStateRef,
						size: "medium",
						shape: "popover",
						emptyLabel,
						onSelectionChange,
						children
					})
				})
			});
		}
	}) });
};

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