@alphakits/ui 2.4.2 → 2.4.4

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

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

package/dist/popover/component.js

@@ -1,109 +1,126 @@
-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 { jsx as i, jsxs as D } from "react/jsx-runtime";
+import { offset as L, flip as U, shift as z, arrow as V, useFloating as q, autoUpdate as B } 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";
-import { stackingOrder as Q } from "../stack/context.js";
+import { useRef as g, useMemo as N, useEffect as G, useCallback as H } from "react";
+import { CSSTransition as J } from "react-transition-group";
+import { Portal as K } from "../portal/component.js";
+import { Stack as Q } from "../stack/component.js";
+import { stackingOrder as W } from "../stack/context.js";
 import e from "./index.module.css.js";
-const W = {
+const X = {
   timeout: 150
-}, X = {
+}, Y = {
   enter: e.enter,
   enterActive: e.enterActive,
   exit: e.exit,
   exitActive: e.exitActive
-}, Y = H, Z = {
+}, Z = J, tt = {
   top: "bottom",
   right: "left",
   bottom: "top",
   left: "right"
-}, ct = ({
-  children: R,
-  getPortalContainer: b,
-  transition: m = W,
-  anchorElement: A,
+}, mt = ({
+  children: b,
+  getPortalContainer: R,
+  transition: m = X,
+  anchorElement: h,
   offset: n = [0, 0],
   withArrow: o = !1,
-  withTransition: T = !0,
-  position: h = "left",
-  preventFlip: f,
-  popperClassName: y,
+  withTransition: y = !0,
+  position: A = "left",
+  preventFlip: d,
+  popperClassName: T,
   arrowClassName: E,
   className: O,
-  open: i,
+  open: s,
   dataTestId: C,
   update: l,
   transitionDuration: F = `${m.timeout}ms`,
-  zIndex: I = Q.POPOVER
+  zIndex: I = W.POPOVER
 }) => {
-  const d = g(null), u = g(null), M = N(
+  const f = g(null), u = g(null), M = N(
     () => [
       L({
         crossAxis: n[0],
         mainAxis: n[1]
       }),
-      ...f ? [] : [P()],
-      U({ padding: 4 }),
-      ...o ? [z({ element: d })] : []
+      ...d ? [] : [U()],
+      z({ padding: 4 }),
+      ...o ? [V({ element: f })] : []
     ],
-    [n[0], n[1], f, o]
+    [n[0], n[1], d, o]
   ), {
     refs: { setFloating: p },
     floatingStyles: _,
     middlewareData: a,
-    placement: x,
-    update: S
-  } = V({
-    placement: h,
-    open: i,
-    elements: { reference: A },
-    whileElementsMounted: i ? q : void 0,
+    placement: v,
+    update: x,
+    isPositioned: k
+  } = q({
+    placement: A,
+    open: s,
+    elements: { reference: h },
+    whileElementsMounted: s ? B : void 0,
     middleware: M
   });
-  B(() => {
-    l && (l.current = S);
-  }, [S, l]);
-  const k = N(() => {
+  G(() => {
+    l && (l.current = x);
+  }, [x, l]);
+  const P = N(() => {
     if (!o || !a.arrow)
       return {};
-    const { x: t, y: s } = a.arrow, j = x.split("-")[0], w = Z[j] ?? "bottom";
+    const { x: t, y: r } = a.arrow, j = v.split("-")[0], w = tt[j] ?? "bottom";
     return {
       position: "absolute",
       left: t != null ? `${t}px` : void 0,
-      top: s != null ? `${s}px` : void 0,
+      top: r != null ? `${r}px` : void 0,
       right: "",
       bottom: "",
       [w]: "-4px"
     };
-  }, [o, a.arrow, x]), $ = G(
+  }, [o, a.arrow, v]), $ = H(
     (t) => {
       u.current = t, p(t);
     },
     [p]
-  ), v = (t, s) => /* @__PURE__ */ r(
+  ), S = (t, r) => /* @__PURE__ */ i(
     "div",
     {
       ref: $,
       style: {
         zIndex: t,
-        ..._
+        ..._,
+        /**
+         * Скрываем поповер до первого замера floating-ui: иначе
+         * на первом рендере `floatingStyles` ещё содержат дефолт
+         * `top: 0, left: 0, transform: translate(0, 0)`, а CSSTransition
+         * уже стартует fade-in. Получается визуальный "прыжок" из
+         * угла портала в правильную позицию. `isPositioned` становится
+         * `true` после первого измерения — к этому моменту координаты
+         * корректные и можно показывать.
+         *
+         * Не используем `display: none` или `opacity`, потому что:
+         *  — `display: none` ломает измерения floating-ui (нулевые
+         *    размеры) и блокирует CSSTransition;
+         *  — `opacity` уже используется CSSTransition'ом для fade-in,
+         *    переписывать его здесь — испортить анимацию.
+         */
+        visibility: k ? "visible" : "hidden"
       },
       className: c(e.component, O),
       children: /* @__PURE__ */ D(
         "div",
         {
           "data-test-id": C,
-          className: c(e.inner, y),
-          style: s,
+          className: c(e.inner, T),
+          style: r,
           children: [
-            R,
-            o && /* @__PURE__ */ r(
+            b,
+            o && /* @__PURE__ */ i(
               "div",
               {
-                ref: d,
-                style: k,
+                ref: f,
+                style: P,
                 className: c(e.arrow, E)
               }
             )
@@ -112,18 +129,18 @@ const W = {
       )
     }
   );
-  return /* @__PURE__ */ r(K, { value: I, children: (t) => /* @__PURE__ */ r(J, { getPortalContainer: b, children: T ? /* @__PURE__ */ r(
-    Y,
+  return /* @__PURE__ */ i(Q, { value: I, children: (t) => /* @__PURE__ */ i(K, { getPortalContainer: R, children: y ? /* @__PURE__ */ i(
+    Z,
     {
       unmountOnExit: !0,
-      classNames: X,
+      classNames: Y,
       ...m,
-      in: i,
+      in: s,
       nodeRef: u,
-      children: v(t, { transitionDuration: F })
+      children: S(t, { transitionDuration: F })
     }
-  ) : i && v(t) }) });
+  ) : s && S(t) }) });
 };
 export {
-  ct as Popover
+  mt as Popover
 };

package/dist/radio-groups/mock.data.d.ts

@@ -0,0 +1,9 @@
+export declare const locations: {
+    id: number;
+    title: string;
+}[];
+export declare const questrooms: {
+    id: number;
+    title: string;
+    locationId: number;
+}[];

package/dist/radio-groups/mock.data.js

@@ -0,0 +1,82 @@
+const t = [
+  {
+    id: 1,
+    title: "Tambov"
+  },
+  {
+    id: 2,
+    title: "Moscow"
+  },
+  {
+    id: 3,
+    title: "Voronezh"
+  },
+  {
+    id: 4,
+    title: "Lipetsk"
+  },
+  {
+    id: 5,
+    title: "SPB"
+  }
+], o = [
+  {
+    id: 1,
+    title: "Questroom 1",
+    locationId: 1
+  },
+  {
+    id: 4,
+    title: "Questroom 4",
+    locationId: 2
+  },
+  {
+    id: 5,
+    title: "Questroom 5",
+    locationId: 2
+  },
+  {
+    id: 6,
+    title: "Questroom 6",
+    locationId: 2
+  },
+  {
+    id: 7,
+    title: "Questroom 7",
+    locationId: 3
+  },
+  {
+    id: 10,
+    title: "Questroom 10",
+    locationId: 4
+  },
+  {
+    id: 11,
+    title: "Questroom 11",
+    locationId: 4
+  },
+  {
+    id: 12,
+    title: "Questroom 12",
+    locationId: 4
+  },
+  {
+    id: 13,
+    title: "Questroom 13",
+    locationId: 5
+  },
+  {
+    id: 14,
+    title: "Questroom 14",
+    locationId: 5
+  },
+  {
+    id: 15,
+    title: "Questroom 15",
+    locationId: 5
+  }
+];
+export {
+  t as locations,
+  o as questrooms
+};

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

@@ -1,119 +1,123 @@
-import { useState as u, useCallback as c, useEffect as D } 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 b } from "../utils/serialize-data.js";
-const d = {
+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, n) {
-  const r = f ?? d, a = {
+function L(w, a) {
+  const r = w ?? p, n = {
     ...r,
-    ...n,
+    ...a,
     where: {
       ...r.where ?? {},
-      ...n.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: 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,
+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, o]
-  ), s = c(
+    r ? [r] : [r, c]
+  ), s = l(
     async (t) => {
-      const e = y(t);
-      if (Array.isArray(n) && (w(!1), p(b(n, e))), m(e), f) {
-        A(!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: i, meta: g }
-          } = await f(e);
-          S(g.totalItems), U(g.totalPages), p(i || []);
+            data: { items: o, meta: g }
+          } = await y(e);
+          q(g.totalItems), k(g.totalPages), A(o || []);
         } catch {
-          A(!0);
+          Q(!0);
         } finally {
-          w(!1);
+          d(!1);
         }
       }
     },
-    [y, n, f]
-  ), q = c(
+    [m, r]
+  ), z = l(
     (t) => {
       if (r) {
-        I(t), s();
+        h(t), s();
         return;
       }
-      const e = E(o, t);
-      m(e), s(e);
+      const e = L(c, t);
+      f(e), s(e);
     },
-    [r, o, s]
-  ), Q = c(
+    [r, c, s]
+  ), D = l(
     (t, e, i) => {
-      const g = t ?? d, l = {
-        ...g,
-        where: { ...g.where ?? {} }
-      }, x = l.where?.[e];
-      if (Array.isArray(x) && i != null) {
-        const v = x.filter((z) => String(z) !== String(i));
-        v.length ? l.where[e] = v : delete l.where[e];
+      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;
     },
     []
-  ), F = c(
+  ), I = l(
     (t, e) => {
       if (r) {
-        V(t, e), s();
+        B(t, e), s();
         return;
       }
-      const i = Q(o, t, e);
-      m(i), s(i);
+      const i = D(c, t, e);
+      f(i), s(i);
     },
-    [r, o, s, Q]
-  ), P = c(
+    [r, c, s, D]
+  ), V = l(
     (t) => {
       if (r) {
-        Y(t), s();
+        G(t), s();
         return;
       }
-      const e = E(d, t);
-      m(e), s(e);
+      const e = L(p, t);
+      f(e), s(e);
     },
     [r, s]
   );
-  D(() => {
+  E(() => {
     s();
-  }, [s]), D(() => {
-    if (Array.isArray(n)) {
-      const t = y();
-      m(t), w(!1), p(b(n, t));
+  }, [s]), E(() => {
+    if (Array.isArray(a)) {
+      const t = m();
+      r || f(t), d(!1), A(C(a, t));
     }
-  }, [n, y]);
-  const k = o ?? y();
+  }, [a, m]);
+  const Y = c ?? m();
   return {
-    loading: h,
-    error: C,
-    data: a,
-    total: L,
-    params: k,
-    pagesCount: T,
+    loading: S,
+    error: T,
+    data: n,
+    total: U,
+    params: Y,
+    pagesCount: F,
     updateData: s,
     // НОВОЕ: наружу отдаём универсальные методы для управления параметрами
-    addParam: q,
-    removeParam: F,
-    resetParams: P
+    addParam: z,
+    removeParam: I,
+    resetParams: V
   };
 }
 export {
-  M as useTableData
+  X as useTableData
 };

package/dist/theme-provider/default-themes.d.ts

@@ -18,6 +18,7 @@ export declare const defaultThemes: {
             readonly thirdly: "#E7E8EA";
             readonly quaternary: "#D5D6DC";
             readonly 'special-super-light': "#FDFDFD";
+            readonly 'primary-inverted': "#0E0E0E";
             readonly 'secondary-inverted': "#1C1C1E";
             readonly 'special-big-objects': "#F8F8F9";
             readonly positive: "#63C956";
@@ -46,6 +47,7 @@ export declare const defaultThemes: {
             readonly attention: "#F19938";
             readonly accent: "#2174EF";
             readonly 'accent-special': "#649EF4";
+            readonly 'primary-inverted': "#F8F8F8";
             readonly 'secondary-inverted': "#85858D";
             readonly main: "#2174ef";
             readonly static: "#FFFFFF";
@@ -92,6 +94,7 @@ export declare const defaultThemes: {
             readonly thirdly: "#27272A";
             readonly quaternary: "#36363A";
             readonly 'special-super-light': "#18181970";
+            readonly 'primary-inverted': "#FFFFFF";
             readonly 'secondary-inverted': "#F2F3F5";
             readonly 'special-big-objects': "#171718";
             readonly positive: "#32D74B";
@@ -120,6 +123,7 @@ export declare const defaultThemes: {
             readonly attention: "#F19938";
             readonly accent: "#2174EF";
             readonly 'accent-special': "#649EF4";
+            readonly 'primary-inverted': "#0E0E0E";
             readonly 'secondary-inverted': "#86868A";
             readonly main: "#2174ef";
             readonly static: "#FFFFFF";