urfu-ui-kit-react 2.1.2 → 2.1.4

package/dist/components/TreeView/TreeView.d.ts

@@ -1,4 +1,5 @@
 
+
 import './TreeView.less';
 import { SelectProperties } from './TreeView.types';
 import '../../styles/tokens.less';

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

@@ -1 +1 @@
-{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../src/components/TreeView/TreeView.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC;AAE1C,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACnD,OAAO,0BAA0B,CAAA;AACjC,OAAO,yBAAyB,CAAA;AAchC,eAAO,MAAM,QAAQ,GAAI,uRAyBtB,gBAAgB,4CAiYlB,CAAA"}
+{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../src/components/TreeView/TreeView.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC;AAE1C,OAAO,uDAAuD,CAAC;AAC/D,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,gBAAgB,EAAuB,MAAM,kBAAkB,CAAA;AACxE,OAAO,0BAA0B,CAAA;AACjC,OAAO,yBAAyB,CAAA;AAchC,eAAO,MAAM,QAAQ,GAAI,uRAyBtB,gBAAgB,4CAmYlB,CAAA"}

package/dist/components/TreeView/TreeView.js

@@ -0,0 +1,323 @@
+import { jsxs as f, jsx as i, Fragment as J } from "react/jsx-runtime";
+import { useState as O, useRef as z, useMemo as Q } from "react";
+/* empty css                 */
+import { createPortal as Ce } from "react-dom";
+/* empty css                                      */
+/* empty css          */
+/* empty css                  */
+/* empty css                 */
+import { useDismiss$u as $e } from "../../hooks/useDismiss.js";
+import { useAnchoredPosition$u as Ie, fitToViewport$u as ke } from "../../hooks/useAnchoredPosition.js";
+import { useMountTransition$u as Ee } from "../../hooks/useMountTransition.js";
+import Se from "../../hooks/useDebounce.js";
+import { useOptionKeyboardNavigation$u as _e } from "../../hooks/useOptionKeyboardNavigation.js";
+import { useActiveOptionScroll$u as je } from "../../hooks/useActiveOptionScroll.js";
+import { OPTION_STATE_COLORS$u as X } from "../../shared/optionStateColors.js";
+import { getPopupTransitionStyle$u as Ae, POPUP_TRANSITION_MS$u as Pe } from "../../shared/popupTransition.js";
+import { useAutoId$u as ze } from "../../hooks/useAutoId.js";
+import { sizeClassName$u as De, isCompact$u as Be } from "../../shared/size.js";
+import { getPortalScopeProps$u as Ke } from "../../shared/uiKitDefaults.js";
+import { resolveValidation$u as Le } from "../../vanilla/core/validation.js";
+const ct = ({
+  title: D = "",
+  required: Z = !1,
+  styleSelectContainer: U,
+  styleTitle: ee,
+  lineUp: E = !1,
+  rowGap: te = 4,
+  columnGap: ie = 20,
+  placeholder: ne = "Выберите из списка",
+  value: n,
+  isClearable: S,
+  onDelete: oe,
+  onClick: B,
+  className: re,
+  tableView: K = !1,
+  size: L,
+  validationText: ce = "Заполните поле",
+  validationOn: se,
+  error: le,
+  absoluteValidationText: ae,
+  data: a,
+  portalOn: T,
+  id: ue,
+  disabled: y,
+  isSearchable: r
+}) => {
+  var Y;
+  const v = Be(L, K), M = De(L, K), _ = Le({ error: le, validationOn: se, validationText: ce }), R = ze(ue, "u-tree"), [h, C] = O(""), [de, me] = O(null), [b, pe] = O([]), [c, $] = O(!1), [fe, V] = O(null), H = z(null), I = z(null), u = z(), W = Se(h, 300), j = Q(() => a.filter((e) => e.title.toLowerCase().includes((W || "").toLowerCase())), [W, a]), k = () => {
+    $(!1);
+  };
+  $e({
+    refs: [H, I],
+    onDismiss: k,
+    enabled: c
+  });
+  const F = (e) => typeof e == "number" ? `calc(${e} * var(--u-preset-unit, 1px))` : String(e), he = (e, t) => {
+    e.stopPropagation(), pe((o) => o != null && o.includes(t) ? o.filter((l) => l !== t) : [...o, t]);
+  }, G = (e) => {
+    const t = a.filter((l) => l.parentId === e.id);
+    if (t.length === 0)
+      return e;
+    let o = null;
+    return t.forEach((l) => {
+      const d = G(l);
+      d && (o = d);
+    }), o;
+  }, A = ({ node: e, counter: t }) => {
+    const o = a.filter((p) => p.parentId === e.id), l = t + 1, d = b == null ? void 0 : b.includes(e.id), m = G(e), we = xe === e.id, Ne = n == (e == null ? void 0 : e.title), Oe = fe === e.id, Te = () => {
+      var p;
+      B(e), k(), r && (C(""), (p = u == null ? void 0 : u.current) == null || p.focus());
+    };
+    return /* @__PURE__ */ f("ul", { className: "treeview-list", children: [
+      /* @__PURE__ */ f(
+        "li",
+        {
+          className: "treeview-list__item",
+          "data-node-id": String(e.id),
+          style: Object.assign(
+            { paddingLeft: `calc(${t} * 16 * var(--u-preset-unit, 1px))` },
+            Ne ? { backgroundColor: X.selectedBackground, borderRadius: "20px" } : Oe || we ? { backgroundColor: X.hoveredBackground, borderRadius: "20px" } : null
+          ),
+          onMouseEnter: () => V(e.id),
+          onMouseLeave: () => V(null),
+          children: [
+            m.id !== e.id && /* @__PURE__ */ i("div", { onClick: (p) => he(p, e.id), children: d ? /* @__PURE__ */ i("i", { style: { cursor: "pointer", width: "calc(20 * var(--u-unit, 1px))", height: "calc(20 * var(--u-unit, 1px))" }, className: "u-icon icon-down clr-blue-main" }) : /* @__PURE__ */ i("i", { style: { cursor: "pointer", transform: "rotate(-90 0 0)" }, className: "u-icon icon-right clr-blue-main" }) }),
+            m.id !== e.id && /* @__PURE__ */ i("i", { className: "u-icon icon-folder clr-orange" }),
+            /* @__PURE__ */ i("p", { onClick: Te, style: { cursor: "pointer" }, className: "tt", children: e.title })
+          ]
+        }
+      ),
+      d && o.map((p) => /* @__PURE__ */ i(A, { node: p, counter: l }, p.id))
+    ] });
+  }, s = r && h ? j : a == null ? void 0 : a.filter((e) => e.parentId === null), w = Q(() => {
+    if (!Array.isArray(a)) return [];
+    if (r && h)
+      return j;
+    const e = /* @__PURE__ */ new Map();
+    a.forEach((l) => {
+      const d = l.parentId, m = e.get(d) ?? [];
+      m.push(l), e.set(d, m);
+    });
+    const t = [], o = (l) => {
+      (e.get(l) ?? []).forEach((m) => {
+        t.push(m), b.includes(m.id) && o(m.id);
+      });
+    };
+    return o(null), t;
+  }, [a, b, j, r, h]), { activeIndex: P, handleKeyDown: q } = _e({
+    isOpen: c,
+    disabled: y,
+    optionsLength: w.length,
+    initialIndex: Math.max(
+      0,
+      w.findIndex((e) => (e == null ? void 0 : e.title) === n)
+    ),
+    onOpen: () => $(!0),
+    onClose: () => {
+      k();
+    },
+    onSelectByIndex: (e) => {
+      const t = w[e];
+      t && ge(t);
+    }
+  }), xe = P >= 0 ? (Y = w[P]) == null ? void 0 : Y.id : void 0;
+  je({
+    isOpen: c,
+    activeIndex: P,
+    portalOn: !1,
+    localRef: I,
+    getSelector: (e) => {
+      const t = w[e];
+      return t ? `[data-node-id="${String(t.id)}"]` : "";
+    }
+  });
+  const ge = (e) => {
+    var t;
+    e && (B(e), k(), r && (C(""), (t = u == null ? void 0 : u.current) == null || t.focus()));
+  }, { rect: x } = Ie({
+    anchor: de,
+    enabled: c && !!T
+  }), N = x ? ke(x.x, x.width) : null, g = x && N ? { x: N.x, y: x.y + 60 + x.height + x.scrollY } : null, { shouldRender: ye, status: ve, isAnimated: be } = Ee({
+    isOpen: c && !!T,
+    duration: Pe
+  });
+  return /* @__PURE__ */ f("div", { className: `u-react-select-container${M ? ` ${M}` : ""} ${re}`, style: { position: "relative" }, children: [
+    /* @__PURE__ */ f(
+      "div",
+      {
+        style: Object.assign(
+          {
+            display: "flex",
+            flexDirection: E ? "row" : "column",
+            rowGap: E ? null : F(te),
+            columnGap: E ? F(ie) : null
+          },
+          U
+        ),
+        children: [
+          D && /* @__PURE__ */ i(
+            "div",
+            {
+              className: `${Z ? "u-required" : ""} u-react-select-title`,
+              style: Object.assign(
+                {
+                  color: "var(--u-field-title-color, #545454)",
+                  fontSize: "var(--u-field-label-size-main, calc(14 * var(--u-unit, 1px)))"
+                },
+                ee
+              ),
+              children: D
+            }
+          ),
+          /* @__PURE__ */ f(
+            "div",
+            {
+              className: `u-selectbox${y ? " u-selectbox-disabled" : ""} u-react-tree-view`,
+              ref: H,
+              style: { cursor: y ? "default" : "pointer" },
+              children: [
+                /* @__PURE__ */ f(
+                  "div",
+                  {
+                    tabIndex: y ? -1 : 0,
+                    onKeyDown: r ? void 0 : q,
+                    onClick: (e) => {
+                      var t;
+                      c || (r && ((t = u == null ? void 0 : u.current) == null || t.focus(), C("")), T && me(e.currentTarget)), $(!c);
+                    },
+                    className: `u-selectbox-select ${c ? "u-selectbox-select-open" : ""}`,
+                    id: `u-selectbox-select${R}`,
+                    style: Object.assign(
+                      v ? {
+                        height: "var(--u-compact-height)",
+                        fontSize: "var(--u-compact-font-size)",
+                        lineHeight: 1,
+                        padding: "var(--u-compact-padding)"
+                      } : {},
+                      _.hasError && { border: "1px solid var(--u-color-error, #EF302B)" },
+                      y && { pointerEvents: "none" }
+                    ),
+                    children: [
+                      !n && (!r || !c) ? /* @__PURE__ */ i(
+                        "span",
+                        {
+                          style: Object.assign(
+                            v ? {
+                              maxWidth: `calc(100% - ${(n == null ? void 0 : n.length) > 0 ? 32 : 16}px)`
+                            } : {},
+                            { color: "var(--u-field-title-color, #545454)" }
+                          ),
+                          className: "u-selectbox-select-title",
+                          children: ne
+                        }
+                      ) : /* @__PURE__ */ i(J, {}),
+                      n && (!c || !r) ? /* @__PURE__ */ i(
+                        "span",
+                        {
+                          style: v ? { maxWidth: `calc(100% - ${S && (n != null && n.length) ? 32 : 16}px)` } : {},
+                          className: "u-selectbox-select-title",
+                          children: n
+                        }
+                      ) : /* @__PURE__ */ i(J, {}),
+                      r && /* @__PURE__ */ i(
+                        "input",
+                        {
+                          ref: u,
+                          className: c ? "treeview__search" : "treeview__search_disabled",
+                          placeholder: n || "Введите значение",
+                          value: h,
+                          onChange: (e) => C(e.target.value),
+                          onClick: (e) => {
+                            c && e.stopPropagation();
+                          },
+                          onKeyDown: q,
+                          style: Object.assign(v ? { padding: 0, paddingRight: `calc(${S && (n != null && n.length) ? 37 : 20} * var(--u-unit, 1px))`, fontSize: "var(--u-compact-font-size)" } : {}, { width: "100%" })
+                        }
+                      ),
+                      n && S && /* @__PURE__ */ i(
+                        "i",
+                        {
+                          onClick: (e) => {
+                            oe(e), $(!1);
+                          },
+                          className: "u-selectbox-select-icon-cross",
+                          role: "button",
+                          "aria-label": "Очистить",
+                          style: Object.assign(
+                            v ? {
+                              right: "calc(24 * var(--u-unit, 1px))"
+                            } : {},
+                            y && { pointerEvents: "none" }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ i(
+                        "i",
+                        {
+                          className: "u-selectbox-select-icon-arrow",
+                          id: `u-selectbox-select-icon-arrow${R}`,
+                          style: v ? {
+                            width: "calc(12 * var(--u-unit, 1px)) !important",
+                            right: "calc(6 * var(--u-unit, 1px))"
+                          } : null
+                        }
+                      )
+                    ]
+                  }
+                ),
+                T ? ye && g && Ce(
+                  /* @__PURE__ */ i(
+                    "div",
+                    {
+                      ref: I,
+                      ...Ke(),
+                      style: Object.assign(
+                        {
+                          left: g == null ? void 0 : g.x,
+                          top: (g == null ? void 0 : g.y) - 60,
+                          opacity: 1,
+                          visibility: "visible",
+                          height: "fit-content",
+                          // Переменная, чтобы список внутри модалки можно было
+                          // поднять над ней, не трогая код потребителя.
+                          zIndex: "var(--u-select-popup-z, 10010)",
+                          display: "block",
+                          // Не уже поля: при `width: auto` портальный список
+                          // сжимался по содержимому и обрезал названия узлов.
+                          // Ширину задаём минимальной, чтобы дерево по-прежнему
+                          // могло раздаться под вложенность.
+                          minWidth: N == null ? void 0 : N.width,
+                          width: "auto"
+                        },
+                        Ae(ve, be)
+                      ),
+                      className: "u-selectbox-options",
+                      children: /* @__PURE__ */ f("div", { className: "treeview", children: [
+                        s == null ? void 0 : s.map((e) => /* @__PURE__ */ i(A, { node: e, counter: 0 }, e.id)),
+                        r && h && !(s != null && s.length) && /* @__PURE__ */ i("div", { className: "u-selectbox-empty-text", children: "Ничего не найдено" })
+                      ] })
+                    }
+                  ),
+                  document.body
+                ) : /* @__PURE__ */ i(
+                  "div",
+                  {
+                    ref: I,
+                    className: "u-selectbox-options",
+                    children: /* @__PURE__ */ f("div", { className: "treeview", children: [
+                      s == null ? void 0 : s.map((e) => /* @__PURE__ */ i(A, { node: e, counter: 0 }, e.id)),
+                      r && h && !(s != null && s.length) && /* @__PURE__ */ i("div", { className: "u-selectbox-empty-text", children: "Ничего не найдено" })
+                    ] })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    _.showText && /* @__PURE__ */ i("h5", { className: "h5 clr-red-main", style: ae ? { position: "absolute", bottom: "calc(-20 * var(--u-unit, 1px))" } : { position: "relative", marginTop: "calc(4 * var(--u-unit, 1px))" }, children: _.text })
+  ] });
+};
+export { ct as TreeView$u };

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

@@ -5,10 +5,6 @@ export type DataProperties = Partial<{
     parentId: string;
     title: string;
 }>;
-export type OptionsPositionProperties = Partial<{
-    x: number;
-    y: number;
-}>;
 export type SelectProperties = Partial<{
     title: string;
     required: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"TreeView.types.d.ts","sourceRoot":"","sources":["../../../src/components/TreeView/TreeView.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAAC;IAC5C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACb,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,oBAAoB,EAAE,aAAa,CAAC;IACpC,UAAU,EAAE,aAAa,CAAC;IAC1B,WAAW,EAAE,aAAa,CAAC;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC;IAC1C,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,sBAAsB,EAAE,OAAO,CAAC;IAChC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC,CAAC"}
+{"version":3,"file":"TreeView.types.d.ts","sourceRoot":"","sources":["../../../src/components/TreeView/TreeView.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,oBAAoB,EAAE,aAAa,CAAC;IACpC,UAAU,EAAE,aAAa,CAAC;IAC1B,WAAW,EAAE,aAAa,CAAC;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC;IAC1C,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,sBAAsB,EAAE,OAAO,CAAC;IAChC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC,CAAC"}