@achs/webkit/dist/components/molecules/DatePicker/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 y, jsx as l } from "react/jsx-runtime";
import { useMemo as Ne, useState as c, useRef as S, useEffect as v } from "react";
import s from "./DatePicker.module.scss.mjs";
import { Input as Ye } from "../../atoms/Input/index.mjs";
const o = (w) => {
  const g = new Date(w);
  return g.setHours(0, 0, 0, 0), g;
}, Ie = ({
  minDate: w,
  maxDate: g,
  value: N,
  onOpenChange: u,
  format: se = "dd/MM/yyyy",
  onChange: Y,
  placeholder: G,
  disabled: Q,
  finishDate: k,
  startDate: $,
  status: re = "default",
  inputIconClassName: oe,
  inputIconColor: ae,
  inputClassName: le,
  range: i = !1
}) => {
  const U = (e) => {
    if (!e) return null;
    const t = typeof e == "string" ? new Date(e) : e;
    return isNaN(t.getTime()) ? null : t;
  }, M = Ne(() => U(N), [N]), [p, H] = c(M), [E, J] = c(
    M ? M.getMonth() : (/* @__PURE__ */ new Date()).getMonth()
  ), [R, j] = c(
    M ? M.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear()
  ), [W, X] = c(
    M ? M.getFullYear() - 10 : (/* @__PURE__ */ new Date()).getFullYear() - 10
  ), [a, _] = c($ || null), [b, A] = c(k || null), [z, Z] = c(null), [m, F] = c(!1), [I, h] = c(!1), [T, D] = c(!1), [ie, O] = c([]), ce = S(null), ue = S(null), de = S(null), fe = S(null), C = S(null), x = S(null);
  v(() => {
    const e = U(N);
    e ? (!p || p.getTime() !== e.getTime()) && (H(e), J(e.getMonth()), j(e.getFullYear()), X(e.getFullYear() - 10)) : H(null);
  }, [N]), v(() => {
    const e = Array.from({ length: 18 }, (t, n) => W + n);
    O(e);
  }, [W]), v(() => {
    i && $ && _($), i && k && A(k);
  }, [i, $, k]), v(() => {
    const e = (t) => {
      C.current && !C.current.contains(t.target) && x.current && !x.current.contains(t.target) && m && (u == null || u(!1), F(!1));
    };
    return document.addEventListener("mousedown", e), () => {
      document.removeEventListener("mousedown", e);
    };
  }, [m]), v(() => {
    if (!m) return;
    const e = (t) => {
      var n;
      t.key === "Escape" && (t.preventDefault(), F(!1), h(!1), D(!1), u == null || u(!1), (n = x.current) == null || n.focus());
    };
    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
  }, [m, u]);
  const me = ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"], B = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"], he = ["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"], De = ((e, t) => {
    const n = [], r = new Date(e, t, 1).getDay(), P = ((r === 0 ? 6 : r - 1) + 7) % 7, V = new Date(e, t + 1, 0);
    for (let f = 0; f < P; f++)
      n.push(null);
    for (let f = 1; f <= V.getDate(); f++)
      n.push(new Date(e, t, f));
    const q = 7 - n.length % 7;
    for (let f = 0; f < q && n.length % 7 !== 0; f++)
      n.push(null);
    return n;
  })(R, E), ee = (e) => {
    let t = E + e, n = R;
    t > 11 ? (t = 0, n += 1) : t < 0 && (t = 11, n -= 1), J(t), j(n);
  }, ge = (e) => {
    i ? !a || a && b ? (_(e), A(null), Y([e])) : e < a ? (_(e), A(a), Y([e, a])) : (A(e), Y([a, e])) : (H(e), Y(e), F(!1));
  }, Me = (() => {
    if (!a) return [];
    const e = b || z;
    if (!e) return [];
    const t = o(a), n = o(e), d = [], r = new Date(Math.min(t.getTime(), n.getTime())), L = new Date(Math.max(t.getTime(), n.getTime()));
    for (; r <= L; )
      d.push(new Date(r)), r.setDate(r.getDate() + 1);
    return d;
  })(), te = (e) => {
    const t = W + e * 18;
    X(t);
    const n = Array.from({ length: 18 }, (d, r) => t + r);
    O(n);
  }, be = (e) => {
    J(e), h(!1), D(!1);
  }, we = (e) => {
    j(e), D(!1), h(!1);
  }, ye = () => {
    h(!I), T && setTimeout(() => D(!1), 130);
  }, Se = () => {
    D(!T), I && setTimeout(() => h(!1), 130);
  }, pe = () => {
    if (!Q) {
      const e = !m;
      F(e), h(!1), D(!1), u == null || u(e);
    }
  }, ne = (e) => {
    const t = o(e);
    return !(w && o(w) > t || g && o(g) < t);
  }, K = (e, t = "dd/MM/yyyy") => {
    const n = {};
    return t.includes("dd") && (n.day = "2-digit"), t.includes("d") && !t.includes("dd") && (n.day = "numeric"), t.includes("MMMM") ? n.month = "long" : t.includes("MMM") ? n.month = "short" : t.includes("MM") ? n.month = "2-digit" : t.includes("M") && (n.month = "numeric"), t.includes("yyyy") ? n.year = "numeric" : t.includes("yy") && (n.year = "2-digit"), new Intl.DateTimeFormat("es-EN", n).format(e);
  }, ve = (e, t, n, d, r) => e && t && n ? `${K(t, r)} - ${K(n, r)}` : !e && d ? K(d, r) : "";
  return /* @__PURE__ */ y("div", { className: s.calendarContainer, children: [
    /* @__PURE__ */ l(
      Ye,
      {
        ref: x,
        type: "text",
        disabled: Q,
        readOnly: !0,
        status: re,
        onClick: pe,
        className: le,
        iconClassName: oe,
        iconColor: ae,
        value: ve(i, a, b, p, se),
        placeholder: G,
        role: "combobox",
        "aria-haspopup": "dialog",
        "aria-expanded": m,
        "aria-label": G ?? "Seleccionar fecha"
      }
    ),
    /* @__PURE__ */ y(
      "div",
      {
        ref: C,
        className: `${s.calendar} ${m ? s.active : ""}`,
        role: "dialog",
        "aria-label": "Selector de fecha",
        "aria-hidden": !m,
        children: [
          /* @__PURE__ */ y("div", { className: s.calendarHeader, children: [
            /* @__PURE__ */ l("button", { type: "button", "aria-label": "Mes anterior", onClick: () => {
              ee(-1), h(!1), D(!1);
            }, className: s.headerArrowButton, children: "<" }),
            /* @__PURE__ */ y("div", { className: s.headerMonthYear, children: [
              /* @__PURE__ */ l("button", { type: "button", onClick: ye, className: s.headerButton, ref: de, "aria-expanded": I, "aria-label": `Mes: ${B[E]}. Cambiar mes`, children: B[E] }),
              /* @__PURE__ */ l("button", { type: "button", ref: fe, onClick: Se, className: s.headerButton, "aria-expanded": T, "aria-label": `Año: ${R}. Cambiar año`, children: R })
            ] }),
            /* @__PURE__ */ l("button", { type: "button", "aria-label": "Mes siguiente", onClick: () => {
              ee(1), h(!1), D(!1);
            }, className: s.headerArrowButton, children: ">" })
          ] }),
          /* @__PURE__ */ l("div", { ref: ce, className: `${s.monthSelector} ${I ? s.show : s.hide}`, children: me.map((e, t) => /* @__PURE__ */ l("button", { type: "button", onClick: () => be(t), "aria-label": B[t], children: e }, e)) }),
          /* @__PURE__ */ y("div", { ref: ue, className: `${s.yearSelector} ${T ? s.show : s.hide}`, children: [
            /* @__PURE__ */ l("button", { type: "button", "aria-label": "Años anteriores", onClick: () => te(-1), children: "<" }),
            ie.map((e) => {
              const t = w && e < w.getFullYear() || g && e > g.getFullYear();
              return /* @__PURE__ */ l(
                "button",
                {
                  type: "button",
                  onClick: () => !t && we(e),
                  disabled: t,
                  style: {
                    opacity: t ? 0.5 : 1,
                    cursor: t ? "not-allowed" : "pointer"
                  },
                  children: e
                },
                e
              );
            }),
            /* @__PURE__ */ l("button", { type: "button", "aria-label": "Años siguientes", onClick: () => te(1), children: ">" })
          ] }),
          /* @__PURE__ */ y("div", { className: s.calendarDays, children: [
            /* @__PURE__ */ l("div", { className: s.weekDays, children: he.map((e) => /* @__PURE__ */ l("div", { className: s.weekDay, children: e }, e)) }),
            De.map((e, t) => {
              const n = e && !i && p && o(e).toDateString() === o(p).toDateString(), d = e && i && a && o(e).toDateString() === o(a).toDateString(), r = e && i && b && o(e).toDateString() === o(b).toDateString(), L = e && i && Me.some((q) => o(q).toDateString() === o(e).toDateString()), P = e && i && a && !b && z && o(e).toDateString() === o(z).toDateString(), V = e ? `${e.getDate()} de ${B[e.getMonth()]} de ${e.getFullYear()}` : void 0;
              return /* @__PURE__ */ l(
                "button",
                {
                  type: "button",
                  className: `
                  ${e ? "" : s.emptyDay}
                  ${n ? s.selected : ""}
                  ${d ? s.rangeStart : ""}
                  ${r ? s.rangeEnd : ""}
                  ${L && !d && !r ? s.rangeMiddle : ""}
                  ${P ? s.rangeHoverEnd : ""}
                `,
                  onClick: () => e && ne(e) && ge(e),
                  onMouseEnter: () => i && a && !b && e && Z(e),
                  onMouseLeave: () => Z(null),
                  disabled: e ? !ne(e) : !0,
                  "aria-hidden": !e || void 0,
                  tabIndex: e ? void 0 : -1,
                  "aria-label": V,
                  "aria-current": n ? "date" : void 0,
                  children: e ? e.getDate() : ""
                },
                t
              );
            })
          ] })
        ]
      }
    )
  ] });
};
export {
  Ie as DatePicker,
  Ie as default
};