urfu-ui-kit-react 2.1.7-next.1 → 2.1.7-next.3

package/README.md

@@ -90,9 +90,9 @@ npm run docsb
 1. Обновить историю версий и документацию затронутых компонентов.
 2. Проверить lint, тесты, сборку библиотеки и документации; проверить локальные tarball в потребителях.
 3. Vanilla берётся из соседней папки монорепозитория `packages/vanilla` и собирается внутрь пакета: зависимости `urfu-ui-kit-vanilla` нет, в npm vanilla отдельно не выходит (с 20.10.2026). Собирать и тестировать кит — только в полном checkout монорепозитория.
-4. Публикацию выполняет владелец выпуска. Обновление документации само по себе не меняет версию пакета.
+4. Публикацию выполняет CI: версию поднимают вручную в `package.json` и `docs/versioning.md` и вливают в `main`, CI кладёт её в очередь npm, владелец пакета в npm подтверждает с 2FA, затем CI ставит тег `react-vX.Y.Z` и выкладывает документацию — [docs/ci.md](../../docs/ci.md#выпуск-версии). Обновление документации само по себе не меняет версию пакета.
 
-Версию поднимают вручную в `package.json` и `docs/versioning.md` и коммитят. `npm run pub` номер не меняет: прогоняет тесты, сборку и контракт пакета, публикует версию из `package.json` и ставит тег `react-vX.Y.Z`; повторный запуск после сбоя публикует ту же версию. `npm run pub:next` — то же для предварительной версии `X.Y.Z-next.N` с тегом `next`.
+Запасной путь, если CI недоступен, — `npm run pub` в этой папке. Он номер не меняет: прогоняет тесты, сборку и контракт пакета, публикует версию из `package.json` и ставит тег `react-vX.Y.Z`; повторный запуск после сбоя публикует ту же версию. `npm run pub:next` — то же для предварительной версии `X.Y.Z-next.N` с тегом `next`.
 
 **Важно:** это публичная библиотека; все изменения API ломают потребителей (meetings, youth-science, kpis-npr). Избегайте breaking changes без координации.
 

package/dist/components/Calendar/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8F,MAAM,OAAO,CAAC;AAInH,OAAO,4CAA4C,CAAC;AACpD,OAAO,KAAK,EAAwB,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AASjF,OAAO,iBAAiB,CAAC;AAgEzB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsZjD,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8F,MAAM,OAAO,CAAC;AAInH,OAAO,4CAA4C,CAAC;AACpD,OAAO,KAAK,EAAwB,kBAAkB,EAAiB,MAAM,kBAAkB,CAAC;AAShG,OAAO,iBAAiB,CAAC;AAgEzB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkejD,CAAC"}

package/dist/components/Calendar/Calendar.js

@@ -1,40 +1,42 @@
-import { jsx as r, jsxs as h, Fragment as Se } from "react/jsx-runtime";
-import { getFieldAccessibility$u as De } from "../../shared/fieldAccessibility.js";
-import { useRef as Ie, useState as f, useInsertionEffect as Oe, useEffect as O, useMemo as Pe, useContext as Me, createContext as ze } from "react";
-import { createPortal as Ae } from "react-dom";
-import Ne, { registerLocale$u as Ee } from "../../vendor/react-datepicker/dist/es/index.js";
+import { jsx as o, jsxs as P, Fragment as ze } from "react/jsx-runtime";
+import { getFieldAccessibility$u as We } from "../../shared/fieldAccessibility.js";
+import { useRef as ne, useState as v, useInsertionEffect as Ge, useEffect as _, useMemo as F, useContext as Ve, createContext as Ke } from "react";
+import { createPortal as Ye } from "react-dom";
+import Je, { registerLocale$u as Qe } from "../../vendor/react-datepicker/dist/es/index.js";
 /* empty css                                                  */
-import { MaskedDateInput$u as $e } from "./MaskedDateInput.js";
-import { Tooltip$u as je } from "../Tooltip/Tooltip.js";
-import { ru$u as Fe } from "../../vendor/date-fns/locale/ru.js";
+import { MaskedDateInput$u as Xe } from "./MaskedDateInput.js";
+import { Tooltip$u as Ze } from "../Tooltip/Tooltip.js";
+import { ru$u as Ue } from "../../vendor/date-fns/locale/ru.js";
 /* empty css          */
-import { useMountTransition$u as Le } from "../../hooks/useMountTransition.js";
-import { POPUP_TRANSITION_MS$u as Te } from "../../shared/popupTransition.js";
-import { useAutoId$u as Re } from "../../hooks/useAutoId.js";
-import { isCompact$u as _e, sizeClassName$u as qe } from "../../shared/size.js";
-import { getPortalScopeProps$u as Be } from "../../shared/uiKitDefaults.js";
-import { CalendarSelect$u as G } from "./CalendarSelect.js";
-import { resolveValidation$u as We } from "../../vanilla/core/validation.js";
-import { getYear$u as P } from "../../vendor/date-fns/getYear.js";
-import { getMonth$u as Ge } from "../../vendor/date-fns/getMonth.js";
-Ee(
+import { useMountTransition$u as Re } from "../../hooks/useMountTransition.js";
+import { POPUP_TRANSITION_MS$u as et } from "../../shared/popupTransition.js";
+import { useAutoId$u as tt } from "../../hooks/useAutoId.js";
+import { isCompact$u as rt, sizeClassName$u as ot } from "../../shared/size.js";
+import { getPortalScopeProps$u as nt } from "../../shared/uiKitDefaults.js";
+import { CalendarSelect$u as ae } from "./CalendarSelect.js";
+import { resolveValidation$u as at } from "../../vanilla/core/validation.js";
+import { getYear$u as B } from "../../vendor/date-fns/getYear.js";
+import { getMonth$u as it } from "../../vendor/date-fns/getMonth.js";
+import { differenceInCalendarDays$u as ie } from "../../vendor/date-fns/differenceInCalendarDays.js";
+import { isSameDay$u as lt } from "../../vendor/date-fns/isSameDay.js";
+Qe(
   "ru",
-  Fe
+  Ue
 );
-const H = (a) => {
-  if (!a) return null;
-  const l = new Date(a);
-  return l.setHours(12, 0, 0, 0), l;
+const b = (c) => {
+  if (!c) return null;
+  const u = new Date(c);
+  return u.setHours(12, 0, 0, 0), u;
 };
-function He(a, l, w = 1) {
+function ct(c, u, N = 1) {
   return {
     *[Symbol.iterator]() {
-      for (let s = a; s < l; s += w)
-        yield s;
+      for (let p = c; p < u; p += N)
+        yield p;
     }
   };
 }
-const x = [
+const O = [
   "Январь",
   "Февраль",
   "Март",
@@ -47,125 +49,161 @@ const x = [
   "Октябрь",
   "Ноябрь",
   "Декабрь"
-], Ve = [
-  ...He(P(/* @__PURE__ */ new Date()) - 100, P(/* @__PURE__ */ new Date()) + 15, 1)
-], V = ze(null), Ye = ({ children: a }) => {
-  const l = Me(V);
-  return l ? Ae(/* @__PURE__ */ r("div", { children: a }), l) : /* @__PURE__ */ r(Se, { children: a });
-}, mt = ({
-  "aria-label": a,
-  "aria-labelledby": l,
-  "aria-describedby": w,
-  title: s = "",
-  selected: g,
-  onChange: d,
-  isFilter: Y,
-  placeholder: J = "Выберите дату",
-  inline: k,
-  portalOn: M = !1,
-  open: z,
-  greyIcon: K,
-  isClearable: y,
-  setOptionState: A,
-  tableView: N,
-  size: E,
-  id: Q,
-  required: $ = !1,
-  validationText: X = "Заполните поле",
-  validationOn: Z,
-  error: U,
-  validationOnWithoutText: ee,
-  absoluteValidationText: te,
-  lineUp: C = !1,
-  rowGap: re = 4,
-  columnGap: oe = 20,
-  styleInputContainer: ie,
-  styleTitle: ne,
-  disabled: j,
-  wheelEdit: ae = !1,
-  showHint: le = !1,
-  hintText: ce = "Используйте колесо мыши или стрелки ↑↓ для изменения значения",
-  tooltipMaxWidth: se = 300
+], st = [
+  ...ct(B(/* @__PURE__ */ new Date()) - 100, B(/* @__PURE__ */ new Date()) + 15, 1)
+], le = Ke(null), ut = ({ children: c }) => {
+  const u = Ve(le);
+  return u ? Ye(/* @__PURE__ */ o("div", { children: c }), u) : /* @__PURE__ */ o(ze, { children: c });
+}, Tt = ({
+  "aria-label": c,
+  "aria-labelledby": u,
+  "aria-describedby": N,
+  title: p = "",
+  selected: T,
+  onChange: f,
+  range: d = !1,
+  startDate: H,
+  endDate: q,
+  onRangeChange: A,
+  isFilter: ce,
+  placeholder: se,
+  inline: E,
+  portalOn: z = !1,
+  open: W,
+  greyIcon: ue,
+  isClearable: x,
+  setOptionState: G,
+  tableView: V,
+  size: K,
+  id: de,
+  required: Y = !1,
+  validationText: pe = "Заполните поле",
+  validationOn: me,
+  error: fe,
+  validationOnWithoutText: ye,
+  absoluteValidationText: ve,
+  lineUp: $ = !1,
+  rowGap: be = 4,
+  columnGap: he = 20,
+  styleInputContainer: ge,
+  styleTitle: xe,
+  disabled: J,
+  wheelEdit: we = !1,
+  showHint: ke = !1,
+  hintText: Ce = "Используйте колесо мыши или стрелки ↑↓ для изменения значения",
+  tooltipMaxWidth: De = 300
 }) => {
-  const ue = _e(E, N), de = qe(E, N), b = We({ error: U, validationOn: Z, validationOnWithoutText: ee, validationText: X }), u = Re(Q, "u-calendar"), F = `u-calendar-portal-${u}`, S = Ie(null), [pe] = f(
+  const Se = rt(K, V), Ie = ot(K, V), w = at({ error: fe, validationOn: me, validationOnWithoutText: ye, validationText: pe }), m = tt(de, "u-calendar"), Q = `u-calendar-portal-${m}`, j = ne(null), X = ne(null), [Me] = v(
     () => typeof document > "u" ? null : document.createElement("div")
-  ), i = M && !k ? pe : null, v = De(u, s, $, b, {
-    "aria-label": a,
-    "aria-labelledby": l,
-    "aria-describedby": w
-  }), [m, D] = f(!1), {
-    shouldRender: I,
-    status: me,
-    isAnimated: fe
-  } = Le({
-    isOpen: !!(z || m),
-    duration: Te
-  }), ye = fe && me === "exiting";
-  Oe(() => {
-    if (!i || !I) return;
-    i.id = F;
-    const e = Be()["data-u-kit"];
-    return e ? i.setAttribute("data-u-kit", e) : i.removeAttribute("data-u-kit"), document.body.appendChild(i), () => i.remove();
-  }, [i, I, F]);
-  const [L, p] = f(null), [be, ve] = f(!1), [he, xe] = f(!1);
-  O(() => {
+  ), a = z && !E ? Me : null, k = We(m, p, Y, w, {
+    "aria-label": c,
+    "aria-labelledby": u,
+    "aria-describedby": N
+  }), [h, C] = v(!1), {
+    shouldRender: D,
+    status: Pe,
+    isAnimated: _e
+  } = Re({
+    isOpen: !!(W || h),
+    duration: et
+  }), Oe = _e && Pe === "exiting";
+  Ge(() => {
+    if (!a || !D) return;
+    a.id = Q;
+    const e = nt()["data-u-kit"];
+    return e ? a.setAttribute("data-u-kit", e) : a.removeAttribute("data-u-kit"), document.body.appendChild(a), () => a.remove();
+  }, [a, D, Q]);
+  const [Z, y] = v(null), [Ne, Te] = v(!1), [Ae, Ee] = v(!1);
+  _(() => {
     const e = () => {
-      xe(window.innerWidth <= 900);
+      Ee(window.innerWidth <= 900);
     };
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []);
-  const T = Pe(() => H(g), [g]), R = (e, t) => {
-    const n = (t == null ? void 0 : t.type) === "click" || (t == null ? void 0 : t.type) === "keydown" ? "calendar" : "input";
+  const U = F(() => b(T), [T]), R = (e, t) => {
+    const r = (t == null ? void 0 : t.type) === "click" || (t == null ? void 0 : t.type) === "keydown" ? "calendar" : "input";
     if (!e) {
-      d == null || d("", { source: n });
+      f == null || f("", { source: r });
       return;
     }
-    const c = H(e);
-    d == null || d(c, { source: n });
+    const i = b(e);
+    f == null || f(i, { source: r });
+  }, l = F(() => b(H), [H]), s = F(() => b(q), [q]), $e = (e, t) => {
+    var M;
+    const r = (t == null ? void 0 : t.type) === "click" || (t == null ? void 0 : t.type) === "keydown" ? "calendar" : "input", [i, g] = e ?? [null, null];
+    A == null || A([b(i), b(g)], { source: r }), r === "calendar" && i && g && C(!1);
+    const I = g ?? i;
+    r === "input" && I && ((M = X.current) == null || M.setPreSelection(I));
   };
-  O(() => {
+  _(() => {
     const e = (t) => {
-      const n = S.current, c = n == null ? void 0 : n.querySelector(":scope > div > div > input");
-      m && (c && c.focus(), n && !n.contains(t.target) && !(i != null && i.contains(t.target)) && (D(!1), c && c.blur()));
+      const r = j.current, i = r == null ? void 0 : r.querySelector(":scope > div > div > input");
+      h && (i && i.focus(), r && !r.contains(t.target) && !(a != null && a.contains(t.target)) && (C(!1), i && i.blur()));
     };
     return document.addEventListener("click", e), () => {
       document.removeEventListener("click", e);
     };
-  }, [m, i]), O(() => {
+  }, [h, a]), _(() => {
     var e;
-    if (y) {
-      const t = ((e = S.current) == null ? void 0 : e.querySelectorAll(".react-datepicker__close-icon")) ?? [];
-      for (const n of t)
-        n.innerHTML = '<i class="u-selectbox-select-icon-cross u-calendar-clear-icon"></i>';
+    if (x) {
+      const t = ((e = j.current) == null ? void 0 : e.querySelectorAll(".react-datepicker__close-icon")) ?? [];
+      for (const r of t)
+        r.innerHTML = '<i class="u-selectbox-select-icon-cross u-calendar-clear-icon"></i>';
     }
-  }, [g]);
-  const _ = (e) => typeof e == "number" ? `calc(${e} * var(--u-preset-unit, 1px))` : String(e), we = (e) => typeof e == "number" ? `calc(${e} * var(--u-unit, 1px))` : String(e), q = (e) => {
+  }, [T, l == null ? void 0 : l.getTime(), s == null ? void 0 : s.getTime()]);
+  const ee = (e) => typeof e == "number" ? `calc(${e} * var(--u-preset-unit, 1px))` : String(e), je = (e) => typeof e == "number" ? `calc(${e} * var(--u-unit, 1px))` : String(e), te = (e) => {
     const t = e.target;
-    t.closest(".react-datepicker") && !t.closest(".react-datepicker__day") || D(!m);
-  }, B = /* @__PURE__ */ r(
-    Ne,
+    t.closest(".react-datepicker") && (d || !t.closest(".react-datepicker__day")) || C(!h);
+  }, Le = d ? {
+    selectsRange: !0,
+    // Клик раньше выбранного начала завершает период «кликнутый день — прежнее начало», как и в Vue.
+    swapRange: !0,
+    startDate: l,
+    endDate: s,
+    onChange: (e, t) => $e(e, t)
+  } : {
+    selected: U,
+    onChange: (e, t) => R(e, t)
+  }, [S, L] = v(null), Fe = (l == null ? void 0 : l.getTime()) ?? null, Be = (s == null ? void 0 : s.getTime()) ?? null;
+  _(() => {
+    L(null);
+  }, [Fe, Be, D]);
+  const He = (e) => {
+    if (!l || s) return "";
+    const t = S === null ? 0 : ie(l, S);
+    if (S !== null && t > 0) {
+      const r = ie(e, S);
+      return r === 0 ? "react-datepicker__day--in-selecting-range react-datepicker__day--selecting-range-start" : r === t ? "react-datepicker__day--in-selecting-range react-datepicker__day--selecting-range-end" : r > 0 && r < t ? "react-datepicker__day--in-selecting-range" : "";
+    }
+    return lt(e, l) ? "u-calendar-day--range-pending" : "";
+  }, qe = d ? !!(l || s) : !!U, re = /* @__PURE__ */ o(
+    Je,
     {
-      ariaLabelledBy: v["aria-labelledby"],
-      ariaDescribedBy: v["aria-describedby"],
-      ariaInvalid: v["aria-invalid"] ? "true" : void 0,
-      ariaRequired: v["aria-required"] ? "true" : void 0,
-      open: k ? z || m : I,
-      inline: k,
-      popperContainer: i ? Ye : void 0,
+      ref: X,
+      ariaLabelledBy: k["aria-labelledby"],
+      ariaDescribedBy: k["aria-describedby"],
+      ariaInvalid: k["aria-invalid"] ? "true" : void 0,
+      ariaRequired: k["aria-required"] ? "true" : void 0,
+      open: E ? W || h : D,
+      inline: E,
+      popperContainer: a ? ut : void 0,
       popperPlacement: "bottom-end",
-      popperClassName: [ye ? "u-calendar-popper--closing" : "", M ? "u-calendar-popper--portal" : ""].filter(Boolean).join(" ") || void 0,
-      isClearable: y,
+      popperClassName: [Oe ? "u-calendar-popper--closing" : "", z ? "u-calendar-popper--portal" : ""].filter(Boolean).join(" ") || void 0,
+      dayClassName: d ? He : void 0,
+      onDayMouseEnter: d ? (e) => L(s ? null : e.getTime()) : void 0,
+      onMonthMouseLeave: d ? () => L(null) : void 0,
+      isClearable: x,
       ariaLabelClose: "Очистить",
-      disabled: j,
+      disabled: J,
       renderCustomHeader: ({
         date: e,
         changeYear: t,
-        changeMonth: n,
-        decreaseMonth: c,
-        increaseMonth: ge,
-        prevMonthButtonDisabled: ke,
-        nextMonthButtonDisabled: Ce
-      }) => /* @__PURE__ */ h(
+        changeMonth: r,
+        decreaseMonth: i,
+        increaseMonth: g,
+        prevMonthButtonDisabled: I,
+        nextMonthButtonDisabled: M
+      }) => /* @__PURE__ */ P(
         "div",
         {
           style: {
@@ -178,26 +216,26 @@ const x = [
             alignItems: "center"
           },
           children: [
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ o(
               "button",
               {
                 style: {
                   width: "calc(25 * var(--u-unit, 1px))",
-                  color: "#1E4391",
+                  color: "var(--u-color-primary, #1E4391)",
                   display: "flex",
                   // Без внутреннего отступа: стрелка прижата к краю карточки,
                   // а не поджата к году и месяцу.
                   padding: 0,
                   cursor: "pointer"
                 },
-                onClick: (o) => {
-                  o.preventDefault(), o.stopPropagation(), p(null), c();
+                onClick: (n) => {
+                  n.preventDefault(), n.stopPropagation(), y(null), i();
                 },
-                disabled: ke,
-                children: /* @__PURE__ */ r("i", { className: "u-icon icon-left", style: { fontSize: "calc(20 * var(--u-unit, 1px))" } })
+                disabled: I,
+                children: /* @__PURE__ */ o("i", { className: "u-icon icon-left", style: { fontSize: "calc(20 * var(--u-unit, 1px))" } })
               }
             ),
-            /* @__PURE__ */ h(
+            /* @__PURE__ */ P(
               "div",
               {
                 style: {
@@ -208,149 +246,149 @@ const x = [
                   gap: "calc(8 * var(--u-unit, 1px))"
                 },
                 children: [
-                  /* @__PURE__ */ r(
-                    G,
+                  /* @__PURE__ */ o(
+                    ae,
                     {
-                      value: P(e),
-                      options: Ve.map((o) => ({ value: o, label: o })),
-                      onChange: (o) => t(Number(o)),
+                      value: B(e),
+                      options: st.map((n) => ({ value: n, label: n })),
+                      onChange: (n) => t(Number(n)),
                       fallbackValue: (/* @__PURE__ */ new Date()).getFullYear(),
                       width: 45,
-                      isOpen: L === "year",
-                      onOpen: () => p("year"),
-                      onClose: () => p(null)
+                      isOpen: Z === "year",
+                      onOpen: () => y("year"),
+                      onClose: () => y(null)
                     }
                   ),
-                  /* @__PURE__ */ r(
-                    G,
+                  /* @__PURE__ */ o(
+                    ae,
                     {
-                      value: x[Ge(e)],
-                      options: x.map((o) => ({ value: o, label: o })),
-                      onChange: (o) => {
-                        const W = String(o);
-                        n(x.indexOf(W)), A && A(W);
+                      value: O[it(e)],
+                      options: O.map((n) => ({ value: n, label: n })),
+                      onChange: (n) => {
+                        const oe = String(n);
+                        r(O.indexOf(oe)), G && G(oe);
                       },
-                      fallbackValue: x[(/* @__PURE__ */ new Date()).getMonth()],
+                      fallbackValue: O[(/* @__PURE__ */ new Date()).getMonth()],
                       width: 85,
-                      isOpen: L === "month",
-                      onOpen: () => p("month"),
-                      onClose: () => p(null)
+                      isOpen: Z === "month",
+                      onOpen: () => y("month"),
+                      onClose: () => y(null)
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ o(
               "button",
               {
                 style: {
                   width: "calc(25 * var(--u-unit, 1px))",
-                  color: "#1E4391",
+                  color: "var(--u-color-primary, #1E4391)",
                   display: "flex",
                   justifyContent: "flex-end",
                   padding: 0,
                   cursor: "pointer"
                 },
-                onClick: (o) => {
-                  o.preventDefault(), o.stopPropagation(), p(null), ge();
+                onClick: (n) => {
+                  n.preventDefault(), n.stopPropagation(), y(null), g();
                 },
-                disabled: Ce,
-                children: /* @__PURE__ */ r("i", { className: "u-icon icon-right", style: { fontSize: "calc(20 * var(--u-unit, 1px))" } })
+                disabled: M,
+                children: /* @__PURE__ */ o("i", { className: "u-icon icon-right", style: { fontSize: "calc(20 * var(--u-unit, 1px))" } })
               }
             )
           ]
         }
       ),
-      placeholderText: J,
-      customInput: /* @__PURE__ */ r(
-        $e,
+      placeholderText: se ?? (d ? "Выберите период" : "Выберите дату"),
+      customInput: /* @__PURE__ */ o(
+        Xe,
         {
-          "aria-label": a,
-          id: `custom-input-mask-${u}`,
-          isClearable: y,
-          wheelEdit: ae,
+          "aria-label": c,
+          id: `custom-input-mask-${m}`,
+          isClearable: x,
+          range: d,
+          wheelEdit: we && !d,
           onWheelDate: (e) => R(e),
-          onOpenCalendar: () => D(!0),
-          onFocusChange: ve
+          onOpenCalendar: () => C(!0),
+          onFocusChange: Te
         }
       ),
-      selected: T,
-      onChange: (e, t) => R(e, t),
+      ...Le,
       strictParsing: !0,
       locale: "ru",
-      className: (Y ? "custom-input dpc-filter custom-input-filter" : ue ? "custom-input dpc-table custom-input-table" : `${K ? "dpc-grey" : "dpc"} custom-input`) + (b.hasError ? " u-input-required" : "") + // react-datepicker рисует крестик и у disabled-поля — отступ под него тоже есть, как во Vue.
-      (y && T ? " dpc--clearable" : ""),
+      className: (ce ? "custom-input dpc-filter custom-input-filter" : Se ? "custom-input dpc-table custom-input-table" : `${ue ? "dpc-grey" : "dpc"} custom-input`) + (w.hasError ? " u-input-required" : "") + // react-datepicker рисует крестик и у disabled-поля — отступ под него тоже есть, как во Vue.
+      (x && qe ? " dpc--clearable" : ""),
       dateFormat: "dd.MM.yyyy"
     }
   );
-  return /* @__PURE__ */ r(V.Provider, { value: i, children: /* @__PURE__ */ h(
+  return /* @__PURE__ */ o(le.Provider, { value: a, children: /* @__PURE__ */ P(
     "div",
     {
-      ref: S,
-      id: `u-datepicker${u}`,
-      className: de || void 0,
+      ref: j,
+      id: `u-datepicker${m}`,
+      className: Ie || void 0,
       style: { display: "flex", flexDirection: "column", rowGap: "calc(4 * var(--u-preset-unit, 1px))" },
       children: [
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ P(
           "div",
           {
             style: Object.assign(
               {
                 display: "flex",
-                flexDirection: C ? "row" : "column",
-                rowGap: C ? null : _(re),
-                columnGap: C ? _(oe) : null
+                flexDirection: $ ? "row" : "column",
+                rowGap: $ ? null : ee(be),
+                columnGap: $ ? ee(he) : null
               },
-              ie
+              ge
             ),
             children: [
-              s && /* @__PURE__ */ r(
+              p && /* @__PURE__ */ o(
                 "div",
                 {
-                  id: `${u}-label`,
-                  className: `${$ ? "u-required" : ""} u-react-input-title`,
+                  id: `${m}-label`,
+                  className: `${Y ? "u-required" : ""} u-react-input-title`,
                   style: Object.assign(
                     {
                       color: "var(--u-field-title-color, #545454)",
                       fontSize: "var(--u-field-label-size-main, calc(14 * var(--u-unit, 1px)))"
                     },
-                    ne
+                    xe
                   ),
-                  children: s
+                  children: p
                 }
               ),
-              le ? /* @__PURE__ */ r(
-                je,
+              ke ? /* @__PURE__ */ o(
+                Ze,
                 {
                   portalOn: !0,
-                  id: `calendar-hint-${u || "default"}`,
+                  id: `calendar-hint-${m || "default"}`,
                   position: "top",
-                  isActive: be && !j && !he,
+                  isActive: Ne && !J && !Ae,
                   showWhenActive: !0,
                   tooltipStyle: {
-                    maxWidth: we(se),
+                    maxWidth: je(De),
                     width: "auto",
                     whiteSpace: "normal",
                     overflowWrap: "break-word"
                   },
-                  tooltipText: ce,
-                  children: /* @__PURE__ */ r("div", { style: { width: "100%" }, onClick: q, children: B })
+                  tooltipText: Ce,
+                  children: /* @__PURE__ */ o("div", { style: { width: "100%" }, onClick: te, children: re })
                 }
-              ) : /* @__PURE__ */ r("div", { style: { width: "100%" }, onClick: q, children: B })
+              ) : /* @__PURE__ */ o("div", { style: { width: "100%" }, onClick: te, children: re })
             ]
           }
         ),
-        b.showText && /* @__PURE__ */ r(
+        w.showText && /* @__PURE__ */ o(
           "h5",
           {
-            id: `${u}-error`,
+            id: `${m}-error`,
             className: "h5 clr-red-main",
-            style: te ? { position: "absolute", bottom: "calc(-20 * var(--u-unit, 1px))" } : { position: "relative" },
-            children: b.text
+            style: ve ? { position: "absolute", bottom: "calc(-20 * var(--u-unit, 1px))" } : { position: "relative" },
+            children: w.text
           }
         )
       ]
     }
   ) });
 };
-export { mt as Calendar$u };
+export { Tt as Calendar$u };

package/dist/components/Calendar/Calendar.types.d.ts

@@ -3,8 +3,29 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { ComponentSize } from '../../shared/size';
 /** Откуда изменение даты: выбор в календаре или набор в поле (клавиатура, колесо, стрелки). */
 export type CalendarChangeSource = 'calendar' | 'input';
+/** Период: начало и конец; пока конец не выбран (или не набран), он `null`. */
+export type CalendarRange = [Date | null, Date | null];
 export type CalendarProperties = FieldAccessibilityProperties & Partial<{
     title: string;
+    /**
+     * Период вместо одной даты: одно поле «дд.мм.гггг - дд.мм.гггг» и один попап. Первый
+     * щелчок по дню ставит начало, второй — конец (клик раньше начала даёт период «кликнутый
+     * день — прежнее начало») и закрывает попап. Значения — `startDate`/`endDate`, изменения — `onRangeChange`;
+     * `selected` и `onChange` в этом режиме не используются. Колесо и стрелки (`wheelEdit`)
+     * в периоде не работают.
+     */
+    range: boolean;
+    /** Начало периода (`range`): Date, строка или число, которые понимает `new Date()`. */
+    startDate: Date | string | number | null;
+    /** Конец периода (`range`): Date, строка или число, которые понимает `new Date()`. */
+    endDate: Date | string | number | null;
+    /**
+     * `([начало, конец], { source })` в режиме `range`. Из набранного в поле конец приходит
+     * `null`, пока не набрана полная вторая дата; очистка крестиком — `[null, null]`.
+     */
+    onRangeChange(range: CalendarRange, meta?: {
+        source: CalendarChangeSource;
+    }): void;
     /** Выбранная дата: Date, строка или число, которые понимает `new Date()`; пусто — без значения. */
     selected: Date | string | number | null;
     /** `(date, { source })`: из набранного приходит только полная дата дд.мм.гггг; `source` — см. CalendarChangeSource. */