urfu-ui-kit-react 2.1.5 → 2.1.6

package/dist/components/TreeView/TreeView.js

@@ -1,73 +1,73 @@
-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";
+import { jsxs as f, jsx as i, Fragment as Q } from "react/jsx-runtime";
+import { useState as O, useRef as z, useMemo as X } from "react";
 /* empty css                 */
-import { createPortal as Ce } from "react-dom";
+import { createPortal as $e } from "react-dom";
 /* empty css                                      */
 /* empty css          */
 /* empty css                  */
 /* empty css                 */
-import { useDismiss$u as $e } from "../../hooks/useDismiss.js";
+import { useDismiss$u as Ce } 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 { OPTION_STATE_COLORS$u as Z } 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 = ({
+const ot = ({
   title: D = "",
-  required: Z = !1,
-  styleSelectContainer: U,
-  styleTitle: ee,
+  required: U = !1,
+  styleSelectContainer: ee,
+  styleTitle: te,
   lineUp: E = !1,
-  rowGap: te = 4,
-  columnGap: ie = 20,
-  placeholder: ne = "Выберите из списка",
+  rowGap: ie = 4,
+  columnGap: ne = 20,
+  placeholder: ce = "Выберите из списка",
   value: n,
   isClearable: S,
-  onDelete: oe,
+  onDelete: re,
   onClick: B,
-  className: re,
-  tableView: K = !1,
-  size: L,
-  validationText: ce = "Заполните поле",
+  className: K,
+  tableView: L = !1,
+  size: M,
+  validationText: oe = "Заполните поле",
   validationOn: se,
   error: le,
   absoluteValidationText: ae,
   data: a,
   portalOn: T,
   id: ue,
-  disabled: y,
+  disabled: v,
   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);
+  var J;
+  const y = Be(M, L), R = De(M, L), _ = Le({ error: le, validationOn: se, validationText: oe }), V = ze(ue, "u-tree"), [h, $] = O(""), [de, pe] = O(null), [b, me] = O([]), [o, C] = O(!1), [fe, H] = O(null), W = z(null), I = z(null), u = z(), F = Se(h, 300), j = X(() => a.filter((e) => e.title.toLowerCase().includes((F || "").toLowerCase())), [F, a]), k = () => {
+    C(!1);
   };
-  $e({
-    refs: [H, I],
+  Ce({
+    refs: [W, I],
     onDismiss: k,
-    enabled: c
+    enabled: o
   });
-  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 G = (e) => typeof e == "number" ? `calc(${e} * var(--u-preset-unit, 1px))` : String(e), he = (e, t) => {
+    e.stopPropagation(), me((c) => c != null && c.includes(t) ? c.filter((l) => l !== t) : [...c, t]);
+  }, q = (e) => {
     const t = a.filter((l) => l.parentId === e.id);
     if (t.length === 0)
       return e;
-    let o = null;
+    let c = null;
     return t.forEach((l) => {
-      const d = G(l);
-      d && (o = d);
-    }), o;
+      const d = q(l);
+      d && (c = d);
+    }), c;
   }, 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());
+    const c = a.filter((m) => m.parentId === e.id), l = t + 1, d = b == null ? void 0 : b.includes(e.id), p = q(e), we = xe === e.id, Ne = n == (e == null ? void 0 : e.title), Oe = fe === e.id, Te = () => {
+      var m;
+      B(e), k(), r && ($(""), (m = u == null ? void 0 : u.current) == null || m.focus());
     };
     return /* @__PURE__ */ f("ul", { className: "treeview-list", children: [
       /* @__PURE__ */ f(
@@ -76,44 +76,44 @@ const ct = ({
           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
+            { paddingLeft: `calc((${t} * 16 + 12) * var(--u-preset-unit, 1px))` },
+            Ne ? { backgroundColor: Z.selectedBackground, borderRadius: "calc(10 * var(--u-preset-unit, 1px))" } : Oe || we ? { backgroundColor: Z.hoveredBackground, borderRadius: "calc(10 * var(--u-preset-unit, 1px))" } : null
           ),
-          onMouseEnter: () => V(e.id),
-          onMouseLeave: () => V(null),
+          onMouseEnter: () => H(e.id),
+          onMouseLeave: () => H(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" }),
+            p.id !== e.id && /* @__PURE__ */ i("div", { onClick: (m) => he(m, 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", width: "calc(20 * var(--u-unit, 1px))", height: "calc(20 * var(--u-unit, 1px))" }, className: "u-icon icon-right clr-blue-main" }) }),
+            p.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))
+      d && c.map((m) => /* @__PURE__ */ i(A, { node: m, counter: l }, m.id))
     ] });
-  }, s = r && h ? j : a == null ? void 0 : a.filter((e) => e.parentId === null), w = Q(() => {
+  }, s = r && h ? j : a == null ? void 0 : a.filter((e) => e.parentId === null), w = X(() => {
     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 d = l.parentId, p = e.get(d) ?? [];
+      p.push(l), e.set(d, p);
     });
-    const t = [], o = (l) => {
-      (e.get(l) ?? []).forEach((m) => {
-        t.push(m), b.includes(m.id) && o(m.id);
+    const t = [], c = (l) => {
+      (e.get(l) ?? []).forEach((p) => {
+        t.push(p), b.includes(p.id) && c(p.id);
       });
     };
-    return o(null), t;
-  }, [a, b, j, r, h]), { activeIndex: P, handleKeyDown: q } = _e({
-    isOpen: c,
-    disabled: y,
+    return c(null), t;
+  }, [a, b, j, r, h]), { activeIndex: P, handleKeyDown: Y } = _e({
+    isOpen: o,
+    disabled: v,
     optionsLength: w.length,
     initialIndex: Math.max(
       0,
       w.findIndex((e) => (e == null ? void 0 : e.title) === n)
     ),
-    onOpen: () => $(!0),
+    onOpen: () => C(!0),
     onClose: () => {
       k();
     },
@@ -121,9 +121,9 @@ const ct = ({
       const t = w[e];
       t && ge(t);
     }
-  }), xe = P >= 0 ? (Y = w[P]) == null ? void 0 : Y.id : void 0;
+  }), xe = P >= 0 ? (J = w[P]) == null ? void 0 : J.id : void 0;
   je({
-    isOpen: c,
+    isOpen: o,
     activeIndex: P,
     portalOn: !1,
     localRef: I,
@@ -134,15 +134,15 @@ const ct = ({
   });
   const ge = (e) => {
     var t;
-    e && (B(e), k(), r && (C(""), (t = u == null ? void 0 : u.current) == null || t.focus()));
+    e && (B(e), k(), r && ($(""), (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,
+    enabled: o && !!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: ve, status: ye, isAnimated: be } = Ee({
+    isOpen: o && !!T,
     duration: Pe
   });
-  return /* @__PURE__ */ f("div", { className: `u-react-select-container${M ? ` ${M}` : ""} ${re}`, style: { position: "relative" }, children: [
+  return /* @__PURE__ */ f("div", { className: `u-react-select-container${R ? ` ${R}` : ""}${K ? ` ${K}` : ""}`, style: { position: "relative" }, children: [
     /* @__PURE__ */ f(
       "div",
       {
@@ -150,22 +150,22 @@ const ct = ({
           {
             display: "flex",
             flexDirection: E ? "row" : "column",
-            rowGap: E ? null : F(te),
-            columnGap: E ? F(ie) : null
+            rowGap: E ? null : G(ie),
+            columnGap: E ? G(ne) : null
           },
-          U
+          ee
         ),
         children: [
           D && /* @__PURE__ */ i(
             "div",
             {
-              className: `${Z ? "u-required" : ""} u-react-select-title`,
+              className: `${U ? "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
+                te
               ),
               children: D
             }
@@ -173,82 +173,82 @@ const ct = ({
           /* @__PURE__ */ f(
             "div",
             {
-              className: `u-selectbox${y ? " u-selectbox-disabled" : ""} u-react-tree-view`,
-              ref: H,
-              style: { cursor: y ? "default" : "pointer" },
+              className: `u-selectbox${v ? " u-selectbox-disabled" : ""} u-react-tree-view`,
+              ref: W,
+              style: { cursor: v ? "default" : "pointer" },
               children: [
                 /* @__PURE__ */ f(
                   "div",
                   {
-                    tabIndex: y ? -1 : 0,
-                    onKeyDown: r ? void 0 : q,
+                    tabIndex: v ? -1 : 0,
+                    onKeyDown: r ? void 0 : Y,
                     onClick: (e) => {
                       var t;
-                      c || (r && ((t = u == null ? void 0 : u.current) == null || t.focus(), C("")), T && me(e.currentTarget)), $(!c);
+                      o || (r && ((t = u == null ? void 0 : u.current) == null || t.focus(), $("")), T && pe(e.currentTarget)), C(!o);
                     },
-                    className: `u-selectbox-select ${c ? "u-selectbox-select-open" : ""}`,
-                    id: `u-selectbox-select${R}`,
+                    className: `u-selectbox-select ${o ? "u-selectbox-select-open" : ""}`,
+                    id: `u-selectbox-select${V}`,
                     style: Object.assign(
-                      v ? {
+                      y ? {
                         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" }
+                      v && { pointerEvents: "none" }
                     ),
                     children: [
-                      !n && (!r || !c) ? /* @__PURE__ */ i(
+                      !n && (!r || !o) ? /* @__PURE__ */ i(
                         "span",
                         {
                           style: Object.assign(
-                            v ? {
-                              maxWidth: `calc(100% - ${(n == null ? void 0 : n.length) > 0 ? 32 : 16}px)`
+                            y ? {
+                              maxWidth: `calc(100% - ${((n == null ? void 0 : n.length) ?? 0) > 0 ? 32 : 16}px)`
                             } : {},
                             { color: "var(--u-field-title-color, #545454)" }
                           ),
                           className: "u-selectbox-select-title",
-                          children: ne
+                          children: ce
                         }
-                      ) : /* @__PURE__ */ i(J, {}),
-                      n && (!c || !r) ? /* @__PURE__ */ i(
+                      ) : /* @__PURE__ */ i(Q, {}),
+                      n && (!o || !r) ? /* @__PURE__ */ i(
                         "span",
                         {
-                          style: v ? { maxWidth: `calc(100% - ${S && (n != null && n.length) ? 32 : 16}px)` } : {},
+                          style: y ? { maxWidth: `calc(100% - ${S && (n != null && n.length) ? 32 : 16}px)` } : {},
                           className: "u-selectbox-select-title",
                           children: n
                         }
-                      ) : /* @__PURE__ */ i(J, {}),
+                      ) : /* @__PURE__ */ i(Q, {}),
                       r && /* @__PURE__ */ i(
                         "input",
                         {
                           ref: u,
-                          className: c ? "treeview__search" : "treeview__search_disabled",
+                          className: o ? "treeview__search" : "treeview__search_disabled",
                           placeholder: n || "Введите значение",
                           value: h,
-                          onChange: (e) => C(e.target.value),
+                          onChange: (e) => $(e.target.value),
                           onClick: (e) => {
-                            c && e.stopPropagation();
+                            o && 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%" })
+                          onKeyDown: Y,
+                          style: Object.assign(y ? { 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);
+                            re(e), C(!1);
                           },
                           className: "u-selectbox-select-icon-cross",
                           role: "button",
                           "aria-label": "Очистить",
                           style: Object.assign(
-                            v ? {
+                            y ? {
                               right: "calc(24 * var(--u-unit, 1px))"
                             } : {},
-                            y && { pointerEvents: "none" }
+                            v && { pointerEvents: "none" }
                           )
                         }
                       ),
@@ -256,8 +256,8 @@ const ct = ({
                         "i",
                         {
                           className: "u-selectbox-select-icon-arrow",
-                          id: `u-selectbox-select-icon-arrow${R}`,
-                          style: v ? {
+                          id: `u-selectbox-select-icon-arrow${V}`,
+                          style: y ? {
                             width: "calc(12 * var(--u-unit, 1px)) !important",
                             right: "calc(6 * var(--u-unit, 1px))"
                           } : null
@@ -266,7 +266,7 @@ const ct = ({
                     ]
                   }
                 ),
-                T ? ye && g && Ce(
+                T ? ve && g && $e(
                   /* @__PURE__ */ i(
                     "div",
                     {
@@ -290,7 +290,7 @@ const ct = ({
                           minWidth: N == null ? void 0 : N.width,
                           width: "auto"
                         },
-                        Ae(ve, be)
+                        Ae(ye, be)
                       ),
                       className: "u-selectbox-options",
                       children: /* @__PURE__ */ f("div", { className: "treeview", children: [
@@ -320,4 +320,4 @@ const ct = ({
     _.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 };
+export { ot as TreeView$u };

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

@@ -15,7 +15,7 @@ export type SelectProperties = Partial<{
     rowGap: string | number;
     columnGap: string | number;
     placeholder: string;
-    value: any;
+    value: string | null;
     isClearable: boolean;
     onDelete: (...args: unknown[]) => unknown;
     onClick: (...args: unknown[]) => unknown;

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,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":"AAAA,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,MAAM,GAAG,IAAI,CAAC;IACrB,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"}

package/dist/components/VirtualList/VirtualList.d.ts

@@ -0,0 +1,45 @@
+
+import { type CSSProperties, type ReactElement, type ReactNode, type Ref } from 'react';
+import type { VirtualKey, VirtualScrollOptions } from '../../shared/virtualList';
+export interface VirtualListProps<T> {
+    items: readonly T[];
+    /** Устойчивый ключ строки (id записи): по нему хранится замер высоты и фокус. */
+    getKey: (item: T, index: number) => VirtualKey;
+    /** Содержимое строки. Обёртка `li` с позицией — у списка. */
+    renderItem: (item: T, index: number) => ReactNode;
+    /** Оценка высоты строки до замера, px. По умолчанию 40. */
+    estimateSize?: number;
+    /** Сколько строк держать в разметке сверх видимых сверху и снизу. По умолчанию 5. */
+    overscan?: number;
+    /**
+     * Высота своей области прокрутки (число — px). Не задана — список прокручивается
+     * вместе с ближайшим прокручиваемым предком: телом Modal, панелью, страницей.
+     */
+    height?: CSSProperties['height'];
+    /** Область прокрутки явно, если её не удаётся найти по предкам. */
+    scrollElement?: HTMLElement | null;
+    /** Идёт загрузка — `aria-busy` у списка. */
+    busy?: boolean;
+    /** После строк внутри области прокрутки: датчик `InfiniteScroll`, кнопка, подпись. */
+    footer?: ReactNode;
+    /** Вместо пустого списка. */
+    empty?: ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+    itemClassName?: string;
+    style?: CSSProperties;
+}
+export interface VirtualListHandle {
+    /** Докрутить до строки; `behavior: 'smooth'` при «уменьшить движение» — мгновенно. */
+    scrollToIndex: (index: number, options?: VirtualScrollOptions) => void;
+}
+/**
+ * Длинный список: в DOM только видимые строки и запас, высоты строк — по факту.
+ * Прокручивается сам (`height`) или вместе с телом Modal / страницей. Сфокусированная
+ * строка не пропадает при прокрутке — Tab продолжает с неё. Ядро общее с Vue `VirtualList`.
+ */
+export declare const VirtualList: <T>(props: VirtualListProps<T> & {
+    ref?: Ref<VirtualListHandle>;
+}) => ReactElement;
+//# sourceMappingURL=VirtualList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,2DAA2D,CAAC;AACnE,OAAO,EAAmC,KAAK,aAAa,EAAqB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5I,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEjF,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,iFAAiF;IACjF,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,UAAU,CAAC;IAC/C,6DAA6D;IAC7D,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,mEAAmE;IACnE,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sFAAsF;IACtF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC,sFAAsF;IACtF,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACxE;AAkED;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAmC,CAAC,CAAC,EAC3D,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC1D,YAAY,CAAC"}

package/dist/components/VirtualList/VirtualList.js

@@ -0,0 +1,62 @@
+import { jsxs as B, jsx as i } from "react/jsx-runtime";
+/* empty css                                          */
+import { forwardRef as C, useImperativeHandle as R } from "react";
+import { useVirtualList$u as S } from "../../hooks/useVirtualList.js";
+function E({
+  items: l,
+  getKey: n,
+  renderItem: u,
+  estimateSize: c,
+  overscan: m,
+  height: e,
+  scrollElement: d,
+  busy: v,
+  footer: f,
+  empty: r,
+  "aria-label": p,
+  "aria-labelledby": b,
+  className: h,
+  itemClassName: N,
+  style: t
+}, _) {
+  const { listRef: y, virtualItems: j, totalSize: I, measureElement: w, scrollToIndex: s } = S({
+    items: l,
+    getKey: n,
+    estimateSize: c,
+    overscan: m,
+    scrollElement: d
+  });
+  R(_, () => ({ scrollToIndex: s }), [s]);
+  const o = e !== void 0, x = ["u-virtual-list", o && "u-virtual-list--scroll", h].filter(Boolean).join(" "), L = ["u-virtual-list__item", N].filter(Boolean).join(" ");
+  return /* @__PURE__ */ B("div", { className: x, style: o ? { height: e, ...t } : t, children: [
+    /* @__PURE__ */ i(
+      "ul",
+      {
+        ref: y,
+        role: "list",
+        className: "u-virtual-list__inner",
+        style: { height: I },
+        "aria-label": p,
+        "aria-labelledby": b,
+        "aria-busy": v || void 0,
+        children: j.map(({ key: V, index: a, start: g, item: z }) => /* @__PURE__ */ i(
+          "li",
+          {
+            ref: w,
+            "data-index": a,
+            className: L,
+            style: { top: g },
+            "aria-setsize": l.length,
+            "aria-posinset": a + 1,
+            children: u(z, a)
+          },
+          V
+        ))
+      }
+    ),
+    !l.length && r !== void 0 && /* @__PURE__ */ i("div", { className: "u-virtual-list__empty", children: r }),
+    f
+  ] });
+}
+const A = C(E);
+export { A as VirtualList$u };