urfu-ui-kit-react 2.1.2 → 2.1.4

package/dist/components/InputNumber/InputNumber.js

@@ -0,0 +1,220 @@
+import { jsxs as V, jsx as m } from "react/jsx-runtime";
+import { getFieldAccessibility$u as at } from "../../shared/fieldAccessibility.js";
+/* empty css                 */
+/* empty css                                          */
+import { useRef as F, useState as I, useEffect as M, useCallback as z } from "react";
+import { Tooltip$u as pt } from "../Tooltip/Tooltip.js";
+import { useAutoId$u as ft } from "../../hooks/useAutoId.js";
+import { useInputOverflow$u as mt } from "../../hooks/useInputOverflow.js";
+import { sizeClassName$u as bt } from "../../shared/size.js";
+import { resolveValidation$u as dt } from "../../vanilla/core/validation.js";
+const Mt = ({
+  "aria-label": G,
+  "aria-labelledby": Z,
+  "aria-describedby": q,
+  title: b = "",
+  placeholder: P = "",
+  defaultValue: y,
+  value: c,
+  id: Y,
+  name: N = "",
+  onChange: p,
+  required: E = !1,
+  disabled: i = !1,
+  lineUp: $ = !1,
+  rowGap: H = 4,
+  columnGap: J = 20,
+  styleInputContainer: K,
+  styleTitle: Q,
+  tooltipMaxWidth: U = 300,
+  className: X = "",
+  size: _,
+  min: n,
+  max: o,
+  restoreLastOnBlur: s = !1,
+  hintText: B = "Используйте колесо мыши или стрелки ↑↓ для изменения значения",
+  validationText: L = "Заполните поле",
+  validationOn: O,
+  error: tt,
+  validationOnWithoutText: et,
+  absoluteValidationText: rt
+}) => {
+  const S = dt({ error: tt, validationOn: O, validationOnWithoutText: et, validationText: L }), u = ft(Y, "u-input-number"), k = bt(_), it = at(u, b, E, S, {
+    "aria-label": G,
+    "aria-labelledby": Z,
+    "aria-describedby": q
+  }), d = F(null);
+  mt(d, c, i);
+  const x = F(null), [g, D] = I(!1), [nt, ot] = I(!1), [T, v] = I(String(c ?? y ?? "")), h = F(String(c ?? y ?? "")), A = (t) => typeof t == "number" ? `calc(${t} * var(--u-preset-unit, 1px))` : String(t), ut = (t) => typeof t == "number" ? `calc(${t} * var(--u-unit, 1px))` : String(t);
+  M(() => {
+    const t = () => {
+      ot(window.innerWidth <= 900);
+    };
+    return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+  }, []), M(() => {
+    if (!s || g) return;
+    const t = String(c ?? "");
+    v(t), t.trim() !== "" && (h.current = t);
+  }, [s, g, c]);
+  const j = z((t) => {
+    const e = Number(String(t).replace(",", "."));
+    if (!Number.isFinite(e)) return "";
+    const r = n != null && n !== "" ? Number(n) : void 0, l = o != null && o !== "" ? Number(o) : void 0;
+    let a = e;
+    return Number.isFinite(r) && (a = Math.max(a, r)), Number.isFinite(l) && (a = Math.min(a, l)), String(a);
+  }, [n, o]), w = z((t) => {
+    if (s && (v(t), String(t).trim() !== "" && (h.current = String(t))), !p) return;
+    p({
+      target: {
+        value: t,
+        id: u,
+        name: N
+      },
+      currentTarget: {
+        value: t,
+        id: u,
+        name: N
+      }
+    });
+  }, [u, N, p, s]), C = (t) => {
+    if (i) return;
+    const e = d.current;
+    e && (t === -1 ? e.stepDown() : e.stepUp(), w(e.value));
+  }, R = z((t) => {
+    const e = d.current;
+    if (i || !e || document.activeElement !== e) return;
+    t.cancelable && t.preventDefault(), t.stopPropagation(), t.deltaY < 0 ? e.stepUp() : e.stepDown();
+    const r = Number(e.value), l = n != null && n !== "" ? Number(n) : void 0, a = o != null && o !== "" ? Number(o) : void 0;
+    let f = r;
+    Number.isFinite(l) && (f = Math.max(f, l)), Number.isFinite(a) && (f = Math.min(f, a)), Number.isFinite(f) && (e.value = String(f)), w(e.value);
+  }, [i, w, o, n]);
+  M(() => {
+    if (i) return;
+    const t = x.current;
+    if (!t) return;
+    const e = (r) => R(r);
+    return t.addEventListener("wheel", e, { passive: !1 }), () => {
+      t.removeEventListener("wheel", e);
+    };
+  }, [i, R]);
+  const ct = (t) => {
+    if (!s) {
+      p == null || p(t);
+      return;
+    }
+    const e = t.target.value;
+    if (String(e).trim() === "") {
+      v("");
+      return;
+    }
+    w(j(e));
+  }, st = () => {
+    if (D(!0), !s) return;
+    const t = String(c ?? "");
+    v(t), t.trim() !== "" && (h.current = t);
+  }, lt = () => {
+    var l;
+    if (D(!1), !s) return;
+    const t = String(((l = d.current) == null ? void 0 : l.value) ?? T ?? "").trim(), e = t !== "" ? t : h.current || String(c ?? ""), r = j(e);
+    v(r), r.trim() !== "" && (h.current = r), r !== String(c ?? "") && w(r);
+  }, W = /* @__PURE__ */ V("div", { ref: x, className: `u-number ${i ? "u-number-disabled" : ""}`, children: [
+    /* @__PURE__ */ m(
+      "button",
+      {
+        className: "u-number-down",
+        type: "button",
+        "aria-label": `Уменьшить ${b || "значение"}`,
+        onClick: () => {
+          C(-1);
+        },
+        id: `num-minus-${u}`,
+        disabled: i
+      }
+    ),
+    /* @__PURE__ */ m(
+      "input",
+      {
+        ...it,
+        ref: d,
+        type: "number",
+        className: `u-react-input u-input ${S.hasError ? "u-input-required" : ""}`,
+        min: n,
+        max: o,
+        id: u,
+        name: N,
+        placeholder: P,
+        defaultValue: y,
+        value: s && g ? T : c,
+        disabled: i,
+        onChange: ct,
+        onFocus: st,
+        onBlur: lt
+      }
+    ),
+    /* @__PURE__ */ m(
+      "button",
+      {
+        className: "u-number-up",
+        type: "button",
+        "aria-label": `Увеличить ${b || "значение"}`,
+        onClick: () => {
+          C(1);
+        },
+        id: `num-plus-${u}`,
+        disabled: i
+      }
+    )
+  ] });
+  return /* @__PURE__ */ V(
+    "div",
+    {
+      className: `u-react-input-number-container${k ? ` ${k}` : ""} ${X}`,
+      style: Object.assign(
+        {
+          display: "flex",
+          flexDirection: $ ? "row" : "column",
+          rowGap: $ ? null : A(H),
+          columnGap: $ ? A(J) : null
+        },
+        K
+      ),
+      children: [
+        b && /* @__PURE__ */ m(
+          "div",
+          {
+            id: `${u}-label`,
+            className: `${E ? "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)))"
+              },
+              Q
+            ),
+            children: b
+          }
+        ),
+        i ? W : /* @__PURE__ */ m(
+          pt,
+          {
+            portalOn: !0,
+            id: `input-number-wheel-${u || "default"}`,
+            tooltipText: B,
+            position: "top",
+            isActive: g && !nt,
+            showWhenActive: !0,
+            tooltipStyle: {
+              maxWidth: ut(U),
+              width: "auto",
+              whiteSpace: "normal",
+              overflowWrap: "break-word"
+            },
+            children: W
+          }
+        ),
+        S.showText && /* @__PURE__ */ m("h5", { id: `${u}-error`, className: "h5 clr-red-main", style: rt ? { position: "absolute", bottom: "calc(-20 * var(--u-unit, 1px))" } : { position: "relative", marginTop: "calc(4 * var(--u-unit, 1px))" }, children: S.text })
+      ]
+    }
+  );
+};
+export { Mt as InputNumber$u };

package/dist/components/InputText/InputAffix.d.ts

@@ -38,7 +38,7 @@ type InputAffixProperties = {
  * `picker` задаёт вид вручную; `auto` выбирает по числу вариантов.
  */
 export declare function useInputAffixElement({ side, inputId, variants, current, next, onSelect, onPicked, picker, disabled, compact }: InputAffixProperties): {
-    element: any;
+    element: JSX.Element;
     width: number;
     mode: string;
     id: string;

package/dist/components/InputText/InputAffix.js

@@ -0,0 +1,109 @@
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { useState as N, useRef as E, useLayoutEffect as O } from "react";
+import { Icon$u as z } from "../Icon/Icon.js";
+import { useDismiss$u as K } from "../../hooks/useDismiss.js";
+const I = { prefix: "Префикс", suffix: "Суффикс" }, q = 3, B = (l) => typeof l == "string" ? { value: l, label: l } : { value: l.value, label: l.label ?? l.value };
+function W(l, n, s, e) {
+  const i = l == null ? [] : (Array.isArray(l) ? l : [l]).map(B), [d, p] = N(s), o = n ?? d, x = i.findIndex((b) => b.value === o), m = o !== void 0 && x < 0 && n !== void 0 ? { value: o, label: o } : i[Math.max(x, 0)], f = i.length > 1 ? i[(Math.max(x, 0) + 1) % i.length] : void 0;
+  return { variants: i, current: m, next: f, select: (b) => {
+    b.value !== (m == null ? void 0 : m.value) && (n === void 0 && p(b.value), e == null || e(b.value));
+  } };
+}
+function C(l) {
+  const n = E(null), [s, e] = N(0);
+  return O(() => {
+    const i = n.current;
+    if (!i) {
+      e(0);
+      return;
+    }
+    const d = () => e(i.getBoundingClientRect().width);
+    if (d(), typeof ResizeObserver > "u") return;
+    const p = new ResizeObserver(d);
+    return p.observe(i), () => p.disconnect();
+  }, [l]), [n, s];
+}
+const M = (l, n) => /* @__PURE__ */ g("span", { className: "u-react-input-affix__variants", "aria-hidden": "true", children: [
+  l.map((s) => /* @__PURE__ */ r("span", { className: s.value === n.value ? "u-react-input-affix__current" : void 0, children: s.label }, s.value)),
+  !l.some((s) => s.value === n.value) && /* @__PURE__ */ r("span", { className: "u-react-input-affix__current", children: n.label })
+] });
+function Y({ side: l, inputId: n, variants: s, current: e, next: i, onSelect: d, onPicked: p, picker: o, disabled: x, compact: m }) {
+  const f = !e || s.length < 2 ? "static" : o === "cycle" || o === "menu" ? o : s.length <= q ? "cycle" : "menu", [_, b] = C(`${f}|${f === "static" ? e == null ? void 0 : e.label : s.map((t) => t.label).join("|")}`), [u, y] = N(!1), A = E(null), k = E(null), $ = `${n}-${l}`;
+  K({ refs: [_], onDismiss: () => y(!1), enabled: u }), O(() => {
+    var w, c;
+    if (!u) return;
+    const t = (w = k.current) == null ? void 0 : w.querySelectorAll('[role="option"]'), a = s.findIndex((D) => D.value === (e == null ? void 0 : e.value));
+    (c = t == null ? void 0 : t[Math.max(a, 0)]) == null || c.focus();
+  }, [u]);
+  const v = `u-react-input-affix u-react-input-affix--${l} u-react-input-affix--${f}${m ? " u-react-input-affix--small" : ""}`, S = (t) => {
+    var c, D, L, R;
+    const a = [...((c = k.current) == null ? void 0 : c.querySelectorAll('[role="option"]')) ?? []], w = a.indexOf(document.activeElement);
+    if (t.key === "ArrowDown" || t.key === "ArrowUp") {
+      t.preventDefault();
+      const j = t.key === "ArrowDown" ? 1 : -1;
+      (D = a[(w + j + a.length) % a.length]) == null || D.focus();
+    } else t.key === "Home" || t.key === "End" ? (t.preventDefault(), (L = a[t.key === "Home" ? 0 : a.length - 1]) == null || L.focus()) : t.key === "Escape" ? (t.preventDefault(), y(!1), (R = A.current) == null || R.focus()) : t.key === "Tab" && y(!1);
+  };
+  let h = null;
+  if (e && f === "static")
+    h = /* @__PURE__ */ r("span", { ref: _, id: $, className: v, children: e.label });
+  else if (e && i && f === "cycle")
+    h = /* @__PURE__ */ r(
+      "button",
+      {
+        ref: _,
+        id: $,
+        type: "button",
+        className: v,
+        disabled: x,
+        "aria-label": `${I[l]}: ${e.label}. Сменить на ${i.label}`,
+        onClick: (t) => {
+          d(i), t.detail > 0 && p();
+        },
+        children: M(s, e)
+      }
+    );
+  else if (e) {
+    const t = `${$}-list`;
+    h = /* @__PURE__ */ g("div", { ref: _, className: `${v}${u ? " u-react-input-affix--open" : ""}`, children: [
+      /* @__PURE__ */ g(
+        "button",
+        {
+          ref: A,
+          id: $,
+          type: "button",
+          className: "u-react-input-affix__trigger",
+          disabled: x,
+          "aria-haspopup": "listbox",
+          "aria-expanded": u,
+          "aria-controls": u ? t : void 0,
+          "aria-label": `${I[l]}: ${e.label}`,
+          onClick: () => y((a) => !a),
+          onKeyDown: (a) => {
+            (a.key === "ArrowDown" || a.key === "ArrowUp") && (a.preventDefault(), y(!0));
+          },
+          children: [
+            M(s, e),
+            /* @__PURE__ */ r(z, { name: "down", size: m ? 10 : 12, rotate: u ? 180 : 0, className: "u-react-input-affix__icon" })
+          ]
+        }
+      ),
+      u && /* @__PURE__ */ r("ul", { ref: k, id: t, role: "listbox", "aria-label": I[l], className: "u-react-input-affix__menu", onKeyDown: S, children: s.map((a) => /* @__PURE__ */ r("li", { role: "presentation", children: /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": a.value === e.value,
+          className: "u-react-input-affix__option",
+          onClick: (w) => {
+            var c;
+            d(a), y(!1), w.detail > 0 ? p() : (c = A.current) == null || c.focus();
+          },
+          children: a.label
+        }
+      ) }, a.value)) })
+    ] });
+  }
+  return { element: h, width: h ? b : 0, mode: f, id: h ? $ : void 0 };
+}
+export { W as useInputAffix$u, Y as useInputAffixElement$u };

package/dist/components/InputText/InputText.d.ts

@@ -1,5 +1,6 @@
 
 import { InputTextProperties } from './InputText.types';
-import './InputText.less';
+
+
 export declare const InputText: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, title, placeholder, defaultValue, value, id: providedId, name, onChange, required, disabled, lineUp, rowGap, columnGap, styleInputContainer, styleTitle, styleInput, className, tableView, size, validationText, validationOn, error, validationOnWithoutText, absoluteValidationText, prefix, prefixValue, defaultPrefixValue, onPrefixChange, prefixPicker, suffix, suffixValue, defaultSuffixValue, onSuffixChange, suffixPicker, }: InputTextProperties) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=InputText.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputText.d.ts","sourceRoot":"","sources":["../../../src/components/InputText/InputText.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAMvD,OAAO,kBAAkB,CAAC;AAE1B,eAAO,MAAM,SAAS,GAAI,2gBAqCvB,mBAAmB,4CA4HrB,CAAA"}
+{"version":3,"file":"InputText.d.ts","sourceRoot":"","sources":["../../../src/components/InputText/InputText.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAOvD,OAAO,yDAAyD,CAAC;AACjE,OAAO,0DAA0D,CAAC;AAElE,eAAO,MAAM,SAAS,GAAI,2gBAqCvB,mBAAmB,4CA8HrB,CAAA"}

package/dist/components/InputText/InputText.js

@@ -0,0 +1,137 @@
+import { jsx as f, jsxs as m } from "react/jsx-runtime";
+import { getFieldAccessibility$u as le } from "../../shared/fieldAccessibility.js";
+/* empty css                 */
+import { useRef as ue, useState as pe, useEffect as fe } from "react";
+import { useAutoId$u as me } from "../../hooks/useAutoId.js";
+import { useInputOverflow$u as de } from "../../hooks/useInputOverflow.js";
+import { isCompact$u as xe, sizeClassName$u as ve } from "../../shared/size.js";
+import { useInputAffix$u as N, useInputAffixElement$u as z } from "./InputAffix.js";
+/* empty css                                        */
+/* empty css                                         */
+import { resolveValidation$u as he } from "../../vanilla/core/validation.js";
+const ke = ({
+  "aria-label": C,
+  "aria-labelledby": k,
+  "aria-describedby": w,
+  title: c = "",
+  placeholder: E = "",
+  defaultValue: O,
+  value: l,
+  id: R,
+  name: P = "",
+  onChange: d,
+  required: x = !1,
+  disabled: s = !1,
+  lineUp: u = !1,
+  rowGap: T = 4,
+  columnGap: B = 20,
+  styleInputContainer: G,
+  styleTitle: q,
+  styleInput: D,
+  className: F = "",
+  tableView: v = !1,
+  size: h,
+  validationText: L = "Заполните поле",
+  validationOn: H,
+  error: J,
+  validationOnWithoutText: K,
+  absoluteValidationText: M,
+  prefix: Q,
+  prefixValue: V,
+  defaultPrefixValue: W,
+  onPrefixChange: X,
+  prefixPicker: Y = "auto",
+  suffix: Z,
+  suffixValue: _,
+  defaultSuffixValue: U,
+  onSuffixChange: ee,
+  suffixPicker: te = "auto"
+}) => {
+  const a = he({ error: J, validationOn: H, validationOnWithoutText: K, validationText: L }), t = xe(h, v), b = ve(h, v), i = me(R, "u-input-text"), g = N(Q, V, W, X), y = N(Z, _, U, ee), n = ue(null);
+  de(n, l, s);
+  const $ = () => {
+    var e;
+    return (e = n.current) == null ? void 0 : e.focus();
+  }, o = z({ side: "prefix", inputId: i, ...g, onSelect: g.select, onPicked: $, picker: Y, disabled: s, compact: t }), r = z({ side: "suffix", inputId: i, ...y, onSelect: y.select, onPicked: $, picker: te, disabled: s, compact: t }), ie = !!(o.element || r.element), ne = le(i, c, x, a, {
+    "aria-label": C,
+    "aria-labelledby": k,
+    "aria-describedby": [w, o.id, r.id].filter(Boolean).join(" ") || void 0
+  }), S = ({ mode: e, width: se }) => {
+    const j = t ? "var(--u-unit, 1px)" : "var(--u-preset-unit, 1px)", [ae, ce] = e === "menu" ? [0, t ? 8 : 16] : [t ? 4 : 8, t ? 6 : 10];
+    return `calc(${ae} * ${j} + ${se}px + ${ce} * ${j})`;
+  }, [p, oe] = pe(null), re = (e) => {
+    oe(e.target.selectionStart), d && d(e);
+  };
+  fe(() => {
+    const e = n.current;
+    e != null && e.matches(":focus") && e.setSelectionRange(p, p);
+  }, [n, p, l]);
+  const A = (e) => typeof e == "number" ? `calc(${e} * var(--u-preset-unit, 1px))` : String(e), I = /* @__PURE__ */ f(
+    "input",
+    {
+      ...ne,
+      className: `u-react-input u-input ${a.hasError ? "u-input-required" : ""}`,
+      id: i,
+      ref: n,
+      name: P,
+      style: Object.assign(
+        {},
+        t && {
+          height: "var(--u-compact-height)",
+          fontSize: "var(--u-compact-font-size)",
+          padding: "var(--u-compact-padding)",
+          borderRadius: "8px"
+        },
+        o.element && { paddingLeft: S(o) },
+        r.element && { paddingRight: S(r) },
+        D
+      ),
+      type: "text",
+      placeholder: E,
+      value: l || "",
+      defaultValue: O,
+      disabled: s,
+      onChange: re
+    }
+  );
+  return /* @__PURE__ */ m("div", { className: `u-react-input-container${b ? ` ${b}` : ""} ${F}`, style: { position: "relative" }, children: [
+    /* @__PURE__ */ m(
+      "div",
+      {
+        style: Object.assign(
+          {
+            display: "flex",
+            flexDirection: u ? "row" : "column",
+            rowGap: u ? null : A(T),
+            columnGap: u ? A(B) : null
+          },
+          G
+        ),
+        children: [
+          c && /* @__PURE__ */ f(
+            "div",
+            {
+              id: `${i}-label`,
+              className: `${x ? "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)))"
+                },
+                q
+              ),
+              children: c
+            }
+          ),
+          ie ? /* @__PURE__ */ m("div", { className: "u-react-input-affixed", children: [
+            o.element,
+            I,
+            r.element
+          ] }) : I
+        ]
+      }
+    ),
+    a.showText && /* @__PURE__ */ f("h5", { id: `${i}-error`, className: "h5 clr-red-main", style: M ? { position: "absolute", bottom: "calc(-20 * var(--u-unit, 1px))" } : { position: "relative", marginTop: "calc(4 * var(--u-unit, 1px))" }, children: a.text })
+  ] });
+};
+export { ke as InputText$u };

package/dist/components/InputTime/InputTime.d.ts

@@ -1,5 +1,5 @@
 
-import './InputTime.less';
+
 import '../../styles/tokens.less';
 import '../../styles/popup.less';
 import type { InputTimeProperties } from './InputTime.types';

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

@@ -1 +1 @@
-{"version":3,"file":"InputTime.d.ts","sourceRoot":"","sources":["../../../src/components/InputTime/InputTime.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAA;AACjC,OAAO,yBAAyB,CAAC;AAQjC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAQ7D,eAAO,MAAM,SAAS,GAAI,+aA+BvB,mBAAmB,4CA0erB,CAAC"}
+{"version":3,"file":"InputTime.d.ts","sourceRoot":"","sources":["../../../src/components/InputTime/InputTime.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yDAAyD,CAAC;AACjE,OAAO,0BAA0B,CAAA;AACjC,OAAO,yBAAyB,CAAC;AAQjC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAS7D,eAAO,MAAM,SAAS,GAAI,+aA+BvB,mBAAmB,4CA2erB,CAAC"}