import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { cloneElement, useMemo, useRef, } from "react";
import { useIdPrefixed } from "../../utils/useId.js";
import { bem } from "../@utils/bem.js";
import { UiButton } from "../UiButton/UiButton.js";
import { UiFocusManager } from "../UiFocusManager/UiFocusManager.js";
import { defaultFocusCheckFn } from "../UiFocusManager/utils.js";
import { UiTooltip } from "../UiTooltip/UiTooltip.js";
const { b, e } = bem("gd-ui-kit-popover");
const defaultAccessibilityConfig = {};
/**
 * @internal
 */
export function UiPopover({ id, accessibilityConfig = defaultAccessibilityConfig, anchor, width = "default", title, tabIndex, disabled, content, footer, closeText, closeVisible, initialFocus, returnFocusTo, triggerBy = ["click"], returnFocusAfterClose = true, focusCheckFn = defaultFocusCheckFn, enableFocusTrap = false, onOpen, onClose, }) {
    const ref = useRef(null);
    const returnFocus = useMemo(() => {
        return returnFocusTo ?? ref;
    }, [returnFocusTo]);
    const currentId = useIdPrefixed("popover");
    const titleId = useIdPrefixed("popover-title");
    return (_jsx(UiTooltip, { onOpen: onOpen, onClose: onClose, accessibilityConfig: {
            ...accessibilityConfig,
            role: "dialog",
            ariaLabelledBy: titleId,
        }, anchor: cloneElement(anchor, {
            ...(tabIndex === undefined ? {} : { tabIndex }),
            ref: mergeRefs(ref, anchor.props?.ref),
        }), offset: 0, content: ({ onClose, type }) => {
            //NOTE: Do not make screen reader tooltip visible, live content is enough
            // because we expect that poper content is accessible only when open on click
            // and contains own logic for screen readers
            if (type === "screen-reader") {
                return null;
            }
            return (_jsx(UiFocusManager, { enableFocusTrap: enableFocusTrap, enableAutofocus: initialFocus ? { initialFocus } : true, enableReturnFocusOnUnmount: returnFocusAfterClose ? { returnFocusTo: returnFocus } : false, focusCheckFn: focusCheckFn, tabOutHandler: enableFocusTrap
                    ? undefined
                    : () => {
                        onClose();
                    }, children: _jsxs("div", { id: id ?? currentId, tabIndex: 0, className: b(), style: { width: width === "default" ? undefined : width }, children: [
                        _jsxs("div", { className: e("header"), children: [typeof title === "string" ? (_jsx("div", { id: titleId, className: e("header-title"), children: title })) : (_jsx("div", { id: titleId, children: title })), closeVisible ? (_jsx("div", { className: e("header-close"), children: _jsx(UiButton, { label: "", size: "small", variant: "tertiary", iconBefore: "close", accessibilityConfig: {
                                            ariaLabel: closeText,
                                        }, onClick: onClose }) })) : null] }), content ? (_jsx("div", { className: e("content"), children: typeof content === "function" ? content({ onClose }) : content })) : null, footer ? (_jsx("div", { className: e("footer"), children: typeof footer === "function" ? footer({ onClose }) : footer })) : null] }) }));
        }, variant: "none", behaviour: "popover", triggerBy: triggerBy, showArrow: false, optimalPlacement: true, arrowPlacement: "top-start", disabled: disabled }));
}
function mergeRefs(...refs) {
    return (value) => {
        refs.forEach((ref) => {
            if (!ref)
                return;
            if (typeof ref === "function") {
                ref(value);
            }
            else {
                ref.current = value;
            }
        });
    };
}
//# sourceMappingURL=UiPopover.js.map