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 r, jsxs as p } from "react/jsx-runtime";
import { forwardRef as R, useEffect as S, useCallback as c } 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 s 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: a = () => {
    },
    id: l,
    actions: D = [],
    dialogTitle: d,
    closeLabel: x = "Close",
    trapFocus: y = !0,
    animation: C = F["slide-top"],
    ...w
  }, b) => {
    const e = k(b), { isOpen: t, closeDialog: f } = B(l);
    L(e.current, t, y), S(() => {
      var o;
      t && ((o = e.current) == null || o.showModal(), document.body.classList.add(s.noScroll)), a(t);
    }, [e, a, t]);
    const i = c(() => {
      a(!1), f();
    }, [f, a]), v = c(
      (o) => {
        o.target.nodeName === "DIALOG" && m && i();
      },
      [e, i, m]
    ), A = c(
      (o) => {
        o.code === "Escape" && i();
      },
      [i]
    ), E = c(() => {
      var o;
      (o = e.current) == null || o.close(), document.body.classList.remove(s.noScroll);
    }, [e]);
    return /* @__PURE__ */ r(
      K,
      {
        animation: C,
        unmountNode: !0,
        show: t,
        nodeRef: e,
        onExit: E,
        children: /* @__PURE__ */ r(
          "dialog",
          {
            ...w,
            id: l,
            onKeyDown: A,
            onClick: v,
            className: n(s.dialog, h),
            ref: e,
            children: /* @__PURE__ */ p("div", { className: s.flex, children: [
              d && /* @__PURE__ */ r("header", { className: n(s.header), children: /* @__PURE__ */ r(G, { children: d }) }),
              /* @__PURE__ */ r("div", { className: n(s.body), children: u }),
              /* @__PURE__ */ p("footer", { className: s.actions, children: [
                /* @__PURE__ */ r(j, { actions: D }),
                N && /* @__PURE__ */ r("div", { className: s.row, children: /* @__PURE__ */ r(
                  g,
                  {
                    onClick: i,
                    icon: I,
                    title: x
                  }
                ) }, `${l}-close`)
              ] })
            ] })
          }
        )
      }
    );
  }
);
H.displayName = "Dialog";
export {
  H as Dialog
};
//# sourceMappingURL=Dialog.js.map