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

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

@@ -1,102 +1,79 @@
-import { jsxs as k, Fragment as F, jsx as e } from "react/jsx-runtime";
-import { useState as C, useRef as R, useMemo as l } from "react";
-import { useInitialTime as S, getTimeBounds as _, getAvailableHours as w, getAvailableMinutes as z, TIME_LABEL as W, CONFIRMATION_TEXT as X, formatTime as q } from "./TimePicker.utils.js";
-import { useScrollSync as y } from "./useScrollSync.js";
-import { TimeColumn as B } from "./TimeColumn.js";
-import i from "../../Dates.module.css.js";
-import { getPickerStyles as D } from "../../Dates.utils.js";
-import { useLocale as G } from "../../../../providers/hooks/useLocale/useLocale.js";
-import { Button as J } from "../../../Button/Button.js";
-import { classNames as b } from "../../../../utils/class-names.js";
-const re = ({
-  value: A,
-  onClick: I,
-  onScroll: m,
-  maxTime: s,
-  minTime: a,
-  hoursStep: c = 1,
-  minutesStep: u = 1,
-  className: P,
-  withHeader: x,
-  withConfirmationButton: E = !0,
-  isStandalone: L = !0
-}) => {
-  const { locale: d } = G(), [O, j] = S(A, a, s), [t, f] = C(O), [r, p] = C(j), v = R(null), h = R(null), [n, o, N, M] = l(
-    () => _(a, s),
-    [a, s]
-  ), H = l(
-    () => w(n, o, c),
-    [n, o, c]
-  ), T = l(
-    () => z(
-      t,
-      n,
-      o,
-      N,
-      M,
-      u
-    ),
-    [t, n, o, N, M, u]
-  );
-  y(
-    v,
-    H,
-    t,
-    f,
-    r,
-    "hr",
-    m
-  ), y(
-    h,
-    T,
-    r,
-    p,
-    t,
-    "min",
-    m
-  );
-  const g = /* @__PURE__ */ k(F, { children: [
-    x && /* @__PURE__ */ e("div", { className: i.timeHeaderContainer, children: /* @__PURE__ */ e("div", { className: i.timeHeader, children: /* @__PURE__ */ e("span", { children: W[d] }) }) }),
-    /* @__PURE__ */ k("div", { className: b(i.timePicker, i.calendarShadow), children: [
-      /* @__PURE__ */ e("div", { className: i.timeOverlay }),
-      /* @__PURE__ */ e(
-        B,
-        {
-          list: H,
-          value: t,
-          onChange: f,
-          innerRef: v
-        }
-      ),
-      /* @__PURE__ */ e(
-        B,
-        {
-          list: T,
-          value: r,
-          onChange: p,
-          innerRef: h
-        }
-      )
-    ] }),
-    E && /* @__PURE__ */ e("div", { className: i.confirmationBlock, children: /* @__PURE__ */ e(
-      J,
-      {
-        size: "s",
-        className: i.confirmationButton,
-        onClick: () => I?.(q(t, r)),
-        children: X[d]
-      }
-    ) })
-  ] });
-  return L ? /* @__PURE__ */ e(
-    "div",
-    {
-      className: b(i.root, P),
-      style: D("time"),
-      children: g
-    }
-  ) : /* @__PURE__ */ e("div", { className: i.inlineTimePickerWrapper, children: g });
-};
-export {
-  re as TimePicker
+import { resolveTypography as e } from "../../../../utils/typography.js";
+import { classNames as t } from "../../../../utils/class-names.js";
+import { useLocale as n } from "../../../../providers/hooks/useLocale/useLocale.js";
+import { Button as r } from "../../../Button/Button.js";
+import i from "../../Dates.module.js";
+import { CONFIRMATION_TEXT as a, TIME_LABEL as o } from "./TimePicker.constants.js";
+import { getPickerStyles as s } from "../../Dates.utils.js";
+import { formatTime as c, getAvailableHours as l, getAvailableMinutes as u, getTimeBounds as d, useInitialTime as f } from "./TimePicker.utils.js";
+import { useScrollSync as p } from "./useScrollSync.js";
+import { TimeColumn as m } from "./TimeColumn.js";
+import { useEffect as h, useMemo as g, useRef as _, useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/Dates/InputTimePicker/TimePicker/TimePicker.tsx
+var S = ({ value: S, onChange: C, onScroll: w, maxTime: T, minTime: E, hoursStep: D = 1, minutesStep: O = 1, className: k, style: A, withHeader: j, withConfirmationButton: M = !0, isStandalone: N = !0, ref: P }) => {
+	let { locale: F } = n(), [I, L] = f(S, E, T, D, O), [R, z] = v(I), [B, V] = v(L), H = _(null), U = _(null), [W, G, K, q] = g(() => d(E, T), [E, T]), J = g(() => l(W, G, D), [
+		W,
+		G,
+		D
+	]), Y = g(() => u(R, W, G, K, q, O), [
+		R,
+		W,
+		G,
+		K,
+		q,
+		O
+	]);
+	p(H, J, R, z, B, "hr", w), p(U, Y, B, V, R, "min", w), h(() => {
+		z(I), V(L);
+	}, [I, L]);
+	let X = /* @__PURE__ */ x(y, { children: [
+		j && /* @__PURE__ */ b("div", {
+			className: i.timeHeaderContainer,
+			children: /* @__PURE__ */ b("div", {
+				className: t(i.timeHeader, "uiFont"),
+				style: e("body", "m"),
+				children: /* @__PURE__ */ b("span", { children: o[F] })
+			})
+		}),
+		/* @__PURE__ */ x("div", {
+			className: t(i.timePicker, i.calendarShadow),
+			children: [
+				/* @__PURE__ */ b("div", { className: i.timeOverlay }),
+				/* @__PURE__ */ b(m, {
+					list: J,
+					value: R,
+					onChange: z,
+					innerRef: H
+				}),
+				/* @__PURE__ */ b(m, {
+					list: Y,
+					value: B,
+					onChange: V,
+					innerRef: U
+				})
+			]
+		}),
+		M && /* @__PURE__ */ b("div", {
+			className: i.confirmationBlock,
+			children: /* @__PURE__ */ b(r, {
+				size: "s",
+				className: i.confirmationButton,
+				onClick: () => C?.(c(R, B)),
+				children: a[F]
+			})
+		})
+	] });
+	return N ? /* @__PURE__ */ b("div", {
+		ref: P,
+		className: t(i.root, k),
+		style: s("time", void 0, A),
+		children: X
+	}) : /* @__PURE__ */ b("div", {
+		ref: P,
+		className: i.inlineTimePickerWrapper,
+		children: X
+	});
 };
+//#endregion
+export { S as TimePicker };

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

@@ -1,38 +1,32 @@
-const l = {
-  en: "Ok",
-  ru: "Ок",
-  tj: "Ок"
-}, u = {
-  en: "Time",
-  ru: "Время",
-  tj: "Вақт"
-}, p = 36, M = (t, n) => Array.from({ length: n - t + 1 }, (m, a) => t + a), x = (t, n) => `${String(t).padStart(2, "0")}:${String(n).padStart(2, "0")}`, h = (t, n, m, a) => {
-  const [e, i] = m?.split(":").map(Number) ?? [0, 0], [r, c] = a?.split(":").map(Number) ?? [23, 59], o = Math.min(Math.max(t, e), r);
-  let s = n;
-  return o === e && (s = Math.max(s, i)), o === r && (s = Math.min(s, c)), [o, s];
-}, T = (t, n, m) => {
-  const a = /* @__PURE__ */ new Date(), [e, i] = t ? t.split(":").map(Number) : [a.getHours(), a.getMinutes()];
-  return h(e, i, n, m);
-}, g = (t, n) => {
-  const [m, a] = t?.split(":").map(Number) ?? [0, 0], [e, i] = n?.split(":").map(Number) ?? [23, 59];
-  return [
-    Math.max(0, Math.min(m, 23)),
-    Math.max(0, Math.min(e, 23)),
-    Math.max(0, Math.min(a, 59)),
-    Math.max(0, Math.min(i, 59))
-  ];
-}, b = (t, n, m) => M(t, n).filter((a) => a % m === 0), f = (t, n, m, a, e, i) => M(0, 59).filter((r) => r % i === 0).filter(
-  (r) => !(t === n && r < a) && !(t === m && r > e)
-);
-export {
-  l as CONFIRMATION_TEXT,
-  p as ITEM_HEIGHT,
-  u as TIME_LABEL,
-  h as clampTime,
-  x as formatTime,
-  b as getAvailableHours,
-  f as getAvailableMinutes,
-  g as getTimeBounds,
-  M as range,
-  T as useInitialTime
-};
+//#region src/components/Dates/InputTimePicker/TimePicker/TimePicker.utils.ts
+var e = (e, t) => Array.from({ length: t - e + 1 }, (t, n) => e + n), t = (e, t) => `${String(e).padStart(2, "0")}:${String(t).padStart(2, "0")}`, n = (e, t, n, r) => {
+	let [i, a] = n?.split(":").map(Number) ?? [0, 0], [o, s] = r?.split(":").map(Number) ?? [23, 59], c = Math.min(Math.max(e, i), o), l = t;
+	return c === i && (l = Math.max(l, a)), c === o && (l = Math.min(l, s)), [c, l];
+}, r = (t, r, i, a, o, s, c, l) => {
+	let u = t, d = r, f = e(0, 59).filter((e) => e % l === 0), p = f[0], m = Math.abs(d - p);
+	for (let e of f) {
+		let t = Math.abs(d - e);
+		t < m && (m = t, p = e);
+	}
+	p === 0 && d > 30 && (u += 1);
+	let h = e(i, a).filter((e) => e % c === 0), g = h[0];
+	m = Math.abs(u - g);
+	for (let e of h) {
+		let t = Math.abs(u - e);
+		t < m && (m = t, g = e);
+	}
+	return n(g, p, `${i.toString().padStart(2, "0")}:${o.toString().padStart(2, "0")}`, `${a.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`);
+}, i = (e, t, n, i = 1, a = 1) => {
+	let o = /* @__PURE__ */ new Date(), [s, c] = e ? e.split(":").map(Number) : [o.getHours(), o.getMinutes()], [l, u] = t?.split(":").map(Number) ?? [0, 0], [d, f] = n?.split(":").map(Number) ?? [23, 59];
+	return r(s, c, l, d, u, f, i, a);
+}, a = (e, t) => {
+	let [n, r] = e?.split(":").map(Number) ?? [0, 0], [i, a] = t?.split(":").map(Number) ?? [23, 59];
+	return [
+		Math.max(0, Math.min(n, 23)),
+		Math.max(0, Math.min(i, 23)),
+		Math.max(0, Math.min(r, 59)),
+		Math.max(0, Math.min(a, 59))
+	];
+}, o = (t, n, r) => e(t, n).filter((e) => e % r === 0), s = (t, n, r, i, a, o) => e(0, 59).filter((e) => e % o === 0).filter((e) => !(t === n && e < i) && !(t === r && e > a));
+//#endregion
+export { t as formatTime, o as getAvailableHours, s as getAvailableMinutes, a as getTimeBounds, r as roundToNearestStep, i as useInitialTime };

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

@@ -1,27 +1,37 @@
-import { useEffect as l } from "react";
-import { ITEM_HEIGHT as T, formatTime as p } from "./TimePicker.utils.js";
-const x = (t, o, i, u, n, s, c) => {
-  l(() => {
-    const r = o.indexOf(i);
-    r >= 0 && t.current && t.current.scrollTo({ top: r * T, behavior: "auto" });
-  }, [o, i, t]), l(() => {
-    if (!t.current) return;
-    let r;
-    const m = () => {
-      clearTimeout(r), r = setTimeout(() => {
-        if (!t.current) return;
-        const v = Math.round(t.current.scrollTop / T), e = o[v];
-        if (e !== void 0 && u(e), c) {
-          const E = s === "hr" ? p(e, n) : p(n, e);
-          c(E);
-        }
-      }, 100);
-    }, d = t.current;
-    return d.addEventListener("scroll", m), () => {
-      d.removeEventListener("scroll", m), clearTimeout(r);
-    };
-  }, [o, u, t, c, s, n]);
-};
-export {
-  x as useScrollSync
+import { formatTime as e } from "./TimePicker.utils.js";
+import { useEffect as t } from "react";
+//#region src/components/Dates/InputTimePicker/TimePicker/useScrollSync.ts
+var n = (n, r, i, a, o, s, c) => {
+	t(() => {
+		let e = r.indexOf(i);
+		e >= 0 && n.current && n.current.scrollTo({
+			top: e * 36,
+			behavior: "auto"
+		});
+	}, [
+		r,
+		i,
+		n
+	]), t(() => {
+		if (!n.current) return;
+		let t, i = () => {
+			clearTimeout(t), t = setTimeout(() => {
+				if (!n.current) return;
+				let t = r[Math.round(n.current.scrollTop / 36)];
+				t !== void 0 && a(t), c && c(s === "hr" ? e(t, o) : e(o, t));
+			}, 100);
+		}, l = n.current;
+		return l.addEventListener("scroll", i), () => {
+			l.removeEventListener("scroll", i), clearTimeout(t);
+		};
+	}, [
+		r,
+		a,
+		n,
+		c,
+		s,
+		o
+	]);
 };
+//#endregion
+export { n as useScrollSync };

package/dist/components/Dates/InputYearPicker/InputYearPicker.js

@@ -1,100 +1,77 @@
-import { jsxs as F, jsx as o } from "react/jsx-runtime";
-import { useState as w, useMemo as S, useEffect as x } from "react";
-import { defineMask as z, formatValue as y, parseRangeInput as E, isValidYear as L } from "./InputYearPicker.utils.js";
-import { getPopoverWidth as T, sanitizeInput as q, formatInputValue as v } from "../Dates.utils.js";
-import { useLocale as G } from "../../../providers/hooks/useLocale/useLocale.js";
-import { Popover as f } from "../../Popover/Popover.js";
-import { Input as H } from "../../Input/Input.js";
-import { YearPicker as J } from "./YearPicker/YearPicker.js";
-import { OutlineSystemCalendar as K } from "../../../icons/components/OutlineSystemCalendar.js";
-const R = ({
-  value: i,
-  isRange: n,
-  maxYear: l = 2100,
-  minYear: u = 1900,
-  disabledYears: P,
-  onClear: m,
-  onChange: s,
-  onBlur: D,
-  options: M,
-  className: V,
-  style: g,
-  pickerWidth: d,
-  ...C
-}) => {
-  const { locale: h } = G(), [I, p] = w(!1), [O, t] = w(""), a = S(
-    () => z(!!n, h),
-    [n, h]
-  ), b = (e) => {
-    const r = q(e.target.value);
-    t(a ? v(r, a) : r);
-  }, j = (e) => {
-    D?.(e);
-    const r = e.target.value.trim();
-    if (!r) {
-      s?.(null);
-      return;
-    }
-    if (n) {
-      const c = E(r, u, l);
-      s?.(c), t(c ? y(c) : "");
-      return;
-    }
-    const k = parseInt(r, 10);
-    L(k, u, l) ? s?.(k) : t("");
-  }, A = (e) => {
-    !n || Array.isArray(e) && e[0] && e[1] ? (s?.(e), p(!1)) : typeof e == "number" && t(e + " – ");
-  }, B = () => {
-    m?.(), t(""), s?.(null);
-  };
-  return x(() => {
-    t(y(i));
-  }, [i]), /* @__PURE__ */ F(
-    f,
-    {
-      position: "bottom-start",
-      width: T(d),
-      isOpen: I,
-      onClose: () => p(!1),
-      children: [
-        /* @__PURE__ */ o(
-          f.Trigger,
-          {
-            className: V,
-            style: { width: "100%", ...g },
-            children: /* @__PURE__ */ o(
-              H,
-              {
-                rightIcon: /* @__PURE__ */ o(K, { onMouseDown: (e) => e.preventDefault() }),
-                ...C,
-                value: O,
-                onChange: b,
-                onBlur: j,
-                mask: a,
-                onFieldClick: () => p(!I),
-                isFilled: !!i,
-                onClear: m && B
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ o(f.Dropdown, { children: /* @__PURE__ */ o("div", { onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ o(
-          J,
-          {
-            value: i,
-            isRange: n,
-            minYear: u,
-            maxYear: l,
-            disabledYears: P,
-            onPickerChange: A,
-            options: M,
-            pickerWidth: d
-          }
-        ) }) })
-      ]
-    }
-  );
-};
-export {
-  R as InputYearPicker
+import { useLocale as e } from "../../../providers/hooks/useLocale/useLocale.js";
+import { Popover as t } from "../../Popover/Popover.js";
+import { formatInputValue as n, getPopoverWidth as r } from "../Dates.utils.js";
+import { YearPicker as i } from "./YearPicker/YearPicker.js";
+import { defineMask as a, formatValue as o, isValidYear as s, parseRangeInput as c } from "./InputYearPicker.utils.js";
+import { PickerInput as l } from "../PickerInput/PickerInput.js";
+import { useEffect as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { OutlineSystemCalendar as m } from "@alif-ui-test/icons";
+//#region src/components/Dates/InputYearPicker/InputYearPicker.tsx
+var h = ({ value: h, isRange: g, maxYear: _ = 2100, minYear: v = 1900, disabledYears: y, onClear: b, onChange: x, onBlur: S, options: C, className: w, style: T, pickerWidth: E, rightIcon: D = /* @__PURE__ */ f(m, {}), ...O }) => {
+	let { locale: k } = e(), [A, j] = d(!1), [M, N] = d(""), P = a(g, k), F = (e) => {
+		N(n(e.target.value, P));
+	}, I = () => {
+		b?.(), N(""), x?.(null);
+	}, L = (e) => {
+		S?.(e);
+		let t = e.target.value.trim();
+		if (!t) {
+			I();
+			return;
+		}
+		let n = (e) => y?.includes(e) ?? !1;
+		if (g) {
+			let e = c(t, v, _);
+			if (e && (n(e[0]) || n(e[1]))) {
+				I();
+				return;
+			}
+			x?.(e), N(e ? o(e) : "");
+			return;
+		}
+		let r = parseInt(t, 10);
+		s(r, v, _) && !n(r) ? x?.(r) : I();
+	}, R = (e) => {
+		!g || Array.isArray(e) && e[0] && e[1] ? (x?.(e), j(!1)) : typeof e == "number" && N(e + " – ");
+	};
+	return u(() => {
+		N(o(h));
+	}, [h]), /* @__PURE__ */ p(t, {
+		position: "bottom-start",
+		width: r(E),
+		isOpen: A,
+		onClose: () => j(!1),
+		children: [/* @__PURE__ */ f(t.Trigger, {
+			className: w,
+			style: {
+				width: "100%",
+				...T
+			},
+			children: /* @__PURE__ */ f(l, {
+				...O,
+				rightIcon: D,
+				value: M,
+				onChange: F,
+				onBlur: L,
+				mask: P,
+				onFieldClick: () => j(!A),
+				onClear: b && I
+			})
+		}), /* @__PURE__ */ f(t.Dropdown, {
+			onMouseDown: (e) => e.preventDefault(),
+			children: /* @__PURE__ */ f(i, {
+				value: h,
+				isRange: g,
+				minYear: v,
+				maxYear: _,
+				disabledYears: y,
+				onPickerChange: R,
+				options: C,
+				pickerWidth: E
+			})
+		})]
+	});
 };
+//#endregion
+export { h as InputYearPicker };

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

@@ -1,21 +1,18 @@
-const u = {
-  year: {
-    en: "YYYY",
-    ru: "ГГГГ",
-    tj: "СССС"
-  },
-  year_range: {
-    en: "YYYY – YYYY",
-    ru: "ГГГГ – ГГГГ",
-    tj: "СССС – СССС"
-  }
-}, a = (r, t = "ru") => r ? u.year_range[t] : u.year[t], Y = (r, t, e) => Number.isInteger(r) && r >= t && r <= e, i = (r, t, e) => {
-  const n = r.split(/[––]/).map((s) => parseInt(s.trim(), 10));
-  return n.length === 2 && n.every((s) => Y(s, t, e)) ? [Math.min(n[0], n[1]), Math.max(n[0], n[1])] : null;
-}, o = (r) => r == null ? "" : Array.isArray(r) ? r.every((t) => t != null) ? `${r[0]} – ${r[1]}` : r[0]?.toString() ?? "" : r.toString();
-export {
-  a as defineMask,
-  o as formatValue,
-  Y as isValidYear,
-  i as parseRangeInput
-};
+//#region src/components/Dates/InputYearPicker/InputYearPicker.utils.ts
+var e = {
+	year: {
+		en: "YYYY",
+		ru: "ГГГГ",
+		tj: "СССС"
+	},
+	year_range: {
+		en: "YYYY – YYYY",
+		ru: "ГГГГ – ГГГГ",
+		tj: "СССС – СССС"
+	}
+}, t = (t, n = "ru") => t ? e.year_range[n] : e.year[n], n = (e, t, n) => Number.isInteger(e) && e >= t && e <= n, r = (e, t, r) => {
+	let i = e.split(/[––]/).map((e) => parseInt(e.trim(), 10));
+	return i.length === 2 && i.every((e) => n(e, t, r)) ? [Math.min(i[0], i[1]), Math.max(i[0], i[1])] : null;
+}, i = (e) => e == null ? "" : Array.isArray(e) ? e.every((e) => e != null) ? `${e[0]} – ${e[1]}` : e[0]?.toString() ?? "" : e.toString();
+//#endregion
+export { t as defineMask, i as formatValue, n as isValidYear, r as parseRangeInput };