@harvest-profit/npk/dist/Menu/usePopover.js

NPK UI Design System

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const dom_1 = require("@floating-ui/dom");
const react_2 = require("@floating-ui/react");
function usePopover({ initialOpen = false, placement = "bottom-start", modal, open: controlledOpen, onOpenChange: setControlledOpen, showArrow, initialFocus, autoDismiss = true, submenu = false, variant = 'dialog', offset: offsetAmount = 5, role = 'dialog', }) {
    const [uncontrolledOpen, setUncontrolledOpen] = (0, react_1.useState)(initialOpen);
    const [labelId, setLabelId] = (0, react_1.useState)();
    const [descriptionId, setDescriptionId] = (0, react_1.useState)();
    const arrowRef = (0, react_1.useRef)(null);
    const open = controlledOpen ?? uncontrolledOpen;
    const setOpen = setControlledOpen ?? setUncontrolledOpen;
    const data = (0, react_2.useFloating)({
        placement,
        open,
        onOpenChange: setOpen,
        whileElementsMounted: dom_1.autoUpdate,
        middleware: [
            (0, dom_1.offset)(offsetAmount),
            (0, dom_1.flip)({
                crossAxis: placement.includes("-"),
                fallbackAxisSideDirection: "end",
            }),
            (0, dom_1.shift)({ padding: 5 }),
            (0, react_2.arrow)({
                element: arrowRef,
            }),
        ]
    });
    const click = (0, react_2.useClick)(data.context, { enabled: controlledOpen == null });
    const dismiss = (0, react_2.useDismiss)(data.context);
    const ariarole = (0, react_2.useRole)(data.context, { role: role || 'dialog' });
    const interactions = (0, react_2.useInteractions)([click, dismiss, ariarole]);
    return (0, react_1.useMemo)(() => ({
        menu: true,
        open,
        setOpen,
        initialFocus,
        role,
        ...interactions,
        ...data,
        modal,
        submenu,
        arrowRef,
        labelId,
        descriptionId,
        setLabelId,
        setDescriptionId,
        showArrow,
        autoDismiss,
        useMergeRefs: react_2.useMergeRefs,
        placement,
        variant
    }), [open, setOpen, interactions, data, modal, labelId, descriptionId, arrowRef, showArrow, autoDismiss, submenu, placement, variant, role, initialFocus]);
}
exports.default = usePopover;
//# sourceMappingURL=usePopover.js.map