urfu-ui-kit-react 2.1.3 → 2.1.4

package/dist/components/Calendar/CalendarSelect.js

@@ -0,0 +1,149 @@
+import { jsxs as x, jsx as a } from "react/jsx-runtime";
+import { useRef as d, useEffect as h } from "react";
+import { useDismiss$u as m } from "../../hooks/useDismiss.js";
+const S = ({
+  options: i,
+  value: t,
+  onChange: p,
+  width: f = 100,
+  fallbackValue: l,
+  isOpen: r,
+  onOpen: v,
+  onClose: c
+}) => {
+  const o = d(null), u = d(null);
+  m({ refs: [o], onDismiss: c, enabled: r });
+  const s = i.find((e) => e.value === t);
+  return h(() => {
+    if (!r) return;
+    const e = u.current;
+    if (!e) return;
+    const n = e.querySelector("[data-current='true']") ?? e.querySelector("[data-fallback='true']");
+    n && (e.scrollTop = n.offsetTop - e.clientHeight / 2 + n.offsetHeight / 2);
+  }, [r]), /* @__PURE__ */ x(
+    "div",
+    {
+      ref: o,
+      style: {
+        // Ширину задаёт скрытый эталон ниже — по самой длинной подписи. `width`
+        // остаётся нижней границей, чтобы короткие списки не схлопывались.
+        position: "relative",
+        width: "max-content",
+        minWidth: `calc(${f} * var(--u-unit, 1px))`,
+        userSelect: "none",
+        cursor: "pointer"
+      },
+      className: "calendar-custom-select",
+      children: [
+        /* @__PURE__ */ a(
+          "span",
+          {
+            "aria-hidden": !0,
+            style: {
+              display: "block",
+              height: 0,
+              overflow: "hidden",
+              fontSize: "var(--u-font-size-14, calc(14 * var(--u-unit, 1px)))"
+            },
+            children: i.map((e) => /* @__PURE__ */ a(
+              "span",
+              {
+                style: {
+                  display: "block",
+                  whiteSpace: "nowrap",
+                  paddingInline: "calc(6 * var(--u-unit, 1px))",
+                  // Резерв под то, что съедает ширину у списка, но не у поля:
+                  // полоса прокрутки (6px) и рамка списка по 1px с двух сторон.
+                  marginRight: "calc(8 * var(--u-preset-unit, 1px))"
+                },
+                children: e.label
+              },
+              String(e.value)
+            ))
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "calendar-custom-select-input",
+            style: {
+              paddingBlock: 0,
+              WebkitAppearance: "none",
+              MozAppearance: "none",
+              border: 0,
+              height: "calc(28 * var(--u-unit, 1px))",
+              fontSize: "var(--u-font-size-14, calc(14 * var(--u-unit, 1px)))",
+              width: "100%",
+              lineHeight: "calc(29 * var(--u-unit, 1px))",
+              // Черта идёт по всей ширине поля, а ширину задаёт эталон по самой
+              // длинной подписи — значит она совпадает с шириной выпадающего списка.
+              borderBottom: "1px solid #748AB9",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            onClick: (e) => {
+              e.stopPropagation(), r ? c() : v();
+            },
+            children: /* @__PURE__ */ a("span", { children: s ? s.label : "" })
+          }
+        ),
+        r && /* @__PURE__ */ a(
+          "div",
+          {
+            ref: u,
+            className: "calendar-custom-select-options",
+            style: {
+              position: "absolute",
+              top: "calc(30 * var(--u-unit, 1px))",
+              left: 0,
+              // Ширину задаёт поле (её считает эталон по самой длинной подписи),
+              // поэтому список ровно под чертой и одной с ней ширины. Полосе
+              // прокрутки резервируется место, иначе она съедала бы подписи —
+              // из-за этого годы обрезались в «202», а месяцы в «Сентябр».
+              width: "100%",
+              scrollbarGutter: "stable",
+              background: "#fff",
+              border: "1px solid #748AB9",
+              borderRadius: "calc(4 * var(--u-unit, 1px))",
+              boxShadow: "0 2px 8px rgba(30,67,145,0.08)",
+              zIndex: 10,
+              maxHeight: "calc(200 * var(--u-unit, 1px))",
+              overflowY: "auto",
+              fontSize: "var(--u-font-size-14, calc(14 * var(--u-unit, 1px)))"
+            },
+            children: i.map((e) => /* @__PURE__ */ a(
+              "div",
+              {
+                className: "calendar-custom-select-option",
+                "data-current": t === e.value ? "true" : void 0,
+                "data-fallback": l !== void 0 && l === e.value ? "true" : void 0,
+                style: {
+                  // Без внешних отступов: они оставляли белые поля вокруг подсветки
+                  // выбранного пункта. Воздух даёт паддинг, подсветка идёт от
+                  // края до края списка.
+                  padding: "calc(6 * var(--u-unit, 1px)) calc(6 * var(--u-unit, 1px))",
+                  cursor: "pointer",
+                  background: t === e.value ? "#EAF1FF" : "#fff",
+                  borderRadius: t === e.value ? "4px" : 0,
+                  color: t === e.value ? "#1E4391" : "#222",
+                  margin: 0,
+                  transition: "background 0.15s",
+                  fontSize: "var(--u-font-size-14, calc(14 * var(--u-unit, 1px)))",
+                  // Подписи не переносим: список расширяется по содержимому.
+                  whiteSpace: "nowrap"
+                },
+                onClick: (n) => {
+                  n.stopPropagation(), c(), p(e.value);
+                },
+                children: e.label
+              },
+              e.value
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+export { S as CalendarSelect$u };

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

@@ -1 +1 @@
-{"version":3,"file":"MaskedDateInput.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/MaskedDateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAUf,KAAK,cAAc,GAAG;IACpB,oHAAoH;IACpH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,yFAAyF;IACzF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,oEAAoE;IACpE,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C;+DAC2D;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;yFACqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAqBF,eAAO,MAAM,eAAe,qJA6T1B,CAAC"}
+{"version":3,"file":"MaskedDateInput.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/MaskedDateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAWf,KAAK,cAAc,GAAG;IACpB,oHAAoH;IACpH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,yFAAyF;IACzF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,oEAAoE;IACpE,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C;+DAC2D;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;yFACqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAqBF,eAAO,MAAM,eAAe,qJA8T1B,CAAC"}

package/dist/components/Calendar/MaskedDateInput.js

@@ -0,0 +1,191 @@
+import { jsx as P } from "react/jsx-runtime";
+import { forwardRef as C, useRef as I, useState as _, useCallback as S, useEffect as $, useLayoutEffect as N } from "react";
+import { useInputOverflow$u as tt } from "../../hooks/useInputOverflow.js";
+import { getSegmentRange$u as U, incrementDateSegment$u as et, parseDateString$u as rt, getSegmentAtCaret$u as M, maskDateValue$u as nt } from "../../vanilla/core/dateMask.js";
+const b = /^\d{2}\.\d{2}\.\d{4}$/, ct = (n, i) => {
+  var l, f;
+  (f = (l = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")) == null ? void 0 : l.set) == null || f.call(n, i), n.dispatchEvent(new Event("input", { bubbles: !0 }));
+}, st = (n, i) => {
+  const l = n.selectionStart ?? 0, f = n.selectionEnd ?? l;
+  if (l === f) return !1;
+  if (l === 0 && f === n.value.length) return !0;
+  if (!i) return !1;
+  const [T, d] = U(i);
+  return l === T && f === d;
+}, ut = C(({ value: n, onChange: i, onFocus: l, onBlur: f, onMouseUp: T, onKeyDown: d, onWheelDate: H, onOpenCalendar: R, onFocusChange: E, isClearable: Y, wheelEdit: o = !1, ...w }, A) => {
+  const s = I(null);
+  tt(s, n, w.disabled);
+  const [g, z] = _(null), q = I(null), p = S((t) => {
+    q.current = t, z(t);
+  }, []), [B, G] = _(0), [J, Q] = _(0), a = I(typeof n == "string" ? n : ""), L = I(
+    typeof n == "string" && b.test(n) ? n : ""
+  ), V = I(!1);
+  $(() => {
+    typeof n == "string" && b.test(n) && (L.current = n), V.current || (a.current = typeof n == "string" ? n : "");
+  }, [n]);
+  const W = S(
+    (t) => {
+      s.current = t, typeof A == "function" ? A(t) : A && (A.current = t);
+    },
+    [A]
+  ), x = S((t) => {
+    const e = s.current;
+    if (!e) return;
+    const [r, c] = U(t);
+    e.setSelectionRange(r, c);
+  }, []), D = S(
+    (t) => {
+      const e = () => {
+        q.current === t && x(t);
+      };
+      requestAnimationFrame(() => {
+        e(), requestAnimationFrame(e);
+      });
+    },
+    [x]
+  );
+  N(() => {
+    if (!o) return;
+    const t = s.current;
+    !t || document.activeElement !== t || !g || x(g);
+  }, [n, g, x, o, J]), N(() => {
+    if (B === 0) return;
+    const t = s.current;
+    !t || document.activeElement !== t || t.setSelectionRange(0, t.value.length);
+  }, [B]);
+  const X = (t) => {
+    const e = nt(t.target.value);
+    t.target.value = e, a.current = e, i == null || i(t);
+  }, Z = (t) => {
+    if (T == null || T(t), !o) return;
+    if (t.preventDefault(), t.detail >= 2) {
+      p(null), G((r) => r + 1);
+      return;
+    }
+    const e = t.currentTarget.selectionStart ?? 0;
+    p(M(e)), Q((r) => r + 1);
+  }, h = (t) => {
+    var r;
+    l == null || l(t), E == null || E(!0);
+    const e = ((r = s.current) == null ? void 0 : r.value) ?? "";
+    a.current = b.test(e) ? e : typeof n == "string" ? n : "", b.test(a.current) && (L.current = a.current), V.current = !0, o && (p("day"), D("day"));
+  }, F = (t) => {
+    var y;
+    f == null || f(t), E == null || E(!1), V.current = !1, p(null);
+    const e = ((y = s.current) == null ? void 0 : y.value) ?? "";
+    if (b.test(e)) {
+      a.current = e, L.current = e;
+      return;
+    }
+    const r = Y && e.trim() === "", c = L.current;
+    if (!r && b.test(c)) {
+      a.current = c;
+      const u = s.current;
+      setTimeout(() => {
+        var m;
+        if (!u) return;
+        const k = (m = Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype,
+          "value"
+        )) == null ? void 0 : m.set;
+        k == null || k.call(u, c), u.dispatchEvent(new Event("input", { bubbles: !0 }));
+      }, 0);
+      return;
+    }
+    a.current = e;
+  }, j = S(
+    (t, e) => {
+      var k;
+      V.current = !0;
+      const r = s.current, c = (r == null ? void 0 : r.value) ?? "", y = b.test(a.current) ? a.current : b.test(c) ? c : "", u = et(y, t, e);
+      if (a.current = u, L.current = u, R == null || R(), r) {
+        const m = (k = Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype,
+          "value"
+        )) == null ? void 0 : k.set;
+        m == null || m.call(r, u), r.dispatchEvent(new Event("input", { bubbles: !0 }));
+      } else if (H) {
+        const m = rt(u);
+        m && H(m);
+      } else i && i({
+        target: { value: u },
+        currentTarget: { value: u }
+      });
+      p(t), D(t);
+    },
+    [i, H, R, D, p]
+  ), v = S(
+    (t) => {
+      const e = s.current;
+      if (!e || document.activeElement !== e) return;
+      t.cancelable && t.preventDefault(), t.stopPropagation();
+      const r = e.selectionStart ?? 0, c = g ?? M(r);
+      j(c, t.deltaY < 0 ? 1 : -1);
+    },
+    [g, j]
+  ), K = S(
+    (t) => {
+      if (!o) {
+        d == null || d(t);
+        return;
+      }
+      if (t.key === "ArrowUp" || t.key === "ArrowDown") {
+        t.preventDefault();
+        const e = s.current;
+        if (!e) return;
+        const r = e.selectionStart ?? 0, c = g ?? M(r);
+        j(c, t.key === "ArrowUp" ? 1 : -1);
+        return;
+      }
+      if (t.key === "Enter") {
+        const e = s.current, r = (e == null ? void 0 : e.selectionStart) ?? 0, c = g ?? M(r);
+        if (c !== "year") {
+          t.preventDefault();
+          const y = c === "day" ? "month" : "year";
+          p(y), D(y);
+          return;
+        }
+      }
+      d == null || d(t);
+    },
+    [g, j, D, d, p, o]
+  ), O = S(
+    (t) => {
+      const e = s.current;
+      if (!e) return;
+      const r = t.inputType === "insertText", c = t.inputType.startsWith("delete") && t.inputType !== "deleteByCut" && t.inputType !== "deleteByDrag", y = q.current;
+      if (p(null), !(r || c) || !t.cancelable || !st(e, y)) return;
+      t.preventDefault();
+      const u = r && /^\d$/.test(t.data ?? "");
+      (u || c) && ct(e, u ? t.data ?? "" : "");
+    },
+    [p]
+  );
+  return $(() => {
+    if (!o) return;
+    const t = s.current;
+    if (t)
+      return t.addEventListener("wheel", v, { passive: !1 }), () => t.removeEventListener("wheel", v);
+  }, [v, o]), $(() => {
+    if (!o) return;
+    const t = s.current;
+    if (t)
+      return t.addEventListener("beforeinput", O), () => t.removeEventListener("beforeinput", O);
+  }, [O, o]), /* @__PURE__ */ P(
+    "input",
+    {
+      ...w,
+      value: n,
+      ref: W,
+      inputMode: "numeric",
+      maxLength: 10,
+      onChange: X,
+      onKeyDown: K,
+      onMouseUp: Z,
+      onFocus: h,
+      onBlur: F
+    }
+  );
+});
+ut.displayName = "MaskedDateInput";
+export { ut as MaskedDateInput$u };

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

@@ -3,6 +3,5 @@ export type DateSegment = "day" | "month" | "year";
 export declare const getSegmentRange: (segment: DateSegment) => [number, number];
 export declare const getSegmentAtCaret: (caret: number) => DateSegment;
 export declare const incrementDateSegment: (value: string, segment: DateSegment, delta: number) => string;
-export declare const normalizeSegment: (segment: string, max: number) => string;
 export declare const maskDateValue: (raw: string) => string;
 //# sourceMappingURL=dateMask.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dateMask.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/dateMask.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,KAAG,IAAI,GAAG,IAMtD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAGnD,eAAO,MAAM,eAAe,GAAI,SAAS,WAAW,KAAG,CAAC,MAAM,EAAE,MAAM,CAIrE,CAAC;AAGF,eAAO,MAAM,iBAAiB,GAAI,OAAO,MAAM,KAAG,WAIjD,CAAC;AAwBF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,MAAM,EACb,SAAS,WAAW,EACpB,OAAO,MAAM,KACZ,MAkBF,CAAC;AAOF,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM,EAAE,KAAK,MAAM,KAAG,MAU/D,CAAC;AAGF,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,MAU3C,CAAC"}
+{"version":3,"file":"dateMask.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/dateMask.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,KAAG,IAAI,GAAG,IAMtD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAGnD,eAAO,MAAM,eAAe,GAAI,SAAS,WAAW,KAAG,CAAC,MAAM,EAAE,MAAM,CAIrE,CAAC;AAGF,eAAO,MAAM,iBAAiB,GAAI,OAAO,MAAM,KAAG,WAIjD,CAAC;AAwBF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,MAAM,EACb,SAAS,WAAW,EACpB,OAAO,MAAM,KACZ,MAkBF,CAAC;AAoBF,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,MAU3C,CAAC"}

package/dist/components/Card/Card.d.ts

@@ -1,5 +1,5 @@
 
-import './Card.less';
+
 import type { CardProperties } from './Card.types';
 export declare const Card: ({ children, className, bordered, collapsible, header, defaultOpen, open, onToggle, }: CardProperties) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,aAAa,CAAC;AAIrB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAWnD,eAAO,MAAM,IAAI,GAAI,sFASlB,cAAc,4CA2FhB,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mDAAmD,CAAC;AAI3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAWnD,eAAO,MAAM,IAAI,GAAI,sFASlB,cAAc,4CA2FhB,CAAC"}

package/dist/components/Card/Card.js

@@ -0,0 +1,75 @@
+import { jsx as n, jsxs as p } from "react/jsx-runtime";
+import { useState as N, useRef as C, useLayoutEffect as R } from "react";
+/* empty css                 */
+/* empty css                                  */
+import { Icon$u as L } from "../Icon/Icon.js";
+import { useAutoId$u as O } from "../../hooks/useAutoId.js";
+const A = 220, H = 'button, a, input, select, textarea, label, [role="button"], [contenteditable="true"]', k = 5, M = 20, z = ({
+  children: c,
+  className: E = "",
+  bordered: x = !1,
+  collapsible: e = !1,
+  header: a,
+  defaultOpen: b = !0,
+  open: d,
+  onToggle: o
+}) => {
+  const [h, v] = N(b), i = O(null, "u-card-body"), u = typeof d == "boolean", r = e ? u ? d : h : !0, l = C(null), [w, m] = N(!0), f = C(!0);
+  R(() => {
+    if (f.current) {
+      f.current = !1;
+      return;
+    }
+    m(!1);
+    const t = window.setTimeout(() => m(!0), A + M);
+    return () => window.clearTimeout(t);
+  }, [r]);
+  const _ = [
+    "cardStyle",
+    x && "u-react-card--bordered",
+    e && "u-react-card--collapsible",
+    e && (r ? "u-react-card--open" : "u-react-card--closed"),
+    e && r && w && "u-react-card--settled",
+    E
+  ].filter(Boolean).join(" "), I = a != null && a !== !1;
+  if (!e && !I)
+    return /* @__PURE__ */ n("div", { className: _, children: c });
+  const y = () => {
+    const t = !r;
+    u || v(t), o == null || o(t);
+  };
+  return /* @__PURE__ */ p("div", { className: _, children: [
+    /* @__PURE__ */ p(
+      "div",
+      {
+        className: "u-react-card__header",
+        onPointerDown: e ? (t) => {
+          l.current = { x: t.clientX, y: t.clientY };
+        } : void 0,
+        onClick: e ? (t) => {
+          var S;
+          if (t.target.closest(H)) return;
+          const s = l.current;
+          s && Math.hypot(t.clientX - s.x, t.clientY - s.y) > k || (S = window.getSelection()) != null && S.toString() || y();
+        } : void 0,
+        children: [
+          /* @__PURE__ */ n("div", { className: "u-react-card__header-content", children: a }),
+          e ? /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              className: "u-react-card__toggle",
+              onClick: y,
+              "aria-expanded": r,
+              "aria-controls": i,
+              "aria-label": r ? "Свернуть" : "Развернуть",
+              children: /* @__PURE__ */ n(L, { name: "up", size: 20, rotate: r ? 0 : 180 })
+            }
+          ) : null
+        ]
+      }
+    ),
+    e ? /* @__PURE__ */ n("div", { className: "u-react-card__body", id: i, children: /* @__PURE__ */ n("div", { className: "u-react-card__body-inner", children: c }) }) : /* @__PURE__ */ n("div", { className: "u-react-card__body-static", children: c })
+  ] });
+};
+export { z as Card$u };

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,30 @@
+import { jsx as a, jsxs as y, Fragment as b } from "react/jsx-runtime";
+/* empty css                 */
+/* empty css          */
+import { useAutoId$u as f } from "../../hooks/useAutoId.js";
+const k = ({
+  children: l,
+  disabled: c,
+  checked: s,
+  defaultChecked: i,
+  rightCheckbox: o = !1,
+  onClick: e,
+  onChange: r,
+  className: m = "",
+  id: p,
+  "aria-label": d,
+  "aria-labelledby": u,
+  propsInput: x,
+  style: t
+}) => {
+  const n = f(p, "u-checkbox"), h = r || (e ? (v) => {
+    e(v);
+  } : void 0);
+  return /* @__PURE__ */ a("div", { className: "u-checkbox-wrapper", children: /* @__PURE__ */ y("label", { style: Object.assign({ columnGap: l ? "" : 0 }, t || {}), className: `u-checkbox ${m}`, children: [
+    o && /* @__PURE__ */ a(b, { children: l }),
+    /* @__PURE__ */ a("input", { defaultChecked: i, checked: s, disabled: c, id: n, type: "checkbox", onChange: h, onClick: e, readOnly: s !== void 0 && !r && !e, "aria-label": d, "aria-labelledby": u, ...x }),
+    /* @__PURE__ */ a("div", { className: "u-checkbox-input" }),
+    !o && /* @__PURE__ */ a(b, { children: l })
+  ] }) });
+};
+export { k as Checkbox$u };