@alif-ui-test/core 1.11.0 → 2.0.0-alpha.5

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

@@ -1,134 +1,98 @@
-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
+import { classNames as e } from "../../../../utils/class-names.js";
+import { useLocale as t } from "../../../../providers/hooks/useLocale/useLocale.js";
+import n from "../../Dates.module.js";
+import { PickerOptions as r } from "../../PickerOptions/PickerOptions.js";
+import { getPickerStyles as i, getRangeBoundaries as a, scrollToCenter as o } from "../../Dates.utils.js";
+import { MONTHS as s } from "../../InputMonthPicker/MonthPicker/MonthPicker.constants.js";
+import { formatValue as c, makeScrollTargetMonth as l, parseValue as u, toMonthDate as d } from "./MonthYearPicker.utils.js";
+import { MonthView as f } from "./MonthView/MonthView.js";
+import { YearView as p } from "./YearView/YearView.js";
+import { PickerHeader as m } from "../../PickerHeader/PickerHeader.js";
+import { useEffect as h, useLayoutEffect as g, useMemo as _, useRef as v, useState as y } from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/Dates/InputMonthYearPicker/MonthYearPicker/MonthYearPicker.tsx
+var S = ({ value: S, isRange: C = !1, minDate: w = "01-1900", maxDate: T = "12-2100", onChange: E, onPickerChange: D, disabledDates: O, options: k = [], pickerWidth: A, className: j, style: M, ref: N }) => {
+	let P = /* @__PURE__ */ new Date(), { locale: F } = t(), I = P.getMonth(), L = P.getFullYear(), R = u(w)?.year || 1900, z = u(T)?.year || 2100, [B, V] = y("month"), [H, U] = y(L), [W, G] = y(I), [K, q] = y(null), [J, Y] = y(null), X = v(null), Z = _(() => a(S, C, K, J ? c(J.month, J.year) : null, (e, t) => e > t ? [t, e] : [e, t]), [
+		J,
+		C,
+		K,
+		S
+	]), Q = K || (Array.isArray(S) ? S : null), $ = (e) => {
+		let t = c(e, H);
+		if (C || E?.(t), !Q || Q[1] !== null) {
+			q([t, null]), D?.(t);
+			return;
+		}
+		let [n] = Q, r = u(n);
+		if (!r) return;
+		let i = d(r.year, r.month), a = d(H, e) < i ? [t, n] : [n, t];
+		q(a), E?.(a), D?.(a);
+	}, ee = (e) => {
+		U(e), V("month");
+	}, te = (e) => l(e, S, K, H);
+	return h(() => {
+		if (!S) {
+			q(null);
+			return;
+		}
+		let e = u(Array.isArray(S) ? S[1] || S[0] : S);
+		e && (U(e.year), G(e.month)), q(Array.isArray(S) ? S : null);
+	}, [S]), g(() => {
+		B === "year" && o(X.current);
+	}, [B, S]), /* @__PURE__ */ x("div", {
+		ref: N,
+		style: i(B, A, M),
+		className: e(n.root, j),
+		children: [
+			/* @__PURE__ */ b(m, {
+				viewMode: B,
+				year: H,
+				month: s[F][W],
+				onMonthClick: () => V("month"),
+				onYearClick: () => V("year"),
+				onPrev: () => U((e) => e - 1),
+				onNext: () => U((e) => e + 1)
+			}),
+			(() => {
+				switch (B) {
+					case "month": return /* @__PURE__ */ b(f, {
+						year: H,
+						currentMonth: I,
+						currentYear: L,
+						value: S,
+						isRange: C,
+						boundaries: Z ?? [],
+						minDate: w,
+						maxDate: T,
+						disabledDates: O,
+						onMonthClick: $,
+						onHoverMonth: Y
+					});
+					case "year": return /* @__PURE__ */ b(p, {
+						minYear: R,
+						maxYear: z,
+						currentYear: L,
+						value: S,
+						isRange: C,
+						boundaries: Z ?? [],
+						targetRef: X,
+						isScrollTarget: te,
+						onYearClick: ee,
+						onHoverMonth: Y
+					});
+					default: return null;
+				}
+			})(),
+			/* @__PURE__ */ b(r, {
+				options: k,
+				isRange: C,
+				disabledOptions: O,
+				onChange: (e) => {
+					E?.(e), D?.(e), V("month");
+				}
+			})
+		]
+	});
 };
+//#endregion
+export { S as MonthYearPicker };

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

@@ -1,20 +1,18 @@
-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
+//#region src/components/Dates/InputMonthYearPicker/MonthYearPicker/MonthYearPicker.utils.ts
+var e = (e, t) => `${String(e + 1).padStart(2, "0")}-${t}`, t = (e) => {
+	if (!e || typeof e != "string") return null;
+	let t = e.split("-");
+	if (t.length !== 2) return null;
+	let [n, r] = t.map(Number);
+	return isNaN(n) || isNaN(r) || n < 1 || n > 12 || r < 1e3 || r > 9999 ? null : {
+		month: n - 1,
+		year: r
+	};
+}, n = (e, t) => new Date(e, t, 1), r = (e, n, r, i) => {
+	let a = r?.[0] ?? (Array.isArray(n) ? n[0] : null);
+	if (!a) return !1;
+	let o = t(a);
+	return e === (o ? o.month : null) || e === i;
 };
+//#endregion
+export { e as formatValue, r as makeScrollTargetMonth, t as parseValue, n as toMonthDate };

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

@@ -0,0 +1,29 @@
+import { resolveTypography as e } from "../../../../../utils/typography.js";
+import { classNames as t } from "../../../../../utils/class-names.js";
+import n from "../../../Dates.module.js";
+import { getRangeMouseHandlers as r } from "../../../Dates.utils.js";
+import { parseValue as i } from "../MonthYearPicker.utils.js";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/Dates/InputMonthYearPicker/MonthYearPicker/YearView/YearView.tsx
+var o = ({ minYear: o, maxYear: s, currentYear: c, value: l, isRange: u, boundaries: d, targetRef: f, isScrollTarget: p, onYearClick: m, onHoverMonth: h }) => {
+	let g = Array.from({ length: s - o + 1 }, (e, t) => o + t), _ = (e) => {
+		let [r, a] = d.map((e) => e && i(e)), o = r && r.year, s = a && a.year, f = !u && typeof l == "string" && i(l)?.year === e;
+		return t(n.dateCell, "uiFont", f && n.active, u && o === e && n.rangeStart, u && s === e && n.rangeEnd, u && o && s && e > o && e < s && n.rangeMiddle, u && o && s && e > o && e < s && c === e && n.todayRangeMiddle, c === e && n.today);
+	};
+	return /* @__PURE__ */ a("div", {
+		className: t(n.calendar, n.calendarShadow),
+		children: g.map((t) => /* @__PURE__ */ a("button", {
+			ref: p(t) ? f : null,
+			onClick: () => m(t),
+			style: e("body", "s"),
+			className: _(t),
+			...r(u, h, {
+				month: 0,
+				year: t
+			}),
+			children: t
+		}, t))
+	});
+};
+//#endregion
+export { o as YearView };

package/dist/components/Dates/InputTimePicker/InputTimePicker.js

@@ -1,88 +1,62 @@
-import { jsxs as j, jsx as t } from "react/jsx-runtime";
-import { useState as f, useEffect as v } from "react";
-import { MASK_VALUES as x, clampTimeToRange as y } from "./InputTimePicker.utils.js";
-import { sanitizeInput as A, formatInputValue as B } from "../Dates.utils.js";
-import { useLocale as E } from "../../../providers/hooks/useLocale/useLocale.js";
-import { Popover as l } from "../../Popover/Popover.js";
-import { Input as F } from "../../Input/Input.js";
-import { OutlineSystemClock as L } from "../../../icons/components/OutlineSystemClock.js";
-import { TimePicker as b } from "./TimePicker/TimePicker.js";
-const N = ({
-  onClick: s,
-  onClear: a,
-  onBlur: d,
-  onScroll: h,
-  value: n,
-  minTime: p,
-  maxTime: c,
-  hoursStep: g,
-  minutesStep: I,
-  withHeader: V,
-  withConfirmationButton: w,
-  className: D,
-  style: k,
-  ...C
-}) => {
-  const { locale: S } = E(), [m, i] = f(!1), [M, o] = f(""), u = x[S], O = (e) => {
-    d?.(e);
-    const r = y(e.target.value, p, c);
-    r ? (o(r), s?.(r)) : o("");
-  }, P = (e) => {
-    const r = A(e.target.value);
-    o(B(r, u));
-  }, T = () => {
-    a?.(), s?.(""), o("");
-  };
-  return v(() => {
-    o(n || "");
-  }, [n]), /* @__PURE__ */ j(
-    l,
-    {
-      isOpen: m,
-      position: "bottom-end",
-      onClose: () => i(!1),
-      children: [
-        /* @__PURE__ */ t(
-          l.Trigger,
-          {
-            className: D,
-            style: { width: "100%", ...k },
-            children: /* @__PURE__ */ t(
-              F,
-              {
-                rightIcon: /* @__PURE__ */ t(L, { onMouseDown: (e) => e.preventDefault() }),
-                ...C,
-                value: M,
-                onChange: P,
-                mask: u,
-                onBlur: O,
-                onFieldClick: () => i(!m),
-                isFilled: !!n,
-                onClear: a && T
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ t(l.Dropdown, { children: /* @__PURE__ */ t("div", { onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ t(
-          b,
-          {
-            value: n,
-            onClick: (e) => {
-              i(!1), s?.(e), o(e);
-            },
-            onScroll: h,
-            hoursStep: g,
-            minutesStep: I,
-            withConfirmationButton: w,
-            withHeader: V,
-            maxTime: c,
-            minTime: p
-          }
-        ) }) })
-      ]
-    }
-  );
-};
-export {
-  N as InputTimePicker
+import { useLocale as e } from "../../../providers/hooks/useLocale/useLocale.js";
+import { Popover as t } from "../../Popover/Popover.js";
+import { formatInputValue as n } from "../Dates.utils.js";
+import { PickerInput as r } from "../PickerInput/PickerInput.js";
+import { TimePicker as i } from "./TimePicker/TimePicker.js";
+import { MASK_VALUES as a, clampTimeToRange as o } from "./InputTimePicker.utils.js";
+import { useEffect as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { OutlineSystemClock as d } from "@alif-ui-test/icons";
+//#region src/components/Dates/InputTimePicker/InputTimePicker.tsx
+var f = ({ onChange: f, onClear: p, onBlur: m, onScroll: h, value: g, minTime: _, maxTime: v, hoursStep: y, minutesStep: b, withHeader: x, withConfirmationButton: S, rightIcon: C = /* @__PURE__ */ l(d, {}), className: w, style: T, ...E }) => {
+	let { locale: D } = e(), [O, k] = c(!1), [A, j] = c(""), M = a[D], N = (e) => {
+		m?.(e);
+		let t = o(e.target.value, _, v, y, b);
+		t ? (j(t), f?.(t)) : j("");
+	}, P = (e) => {
+		j(n(e.target.value, M));
+	}, F = () => {
+		p?.(), f?.(""), j("");
+	};
+	return s(() => {
+		j(g || "");
+	}, [g]), /* @__PURE__ */ u(t, {
+		isOpen: O,
+		position: "bottom-end",
+		onClose: () => k(!1),
+		children: [/* @__PURE__ */ l(t.Trigger, {
+			className: w,
+			style: {
+				width: "100%",
+				...T
+			},
+			children: /* @__PURE__ */ l(r, {
+				...E,
+				rightIcon: C,
+				value: A,
+				onChange: P,
+				mask: M,
+				onBlur: N,
+				onFieldClick: () => k(!O),
+				onClear: p && F
+			})
+		}), /* @__PURE__ */ l(t.Dropdown, {
+			onMouseDown: (e) => e.preventDefault(),
+			children: /* @__PURE__ */ l(i, {
+				value: g,
+				hoursStep: y,
+				minutesStep: b,
+				withConfirmationButton: S,
+				withHeader: x,
+				maxTime: v,
+				minTime: _,
+				onScroll: h,
+				onChange: (e) => {
+					k(!1), f?.(e), j(e);
+				}
+			})
+		})]
+	});
 };
+//#endregion
+export { f as InputTimePicker };

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

@@ -1,17 +1,14 @@
-import { formatTime as p } from "./TimePicker/TimePicker.utils.js";
-const M = {
-  en: "HH:MM",
-  ru: "ЧЧ:ММ",
-  tj: "СС:ДД"
-}, b = (u, a, c) => {
-  const n = u.match(/^([01]\d|2[0-3]):([0-5]\d)$/);
-  if (!n) return null;
-  const [, s, l] = n;
-  let t = Number(s), m = Number(l);
-  const [r, o] = a?.split(":").map(Number) ?? [0, 0], [e, i] = c?.split(":").map(Number) ?? [23, 59];
-  return (t < r || t === r && m < o) && (t = r, m = o), (t > e || t === e && m > i) && (t = e, m = i), p(t, m);
-};
-export {
-  M as MASK_VALUES,
-  b as clampTimeToRange
+import { formatTime as e, roundToNearestStep as t } from "./TimePicker/TimePicker.utils.js";
+//#region src/components/Dates/InputTimePicker/InputTimePicker.utils.ts
+var n = {
+	en: "HH:MM",
+	ru: "ЧЧ:ММ",
+	tj: "СС:ДД"
+}, r = (n, r, i, a = 1, o = 1) => {
+	let s = n.match(/^([01]\d|2[0-3]):([0-5]\d)$/);
+	if (!s) return null;
+	let [, c, l] = s, u = Number(c), d = Number(l), [f, p] = r?.split(":").map(Number) ?? [0, 0], [m, h] = i?.split(":").map(Number) ?? [23, 59];
+	return [u, d] = t(u, d, f, m, p, h, a, o), e(u, d);
 };
+//#endregion
+export { n as MASK_VALUES, r as clampTimeToRange };

package/dist/components/Dates/InputTimePicker/TimePicker/TimeColumn.js

@@ -1,31 +1,27 @@
-import { jsx as i } from "react/jsx-runtime";
-import { ITEM_HEIGHT as n } from "./TimePicker.utils.js";
-import m from "../../Dates.module.css.js";
-import { classNames as l } from "../../../../utils/class-names.js";
-const u = ({
-  list: t,
-  value: c,
-  onChange: s,
-  innerRef: r
-}) => {
-  const a = (o) => {
-    s(o);
-    const e = t.indexOf(o);
-    e >= 0 && r.current && r.current.scrollTo({
-      top: e * n,
-      behavior: "smooth"
-    });
-  };
-  return /* @__PURE__ */ i("div", { ref: r, className: m.timePickerColumn, children: t.map((o) => /* @__PURE__ */ i(
-    "span",
-    {
-      className: l(m.time, o === c && m.activeTime),
-      onClick: () => a(o),
-      children: String(o).padStart(2, "0")
-    },
-    o
-  )) });
-};
-export {
-  u as TimeColumn
+import { resolveTypography as e } from "../../../../utils/typography.js";
+import { classNames as t } from "../../../../utils/class-names.js";
+import n from "../../Dates.module.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Dates/InputTimePicker/TimePicker/TimeColumn.tsx
+var i = ({ list: i, value: a, onChange: o, innerRef: s }) => {
+	let c = (e) => {
+		o(e);
+		let t = i.indexOf(e);
+		t >= 0 && s.current && s.current.scrollTo({
+			top: t * 36,
+			behavior: "smooth"
+		});
+	};
+	return /* @__PURE__ */ r("div", {
+		ref: s,
+		className: n.timePickerColumn,
+		children: i.map((i) => /* @__PURE__ */ r("span", {
+			style: e("body", "s"),
+			onClick: () => c(i),
+			className: t(n.time, "uiFont", i === a && n.activeTime),
+			children: String(i).padStart(2, "0")
+		}, i))
+	});
 };
+//#endregion
+export { i as TimeColumn };

package/dist/components/Dates/InputTimePicker/TimePicker/TimePicker.constants.js

@@ -0,0 +1,12 @@
+//#region src/components/Dates/InputTimePicker/TimePicker/TimePicker.constants.ts
+var e = {
+	en: "Ok",
+	ru: "Ок",
+	tj: "Ок"
+}, t = {
+	en: "Time",
+	ru: "Время",
+	tj: "Вақт"
+};
+//#endregion
+export { e as CONFIRMATION_TEXT, t as TIME_LABEL };