"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ActionMenuSubContent = exports.ActionMenuSubTrigger = exports.ActionMenuSub = exports.ActionMenuDivider = exports.ActionMenuRadioItem = exports.ActionMenuRadioGroup = exports.ActionMenuCheckboxItem = exports.ActionMenuItem = exports.ActionMenuGroup = exports.ActionMenuLabel = exports.ActionMenuContent = exports.ActionMenuTrigger = exports.ActionMenu = void 0;
const react_1 = __importStar(require("react"));
const aksel_icons_1 = require("@navikt/aksel-icons");
const Modal_context_1 = require("../modal/Modal.context");
const utils_external_1 = require("../utils-external");
const Menu_1 = require("../utils/components/floating-menu/Menu");
const Slot_1 = require("../utils/components/slot/Slot");
const helpers_1 = require("../utils/helpers");
const hooks_1 = require("../utils/hooks");
const { Provider: ActionMenuProvider, useContext: useActionMenuContext } = (0, helpers_1.createStrictContext)({
    name: "ActionMenuContext",
    errorMessage: "ActionMenu sub-components cannot be rendered outside the ActionMenu component.",
});
const ActionMenuRoot = ({ children, open: openProp, onOpenChange, rootElement: rootElementProp, size = "small", // TODO: Default to medium in next major release
 }) => {
    const triggerRef = (0, react_1.useRef)(null);
    const modalContext = (0, Modal_context_1.useModalContext)(false);
    const rootElement = modalContext
        ? modalContext.modalRef.current
        : rootElementProp;
    const [open = false, setOpen] = (0, hooks_1.useControllableState)({
        value: openProp,
        defaultValue: false,
        onChange: onOpenChange,
    });
    return (react_1.default.createElement(ActionMenuProvider, { triggerId: (0, utils_external_1.useId)(), triggerRef: triggerRef, contentId: (0, utils_external_1.useId)(), open: open, onOpenChange: setOpen, onOpenToggle: () => setOpen((prevOpen) => !prevOpen), rootElement: rootElement, size: size },
        react_1.default.createElement(Menu_1.Menu, { open: open, onOpenChange: setOpen, modal: true }, children)));
};
/**
 * ActionMenu is a dropdown menu for actions and navigation.
 *
 * @example
 * ```jsx
 * <ActionMenu>
 *   <ActionMenu.Trigger>
 *     <button>Open Menu</button>
 *   </ActionMenu.Trigger>
 *   <ActionMenu.Content>
 *     <ActionMenu.Item onSelect={() => alert("Item 1 selected")}>
 *       Item 1
 *     </ActionMenu.Item>
 *     <ActionMenu.Item onSelect={() => alert("Item 2 selected")}>
 *       Item 2
 *     </ActionMenu.Item>
 *   </ActionMenu.Content>
 * </ActionMenu>
 * ```
 */
exports.ActionMenu = ActionMenuRoot;
exports.ActionMenuTrigger = (0, react_1.forwardRef)((_a, ref) => {
    var { children, onKeyDown, style, onClick } = _a, rest = __rest(_a, ["children", "onKeyDown", "style", "onClick"]);
    const context = useActionMenuContext();
    const mergedRefs = (0, hooks_1.useMergeRefs)(ref, context.triggerRef);
    return (react_1.default.createElement(Menu_1.Menu.Anchor, { asChild: true },
        react_1.default.createElement(Slot_1.Slot, Object.assign({ type: "button", id: context.triggerId, "aria-haspopup": "menu", "aria-expanded": context.open, "aria-controls": context.open ? context.contentId : undefined, "data-state": context.open ? "open" : "closed", ref: mergedRefs }, rest, { style: Object.assign(Object.assign({}, style), { pointerEvents: context.open ? "auto" : undefined }), onClick: (0, helpers_1.composeEventHandlers)(onClick, context.onOpenToggle), onKeyDown: (0, helpers_1.composeEventHandlers)(onKeyDown, (event) => {
                if (event.key === "ArrowDown") {
                    context.onOpenChange(true);
                    /* Stop keydown from scrolling window */
                    event.preventDefault();
                }
            }) }), (0, helpers_1.requireReactElement)(children))));
});
exports.ActionMenuContent = (0, react_1.forwardRef)((_a, ref) => {
    var { children, className, style, align = "start" } = _a, rest = __rest(_a, ["children", "className", "style", "align"]);
    const context = useActionMenuContext();
    return (react_1.default.createElement(Menu_1.Menu.Portal, { rootElement: context.rootElement },
        react_1.default.createElement(Menu_1.Menu.Content, Object.assign({ ref: ref, id: context.contentId, "aria-labelledby": context.triggerId, className: (0, helpers_1.cl)("aksel-action-menu__content", className) }, rest, { align: align, "data-size": context.size, sideOffset: 4, collisionPadding: 5, returnFocus: context.triggerRef, safeZone: {
                anchor: context.triggerRef.current,
            }, style: Object.assign(Object.assign({}, style), {
                "--__axc-action-menu-content-transform-origin": "var(--__axc-floating-transform-origin)",
                "--__axc-action-menu-content-available-height": "var(--__axc-floating-available-height)",
            }) }),
            react_1.default.createElement("div", { className: "aksel-action-menu__content-inner" }, children))));
});
exports.ActionMenuLabel = (0, react_1.forwardRef)((_a, ref) => {
    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
    return (react_1.default.createElement("div", Object.assign({ ref: ref }, rest, { className: (0, helpers_1.cl)("aksel-action-menu__label", className) }), children));
});
exports.ActionMenuGroup = (0, react_1.forwardRef)((_a, ref) => {
    var { children, className, label } = _a, rest = __rest(_a, ["children", "className", "label"]);
    const labelId = (0, utils_external_1.useId)();
    return (react_1.default.createElement(Menu_1.Menu.Group, Object.assign({ ref: ref }, rest, { className: (0, helpers_1.cl)("aksel-action-menu__group", className), asChild: false, "aria-labelledby": label ? labelId : undefined }),
        label && (react_1.default.createElement(exports.ActionMenu.Label, { id: labelId, "aria-hidden": true }, label)),
        children));
});
const Marker = ({ children, className, placement }) => {
    return (react_1.default.createElement("div", { "aria-hidden": true, className: (0, helpers_1.cl)(className, "aksel-action-menu__marker", `aksel-action-menu__marker--${placement}`) }, children));
};
const Shortcut = ({ children }) => {
    /**
     * Assumes the user will input either a single keyboard key
     * or keys separated by "+"
     */
    const parsed = children.split("+").filter((str) => str !== "");
    return (react_1.default.createElement(Marker, { placement: "right" }, parsed.map((char, index) => (react_1.default.createElement("span", { key: char + index, className: "aksel-action-menu__shortcut" }, char)))));
};
exports.ActionMenuItem = (0, react_1.forwardRef)((_a, ref) => {
    var { children, as: Component = "div", className, icon, shortcut, variant, iconPosition = "left", indent = false } = _a, rest = __rest(_a, ["children", "as", "className", "icon", "shortcut", "variant", "iconPosition", "indent"]);
    return (react_1.default.createElement(Menu_1.Menu.Item, Object.assign({}, rest, { className: (0, helpers_1.cl)("aksel-action-menu__item", className, {
            "aksel-action-menu__item--danger": variant === "danger",
        }), "data-marker": icon ? iconPosition : undefined, "data-indent": indent, "aria-keyshortcuts": shortcut !== null && shortcut !== void 0 ? shortcut : undefined, asChild: true }),
        react_1.default.createElement(Component, { ref: ref },
            children,
            icon && (react_1.default.createElement(Marker, { placement: iconPosition, className: "aksel-action-menu__marker-icon" }, icon)),
            shortcut && react_1.default.createElement(Shortcut, null, shortcut))));
});
exports.ActionMenuCheckboxItem = (0, react_1.forwardRef)((_a, ref) => {
    var { children, className, shortcut, onSelect } = _a, rest = __rest(_a, ["children", "className", "shortcut", "onSelect"]);
    return (react_1.default.createElement(Menu_1.Menu.CheckboxItem, Object.assign({ ref: ref }, rest, { onSelect: (0, helpers_1.composeEventHandlers)(onSelect, (event) => {
            /**
             * Prevent default to avoid the menu from closing when clicking the checkbox
             */
            event.preventDefault();
        }), asChild: false, className: (0, helpers_1.cl)("aksel-action-menu__item", className), "data-marker": "left", "aria-keyshortcuts": shortcut }),
        children,
        react_1.default.createElement(Marker, { placement: "left" },
            react_1.default.createElement(Menu_1.Menu.ItemIndicator, { className: "aksel-action-menu__indicator" },
                react_1.default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "aksel-action-menu__indicator-icon", "aria-hidden": true },
                    react_1.default.createElement("g", { className: "aksel-action-menu__indicator-icon--unchecked" },
                        react_1.default.createElement("rect", { width: "24", height: "24", rx: "4", fill: "var(--ax-border-neutral)" }),
                        react_1.default.createElement("rect", { x: "1", y: "1", width: "22", height: "22", rx: "3", fill: "var(--ax-bg-default)", strokeWidth: "2" })),
                    react_1.default.createElement("g", { className: "aksel-action-menu__indicator-icon--indeterminate" },
                        react_1.default.createElement("rect", { width: "24", height: "24", rx: "4", fill: "var(--ax-bg-strong-pressed)" }),
                        react_1.default.createElement("rect", { x: "6", y: "10", width: "12", height: "4", rx: "1", fill: "var(--ax-bg-default)" })),
                    react_1.default.createElement("g", { className: "aksel-action-menu__indicator-icon--checked" },
                        react_1.default.createElement("rect", { width: "24", height: "24", rx: "4", fill: "var(--ax-bg-strong-pressed)" }),
                        react_1.default.createElement("path", { d: "M10.0352 13.4148L16.4752 7.40467C17.0792 6.83965 18.029 6.86933 18.5955 7.47478C19.162 8.08027 19.1296 9.03007 18.5245 9.59621L11.0211 16.5993C10.741 16.859 10.3756 17 10.0002 17C9.60651 17 9.22717 16.8462 8.93914 16.5611L6.43914 14.0611C5.85362 13.4756 5.85362 12.5254 6.43914 11.9399C7.02467 11.3544 7.97483 11.3544 8.56036 11.9399L10.0352 13.4148Z", fill: "var(--ax-bg-default)" }))))),
        shortcut && react_1.default.createElement(Shortcut, null, shortcut)));
});
exports.ActionMenuRadioGroup = (0, react_1.forwardRef)((_a, ref) => {
    var { children, label } = _a, rest = __rest(_a, ["children", "label"]);
    const labelId = (0, utils_external_1.useId)();
    return (react_1.default.createElement(Menu_1.Menu.RadioGroup, Object.assign({ ref: ref }, rest, { asChild: false, "aria-labelledby": label ? labelId : undefined }),
        label && (react_1.default.createElement(exports.ActionMenu.Label, { id: labelId, "aria-hidden": true }, label)),
        children));
});
exports.ActionMenuRadioItem = (0, react_1.forwardRef)((_a, ref) => {
    var { children, className, onSelect } = _a, rest = __rest(_a, ["children", "className", "onSelect"]);
    return (react_1.default.createElement(Menu_1.Menu.RadioItem, Object.assign({ ref: ref }, rest, { onSelect: (0, helpers_1.composeEventHandlers)(onSelect, (event) => {
            /**
             * Prevent default to avoid the menu from closing when clicking the radio
             */
            event.preventDefault();
        }), asChild: false, className: (0, helpers_1.cl)("aksel-action-menu__item", className), "data-marker": "left" }),
        children,
        react_1.default.createElement(Marker, { placement: "left" },
            react_1.default.createElement(Menu_1.Menu.ItemIndicator, { className: "aksel-action-menu__indicator" },
                react_1.default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "aksel-action-menu__indicator-icon", "aria-hidden": true },
                    react_1.default.createElement("g", { className: "aksel-action-menu__indicator-icon--unchecked" },
                        react_1.default.createElement("rect", { width: "24", height: "24", rx: "12", fill: "var(--ax-border-neutral)" }),
                        react_1.default.createElement("rect", { x: "1", y: "1", width: "22", height: "22", rx: "11", strokeWidth: "2", fill: "var(--ax-bg-default)" })),
                    react_1.default.createElement("g", { className: "aksel-action-menu__indicator-icon--checked" },
                        react_1.default.createElement("rect", { width: "24", height: "24", rx: "12", fill: "var(--ax-bg-strong-pressed)" }),
                        react_1.default.createElement("rect", { x: "8", y: "8", width: "8", height: "8", rx: "4", fill: "var(--ax-bg-default)" })))))));
});
exports.ActionMenuDivider = (0, react_1.forwardRef)((_a, ref) => {
    var { className } = _a, rest = __rest(_a, ["className"]);
    return (react_1.default.createElement(Menu_1.Menu.Divider, Object.assign({ ref: ref, asChild: false }, rest, { className: (0, helpers_1.cl)("aksel-action-menu__divider", className) })));
});
const ActionMenuSub = (props) => {
    const { children, open: openProp, onOpenChange } = props;
    const [open = false, setOpen] = (0, hooks_1.useControllableState)({
        value: openProp,
        defaultValue: false,
        onChange: onOpenChange,
    });
    return (react_1.default.createElement(Menu_1.Menu.Sub, { open: open, onOpenChange: setOpen }, children));
};
exports.ActionMenuSub = ActionMenuSub;
exports.ActionMenuSubTrigger = (0, react_1.forwardRef)((_a, ref) => {
    var { children, className, icon, iconPosition = "left", indent = false } = _a, rest = __rest(_a, ["children", "className", "icon", "iconPosition", "indent"]);
    return (react_1.default.createElement(Menu_1.Menu.SubTrigger, Object.assign({ ref: ref }, rest, { asChild: false, className: (0, helpers_1.cl)("aksel-action-menu__item aksel-action-menu__sub-trigger", className), "data-indent": indent, "data-marker": icon ? iconPosition : undefined }),
        children,
        icon && (react_1.default.createElement(Marker, { placement: iconPosition, className: "aksel-action-menu__marker-icon" }, icon)),
        react_1.default.createElement("div", { className: "aksel-action-menu__sub-icon" },
            react_1.default.createElement(aksel_icons_1.ChevronRightIcon, { "aria-hidden": true }))));
});
exports.ActionMenuSubContent = (0, react_1.forwardRef)((_a, ref) => {
    var { children, className, style } = _a, rest = __rest(_a, ["children", "className", "style"]);
    const context = useActionMenuContext();
    return (react_1.default.createElement(Menu_1.Menu.Portal, { rootElement: context.rootElement },
        react_1.default.createElement(Menu_1.Menu.SubContent, Object.assign({ ref: ref, alignOffset: -4, sideOffset: 1, collisionPadding: 10, "data-size": context.size }, rest, { className: (0, helpers_1.cl)("aksel-action-menu__content aksel-action-menu__sub-content", className), style: Object.assign(Object.assign({}, style), {
                "--__axc-action-menu-content-transform-origin": "var(--__axc-floating-transform-origin)",
                "--__axc-action-menu-content-available-height": "var(--__axc-floating-available-height)",
            }) }),
            react_1.default.createElement("div", { className: "aksel-action-menu__content-inner" }, children))));
});
/* -------------------------------------------------------------------------- */
exports.ActionMenu.Trigger = exports.ActionMenuTrigger;
exports.ActionMenu.Content = exports.ActionMenuContent;
exports.ActionMenu.Group = exports.ActionMenuGroup;
exports.ActionMenu.Label = exports.ActionMenuLabel;
exports.ActionMenu.Item = exports.ActionMenuItem;
exports.ActionMenu.CheckboxItem = exports.ActionMenuCheckboxItem;
exports.ActionMenu.RadioGroup = exports.ActionMenuRadioGroup;
exports.ActionMenu.RadioItem = exports.ActionMenuRadioItem;
exports.ActionMenu.Divider = exports.ActionMenuDivider;
exports.ActionMenu.Sub = exports.ActionMenuSub;
exports.ActionMenu.SubTrigger = exports.ActionMenuSubTrigger;
exports.ActionMenu.SubContent = exports.ActionMenuSubContent;
//# sourceMappingURL=ActionMenu.js.map