urfu-ui-kit-react 2.1.3 → 2.1.4

package/README.md

@@ -54,10 +54,9 @@ export function App() {
 
 ### Первичная настройка
 
-```bash
-# Установить зависимости
-npm install
+Пакет живёт в монорепозитории [ui/urfu-ui-kit](https://gitlab.urfu.ru/ui/urfu-ui-kit), папка `packages/react`. Зависимости — `npm ci` в корне репозитория, остальные команды — в папке `packages/react`.
 
+```bash
 # Запустить Storybook (примеры компонентов)
 npm run sb
 
@@ -124,33 +123,13 @@ Button, Modal, ConfirmModal, Tooltip, NotificationProvider / useNotification, Sw
 - React ^18.0.0 или ^19.0.0
 - React DOM ^18.0.0 или ^19.0.0
 - TypeScript ^5.2
-- Браузеры: Chrome, Edge и Яндекс Браузер 109+, Firefox 121+, Safari 16+. `style.layer.css` старше Chrome 99 / Firefox 97 / Safari 15.4 не применяется совсем — [поддерживаемые браузеры](./docs/browsers.md)
+- Браузеры: Chrome, Edge и Яндекс Браузер 109+, Firefox 121+, Safari 16+. `style.layer.css` старше Chrome 99 / Firefox 97 / Safari 15.4 не применяется совсем — [поддерживаемые браузеры](https://cdn.my1.urfu.ru/react-components/browsers.html)
 
 ---
 
 ## 📝 История версий
 
-**2.1.2 — 22.10.2026:** шрифты Montserrat — все начертания файлами, `font-display: swap`: `style.css` в gzip 454 → 63 КБ.
-
-**2.1.1 — 22.10.2026:** `style.shell.css` без текстовых шрифтов (gzip 462 → 70 КБ), сбросы кита в `style.layer.css` — в подслое `u-kit.reset`, в `style.shell.css` — в слое `u-kit-shell-reset`, заголовок `Modal` в строке крестика без лишнего зазора до подзаголовка, стрелка `Multiselect` не поверх прилипших панелей, панель `ColumnSettings` не уезжает за экран при смене ширины окна, кнопка dev-панели — компактный круг с логотипом кита, `Tooltip` по фокусу открывается только с клавиатуры, шапка и подписи `ColumnSettings` на телефоне, одно кольцо фокуса у `Select` и `Multiselect`.
-
-**2.1.0 — 21.10.2026:** стили для оболочки ЛК (`style.layer.css`, `style.shell.css`), dev-панель `urfu-ui-kit-react/dev`, `describeError` и `describeFieldErrors`, `ErrorScreen` по макетам, `OfflineBanner`, поля `size="dense"`, префикс и суффикс `InputText`, иконки и `disabled` у вкладок, уведомления под шапкой. Vanilla внутри пакета. Что заметят сервисы — в [истории версий](./docs/versioning.md).
-
-**2.0.5 — 13.10.2026:** мобильные шторки для `Modal`, `ConfirmModal`, `Select` и `Multiselect` (`configureUiKit({ mobileSheets: true })`).
-
-**2.0.4 — 12.10.2026:** исправление смены колонок Table, текстовый фильтр с дебаунсом, точные счётчики выбора, адаптивная высота и кеш поиска фильтров, компактная мобильная панель фильтров, иконки в Select и выравнивание крестика Modal. API сохранены, новые режимы подключаются явно. Требуется vanilla `^2.9.1`.
-
-**2.0.3 — 08.10.2026:** встроенные серверные и постраничные фильтры Table, мобильные фильтры и закреплённые колонки, загрузка Button, ErrorScreen и Skeleton, исправления уведомлений, селектов, подсказок и вкладок. Включена правка Search от Дианы: длинный запрос не перекрывается крестиком очистки. Существующие API сохранены; новые режимы подключаются явно. Требуется vanilla `^2.9.1`.
-
-**2.0.0 — опубликована 03.10.2026:** общие фильтры и мобильные карточки Table, порядок колонок, модальные окна с управлением фокусом, единая мобильная панель действий и доступность полей. Изменения Дианы, подготовленные для 1.13.2, входят в этот выпуск. Требуется vanilla 2.9.0; обе версии доступны в npm.
-
-Переход на 2.0.0 — в [руководстве подключения](./docs/getting-started.md).
-
-**v1.13.1** (2026-09-25) — адаптивные карточки таблиц, читаемые статусы и исправления контролов.
-
-**v1.13.0** (2026-09-23) — подключаемый адаптивный режим УрФУ.
-
-Подробности и предыдущие версии — в [истории версий](./docs/versioning.md).
+[История версий](https://cdn.my1.urfu.ru/react-components/versioning.html) — что изменилось в каждом выпуске и что заметят сервисы. Переход на 2.0.0 — в [руководстве подключения](https://cdn.my1.urfu.ru/react-components/getting-started.html).
 
 ---
 

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,18 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+/* empty css                 */
+import { useAutoId$u as t } from "../../hooks/useAutoId.js";
+const m = ({
+  title: i = "",
+  id: a = "",
+  children: d = /* @__PURE__ */ o("div", {}),
+  className: n = ""
+}) => {
+  const c = `u-accordion${t(a, "auto")}`;
+  return /* @__PURE__ */ r("div", { className: `u-accordion ${n}`, children: [
+    /* @__PURE__ */ o("div", { className: "u-accordion-title", children: i }),
+    /* @__PURE__ */ o("input", { className: "u-accordion-input", type: "checkbox", id: c }),
+    /* @__PURE__ */ o("label", { className: "u-accordion-toggle", htmlFor: c }),
+    /* @__PURE__ */ o("div", { className: "u-accordion-content", children: d })
+  ] });
+};
+export { m as Accordion$u };

package/dist/components/BreadCrumbs/BreadCrumbs.d.ts

@@ -1,5 +1,5 @@
 
-import './BreadCrumbs.less';
+
 import type { BreadCrumbsProperties } from './BreadCrumbs.types';
 export declare const BreadCrumbs: ({ items, className, onNavigate, }: BreadCrumbsProperties) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BreadCrumbs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BreadCrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/BreadCrumbs/BreadCrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAG5B,OAAO,KAAK,EAAkB,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAIjF,eAAO,MAAM,WAAW,GAAI,mCAIzB,qBAAqB,4CAqCvB,CAAC"}
+{"version":3,"file":"BreadCrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/BreadCrumbs/BreadCrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0DAA0D,CAAC;AAGlE,OAAO,KAAK,EAAkB,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAIjF,eAAO,MAAM,WAAW,GAAI,mCAIzB,qBAAqB,4CAqCvB,CAAC"}

package/dist/components/BreadCrumbs/BreadCrumbs.js

@@ -0,0 +1,32 @@
+import { jsx as s, jsxs as u } from "react/jsx-runtime";
+/* empty css                 */
+/* empty css                                         */
+import { Icon$u as p } from "../Icon/Icon.js";
+const h = (e) => !!e.to, v = ({
+  items: e = [],
+  className: m = "",
+  onNavigate: o
+}) => {
+  const a = e.filter((r) => r == null ? void 0 : r.label);
+  return a.length ? /* @__PURE__ */ s("div", { className: `u-breadcrumbs ${m}`.trim(), children: a.map((r, l) => {
+    const n = h(r) && !!r.to, t = n ? "th clr-blue-main" : "tt clr-gray-60", c = `u-breadcrumbs__item ${n ? `ucp ${t}` : t}`.trim(), i = l < a.length - 1;
+    return /* @__PURE__ */ u("div", { className: "u-breadcrumbs__entry", children: [
+      n && r.to ? /* @__PURE__ */ u(
+        "a",
+        {
+          className: c,
+          href: r.to,
+          onClick: o ? (b) => {
+            b.preventDefault(), r.to && o(r.to);
+          } : void 0,
+          children: [
+            l === 0 ? /* @__PURE__ */ s(p, { name: "left-arrow", className: "clr-blue-main", size: "16px" }) : null,
+            r.label
+          ]
+        }
+      ) : /* @__PURE__ */ s("span", { className: c, "aria-current": l === a.length - 1 ? "page" : void 0, children: r.label }),
+      i ? /* @__PURE__ */ s("span", { className: t, children: "/" }) : null
+    ] }, `${l}-${String(r.label)}`);
+  }) }) : null;
+};
+export { v as BreadCrumbs$u };

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,5 @@
 
+
 import './Button.less';
 import { ButtonProperties } from './Button.types';
 export declare const Button: ({ onClick, variant, size, type, icon, iconLeft, iconOnly, iconSize, disabled, loading, children, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-busy": ariaBusy, title, }: ButtonProperties) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGlD,eAAO,MAAM,MAAM,GAAI,0OAkBpB,gBAAgB,4CAoFlB,CAAA"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,qDAAqD,CAAC;AAC7D,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGlD,eAAO,MAAM,MAAM,GAAI,0OAkBpB,gBAAgB,4CAoFlB,CAAA"}

package/dist/components/Button/Button.js

@@ -0,0 +1,88 @@
+import { jsxs as m, Fragment as P, jsx as o } from "react/jsx-runtime";
+/* empty css                 */
+/* empty css                                    */
+/* empty css        */
+import { ButtonRefreshIcon$u as R } from "./ButtonRefreshIcon.js";
+const D = ({
+  onClick: x,
+  variant: e = "primary",
+  size: p = "medium",
+  type: h = "button",
+  icon: a = "",
+  iconLeft: f = !1,
+  iconOnly: u = !1,
+  iconSize: s,
+  disabled: g = !1,
+  loading: n,
+  children: i,
+  className: $ = "",
+  "aria-label": y,
+  "aria-describedby": w,
+  "aria-expanded": S,
+  "aria-busy": c,
+  title: N
+}) => {
+  const j = (t) => {
+    switch (t) {
+      case "primary":
+        return "u-button";
+      case "danger":
+        return "u-button u-button-danger";
+      case "outline":
+        return "u-button u-button-outline";
+      case "refresh":
+        return "u-button u-button-outline u-button-refresh";
+      case "danger-outline":
+        return "u-button u-button-danger-outline";
+      case "simple":
+        return "u-button u-button-simple";
+      case "icon":
+        return "u-button u-button-icon";
+      case "text":
+        return "u-button-text";
+      case "text-danger":
+        return "u-button-text u-button-text-danger";
+      case "text-table":
+        return "u-button-text u-button-text-table";
+      case "text-danger-table":
+        return "u-button-text u-button-text-danger-table";
+    }
+  }, z = (t) => {
+    switch (t) {
+      case "medium":
+        return "";
+      case "small":
+        return " u-button-small";
+      default:
+        return "";
+    }
+  }, B = (t, r) => t && ["text", "text-danger"].includes(r) ? " u-button-text-icon-left" : t ? " u-button-icon-left" : "", F = ["primary", "danger", "outline", "danger-outline", "simple", "refresh"], I = (t) => t ? " icon-only" : "", M = (t) => {
+    if (typeof t == "number")
+      return `calc(${t} * var(--u-unit, 1px))`;
+    const r = String(t).trim(), d = r.match(/^(-?\d+(?:\.\d+)?)px$/);
+    return d ? `calc(${d[1]} * var(--u-unit, 1px))` : r;
+  }, l = e === "refresh" || n !== void 0, b = /* @__PURE__ */ m(P, { children: [
+    !u && e !== "icon" && (i === void 0 ? e === "refresh" ? "Обновить" : "ОК" : i),
+    " ",
+    a && /* @__PURE__ */ o("i", { style: s && { fontSize: M(s) }, className: `u-icon${I(u)} icon-${a}` })
+  ] });
+  return /* @__PURE__ */ m(
+    "button",
+    {
+      className: `${j(e)}${z(p)}${B(f, e)}${u && ["text", "text-danger"].includes(e) ? " u-button-text-icon-only" : ""}${u && F.includes(e) ? " u-button-icon-only" : ""}${l ? " u-button-with-loading" : ""}${n ? " u-button-loading" : ""} ${$}`,
+      type: h,
+      onClick: x,
+      disabled: g || n,
+      "aria-label": y,
+      "aria-describedby": w,
+      "aria-expanded": S,
+      "aria-busy": n === void 0 ? c : n || c,
+      title: N,
+      children: [
+        l ? /* @__PURE__ */ o("span", { className: "u-button-loading-content", children: b }) : b,
+        n ? /* @__PURE__ */ o("span", { className: "u-button-loading-indicator", "aria-hidden": "true", children: /* @__PURE__ */ o(R, { spinning: !0 }) }) : null
+      ]
+    }
+  );
+};
+export { D as Button$u };

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

@@ -1,10 +1,16 @@
 import type { ReactNode } from 'react';
+/** Вид кнопки. В React это строка: допустимые значения разбирает сама кнопка, неизвестное даёт основной вид. */
+export type ButtonVariant = string;
+/** Размер кнопки. В React это строка (`medium` по умолчанию, `small`). */
+export type ButtonSize = string;
+/** Нативный тип кнопки: `button`, `submit` или `reset`. */
+export type ButtonType = NonNullable<React.ButtonHTMLAttributes<HTMLButtonElement>['type']>;
 export type ButtonProperties = Partial<{
     onClick: React.MouseEventHandler<HTMLButtonElement>;
     /** refresh — контурная кнопка обновления с подписью по умолчанию «Обновить». */
-    variant: string;
-    size: string;
-    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    variant: ButtonVariant;
+    size: ButtonSize;
+    type: ButtonType;
     icon: string;
     iconLeft: boolean;
     iconOnly: boolean;

package/dist/components/Button/Button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACnC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,gFAAgF;IAChF,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,uGAAuG;IACvG,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,wEAAwE;IACxE,eAAe,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,6EAA6E;IAC7E,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IACxC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC"}
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,gHAAgH;AAChH,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC;AAEnC,0EAA0E;AAC1E,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC;AAEhC,2DAA2D;AAC3D,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAE5F,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACnC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,gFAAgF;IAChF,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,uGAAuG;IACvG,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,wEAAwE;IACxE,eAAe,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,6EAA6E;IAC7E,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IACxC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC"}

package/dist/components/Button/ButtonRefreshIcon.js

@@ -0,0 +1,35 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+function i({ size: r = 16, spinning: n = !1, className: o = "" }) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      viewBox: "0 0 22 22",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      className: `u-button-refresh-icon${n ? " u-button-refresh-icon--spinning" : ""} ${o}`.trim(),
+      style: { "--u-button-refresh-icon-size": `calc(${r} * var(--u-unit, 1px))` },
+      children: [
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M1 11c0 5.523 4.477 10 10 10s10-4.477 10-10a9.956 9.956 0 0 0-2-6 10.058 10.058 0 0 0-1.999-2A9.97 9.97 0 0 0 11 1c-2.252 0-4.33.744-6.001 2",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            fill: "currentColor",
+            d: "M4.895 7.105a1 1 0 1 0 .064-1.998l-1.896-.062.064-1.981a1 1 0 0 0-1.999-.065l-.096 2.982A1 1 0 0 0 2 7.013l2.896.092Z"
+          }
+        )
+      ]
+    }
+  );
+}
+export { i as ButtonRefreshIcon$u };

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

@@ -1,10 +1,6 @@
 import React from "react";
-import "react-datepicker/dist/react-datepicker.css";
+
 import type { CalendarProperties } from "./Calendar.types";
 import "./Calendar.less";
-export declare function range(from: number, to: number, step?: number): {
-    [Symbol.iterator](): Generator<number, void, unknown>;
-};
-export declare const years: number[];
 export declare const Calendar: React.FC<CalendarProperties>;
 //# sourceMappingURL=Calendar.d.ts.map

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;AAkBzB,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,SAAI;;EAQvD;AAiBD,eAAO,MAAM,KAAK,UAEjB,CAAC;AAkBF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8YjD,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,EAAE,MAAM,kBAAkB,CAAC;AASjF,OAAO,iBAAiB,CAAC;AA+DzB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsZjD,CAAC"}

package/dist/components/Calendar/Calendar.js

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