import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025 GoodData Corporation
import { useMemo, useRef } from "react";
import { Portal } from "react-portal";
import { useToggleDrawer } from "./hooks/useToggleDrawer.js";
import { bem } from "../@utils/bem.js";
import { makeDialogKeyboardNavigation } from "../@utils/keyboardNavigation.js";
import { OverlayContent, OverlayProvider } from "../@utils/OverlayStack.js";
import { UiAutofocus } from "../UiFocusManager/UiAutofocus.js";
import { UiFocusTrap } from "../UiFocusManager/UiFocusTrap.js";
import { UiIconButton } from "../UiIconButton/UiIconButton.js";
const { b, e } = bem("gd-ui-kit-drawer");
/**
 * @internal
 */
export function UiDrawer({ open, zIndex, node, mode = "absolute", dataTestId, children, anchor = "right", transition, onEscapeKey, onClickOutside, closeLabel = "Close", showCloseButton = true, onClickClose, refocusKey, initialFocus, accessibilityConfig, }) {
    const ref = useRef(null);
    const { isOpen, isFullyOpen, view, style } = useToggleDrawer(open, transition);
    const handleKeyDown = useMemo(() => makeDialogKeyboardNavigation({
        onClose: onEscapeKey,
    }, {
        shouldPreventDefault: true,
        shouldStopPropagation: true,
    }), [onEscapeKey]);
    if (!isOpen) {
        return null;
    }
    return (_jsx(OverlayProvider, { zIndex: zIndex, children: _jsx(OverlayContent, { children: ({ zIndex }) => (_jsx(Portal, { node: node ?? document.body, children: _jsxs("div", { className: b({ anchor, view }), "data-testid": dataTestId, style: { zIndex }, children: [_jsx("div", { className: e("backdrop"), style: {
                                position: mode,
                                ...style,
                            }, onClick: onClickOutside }), _jsx(UiFocusTrap, { root: _jsx("div", {}), children: _jsxs("div", { tabIndex: -1, style: { position: mode, ...style }, onKeyDown: handleKeyDown, role: accessibilityConfig?.role ?? "dialog", "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, "aria-modal": "true", className: e("content", { showCloseButton }), ref: showCloseButton ? undefined : ref, children: [showCloseButton ? (_jsx("div", { className: e("close-button"), children: _jsx(UiIconButton, { label: closeLabel, icon: "close", variant: "tertiary", onClick: onClickClose, ref: ref }) })) : null, _jsx(UiAutofocus, { root: _jsx("div", { tabIndex: -1, className: e("scrollable") }), active: isFullyOpen, refocusKey: refocusKey, initialFocus: initialFocus || ref, children: children })] }) })] }) })) }) }));
}
//# sourceMappingURL=UiDrawer.js.map