@alphakits/ui 2.3.1 → 2.4.1

package/dist/table/components/loading/index.js

@@ -1,15 +1,21 @@
 import { jsx as r } from "react/jsx-runtime";
-import t, { memo as a } from "react";
-import e from "classnames";
-import { TableCell as l } from "../cell/component.js";
-import m from "./index.module.css.js";
-const f = a(({ columnsLength: o }) => /* @__PURE__ */ r(t.Fragment, { children: new Array(5).fill(1).map(() => /* @__PURE__ */ r("tr", { className: e(m.row, m.tr), children: new Array(o).fill(1).map(() => /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(
-  "div",
-  {
-    className: m.td,
-    style: { width: `${Math.floor(Math.random() * 51) + 50}%` }
-  }
-) })) })) }));
+import l from "classnames";
+import s, { memo as c, useMemo as i } from "react";
+import { TableCell as n } from "../cell/component.js";
+import t from "./index.module.css.js";
+const d = ["r1", "r2", "r3", "r4", "r5"], M = c(({ columnsLength: e }) => {
+  const a = i(
+    () => Array.from({ length: e }, (o, m) => `col-${m + 1}`),
+    [e]
+  );
+  return /* @__PURE__ */ r(s.Fragment, { children: d.map((o) => /* @__PURE__ */ r("tr", { className: l(t.row, t.tr), children: a.map((m) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(
+    "div",
+    {
+      className: t.td,
+      style: { width: `${Math.floor(Math.random() * 51) + 50}%` }
+    }
+  ) }, `${o}-${m}`)) }, o)) });
+});
 export {
-  f as Loading
+  M as Loading
 };

package/dist/table/components/pagination/index.js

@@ -1,89 +1,92 @@
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import { jsxs as r, jsx as s } from "react/jsx-runtime";
 import f from "@alphakits/icons/dist/ChevronForwardS";
-import m from "classnames";
+import d from "classnames";
 import { Button as h } from "../../../button/component.js";
-import { Typography as g } from "../../../typography/component.js";
-import { translate as b } from "../../languages/index.js";
+import { Typography as m } from "../../../typography/component.js";
+import { translate as y } from "../../languages/index.js";
 import i from "./index.module.css.js";
-function N(r, o) {
-  const p = r - 2, c = r + 2 + 1, l = [], a = [];
-  let n = 0;
+function b(p, o) {
+  const g = p - 2, c = p + 2 + 1, a = [], n = [];
+  let l = 0;
   for (let e = 1; e <= o; e++)
-    (e === 1 || e === o || e >= p && e < c) && l.push(e);
-  return l.forEach((e) => {
-    n && (e - n === 2 ? a.push(n + 1) : e - n !== 1 && a.push("...")), a.push(e), n = e;
-  }), a;
+    (e === 1 || e === o || e >= g && e < c) && a.push(e);
+  return a.forEach((e) => {
+    l && (e - l === 2 ? n.push({ key: `page-${l + 1}`, type: "page", page: l + 1 }) : e - l !== 1 && n.push({ key: `ellipsis-${l}-${e}`, type: "ellipsis" })), n.push({ key: `page-${e}`, type: "page", page: e }), l = e;
+  }), n;
 }
-const j = ({
-  pagesCount: r,
+const T = ({
+  pagesCount: p,
   currentPage: o,
   recordsPerPage: v = 30,
-  total: p,
+  total: g,
   language: c,
-  addParam: l
+  addParam: a
 }) => {
-  const a = N(o, r), n = o === 1, e = o === r;
-  return /* @__PURE__ */ d("div", { className: i.pagination_wrap, children: [
-    /* @__PURE__ */ d("div", { className: i.pages_info, children: [
-      /* @__PURE__ */ s(g.Text, { view: "title", weight: "medium", color: "secondary", children: b(c)("totalCount") }),
-      /* @__PURE__ */ s(g.Text, { view: "title", weight: "medium", color: "primary", children: p })
+  const n = b(o, p), l = o === 1, e = o === p;
+  return /* @__PURE__ */ r("div", { className: i.pagination_wrap, children: [
+    /* @__PURE__ */ r("div", { className: i.pages_info, children: [
+      /* @__PURE__ */ s(m.Text, { view: "title", weight: "medium", color: "secondary", children: y(c)("totalCount") }),
+      /* @__PURE__ */ s(m.Text, { view: "title", weight: "medium", color: "primary", children: g })
     ] }),
-    /* @__PURE__ */ s("div", { className: i.pagination_center, children: a.length > 1 && /* @__PURE__ */ d("div", { className: i.pagination, children: [
+    /* @__PURE__ */ s("div", { className: i.pagination_center, children: n.length > 1 && /* @__PURE__ */ r("div", { className: i.pagination, children: [
       /* @__PURE__ */ s(
         h,
         {
-          className: m(i.prev_btn, i.btn, { [i.disabled_btn]: n }),
+          className: d(i.prev_btn, i.btn, {
+            [i.disabled_btn]: l
+          }),
           leftAddons: /* @__PURE__ */ s(f, {}),
           view: "ghost",
-          onClick: () => l({ page: o - 1 }),
-          disabled: n
+          onClick: () => a({ page: o - 1 }),
+          disabled: l
         }
       ),
-      a.map((t, w) => Number.isFinite(t) ? /* @__PURE__ */ s(
-        h,
-        {
-          className: m(
-            i.pagination_btn,
-            { [i.active]: t === o }
-          ),
-          size: "xs",
-          view: "ghost",
-          onClick: () => l({ page: t }),
-          children: t
-        },
-        t
-      ) : /* @__PURE__ */ s(
-        h,
-        {
-          className: m(i.pagination_btn),
-          view: "ghost",
-          disabled: !0,
-          children: "..."
-        },
-        t + w
-      )),
+      n.map(
+        (t) => t.type === "page" ? /* @__PURE__ */ s(
+          h,
+          {
+            className: d(i.pagination_btn, {
+              [i.active]: t.page === o
+            }),
+            size: "xs",
+            view: "ghost",
+            onClick: () => a({ page: t.page }),
+            children: t.page
+          },
+          t.key
+        ) : /* @__PURE__ */ s(
+          h,
+          {
+            className: d(i.pagination_btn),
+            view: "ghost",
+            disabled: !0,
+            children: "..."
+          },
+          t.key
+        )
+      ),
       /* @__PURE__ */ s(
         h,
         {
-          className: m(i.btn, { [i.disabled_btn]: e }),
+          className: d(i.btn, { [i.disabled_btn]: e }),
           leftAddons: /* @__PURE__ */ s(f, {}),
           view: "ghost",
           onClick: () => {
-            l({ page: o + 1 });
+            a({ page: o + 1 });
           },
           disabled: e
         }
       )
     ] }) }),
-    /* @__PURE__ */ d("div", { className: i.select_wrap, children: [
-      /* @__PURE__ */ s(g.Text, { view: "title", weight: "medium", color: "secondary", children: b(c)("resultsOnPage") }),
+    /* @__PURE__ */ r("div", { className: i.select_wrap, children: [
+      /* @__PURE__ */ s(m.Text, { view: "title", weight: "medium", color: "secondary", children: y(c)("resultsOnPage") }),
       /* @__PURE__ */ s(
         "select",
         {
           value: v,
           className: i.select,
           onChange: (t) => {
-            l({ page: 1, limit: t.target.value });
+            a({ page: 1, limit: t.target.value });
           },
           children: [5, 10, 20, 30, 40, 50].map((t) => /* @__PURE__ */ s("option", { value: t, children: t }, t))
         }
@@ -92,5 +95,5 @@ const j = ({
   ] });
 };
 export {
-  j as Pagination
+  T as Pagination
 };

package/dist/table/components/table-header/index.js

@@ -1,87 +1,90 @@
-import { jsxs as n, jsx as t, Fragment as F } from "react/jsx-runtime";
-import { useState as f, useEffect as p, useRef as R, useCallback as h } from "react";
-import $ from "@alphakits/icons/dist/ControllerS";
-import A from "@alphakits/icons/dist/PlusS";
-import { useDebounce as B } from "rooks";
-import E from "classnames";
-import { Button as b } from "../../../button/component.js";
-import { Flex as H } from "../../../flex/component.js";
-import { HeaderSearch as I } from "../../../header-search/component.js";
-import { translate as P } from "../../languages/index.js";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import R from "@alphakits/icons/dist/ControllerS";
+import $ from "@alphakits/icons/dist/PlusS";
+import A from "classnames";
+import { useState as h, useEffect as b, useRef as B, useCallback as v } from "react";
+import { useDebounce as E } from "rooks";
+import { Button as g } from "../../../button/component.js";
+import { Flex as F } from "../../../flex/component.js";
+import { HeaderSearch as H } from "../../../header-search/component.js";
+import { translate as I } from "../../languages/index.js";
 import r from "./index.module.css.js";
-const W = ({
-  tags: l,
-  searchPlaceholder: g = "Type something..",
+const U = ({
+  tags: a,
+  searchPlaceholder: C = "Type something..",
   searchText: o,
-  hideSearch: v,
-  compact: C = !1,
-  rightHeaderAddons: x,
+  hideSearch: x,
+  compact: S = !1,
+  rightHeaderAddons: V,
   leftHeaderAddons: c,
-  addParam: S,
-  onCreateClick: i,
-  onFiltersClick: V,
-  createButtonLabel: y,
-  showFiltersButton: N,
-  filtersButtonLabel: j,
-  language: D
+  addParam: i,
+  onCreateClick: m,
+  onFiltersClick: y,
+  createButtonLabel: N,
+  showFiltersButton: j,
+  filtersButtonLabel: D,
+  language: k
 }) => {
-  const [k, m] = f(o ?? ""), [d, u] = f(o ?? "");
-  p(() => {
+  const [w, u] = h(o ?? ""), [d, f] = h(o ?? "");
+  b(() => {
     const e = `${o ?? ""}`;
-    s.current = e.trim(), m(e), u(e);
+    s.current = e.trim(), u(e), f(e);
   }, [o]);
-  const w = B((e) => u(e), 500), s = R("");
-  p(() => {
+  const p = E((e) => f(e), 500), s = B("");
+  b(() => {
     const e = `${d || ""}`.trim();
-    s.current !== e && (S({ searchText: e, page: 1 }), s.current = e);
-  }, [d]);
-  const a = h((e) => {
-    m(e), w(e);
-  }, []), z = h(() => {
-    a("");
-  }, [a]);
-  return /* @__PURE__ */ n("div", { className: E(r.table_header, { [r.compact]: C }), children: [
+    s.current !== e && (i({ searchText: e, page: 1 }), s.current = e);
+  }, [d, i]);
+  const l = v(
+    (e) => {
+      u(e), p(e);
+    },
+    [p]
+  ), z = v(() => {
+    l("");
+  }, [l]);
+  return /* @__PURE__ */ n("div", { className: A(r.table_header, { [r.compact]: S }), children: [
     /* @__PURE__ */ n("div", { className: r.actions, children: [
-      /* @__PURE__ */ n(H, { justify: "start", gap: "md", children: [
-        !v && /* @__PURE__ */ t(
-          I,
+      /* @__PURE__ */ n(F, { justify: "start", gap: "md", children: [
+        !x && /* @__PURE__ */ t(
+          H,
           {
-            value: k,
-            onChange: a,
+            value: w,
+            onChange: l,
             onClear: z,
-            placeholder: g
+            placeholder: C
           }
         ),
-        c && /* @__PURE__ */ t(F, { children: c })
+        c && c
       ] }),
       /* @__PURE__ */ n("div", { className: r.buttons, children: [
-        x,
-        !!i && /* @__PURE__ */ t(
-          b,
+        V,
+        !!m && /* @__PURE__ */ t(
+          g,
           {
             dataTestId: "createbtn",
-            onClick: i,
+            onClick: m,
             view: "primary",
-            leftAddons: /* @__PURE__ */ t(A, {}),
+            leftAddons: /* @__PURE__ */ t($, {}),
             size: "xs",
-            children: y || P(D)("create")
+            children: N || I(k)("create")
           }
         ),
-        N && /* @__PURE__ */ t(
-          b,
+        j && /* @__PURE__ */ t(
+          g,
           {
-            leftAddons: /* @__PURE__ */ t($, {}),
-            onClick: V,
+            leftAddons: /* @__PURE__ */ t(R, {}),
+            onClick: y,
             view: "outlined",
             size: "xs",
-            children: j
+            children: D
           }
         )
       ] })
     ] }),
-    !!l.length && /* @__PURE__ */ t("div", { className: r.tags, children: l })
+    !!a.length && /* @__PURE__ */ t("div", { className: r.tags, children: a })
   ] });
 };
 export {
-  W as TableHeader
+  U as TableHeader
 };

package/dist/table/hooks/use-table-data.js

@@ -1,18 +1,18 @@
-import { useState as u, useCallback as y, useEffect as h } from "react";
-import { addQueryParam as z } from "../utils/add-query-param.js";
-import { getQueryFromUrl as I } from "../utils/get-query-from-url.js";
+import { useState as u, useCallback as c, useEffect as b } from "react";
+import { addQueryParam as I } from "../utils/add-query-param.js";
+import { getQueryFromUrl as R } from "../utils/get-query-from-url.js";
 import "query-string";
-import { removeQueryParam as R } from "../utils/remove-query-param.js";
-import { resetQueryParam as V } from "../utils/reset-query-param.js";
-import { serializeData as D } from "../utils/serialize-data.js";
-const w = {
+import { removeQueryParam as V } from "../utils/remove-query-param.js";
+import { resetQueryParam as Y } from "../utils/reset-query-param.js";
+import { serializeData as v } from "../utils/serialize-data.js";
+const A = {
   page: 1,
   limit: 10,
   where: {}
   // остальное добавится по мере нужды (searchText, sort, order и т.д.)
 };
-function b(c, s) {
-  const r = c ?? w, a = {
+function E(f, s) {
+  const r = f ?? A, a = {
     ...r,
     ...s,
     where: {
@@ -22,91 +22,96 @@ function b(c, s) {
   };
   return a.page && (a.page = +a.page), a.limit && (a.limit = +a.limit), a;
 }
-function K({ promise: c, records: s, fromPath: r = !0 }) {
-  const [a, A] = u([]), [v, g] = u(!0), [E, d] = u(!1), [C, L] = u(0), [P, S] = u(1), [i, f] = u(void 0), Q = y(
-    (t) => r ? I() : t ?? i ?? w,
-    [r, i]
-  ), n = y(
+function M({ promise: f, records: s, fromPath: r = !0 }) {
+  const [a, Q] = u([]), [C, w] = u(!0), [L, d] = u(!1), [S, T] = u(0), [U, q] = u(1), [i, y] = u(void 0), m = c(
+    (t) => r ? R() : t ?? i ?? A,
+    // params не включаем при fromPath: иначе setParams на каждом fetch
+    // даёт новую ссылку → computeQuery/updateData меняются → бесконечный цикл.
+    r ? [r] : [r, i]
+  ), n = c(
     async (t) => {
-      const e = Q(t);
-      if (Array.isArray(s) && (g(!1), A(D(s, e))), f(e), c) {
-        d(!1), g(!0);
+      const e = m(t);
+      if (Array.isArray(s) && (w(!1), Q(v(s, e))), r || y(e), f) {
+        d(!1), w(!0);
         try {
           const {
-            data: { items: o, meta: m }
-          } = await c(e);
-          L(m.totalItems), S(m.totalPages), A(o || []);
+            data: { items: o, meta: g }
+          } = await f(e);
+          T(g.totalItems), q(g.totalPages), Q(o || []);
         } catch {
           d(!0);
         } finally {
-          g(!1);
+          w(!1);
         }
       }
     },
-    [Q, s, c]
-  ), T = y(
+    [m, s, f]
+  ), F = c(
     (t) => {
       if (r) {
-        z(t), n();
+        I(t), n();
         return;
       }
-      const e = b(i, t);
-      f(e), n(e);
+      const e = E(i, t);
+      y(e), n(e);
     },
     [r, i, n]
-  ), U = (t, e, o) => {
-    const m = t ?? w, l = {
-      ...m,
-      where: { ...m.where ?? {} }
-    }, p = l.where?.[e];
-    if (Array.isArray(p) && o != null) {
-      const x = p.filter((k) => String(k) !== String(o));
-      x.length ? l.where[e] = x : delete l.where[e];
-    } else
-      l.where && e in l.where && delete l.where[e];
-    return l;
-  }, q = y(
+  ), p = c(
+    (t, e, o) => {
+      const g = t ?? A, l = {
+        ...g,
+        where: { ...g.where ?? {} }
+      }, x = l.where?.[e];
+      if (Array.isArray(x) && o != null) {
+        const D = x.filter((z) => String(z) !== String(o));
+        D.length ? l.where[e] = D : delete l.where[e];
+      } else
+        l.where && e in l.where && delete l.where[e];
+      return l;
+    },
+    []
+  ), h = c(
     (t, e) => {
       if (r) {
-        R(t, e), n();
+        V(t, e), n();
         return;
       }
-      const o = U(i, t, e);
-      f(o), n(o);
+      const o = p(i, t, e);
+      y(o), n(o);
     },
-    [r, i, n]
-  ), F = y(
+    [r, i, n, p]
+  ), k = c(
     (t) => {
       if (r) {
-        V(t), n();
+        Y(t), n();
         return;
       }
-      const e = b(w, t);
-      f(e), n(e);
+      const e = E(A, t);
+      y(e), n(e);
     },
     [r, n]
   );
-  return h(() => {
+  return b(() => {
     n();
-  }, []), h(() => {
+  }, [n]), b(() => {
     if (Array.isArray(s)) {
-      const t = Q();
-      f(t), g(!1), A(D(s, t));
+      const t = m();
+      r || y(t), w(!1), Q(v(s, t));
     }
-  }, [s]), {
-    loading: v,
-    error: E,
+  }, [s, m]), {
+    loading: C,
+    error: L,
     data: a,
-    total: C,
+    total: S,
     params: i,
-    pagesCount: P,
+    pagesCount: U,
     updateData: n,
     // НОВОЕ: наружу отдаём универсальные методы для управления параметрами
-    addParam: T,
-    removeParam: q,
-    resetParams: F
+    addParam: F,
+    removeParam: h,
+    resetParams: k
   };
 }
 export {
-  K as useTableData
+  M as useTableData
 };

package/dist/table/table.d.ts

@@ -35,5 +35,5 @@ export type TableProps<T extends object> = Records<T> & {
     language: 'de' | 'ru' | 'en';
     fromPath?: boolean;
 } & FiltersButton;
-export declare function Table<T extends object>({ columns, searchPlaceholder, records, hideSearch, rightHeaderAddons, leftHeaderAddons, filtersButtonLabel, createButtonLabel, loading, height, view, tagsBuilder, promise, onRowClick, onCreateClick, onFiltersClick, refetch, language, fromPath, }: TableProps<T>): React.JSX.Element;
+export declare function Table<T extends object>({ columns, searchPlaceholder, records, hideSearch, rightHeaderAddons, leftHeaderAddons, filtersButtonLabel, createButtonLabel, loading, height, view, tagsBuilder, promise, onRowClick, onCreateClick, onFiltersClick, refetch, language, fromPath, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};