@navikt/ds-react/esm/date/Date.Dialog.js

React components from the Norwegian Labour and Welfare Administration.

import React, { useRef } from "react";
import { Button } from "../button/index.js";
import { Modal } from "../modal/index.js";
import { useModalContext } from "../modal/Modal.context.js";
import { Popover } from "../popover/index.js";
import { useRenameCSS } from "../theme/Theme.js";
import { useMedia } from "../util/hooks/index.js";
import { useI18n } from "../util/i18n/i18n.hooks.js";
import { getGlobalTranslations } from "./Date.locale.js";
const variantToLabel = {
    single: "chooseDate",
    multiple: "chooseDates",
    range: "chooseDateRange",
    month: "chooseMonth",
};
const DateDialog = ({ open, children, onClose, anchor, locale, translate, variant, popoverProps, }) => {
    const translateGlobal = useI18n("global", getGlobalTranslations(locale));
    const { cn } = useRenameCSS();
    const modalRef = useRef(null);
    const isInModal = useModalContext(false) !== undefined;
    const hideModal = useMedia("screen and (min-width: 768px)", true) && !isInModal;
    if (hideModal) {
        return (React.createElement(Popover, Object.assign({ arrow: false, anchorEl: anchor, open: open, onClose: onClose, placement: "bottom-start", role: "dialog", className: cn("navds-date__popover", {
                "navds-date": variant === "month",
            }), flip: false }, popoverProps), children));
    }
    return (React.createElement(Modal, { ref: modalRef, open: open, onClose: (event) => {
            event.stopPropagation();
            onClose();
        }, "aria-label": translate(variantToLabel[variant]), className: cn("navds-date__modal", {
            "navds-date__nested-modal": isInModal,
            "navds-date": variant === "month",
        }), closeOnBackdropClick: true, placement: "top" },
        React.createElement("div", { className: cn("navds-date__modal-body") },
            children,
            React.createElement(Button, { variant: "tertiary", onClick: () => { var _a; return (_a = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _a === void 0 ? void 0 : _a.close(); }, size: "small", type: "button" }, translateGlobal("close")))));
};
export { DateDialog };
//# sourceMappingURL=Date.Dialog.js.map