koval-ui/dist/src/lib/Dialog/Dialog.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsx as e, jsxs as p } from "react/jsx-runtime";
import { forwardRef as R, useEffect as S, useCallback as a } from "react";
import n from "classnames";
import { useInternalRef as k } from "../../internal/hooks/useInternalRef.js";
import { IconClose as I } from "../../internal/Icons/IconClose.js";
/* empty css                */
import { useFocusTrap as L } from "../../internal/hooks/useFocusTrap.js";
import { ActionButton as g } from "../../internal/Actions/ActionButton.js";
import { ActionsTree as j } from "../../internal/Actions/ActionsTree.js";
import { TransitionDialog as K } from "./TransitionDialog.js";
import { useDialogState as B } from "./useDialogState.js";
import r from "./Dialog.module.css.js";
import { Animations as F } from "./types.js";
import { H3 as G } from "../Text/Headers.js";
const H = R(
  ({
    children: u,
    className: h,
    closeOnClickOutside: m = !0,
    showCloseButton: N = !0,
    onToggle: i = () => {
    },
    id: c,
    actions: D = [],
    dialogTitle: d,
    closeLabel: x = "Close",
    trapFocus: y = !0,
    animation: C = F["slide-top"],
    ...w
  }, b) => {
    const o = k(b), { isOpen: s, closeDialog: f } = B(c);
    L(o.current, s, y), S(() => {
      s && (o.current?.showModal(), document.body.classList.add(r.noScroll)), i(s);
    }, [o, i, s]);
    const t = a(() => {
      i(!1), f();
    }, [f, i]), v = a(
      (l) => {
        l.target.nodeName === "DIALOG" && m && t();
      },
      [o, t, m]
    ), A = a(
      (l) => {
        l.code === "Escape" && t();
      },
      [t]
    ), E = a(() => {
      o.current?.close(), document.body.classList.remove(r.noScroll);
    }, [o]);
    return /* @__PURE__ */ e(
      K,
      {
        animation: C,
        unmountNode: !0,
        show: s,
        nodeRef: o,
        onExit: E,
        children: /* @__PURE__ */ e(
          "dialog",
          {
            ...w,
            id: c,
            onKeyDown: A,
            onClick: v,
            className: n(r.dialog, h),
            ref: o,
            children: /* @__PURE__ */ p("div", { className: r.flex, children: [
              d && /* @__PURE__ */ e("header", { className: n(r.header), children: /* @__PURE__ */ e(G, { children: d }) }),
              /* @__PURE__ */ e("div", { className: n(r.body), children: u }),
              /* @__PURE__ */ p("footer", { className: r.actions, children: [
                /* @__PURE__ */ e(j, { actions: D }),
                N && /* @__PURE__ */ e("div", { className: r.row, children: /* @__PURE__ */ e(
                  g,
                  {
                    onClick: t,
                    icon: I,
                    title: x
                  }
                ) }, `${c}-close`)
              ] })
            ] })
          }
        )
      }
    );
  }
);
H.displayName = "Dialog";
export {
  H as Dialog
};
//# sourceMappingURL=Dialog.js.map