@alif-ui-test/core 1.11.0

package/dist/components/Dates/InputDatePicker/InputDatePicker.utils.js

@@ -0,0 +1,70 @@
+const Y = (t) => {
+  const n = /^(\d{2})\.(\d{2})\.(\d{1,4})(\s\d{2}:\d{2})?$/;
+  if (!n.test(t))
+    return !1;
+  const [, e, s, u, r] = t.match(n) || [], o = parseInt(e, 10), i = parseInt(s, 10), c = parseInt(u, 10);
+  if (i == 0 || i > 12)
+    return !1;
+  const l = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+  if ((c % 400 == 0 || c % 100 != 0 && c % 4 == 0) && (l[1] = 29), o < 0 || o > l[i - 1])
+    return !1;
+  const [f, D] = r ? r.split(":") : ["0", "0"];
+  return parseInt(f, 10) < 24 && parseInt(D, 10) < 60;
+}, p = {
+  date_standalone: {
+    en: "DD.MM.YYYY",
+    ru: "ДД.ММ.ГГГГ",
+    tj: "РР.ММ.СССС"
+  },
+  date_range: {
+    en: "DD.MM.YYYY - DD.MM.YYYY",
+    ru: "ДД.ММ.ГГГГ - ДД.ММ.ГГГГ",
+    tj: "РР.ММ.СССС - РР.ММ.СССС"
+  },
+  date_time: {
+    en: "DD.MM.YYYY HH:mm",
+    ru: "ДД.ММ.ГГГГ ЧЧ:мм",
+    tj: "РР.ММ.СССС cc:мм"
+  }
+}, M = (t, n, e = "ru") => t ? p.date_range[e] : n ? p.date_time[e] : p.date_standalone[e], g = (t) => {
+  const n = /* @__PURE__ */ new Date(), [e, s] = t.split(" "), [u, r, o] = e.split("."), [i, c] = s ? s.split(":") : ["0", "0"];
+  return n.setFullYear(parseInt(o, 10)), n.setMonth(parseInt(r, 10) - 1), n.setDate(parseInt(u, 10)), n.setHours(parseInt(i, 10)), n.setMinutes(parseInt(c, 10)), n;
+}, $ = (t, n) => {
+  if (!t)
+    return null;
+  if (n) {
+    const e = t.split(" - ").filter(Y).map(g);
+    return e.length < 2 ? null : e;
+  } else if (Y(t))
+    return g(t);
+  return null;
+}, a = (t) => t < 10 ? `0${t}` : t, m = (t, n) => {
+  if (!t)
+    return "";
+  const e = t.getDate(), s = t.getMonth() + 1, u = t.getFullYear(), r = t.getHours(), o = t.getMinutes();
+  return `${a(e)}.${a(s)}.${u}${n ? ` ${a(r)}:${a(o)}` : ""}`;
+}, d = (t, n, e, s) => {
+  if (Array.isArray(t))
+    if (n) {
+      const l = t.map((f) => m(f, e)).filter((f) => f);
+      s(
+        `${l[0] || ""} - ${l[1] || ""}`
+      );
+      return;
+    } else {
+      s(m(t[0], e));
+      return;
+    }
+  const u = t.getDate(), r = t.getMonth() + 1, o = t.getFullYear(), i = t.getHours(), c = t.getMinutes();
+  s(
+    `${a(u)}.${a(r)}.${o}${e ? ` ${a(i)}:${a(c)}` : ""}`
+  );
+};
+export {
+  a as addZero,
+  M as defineMask,
+  d as formatDate,
+  m as formatSingleDate,
+  Y as isValidDate,
+  $ as parseDate
+};

package/dist/components/Dates/InputMonthPicker/InputMonthPicker.js

@@ -0,0 +1,110 @@
+import { jsxs as j, jsx as s } from "react/jsx-runtime";
+import { useState as I, useMemo as N, useEffect as x } from "react";
+import { defineMask as T, parseMonthRange as B, parseMonthToken as F } from "./InputMonthPicker.utils.js";
+import { MONTHS as z } from "./MonthPicker/MonthPicker.constants.js";
+import { getPopoverWidth as E, sanitizeInput as H, formatInputValue as L } from "../Dates.utils.js";
+import { useLocale as q } from "../../../providers/hooks/useLocale/useLocale.js";
+import { Popover as a } from "../../Popover/Popover.js";
+import { Input as G } from "../../Input/Input.js";
+import { MonthPicker as J } from "./MonthPicker/MonthPicker.js";
+import { OutlineSystemCalendar as K } from "../../../icons/components/OutlineSystemCalendar.js";
+const rt = ({
+  value: i,
+  isRange: e,
+  disabledMonths: w,
+  onClear: d,
+  onChange: l,
+  onBlur: P,
+  options: b,
+  style: A,
+  className: D,
+  pickerWidth: h,
+  ...S
+}) => {
+  const { locale: y } = q(), [M, c] = I(!1), [p, r] = I(""), m = N(() => z[y], [y]), f = N(() => T(!!e), [e]), C = (t) => t ? e && Array.isArray(t) ? [t[0], t[1]].map((o) => m[o - 1] ?? "").join(" – ") : typeof t == "number" ? m[t - 1] ?? "" : "" : "", O = (t) => {
+    const o = H(t.target.value), n = (e ? o.slice(0, 4) : o.slice(0, 2)) || "";
+    if (!n) {
+      l?.(null), r("");
+      return;
+    }
+    r(
+      f ? L(n, f) : n
+    );
+  }, V = (t) => {
+    P?.(t);
+    const o = t.target.value.trim();
+    if (e) {
+      const k = o.split("–")[0]?.trim();
+      if (!k || isNaN(Number(k))) {
+        r("");
+        return;
+      }
+      const u = B(o, m);
+      l?.(u), r(u ? `${u[0] + 1} – ${u[1] + 1}` : "");
+      return;
+    }
+    const n = F(o, m);
+    l?.(n), r(n !== null ? String(n + 1) : "");
+  }, $ = (t) => {
+    typeof t == "number" && t !== null && r(m[t - 1] + " – "), (!e || Array.isArray(t) && t[0] && t[1]) && (l?.(t), c(!1));
+  }, g = () => {
+    d?.(), r(""), l?.(null);
+  };
+  return x(() => {
+    if (i == null) {
+      r("");
+      return;
+    }
+    if (e && Array.isArray(i)) {
+      const [o, n] = i;
+      r(`${o} – ${n}`);
+      return;
+    }
+    r(String(i));
+  }, [i, e]), /* @__PURE__ */ j(
+    a,
+    {
+      position: "bottom-start",
+      width: E(h),
+      isOpen: M,
+      onClose: () => c(!1),
+      children: [
+        /* @__PURE__ */ s(
+          a.Trigger,
+          {
+            className: D,
+            style: { width: "100%", ...A },
+            children: /* @__PURE__ */ s(
+              G,
+              {
+                rightIcon: /* @__PURE__ */ s(K, { onMouseDown: (t) => t.preventDefault() }),
+                ...S,
+                value: isNaN(Number(p.split("–")[0])) ? p : C(i) || p,
+                onChange: O,
+                onBlur: V,
+                mask: f,
+                onFieldClick: () => c(!M),
+                isFilled: !!i,
+                onClear: d && g
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ s(a.Dropdown, { children: /* @__PURE__ */ s("div", { onMouseDown: (t) => t.preventDefault(), children: /* @__PURE__ */ s(
+          J,
+          {
+            value: i,
+            isRange: e,
+            disabledMonths: w,
+            onPickerChange: $,
+            options: b,
+            pickerWidth: h
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+export {
+  rt as InputMonthPicker
+};

package/dist/components/Dates/InputMonthPicker/InputMonthPicker.types.js

@@ -0,0 +1 @@
+

package/dist/components/Dates/InputMonthPicker/InputMonthPicker.utils.js

@@ -0,0 +1,23 @@
+const i = {
+  month: "MM",
+  month_range: "MM – MM"
+}, M = (n) => n ? i.month_range : i.month, u = (n) => !isNaN(n) && n >= 1 && n <= 12, c = (n) => n - 1, l = (n, s) => {
+  if (!n) return null;
+  const r = n.trim(), t = parseInt(r, 10);
+  if (!isNaN(t) && u(t)) return t;
+  const o = r.toLowerCase();
+  let e = s.findIndex((a) => a.toLowerCase() === o);
+  return e >= 0 || (e = s.findIndex((a) => a.toLowerCase().startsWith(o)), e >= 0) ? e + 1 : null;
+}, f = (n, s) => {
+  const r = n.split(/[–—-]/).map((e) => e.trim()).filter(Boolean);
+  if (r.length !== 2) return null;
+  const t = l(r[0], s), o = l(r[1], s);
+  return t !== null && o !== null ? [Math.min(t, o), Math.max(t, o)] : null;
+};
+export {
+  M as defineMask,
+  u as isValidMonthHuman,
+  f as parseMonthRange,
+  l as parseMonthToken,
+  c as toZeroBased
+};

package/dist/components/Dates/InputMonthPicker/MonthPicker/MonthPicker.constants.js

@@ -0,0 +1,47 @@
+const e = {
+  en: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ],
+  ru: [
+    "Январь",
+    "Февраль",
+    "Март",
+    "Апрель",
+    "Май",
+    "Июнь",
+    "Июль",
+    "Август",
+    "Сентябрь",
+    "Октябрь",
+    "Ноябрь",
+    "Декабрь"
+  ],
+  tj: [
+    "Январ",
+    "Феврал",
+    "Март",
+    "Апрел",
+    "Май",
+    "Июн",
+    "Июл",
+    "Август",
+    "Сентябр",
+    "Октябр",
+    "Ноябр",
+    "Декабр"
+  ]
+};
+export {
+  e as MONTHS
+};

package/dist/components/Dates/InputMonthPicker/MonthPicker/MonthPicker.js

@@ -0,0 +1,59 @@
+import { jsxs as u, jsx as m } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { MONTHS as N } from "./MonthPicker.constants.js";
+import O from "../../Dates.module.css.js";
+import { PickerContent as k } from "../../PickerContent/PickerContent.js";
+import { getPickerStyles as x } from "../../Dates.utils.js";
+import { PickerOptions as P } from "../../PickerOptions/PickerOptions.js";
+import { useLocale as S } from "../../../../providers/hooks/useLocale/useLocale.js";
+import { classNames as V } from "../../../../utils/class-names.js";
+const q = ({
+  className: c,
+  onChange: i,
+  onPickerChange: e,
+  value: o,
+  isRange: s,
+  disabledMonths: n,
+  options: p,
+  pickerWidth: h
+}) => {
+  const { locale: l } = S(), r = (/* @__PURE__ */ new Date()).getMonth() + 1, a = Array.isArray(o) ? o[0] ?? r : o ?? r, [f, y] = b(a), M = Array.from({ length: 12 }, (t, d) => d + 1), A = (t) => {
+    e?.(t), i?.(t), t != null && y(Array.isArray(t) ? Math.min(...t) : t);
+  };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      style: x("month", h),
+      className: V(O.root, c),
+      children: [
+        /* @__PURE__ */ m(
+          k,
+          {
+            type: "month",
+            items: M,
+            monthNames: N[l],
+            currentValue: r,
+            visibleValue: f,
+            onChange: i,
+            onPickerChange: e,
+            isRange: s,
+            value: o,
+            disabledOptions: n
+          }
+        ),
+        /* @__PURE__ */ m(
+          P,
+          {
+            options: p,
+            isRange: s,
+            disabledOptions: n,
+            onChange: A
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  q as MonthPicker
+};

package/dist/components/Dates/InputMonthPicker/MonthPicker/MonthPicker.types.js

@@ -0,0 +1 @@
+

package/dist/components/Dates/InputMonthYearPicker/InputMonthYearPicker.js

@@ -0,0 +1,110 @@
+import { jsxs as B, jsx as n } from "react/jsx-runtime";
+import { useState as P, useMemo as F, useEffect as T } from "react";
+import { defineMask as x, formatRangeValue as D, formatMonthYear as d, validateRange as E, validateSingle as L, normalizeMonthInput as U } from "./InputMonthYearPicker.utils.js";
+import { getPopoverWidth as $, sanitizeInput as q, formatInputValue as G } from "../Dates.utils.js";
+import { useLocale as H } from "../../../providers/hooks/useLocale/useLocale.js";
+import { Popover as h } from "../../Popover/Popover.js";
+import { Input as J } from "../../Input/Input.js";
+import { MonthYearPicker as K } from "./MonthYearPicker/MonthYearPicker.js";
+import { OutlineSystemCalendar as Q } from "../../../icons/components/OutlineSystemCalendar.js";
+const rt = ({
+  value: r,
+  className: V,
+  style: g,
+  minYear: f = 1900,
+  maxYear: a = 2100,
+  disabledDates: A,
+  options: z,
+  isRange: o,
+  onChange: s,
+  onClear: I,
+  onBlur: C,
+  pickerWidth: M,
+  ...N
+}) => {
+  const { locale: c } = H(), [k, l] = P(!1), [w, e] = P(""), y = F(
+    () => x(!!o, c),
+    [o, c]
+  ), O = isNaN(Number(w.split(" ")[0])) ? void 0 : y, S = (t) => {
+    const u = U(t.target.value, c), i = q(u);
+    e(G(i, y));
+  }, b = (t) => {
+    C?.(t);
+    const u = t.target.value.trim();
+    if (o) {
+      const p = E(u, f, a);
+      p ? (e(p.formatted), s?.(p.value)) : m();
+      return;
+    }
+    const i = L(u, f, a);
+    i ? (e(i.formatted), s?.(i.value)) : m();
+  }, j = (t) => {
+    if (t) {
+      if (o) {
+        Array.isArray(t) ? (e(D(t[0], t[1])), s?.(t), l(!1)) : e(`${d(t)} – `);
+        return;
+      }
+      typeof t == "string" && (e(d(t)), s?.(t), l(!1));
+    }
+  }, m = () => {
+    I?.(), e(""), s?.(null);
+  };
+  return T(() => {
+    if (r == null) {
+      e("");
+      return;
+    }
+    if (o && Array.isArray(r)) {
+      e(D(r[0], r[1]));
+      return;
+    }
+    e(d(r));
+  }, [r, o]), /* @__PURE__ */ B(
+    h,
+    {
+      position: "bottom-start",
+      isOpen: k,
+      onClose: () => l(!1),
+      width: $(M),
+      children: [
+        /* @__PURE__ */ n(
+          h.Trigger,
+          {
+            className: V,
+            style: { width: "100%", ...g },
+            children: /* @__PURE__ */ n(
+              J,
+              {
+                rightIcon: /* @__PURE__ */ n(Q, { onMouseDown: (t) => t.preventDefault() }),
+                ...N,
+                value: w,
+                onChange: S,
+                onBlur: b,
+                mask: O,
+                onFieldClick: () => l(!k),
+                isFilled: !!r,
+                onClear: I && m
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ n(h.Dropdown, { children: /* @__PURE__ */ n("div", { onMouseDown: (t) => t.preventDefault(), children: /* @__PURE__ */ n(
+          K,
+          {
+            value: r,
+            isRange: o,
+            minYear: f,
+            maxYear: a,
+            disabledDates: A,
+            onPickerChange: j,
+            options: z,
+            pickerWidth: M
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+export {
+  rt as InputMonthYearPicker
+};

package/dist/components/Dates/InputMonthYearPicker/InputMonthYearPicker.utils.js

@@ -0,0 +1,44 @@
+import { MONTHS as c } from "../InputMonthPicker/MonthPicker/MonthPicker.constants.js";
+const m = {
+  year: {
+    en: "MM.YYYY",
+    ru: "MM.ГГГГ",
+    tj: "MM.СССС"
+  },
+  year_range: {
+    en: "MM.YYYY – MM.YYYY",
+    ru: "MM.ГГГГ – MM.ГГГГ",
+    tj: "MM.СССС – MM.СССС"
+  }
+}, d = (n, r = "ru") => n ? m.year_range[r] : m.year[r], M = (n) => n.replace(/(\d{2})\D(\d{2,4})/, "$1-$2"), l = (n) => {
+  if (!n) return "";
+  const [r, a = ""] = n.split("-");
+  return `${r}.${a}`;
+}, Y = (n, r) => {
+  const a = c[r].map((t) => t.toLowerCase());
+  return n.split(/\s*[-–]\s*/).map((t) => {
+    const [e, s] = t.trim().split(/\s+/);
+    if (!e || !s) return t;
+    const o = a.findIndex((i) => i.startsWith(e.toLowerCase()));
+    return o === -1 ? t : `${String(o + 1).padStart(2, "0")}–${s}`;
+  }).join(" - ");
+}, p = (n, r) => `${l(n)} – ${l(r)}`.trim(), y = (n, r, a) => {
+  const t = M(n), e = l(t);
+  if (!e) return null;
+  const [s, o] = t.split("-").map(Number);
+  return s >= 1 && s <= 12 && o >= r && o <= a ? { formatted: e, value: t } : null;
+}, $ = (n, r, a) => {
+  let [t, e] = n.split(/\s*[-–]\s*/).map(M);
+  if (!t || !e) return null;
+  const [s, o] = t.split("-").map(Number), [i, u] = e.split("-").map(Number);
+  return !s || !o || !i || !u || s < 1 || s > 12 || i < 1 || i > 12 || o < r || o > a || u < r || u > a ? null : (o * 100 + s > u * 100 + i && ([t, e] = [e, t]), { formatted: p(t, e), value: [t, e] });
+};
+export {
+  d as defineMask,
+  l as formatMonthYear,
+  p as formatRangeValue,
+  Y as normalizeMonthInput,
+  M as normalizePart,
+  $ as validateRange,
+  y as validateSingle
+};

package/dist/components/Dates/InputMonthYearPicker/InputYearMonthPicker.types.js

@@ -0,0 +1 @@
+

package/dist/components/Dates/InputMonthYearPicker/MonthYearPicker/MonthYearPicker.js

@@ -0,0 +1,134 @@
+import { jsxs as _, jsx as D } from "react/jsx-runtime";
+import { useState as i, useRef as R, useMemo as C, useEffect as q } from "react";
+import { getRangeBoundaries as x, parseValue as A, formatValue as V, toMonthDate as h } from "./MonthYearPicker.utils.js";
+import o from "../../Dates.module.css.js";
+import { MONTHS as v } from "../../InputMonthPicker/MonthPicker/MonthPicker.constants.js";
+import { scrollToCenter as tt, getPickerStyles as rt } from "../../Dates.utils.js";
+import { PickerHeader as et } from "../../PickerHeader/PickerHeader.js";
+import { PickerOptions as ot } from "../../PickerOptions/PickerOptions.js";
+import { useLocale as nt } from "../../../../providers/hooks/useLocale/useLocale.js";
+import { classNames as b } from "../../../../utils/class-names.js";
+const ut = ({
+  value: e,
+  isRange: s = !1,
+  minYear: Y = 1900,
+  maxYear: z = 2100,
+  onChange: k,
+  onPickerChange: T,
+  disabledDates: N,
+  options: G = [],
+  className: J,
+  pickerWidth: K
+}) => {
+  const E = (/* @__PURE__ */ new Date()).getMonth(), w = (/* @__PURE__ */ new Date()).getFullYear(), { locale: H } = nt(), [f, d] = i("month"), [n, p] = i(w), [Q, U] = i(E), [l, u] = i(null), [L, O] = i(null), P = R(null), W = C(
+    () => x(e, s, l, L),
+    [L, s, l, e]
+  ), j = Array.from(
+    { length: z - Y + 1 },
+    (t, r) => Y + r
+  ), B = C(() => v[H], [H]), S = C(
+    () => l || (Array.isArray(e) ? e : null),
+    [l, e]
+  ), X = (t) => {
+    const r = V(t, n);
+    if (s || k?.(r), !S || S[1]) {
+      u([r, ""]), T?.(r);
+      return;
+    }
+    const [c] = S, m = h(
+      A(c).year,
+      A(c).month
+    ), a = h(n, t) < m ? [r, c] : [c, r];
+    u(a), k?.(a), T?.(a);
+  }, Z = (t) => {
+    p(t), d("month");
+  }, M = (t) => {
+    const r = V(t, n);
+    return N?.includes(r);
+  }, $ = (t) => {
+    const r = s ? l?.[0] ?? (Array.isArray(e) ? e[0] : null) : e;
+    return t === r || t === n;
+  }, I = (t) => {
+    const r = V(t, n), c = h(n, t), [m, y] = (W ?? []).map(
+      (F) => F && A(F)
+    ), a = m && h(m.year, m.month), g = y && h(y.year, y.month);
+    return b(
+      o.option,
+      o.month,
+      !s && e === r && o.active,
+      s && a && c.getTime() === a.getTime() && o.rangeStart,
+      s && g && c.getTime() === g.getTime() && o.rangeEnd,
+      s && a && g && c > a && c < g && o.rangeMiddle,
+      N?.includes(r) && o.disabled,
+      E === t && w === n && o.current
+    );
+  };
+  return q(() => {
+    if (!e) return;
+    const t = Array.isArray(e) ? e[1] || e[0] : e, r = A(t);
+    p(r.year), U(r.month), Array.isArray(e) ? u(e) : u(null);
+  }, [e]), q(() => {
+    tt(P.current);
+  }, [n, e, j]), /* @__PURE__ */ _(
+    "div",
+    {
+      style: rt(f, K),
+      className: b(o.root, J),
+      children: [
+        /* @__PURE__ */ D(
+          et,
+          {
+            viewMode: f,
+            year: n,
+            month: B[Q],
+            onMonthClick: () => d("month"),
+            onYearClick: () => d("year"),
+            onPrev: () => p((t) => t - 1),
+            onNext: () => p((t) => t + 1)
+          }
+        ),
+        /* @__PURE__ */ _("div", { className: b(o.calendar, o.calendarShadow), children: [
+          f === "month" && B.map((t, r) => /* @__PURE__ */ D(
+            "button",
+            {
+              className: I(r),
+              onClick: () => !M(r) && X(r),
+              disabled: M(r),
+              onMouseLeave: () => !M(r) && O(null),
+              onMouseEnter: () => !M(r) && O({ month: r, year: n }),
+              children: t
+            },
+            t
+          )),
+          f === "year" && j.map((t) => /* @__PURE__ */ D(
+            "button",
+            {
+              ref: $(t) ? P : null,
+              onClick: () => Z(t),
+              className: b(
+                o.option,
+                w === t && o.current
+              ),
+              children: t
+            },
+            t
+          ))
+        ] }),
+        /* @__PURE__ */ D(
+          ot,
+          {
+            onChange: (t) => {
+              k?.(t), T?.(t), d("month");
+            },
+            options: G,
+            isRange: s,
+            disabledOptions: N
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ut as MonthYearPicker
+};

package/dist/components/Dates/InputMonthYearPicker/MonthYearPicker/MonthYearPicker.types.js

@@ -0,0 +1 @@
+

package/dist/components/Dates/InputMonthYearPicker/MonthYearPicker/MonthYearPicker.utils.js

@@ -0,0 +1,20 @@
+const i = (t, r) => `${String(t + 1).padStart(2, "0")}-${r}`, u = (t) => {
+  const [r, e] = t.split("-").map(Number);
+  return { month: r - 1, year: e };
+}, c = (t, r) => new Date(t, r, 1), m = (t, r, e, o) => {
+  if (!r) return null;
+  const [n, s] = e ?? [];
+  if (n && s)
+    return [n, s].sort();
+  if (n) {
+    const a = o ? i(o.month, o.year) : n;
+    return [n, a].sort();
+  }
+  return Array.isArray(t) && t[0] && t[1] ? [t[0], t[1]].sort() : null;
+};
+export {
+  i as formatValue,
+  m as getRangeBoundaries,
+  u as parseValue,
+  c as toMonthDate
+};