@achs/webkit/dist/components/molecules/Drawer/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 { jsx as u } from "react/jsx-runtime";
import { useState as E, useRef as b, useEffect as c } from "react";
import a from "./Drawer.module.scss.mjs";
const z = 'a[href], button:not([disabled]), textarea, input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])', N = ({
  isOpen: t,
  onClose: l,
  children: w,
  position: x = "right",
  zIndex: g = 1e3,
  width: r = "300px",
  destroyOnClose: f = !1,
  maskClosable: k = !0,
  className: D,
  ariaLabel: $ = "Panel lateral"
}) => {
  const [L, m] = E(t), [R, v] = E(r), d = b(null), y = b(null);
  c(() => {
    t && m(!0);
  }, [t]), c(() => {
    function n() {
      const s = typeof r == "number" ? r : typeof r == "string" && r.endsWith("px") ? parseInt(r) : void 0;
      s && window.innerWidth < s ? v("100%") : v(r);
    }
    return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
  }, [r]);
  const W = () => {
    !t && f && m(!1);
  };
  return c(() => {
    var s;
    if (!t) return;
    y.current = document.activeElement, (s = d.current) == null || s.focus();
    const n = (e) => {
      if (e.key === "Escape") {
        l();
        return;
      }
      if (e.key !== "Tab") return;
      const o = d.current;
      if (!o) return;
      const i = Array.from(o.querySelectorAll(z));
      if (i.length === 0) {
        e.preventDefault(), o.focus();
        return;
      }
      const h = i[0], p = i[i.length - 1];
      e.shiftKey && document.activeElement === h ? (e.preventDefault(), p.focus()) : !e.shiftKey && document.activeElement === p && (e.preventDefault(), h.focus());
    };
    return document.addEventListener("keydown", n), () => {
      var e, o;
      document.removeEventListener("keydown", n), (o = (e = y.current) == null ? void 0 : e.focus) == null || o.call(e);
    };
  }, [t, l]), !L && f ? null : /* @__PURE__ */ u(
    "div",
    {
      className: `${a.overlay} ${t ? a.open : ""}`,
      onClick: k ? l : void 0,
      style: { "--z-index": g },
      children: /* @__PURE__ */ u(
        "div",
        {
          ref: d,
          role: "dialog",
          "aria-modal": "true",
          "aria-label": $,
          tabIndex: -1,
          className: `${a.drawer} ${a[x]} ${t ? a.show : ""} ${D ?? ""}`.trim(),
          style: { width: R },
          onClick: (n) => n.stopPropagation(),
          onTransitionEnd: W,
          children: /* @__PURE__ */ u("div", { className: a.content, children: w })
        }
      )
    }
  );
};
export {
  N as Drawer,
  N as default
};