@alphakits/ui 2.4.0 → 2.4.2

package/dist/form/templates/rest-form/form.js

@@ -1,109 +1,111 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import A from "@alphakits/icons/dist/TrashM";
-import V, { useContext as D, useState as H, useCallback as v, useEffect as q } from "react";
-import { Button as k } from "../../../button/component.js";
-import { Flex as G } from "../../../flex/component.js";
-import { FlexColumns as J } from "../../../flex-columns/component.js";
-import { IconButton as K } from "../../../icon-button/component.js";
-import { ModalContext as L } from "../../../modal/context.js";
-import { Sidepanel as N } from "../../../sidepanel/component.js";
-import { ToastPlate as x } from "../../../toast-plate/component.js";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import V from "@alphakits/icons/dist/TrashM";
+import D, { useContext as H, useRef as q, useCallback as x, useEffect as G } from "react";
+import { Button as F } from "../../../button/component.js";
+import { Flex as J } from "../../../flex/component.js";
+import { FlexColumns as K } from "../../../flex-columns/component.js";
+import { IconButton as L } from "../../../icon-button/component.js";
+import { ModalContext as N } from "../../../modal/context.js";
+import { Sidepanel as O } from "../../../sidepanel/component.js";
+import { ToastPlate as I } from "../../../toast-plate/component.js";
 function ie({
-  recordId: F,
-  title: I,
+  recordId: R,
+  title: M,
   subtitle: T,
-  headerBottomAddons: u,
+  headerBottomAddons: b,
   initialValues: w,
   submitButtonText: y,
-  customFooter: M,
-  loading: i,
-  updating: n,
+  customFooter: B,
+  loading: n,
+  updating: i,
   removing: s,
-  customValidationFields: O,
-  validate: Q,
-  save: U,
+  customValidationFields: Q,
+  validate: U,
+  save: W,
   remove: a,
-  close: R,
-  back: S,
+  close: S,
+  back: z,
   t: r,
-  children: B,
-  headerAddon: b,
-  error: W,
+  children: P,
+  headerAddon: h,
+  error: X,
   softError: d,
-  ...z
+  ...g
 }) {
-  const { setModalDirty: e, currentModalId: P } = D(L), [o] = H(P), { submitCount: l, handleSubmit: h, isValid: m, ...c } = z, p = !!F && !!a, C = v(
+  const { setModalDirty: e, currentModalId: l } = H(N), c = q("");
+  !c.current && l && (c.current = l);
+  const t = c.current || l, { submitCount: m, handleSubmit: C, isValid: f, ...u } = g, v = !!R && !!a, k = x(
     () => {
-      e(o, !1), h();
+      e(t, !1), C();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [o, e, h]
-  ), g = v(() => {
-    e(o, !1), confirm(r("common:deleteConfirm")) && a?.();
-  }, [o, r, e, a]);
-  q(() => {
-    i || e(o, c.dirty);
-  }, [c.dirty, i, o, e]);
-  const j = p || b ? /* @__PURE__ */ f(V.Fragment, { children: [
-    b,
-    p && /* @__PURE__ */ t(
-      K,
+    [t, e, C]
+  ), j = x(() => {
+    e(t, !1), confirm(r("common:deleteConfirm")) && a?.();
+  }, [t, r, e, a]);
+  G(() => {
+    n || e(t, u.dirty);
+  }, [u.dirty, n, t, e]);
+  const A = v || h ? /* @__PURE__ */ p(D.Fragment, { children: [
+    h,
+    v && /* @__PURE__ */ o(
+      L,
       {
         dataTestId: "removeTariffBtn",
         size: "m",
-        disabled: n,
+        disabled: i,
         loading: s,
-        onClick: g,
-        icon: A
+        onClick: j,
+        icon: V
       }
     )
   ] }) : null;
-  return /* @__PURE__ */ t(
-    N,
+  return /* @__PURE__ */ o(
+    O,
     {
-      headerRightAddons: j,
-      title: I,
+      headerRightAddons: A,
+      title: M,
       subtitle: T,
-      loading: n || s || i,
-      headerBottomAddons: (u || !!d || !m && !!l) && /* @__PURE__ */ f(J, { columns: 1, gr: 8, children: [
-        u,
-        !!d && /* @__PURE__ */ t(x, { view: "negative", children: d }),
-        !m && !!l && /* @__PURE__ */ t(x, { view: "negative", children: "Please correct errors before submitting form." })
+      loading: i || s || n,
+      headerBottomAddons: (b || !!d || !f && !!m) && /* @__PURE__ */ p(K, { columns: 1, gr: 8, children: [
+        b,
+        !!d && /* @__PURE__ */ o(I, { view: "negative", children: d }),
+        !f && !!m && /* @__PURE__ */ o(I, { view: "negative", children: "Please correct errors before submitting form." })
       ] }),
-      back: S,
+      back: z,
       t: r,
-      bottomAddons: M || /* @__PURE__ */ f(G, { gap: "md", children: [
-        /* @__PURE__ */ t(
-          k,
+      bottomAddons: B || /* @__PURE__ */ p(J, { gap: "md", children: [
+        /* @__PURE__ */ o(
+          F,
           {
             view: "primary",
             size: "s",
             block: !0,
-            loading: i,
-            disabled: n || s,
+            loading: n,
+            disabled: i || s,
             dataTestId: "buttonSave",
-            onClick: () => C(),
+            onClick: () => k(),
             children: r(y || "save")
           }
         ),
-        /* @__PURE__ */ t(
-          k,
+        /* @__PURE__ */ o(
+          F,
           {
             block: !0,
             view: "secondary",
             size: "s",
             dataTestId: "buttonCancel",
-            onClick: R,
+            onClick: S,
             children: r("cancel")
           }
         )
       ] }),
-      children: B({
-        submitCount: l,
-        isValid: m,
-        handleSubmit: C,
+      children: P({
+        submitCount: m,
+        isValid: f,
+        handleSubmit: k,
         initialValues: w,
-        ...c
+        ...u
       })
     }
   );

package/dist/modal/components/modals/modal.js

@@ -1,78 +1,79 @@
-import { jsxs as k, jsx as n } from "react/jsx-runtime";
+import { jsxs as h, jsx as i } from "react/jsx-runtime";
 import y from "classnames";
-import { useState as C, useLayoutEffect as d, useCallback as b, useEffect as z } from "react";
-import { ButtonArrow as v } from "../../../button-arrow/component.js";
-import o from "./index.module.css.js";
-const h = {
+import { useState as E, useLayoutEffect as g, useCallback as k, useEffect as v } from "react";
+import { ButtonArrow as x } from "../../../button-arrow/component.js";
+import t from "./index.module.css.js";
+const C = {
   s: 488,
   m: 888,
   full: "96%"
-}, j = ({ modal: e, t: l, index: p, dirtyModals: a, closeModal: f, currentModalId: r }) => {
-  const c = -h[e.props.size] - 102, [w, m] = C(c);
-  d(() => {
-    setTimeout(() => m(0), 0);
-  }, []);
-  const u = b(
+}, w = 102, F = (e) => e === "full" ? `calc(-96vw - ${w}px)` : -C[e] - w, O = ({ modal: e, t: f, index: l, dirtyModals: p, closeModal: a, currentModalId: r }) => {
+  const c = F(e.props.size), [b, m] = E(c);
+  g(() => {
+    const s = requestAnimationFrame(() => m(0));
+    return () => cancelAnimationFrame(s);
+  }, [e.id]);
+  const u = k(
     (s) => (
       // eslint-disable-next-line no-restricted-globals
-      !a[s] || confirm(l("common:exitConfirm"))
+      !p[s] || confirm(f("common:exitConfirm"))
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [a, l]
-  ), t = b(
+    [p, f]
+  ), n = k(
     (s) => {
-      const { id: i } = e;
-      u(s || i) && (m(c), setTimeout(() => {
-        e.props.closeCallback && e.props.closeCallback(), f(s || i);
+      const { id: o } = e;
+      u(s || o) && (m(c), setTimeout(() => {
+        e.props.closeCallback && e.props.closeCallback(), a(s || o);
       }, 250));
     },
-    [f, u, e, c]
+    [a, u, e, c]
   );
-  return z(() => {
-    const s = (i) => {
-      (i.key === "27" || i.key === "Escape") && t(r);
+  return v(() => {
+    const s = (o) => {
+      (o.key === "27" || o.key === "Escape") && n(r);
     };
     return e.id === r && window?.addEventListener("keydown", s), () => {
       window?.removeEventListener("keydown", s);
     };
-  }, [t, r, e.id]), /* @__PURE__ */ k(
+  }, [n, r, e.id]), /* @__PURE__ */ h(
     "div",
     {
-      className: o.container,
+      className: t.container,
       style: {
-        zIndex: 9999998 + p
+        zIndex: 9999998 + l
       },
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ i(
           "div",
           {
-            className: y(o.right, o.content),
+            className: y(t.right, t.content),
             style: {
-              zIndex: 9999999 + p,
-              width: h[e.props.size],
-              right: w
+              zIndex: 9999999 + l,
+              width: C[e.props.size],
+              right: b
             },
-            children: /* @__PURE__ */ k("div", { className: o.inner, children: [
-              /* @__PURE__ */ n(e.modal, { ...e.props, close: () => t() }),
-              e.props.showCloser !== !1 && /* @__PURE__ */ n(
-                v,
+            children: /* @__PURE__ */ h("div", { className: t.inner, children: [
+              /* @__PURE__ */ i(e.modal, { ...e.props, close: () => n() }),
+              e.props.showCloser !== !1 && /* @__PURE__ */ i(
+                x,
                 {
-                  className: o.button,
+                  className: t.button,
                   size: "s",
                   type: "close",
-                  onClick: () => t()
+                  onClick: () => n()
                 }
               )
             ] })
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ i(
           "button",
           {
-            className: o.bg,
+            className: t.bg,
             "aria-label": "close_backdrop",
             type: "button",
-            onClick: () => t()
+            onClick: () => n()
           }
         )
       ]
@@ -80,5 +81,5 @@ const h = {
   );
 };
 export {
-  j as Modal
+  O as Modal
 };

package/dist/modal/context.js

@@ -1,44 +1,41 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import M from "react";
-import { Portal as c } from "../portal/component.js";
-import { Modals as p } from "./components/modals/index.js";
+import { jsxs as M, jsx as a } from "react/jsx-runtime";
+import c, { useMemo as p } from "react";
+import { Portal as u } from "../portal/component.js";
+import { Modals as x } from "./components/modals/index.js";
 import { useModal as f } from "./hooks/use-modal.js";
-const u = M.createContext({
+const v = c.createContext({
   modals: [],
   currentModalId: "",
   openModal: () => () => {
   },
   setModalDirty: () => {
   }
-}), h = ({ children: l, t: i, portal: o }) => {
-  const { modals: r, openModal: t, setModalDirty: d, currentModalId: e, dirtyModals: n, closeModal: s } = f(i);
-  return /* @__PURE__ */ m(
-    u.Provider,
-    {
-      value: {
-        modals: r,
-        openModal: t,
-        setModalDirty: d,
-        currentModalId: e
-      },
-      children: [
-        /* @__PURE__ */ a(c, { getPortalContainer: o ? () => o : void 0, children: /* @__PURE__ */ a(
-          p,
-          {
-            modals: r,
-            dirtyModals: n,
-            closeModal: s,
-            openModal: t,
-            setModalDirty: d,
-            currentModalId: e
-          }
-        ) }),
-        l
-      ]
-    }
+}), D = ({ children: l, t: n, portal: d }) => {
+  const { modals: o, openModal: r, setModalDirty: t, currentModalId: e, dirtyModals: s, closeModal: i } = f(n), m = p(
+    () => ({
+      modals: o,
+      openModal: r,
+      setModalDirty: t,
+      currentModalId: e
+    }),
+    [o, r, t, e]
   );
+  return /* @__PURE__ */ M(v.Provider, { value: m, children: [
+    /* @__PURE__ */ a(u, { getPortalContainer: d ? () => d : void 0, children: /* @__PURE__ */ a(
+      x,
+      {
+        modals: o,
+        dirtyModals: s,
+        closeModal: i,
+        openModal: r,
+        setModalDirty: t,
+        currentModalId: e
+      }
+    ) }),
+    l
+  ] });
 };
 export {
-  u as ModalContext,
-  h as ModalProvider
+  v as ModalContext,
+  D as ModalProvider
 };

package/dist/modal/hooks/use-modal.js

@@ -1,42 +1,45 @@
-import n, { useEffect as I } from "react";
-import { v4 as S } from "uuid";
-import { deletePropertyById as g } from "../utils/delete-property-by-id.js";
-const x = (c) => {
-  const [s, l] = n.useState([]), [u, M] = n.useState(""), [i, a] = n.useState({}), p = (t) => {
-    a((o) => g(o, t)), l((o) => o.filter((e) => e.id !== t));
-  }, m = (t) => {
-    l((o) => [...o, t]);
-  }, f = (t, o) => {
-    a((e) => ({
-      ...e,
-      [t]: o
-    }));
-  };
-  return I(() => {
-    const t = [...s].pop()?.id;
-    M(t || ""), document.body.style.overflow = s.length ? "hidden" : "unset";
-  }, [s]), {
-    openModal: (t, o = "s", e = !0) => {
-      const y = (d, r) => ({
-        id: S(),
-        modal: t,
-        props: {
-          size: o,
-          showCloser: e,
-          closeCallback: r,
-          t: c,
-          ...d
-        }
-      });
-      return (d, r) => {
-        m(y(d, r));
-      };
-    },
-    modals: s,
-    setModalDirty: f,
-    currentModalId: u,
-    dirtyModals: i,
-    closeModal: p
+import d, { useRef as S, useCallback as s, useEffect as b } from "react";
+import { v4 as h } from "uuid";
+import { deletePropertyById as v } from "../utils/delete-property-by-id.js";
+const x = (n) => {
+  const [r, l] = d.useState([]), [M, f] = d.useState(""), [p, a] = d.useState({}), c = S(n);
+  c.current = n;
+  const i = s((t) => {
+    a((e) => v(e, t)), l((e) => e.filter((o) => o.id !== t));
+  }, []), u = s((t) => {
+    l((e) => [...e, t]);
+  }, []), m = s((t, e) => {
+    t && a((o) => o[t] === e ? o : {
+      ...o,
+      [t]: e
+    });
+  }, []);
+  return b(() => {
+    const t = [...r].pop()?.id;
+    f(t || ""), document.body.style.overflow = r.length ? "hidden" : "unset";
+  }, [r]), {
+    openModal: s(
+      (t, e = "s", o = !0) => (y, I) => {
+        const R = h();
+        u({
+          id: R,
+          modal: t,
+          props: {
+            size: e,
+            showCloser: o,
+            closeCallback: I,
+            t: c.current,
+            ...y
+          }
+        });
+      },
+      [u]
+    ),
+    modals: r,
+    setModalDirty: m,
+    currentModalId: M,
+    dirtyModals: p,
+    closeModal: i
   };
 };
 export {

package/dist/popover/component.js

@@ -1,7 +1,7 @@
-import { jsx as r, jsxs as P } from "react/jsx-runtime";
-import { useFloating as $, autoUpdate as j, offset as D, flip as U, shift as z, arrow as V } from "@floating-ui/react-dom";
-import m from "classnames";
-import { useRef as g, useLayoutEffect as q, useEffect as N, useMemo as B, useCallback as G } from "react";
+import { jsx as r, jsxs as D } from "react/jsx-runtime";
+import { offset as L, flip as P, shift as U, arrow as z, useFloating as V, autoUpdate as q } from "@floating-ui/react-dom";
+import c from "classnames";
+import { useRef as g, useMemo as N, useEffect as B, useCallback as G } from "react";
 import { CSSTransition as H } from "react-transition-group";
 import { Portal as J } from "../portal/component.js";
 import { Stack as K } from "../stack/component.js";
@@ -21,92 +21,90 @@ const W = {
   left: "right"
 }, ct = ({
   children: R,
-  getPortalContainer: A,
-  transition: f = W,
-  anchorElement: d,
-  offset: a = [0, 0],
-  withArrow: i = !1,
-  withTransition: b = !0,
-  position: y = "left",
-  preventFlip: T,
-  popperClassName: h,
+  getPortalContainer: b,
+  transition: m = W,
+  anchorElement: A,
+  offset: n = [0, 0],
+  withArrow: o = !1,
+  withTransition: T = !0,
+  position: h = "left",
+  preventFlip: f,
+  popperClassName: y,
   arrowClassName: E,
   className: O,
-  open: u,
+  open: i,
   dataTestId: C,
   update: l,
-  transitionDuration: F = `${f.timeout}ms`,
-  zIndex: w = Q.POPOVER
+  transitionDuration: F = `${m.timeout}ms`,
+  zIndex: I = Q.POPOVER
 }) => {
-  const p = g(null), x = g(null), {
-    refs: n,
-    floatingStyles: I,
-    middlewareData: c,
-    placement: S,
-    update: o
-  } = $({
-    placement: y,
-    whileElementsMounted: j,
-    middleware: [
-      D(
-        {
-          crossAxis: a[0],
-          mainAxis: a[1]
-        },
-        [a]
-      ),
-      ...T ? [] : [U()],
-      z({ padding: 4 }),
-      ...i ? [V({ element: p })] : []
-    ]
+  const d = g(null), u = g(null), M = N(
+    () => [
+      L({
+        crossAxis: n[0],
+        mainAxis: n[1]
+      }),
+      ...f ? [] : [P()],
+      U({ padding: 4 }),
+      ...o ? [z({ element: d })] : []
+    ],
+    [n[0], n[1], f, o]
+  ), {
+    refs: { setFloating: p },
+    floatingStyles: _,
+    middlewareData: a,
+    placement: x,
+    update: S
+  } = V({
+    placement: h,
+    open: i,
+    elements: { reference: A },
+    whileElementsMounted: i ? q : void 0,
+    middleware: M
   });
-  q(() => {
-    n.setReference(d);
-  }, [d, n]), N(() => {
-    l && o && (l.current = o);
-  }, [o, l]), N(() => {
-    o();
-  }, [o]);
-  const M = B(() => {
-    if (!i || !c.arrow)
+  B(() => {
+    l && (l.current = S);
+  }, [S, l]);
+  const k = N(() => {
+    if (!o || !a.arrow)
       return {};
-    const { x: t, y: s } = c.arrow, k = S.split("-")[0], L = Z[k] ?? "bottom";
+    const { x: t, y: s } = a.arrow, j = x.split("-")[0], w = Z[j] ?? "bottom";
     return {
       position: "absolute",
       left: t != null ? `${t}px` : void 0,
       top: s != null ? `${s}px` : void 0,
       right: "",
       bottom: "",
-      [L]: "-4px"
+      [w]: "-4px"
     };
-  }, [i, c.arrow, S]), _ = G(
+  }, [o, a.arrow, x]), $ = G(
     (t) => {
-      x.current = t, n.setFloating(t);
+      u.current = t, p(t);
     },
-    [n]
+    [p]
   ), v = (t, s) => /* @__PURE__ */ r(
     "div",
     {
-      ref: _,
+      ref: $,
       style: {
         zIndex: t,
-        ...I
+        ..._
       },
-      className: m(e.component, O),
-      children: /* @__PURE__ */ P(
+      className: c(e.component, O),
+      children: /* @__PURE__ */ D(
         "div",
         {
           "data-test-id": C,
-          className: m(e.inner, h),
+          className: c(e.inner, y),
           style: s,
           children: [
             R,
-            i && /* @__PURE__ */ r(
+            o && /* @__PURE__ */ r(
               "div",
               {
-                ref: p,
-                style: M,
-                className: m(e.arrow, E)
+                ref: d,
+                style: k,
+                className: c(e.arrow, E)
               }
             )
           ]
@@ -114,17 +112,17 @@ const W = {
       )
     }
   );
-  return /* @__PURE__ */ r(K, { value: w, children: (t) => /* @__PURE__ */ r(J, { getPortalContainer: A, children: b ? /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(K, { value: I, children: (t) => /* @__PURE__ */ r(J, { getPortalContainer: b, children: T ? /* @__PURE__ */ r(
     Y,
     {
       unmountOnExit: !0,
       classNames: X,
-      ...f,
-      in: u,
-      nodeRef: x,
+      ...m,
+      in: i,
+      nodeRef: u,
       children: v(t, { transitionDuration: F })
     }
-  ) : u && v(t) }) });
+  ) : i && v(t) }) });
 };
 export {
   ct as Popover

package/dist/table/components/empty-list/index.d.ts

@@ -1,3 +1,4 @@
-export declare const EmptyList: ({ language }: {
+export declare const EmptyList: ({ language, columnsLength, }: {
     language: 'en' | 'de' | 'ru';
+    columnsLength: number;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/table/components/empty-list/index.js

@@ -1,8 +1,11 @@
 import { jsx as t } from "react/jsx-runtime";
 import { Typography as i } from "../../../typography/component.js";
 import { translate as m } from "../../languages/index.js";
-import o from "./index.module.css.js";
-const y = ({ language: r }) => /* @__PURE__ */ t("div", { className: o.empty_list, children: /* @__PURE__ */ t(i.Text, { color: "primary", view: "title", children: m(r)("emptyList") }) });
+import e from "./index.module.css.js";
+const c = ({
+  language: r,
+  columnsLength: o
+}) => /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", { colSpan: o, className: e.empty_list, children: /* @__PURE__ */ t(i.Text, { color: "primary", view: "title", children: m(r)("emptyList") }) }) });
 export {
-  y as EmptyList
+  c as EmptyList
 };

package/dist/table/components/error/index.d.ts

@@ -1,3 +1,4 @@
-export declare const TableError: ({ language }: {
+export declare const TableError: ({ language, columnsLength, }: {
     language: 'en' | 'de' | 'ru';
+    columnsLength: number;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,11 @@
 import { jsx as r } from "react/jsx-runtime";
-import { Typography as t } from "../../../typography/component.js";
-import { translate as e } from "../../languages/index.js";
-import i from "./index.module.css.js";
-const a = ({ language: o }) => /* @__PURE__ */ r("div", { className: i.empty_list, children: /* @__PURE__ */ r(t.Text, { color: "primary", view: "title", children: e(o)("error") }) });
+import { Typography as e } from "../../../typography/component.js";
+import { translate as i } from "../../languages/index.js";
+import l from "./index.module.css.js";
+const c = ({
+  language: o,
+  columnsLength: t
+}) => /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", { colSpan: t, className: l.empty_list, children: /* @__PURE__ */ r(e.Text, { color: "primary", view: "title", children: i(o)("error") }) }) });
 export {
-  a as TableError
+  c as TableError
 };

package/dist/table/hooks/use-table-data.d.ts

@@ -10,7 +10,7 @@ export declare function useTableData<T extends object>({ promise, records, fromP
     error: boolean;
     data: T[];
     total: number;
-    params: QueryDTO | undefined;
+    params: QueryDTO;
     pagesCount: number;
     updateData: (forcedQuery?: QueryDTO) => Promise<void>;
     addParam: (patch: Query) => void;

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

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

package/dist/table/index.css

@@ -1 +1 @@
-:root{--text-primary-color: var(--color-text-primary);--text-secondary-color: var(--color-text-secondary);--text-tertiary-color: var(--color-text-tertiary);--border-radius: 4px;--focus-color: var(--color-border-link);--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif;--disabled-cursor: not-allowed;--arrow-transform: rotate(180deg)}.table_wrapper_SeB5{width:100%;box-sizing:border-box;position:relative}.table_9sbd{position:relative;box-sizing:border-box;border:1px solid var(--color-border-secondary);border-radius:12px 12px 0 0;background:var(--color-bg-primary);box-shadow:var(--shadow-xs);overflow:hidden}.table_9sbd table{width:100%;border-collapse:collapse;background:var(--color-bg-primary);table-layout:fixed}.table_9sbd tbody tr td{transition:background-color .15s ease}.table_9sbd.no_footer_julO{border-radius:12px}.fill_Q-ic{height:-webkit-fill-available;flex-grow:1;display:flex;flex-direction:column}.fill_Q-ic .table_9sbd{flex-grow:1;overflow:hidden}.fill_Q-ic .table_9sbd:hover{overflow:auto}.clickable_k4S8{cursor:pointer}.clickable_k4S8:hover td{background-color:color-mix(in srgb,var(--color-bg-secondary) 92%,var(--color-bg-primary))}
+:root{--text-primary-color: var(--color-text-primary);--text-secondary-color: var(--color-text-secondary);--text-tertiary-color: var(--color-text-tertiary);--border-radius: 4px;--focus-color: var(--color-border-link);--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif;--disabled-cursor: not-allowed;--arrow-transform: rotate(180deg)}.table_wrapper_SeB5{width:100%;box-sizing:border-box;position:relative}.table_9sbd{position:relative;box-sizing:border-box;border:1px solid var(--color-border-secondary);border-radius:12px 12px 0 0;background:var(--color-bg-primary);box-shadow:var(--shadow-xs);overflow:hidden}.table_9sbd table{width:100%;border-collapse:collapse;background:var(--color-bg-primary);table-layout:auto}.table_9sbd tbody tr td{transition:background-color .15s ease}.table_9sbd.no_footer_julO{border-radius:12px}.fill_Q-ic{height:-webkit-fill-available;flex-grow:1;display:flex;flex-direction:column}.fill_Q-ic .table_9sbd{flex-grow:1;overflow:hidden}.fill_Q-ic .table_9sbd:hover{overflow:auto}.clickable_k4S8{cursor:pointer}.clickable_k4S8:hover td{background-color:color-mix(in srgb,var(--color-bg-secondary) 92%,var(--color-bg-primary))}

package/dist/table/table.js

@@ -1,137 +1,137 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import P from "classnames";
-import { useMemo as j, useCallback as U } from "react";
-import { Cells as W } from "./components/cells/index.js";
-import { EmptyList as X } from "./components/empty-list/index.js";
-import { TableError as Y } from "./components/error/index.js";
-import { Loading as Z } from "./components/loading/index.js";
-import { Pagination as $ } from "./components/pagination/index.js";
-import { TableHeader as A } from "./components/table-header/index.js";
-import { useTableData as aa } from "./hooks/use-table-data.js";
-import o from "./index.module.css.js";
-import { getTags as ta } from "./utils/get-tags.js";
-import { prepareRows as ra } from "./utils/prepare-rows.js";
-function ha({
-  columns: l,
-  searchPlaceholder: E = "Поиск по таблице",
-  records: H,
-  hideSearch: b,
-  rightHeaderAddons: h,
-  leftHeaderAddons: g,
-  filtersButtonLabel: S,
-  createButtonLabel: _,
-  loading: w,
-  height: B = "fill",
-  view: e = "default",
-  tagsBuilder: F,
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import X, { useMemo as E, useCallback as Y } from "react";
+import f from "classnames";
+import { Cells as Z } from "./components/cells/index.js";
+import { EmptyList as $ } from "./components/empty-list/index.js";
+import { Loading as A } from "./components/loading/index.js";
+import { Pagination as tt } from "./components/pagination/index.js";
+import { TableHeader as at } from "./components/table-header/index.js";
+import { useTableData as rt } from "./hooks/use-table-data.js";
+import { getTags as ot } from "./utils/get-tags.js";
+import { prepareRows as et } from "./utils/prepare-rows.js";
+import e from "./index.module.css.js";
+import { TableError as st } from "./components/error/index.js";
+function Lt({
+  columns: o,
+  searchPlaceholder: N = "Поиск по таблице",
+  records: j,
+  hideSearch: P,
+  rightHeaderAddons: g,
+  leftHeaderAddons: b,
+  filtersButtonLabel: H,
+  createButtonLabel: R,
+  loading: S,
+  height: _ = "fill",
+  view: s = "default",
+  tagsBuilder: w,
   promise: u,
-  onRowClick: T,
-  onCreateClick: n,
+  onRowClick: L,
+  onCreateClick: i,
   onFiltersClick: m,
-  refetch: C,
-  language: i,
-  fromPath: M = !0
+  refetch: B,
+  language: n,
+  fromPath: F = !0
 }) {
   const {
-    loading: R,
-    error: x,
+    loading: M,
+    error: T,
     data: y,
     total: V,
-    params: t,
+    params: a,
     pagesCount: q,
     updateData: c,
     addParam: z,
     removeParam: G,
-    resetParams: L
-  } = aa({
+    resetParams: C
+  } = rt({
     promise: u,
-    records: H,
-    fromPath: M
-  }), k = j(
+    records: j,
+    fromPath: F
+  }), k = E(
     () => [...y || []].sort(
-      (a, s) => (a.sortPosition || 0) - (s.sortPosition || 0)
+      (t, l) => (t.sortPosition || 0) - (l.sortPosition || 0)
     ),
     [y]
-  ), I = (a) => T?.(a, c), J = n ? () => n(c) : void 0, K = U(
-    (a) => {
-      L(a);
+  ), I = (t) => L?.(t, c), J = i ? () => i(c) : void 0, K = Y(
+    (t) => {
+      C(t);
     },
-    [L]
-  ), v = () => m ? m({
-    submitCallback: (a) => K(a),
-    initialValues: t
-  }) : null, d = (a) => {
-    z(a);
-  }, O = (a, s) => {
-    G(a, s);
-  }, Q = ta({
-    params: t?.where || {},
+    [C]
+  ), x = () => m ? m({
+    submitCallback: (t) => K(t),
+    initialValues: a
+  }) : null, d = (t) => {
+    z(t);
+  }, O = (t, l) => {
+    G(t, l);
+  }, Q = ot({
+    params: a?.where || {},
     onDelete: O,
-    tagsBuilder: F,
-    onClick: v
-  }), D = j(
-    () => ra({
-      columns: l,
-      view: e,
+    tagsBuilder: w,
+    onClick: x
+  }), v = E(
+    () => et({
+      columns: o,
+      view: s,
       data: k,
-      refetch: C || c
+      refetch: B || c
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [k, l, e, c, C]
-  ), p = R || w, N = !!u;
-  return /* @__PURE__ */ f("div", { className: P(o.table_wrapper, o[B], o[e]), children: [
-    (!b || h || g || n || m) && /* @__PURE__ */ r(
-      A,
+    [k, o, s]
+  ), p = M || S, D = !!u;
+  return /* @__PURE__ */ h("div", { className: f(e.table_wrapper, e[_], e[s]), children: [
+    (!P || g || b || i || m) && /* @__PURE__ */ r(
+      at,
       {
-        language: i,
-        hideSearch: b,
-        rightHeaderAddons: h,
-        leftHeaderAddons: g,
-        searchText: t?.searchText || "",
+        language: n,
+        hideSearch: P,
+        rightHeaderAddons: g,
+        leftHeaderAddons: b,
+        searchText: a?.searchText || "",
         addParam: d,
-        searchPlaceholder: E,
-        filtersButtonLabel: S,
+        searchPlaceholder: N,
+        filtersButtonLabel: H,
         tags: Q,
         onCreateClick: J,
-        createButtonLabel: _,
-        onFiltersClick: v,
+        createButtonLabel: R,
+        onFiltersClick: x,
         showFiltersButton: !!m,
-        compact: e === "compact"
+        compact: s === "compact"
       }
     ),
-    /* @__PURE__ */ r("div", { className: P(o.table, { [o.no_footer]: !N }), children: /* @__PURE__ */ f("table", { cellSpacing: "0", cellPadding: "0", children: [
+    /* @__PURE__ */ r("div", { className: f(e.table, { [e.no_footer]: !D }), children: /* @__PURE__ */ h("table", { cellSpacing: "0", cellPadding: "0", children: [
       /* @__PURE__ */ r(
-        W,
+        Z,
         {
-          sort: t?.sort,
-          order: t?.order,
+          sort: a?.sort,
+          order: a?.order,
           addParam: d,
-          columns: l,
-          compact: e === "compact"
+          columns: o,
+          compact: s === "compact"
         }
       ),
-      /* @__PURE__ */ f("tbody", { children: [
-        x && /* @__PURE__ */ r(Y, { language: i }),
-        !D.length && !p && !x && /* @__PURE__ */ r(X, { language: i }),
-        p && /* @__PURE__ */ r(Z, { columnsLength: l.length }),
-        D.map(({ row: a, cells: s }) => /* @__PURE__ */ r(
+      /* @__PURE__ */ h("tbody", { children: [
+        T && /* @__PURE__ */ r(st, { columnsLength: o.length, language: n }),
+        !v.length && !p && !T && /* @__PURE__ */ r($, { columnsLength: o.length, language: n }),
+        p && /* @__PURE__ */ r(A, { columnsLength: o.length }),
+        v.map(({ row: t, cells: l }) => /* @__PURE__ */ r(
           "tr",
           {
-            onClick: () => I(a),
-            className: P({ [o.clickable]: !!T }),
+            onClick: () => I(t),
+            className: f({ [e.clickable]: !!L }),
             style: { visibility: p ? "collapse" : "visible" },
-            children: s
+            children: l.map((U, W) => X.cloneElement(U, { key: W }))
           },
-          String(a.id)
+          String(t.id)
         ))
       ] })
     ] }) }),
-    N && /* @__PURE__ */ r(
-      $,
+    D && /* @__PURE__ */ r(
+      tt,
       {
-        language: i,
-        currentPage: t ? +t.page : 1,
-        recordsPerPage: t ? +t.limit : 10,
+        language: n,
+        currentPage: a ? +a.page : 1,
+        recordsPerPage: a ? +a.limit : 10,
         pagesCount: +q,
         addParam: d,
         total: +V
@@ -140,5 +140,5 @@ function ha({
   ] });
 }
 export {
-  ha as Table
+  Lt as Table
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alphakits/ui",
-    "version": "2.4.0",
+    "version": "2.4.2",
     "files": [
         "dist"
     ],