@codeworker.br/govbr-tw-react/dist/components/Dialog/index.js

Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.

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;
};
import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, forwardRef, useContext, useEffect } from "react";
import dialogVariants from "./variants";
import dialogContentVariants from "./content-variants";
import dialogInnerContentVariants from "./inner-content-variants";
import dialogHeaderVariants from "./header-variants";
import dialogFooterVariants from "./footer-variants";
import BASE_CLASSNAMES from "../../config/baseClassNames";
import { cn } from "../../libs/utils";
const DialogContext = createContext(null);
const DialogForwardRef = forwardRef((_a, ref) => {
    var { children, className, toggleDialog, variant = "default", padding = true, persist = false, closeOnEsc = true, rootClassName, overlayClassName } = _a, props = __rest(_a, ["children", "className", "toggleDialog", "variant", "padding", "persist", "closeOnEsc", "rootClassName", "overlayClassName"]);
    useEffect(() => {
        if (!closeOnEsc) {
            ref.current.addEventListener("keydown", (e) => {
                if (e.keyCode === 27)
                    e.preventDefault();
            });
        }
    }, []);
    return (_jsx(DialogContext.Provider, { value: { variant, padding }, children: _jsx("dialog", Object.assign({ className: cn("bg-transparent", dialogVariants({ variant }), overlayClassName, BASE_CLASSNAMES.dialog.root, rootClassName), ref: ref, onClick: (e) => {
                if (!persist) {
                    if (e.currentTarget === e.target) {
                        toggleDialog();
                    }
                }
            } }, props, { children: _jsx("div", { className: cn(dialogContentVariants({ variant, padding }), className, BASE_CLASSNAMES.dialog.content), children: children }) })) }));
});
const DialogHeader = ({ children, className }) => {
    const { variant, padding } = useContext(DialogContext);
    return _jsx("header", { className: cn(dialogHeaderVariants({ variant, padding }), className), children: children });
};
const DialogMain = ({ children, className }) => {
    const { variant, padding } = useContext(DialogContext);
    return _jsx("main", { className: cn(dialogInnerContentVariants({ variant, padding }), className), children: children });
};
const DialogFooter = ({ children, className }) => {
    const { variant, padding } = useContext(DialogContext);
    return _jsx("footer", { className: cn(dialogFooterVariants({ variant, padding }), className), children: children });
};
const Dialog = Object.assign(Object.assign({}, DialogForwardRef), { Header: DialogHeader, Main: DialogMain, Footer: DialogFooter });
export default Dialog;