@alphakits/ui 2.4.1 → 2.4.3

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

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

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