@achs/webkit/dist/components/organisms/Modal/index.mjs

Conjunto de componentes de UI con el estilo del Sistema de Diseño ACHS (Asociación Chilena de Seguridad), para reutilizar de forma transversal en las aplicaciones web de ACHS. Construido con **React 19**, **TypeScript** y **Vite**, con soporte para las

import { jsxs as u, jsx as o } from "react/jsx-runtime";
import { useRef as h, useEffect as x } from "react";
import { createPortal as g } from "react-dom";
import t from "./Modal.module.scss.mjs";
const N = 'a[href], button:not([disabled]), textarea, input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])', M = ({
  isOpen: c,
  onClose: a,
  color: n = "primary",
  title: l,
  zIndex: b = 1e3,
  children: p,
  ...w
}) => {
  const i = h(null), m = h(null);
  return x(() => {
    var f;
    if (!c) return;
    m.current = document.activeElement, (f = i.current) == null || f.focus();
    const d = (e) => {
      if (e.key === "Escape") {
        a();
        return;
      }
      if (e.key !== "Tab") return;
      const r = i.current;
      if (!r) return;
      const s = Array.from(r.querySelectorAll(N));
      if (s.length === 0) {
        e.preventDefault(), r.focus();
        return;
      }
      const v = s[0], y = s[s.length - 1];
      e.shiftKey && document.activeElement === v ? (e.preventDefault(), y.focus()) : !e.shiftKey && document.activeElement === y && (e.preventDefault(), v.focus());
    };
    document.addEventListener("keydown", d);
    const k = document.body.style.overflow;
    return document.body.style.overflow = "hidden", () => {
      var e, r;
      document.removeEventListener("keydown", d), document.body.style.overflow = k, (r = (e = m.current) == null ? void 0 : e.focus) == null || r.call(e);
    };
  }, [c, a]), c ? g(
    /* @__PURE__ */ u(
      "div",
      {
        className: t.root,
        style: { "--z-index": b },
        onClick: a,
        role: "presentation",
        children: [
          /* @__PURE__ */ o("div", { className: t.base_overlay }),
          /* @__PURE__ */ o("div", { className: t.base_modal, "data-color": n, children: /* @__PURE__ */ u(
            "div",
            {
              ...w,
              ref: i,
              tabIndex: -1,
              className: t.modal,
              "data-color": n,
              onClick: (d) => d.stopPropagation(),
              role: "dialog",
              "aria-modal": "true",
              "aria-label": l ?? "Modal",
              children: [
                l && /* @__PURE__ */ u("div", { className: t.header_container, "data-color": n, children: [
                  /* @__PURE__ */ o("h3", { className: t.modal_title, children: l }),
                  /* @__PURE__ */ o(
                    "button",
                    {
                      className: t.modal_header,
                      onClick: a,
                      "data-color": n,
                      "aria-label": "Cerrar",
                      type: "button",
                      children: /* @__PURE__ */ o("svg", { className: t.exit_icon, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ o("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
                    }
                  )
                ] }),
                /* @__PURE__ */ o("div", { className: t.modal_body, "data-has-header": l ? "true" : "false", children: p })
              ]
            }
          ) })
        ]
      }
    ),
    document.body
  ) : null;
};
export {
  M as Modal,
  M as default
};