@alphakits/ui 2.4.3 → 2.4.5

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

@@ -1,67 +1,77 @@
-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";
+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 d } from "../../../button-arrow/component.js";
+import { showConfirm as g } from "../../../confirm-popup/component.js";
+import s from "./index.module.css.js";
 const C = {
   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, F = (e) => e === "full" ? `calc(-96vw - ${h}px)` : -C[e] - h, R = ({ modal: e, t: r, index: a, dirtyModals: m, closeModal: l, currentModalId: c }) => {
+  const f = F(e.props.size), [y, 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] ? g({
+      title: r("common:exitConfirm"),
+      confirmText: r("common:Да"),
+      cancelText: r("common:Нет"),
+      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,
+              zIndex: 9999999 + a,
               width: C[e.props.size],
-              right: b
+              right: y
             },
-            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,
+                  modalId: e.id,
+                  close: () => t()
+                }
+              ),
               e.props.showCloser !== !1 && /* @__PURE__ */ i(
-                x,
+                d,
                 {
-                  className: t.button,
+                  className: s.button,
                   size: "s",
                   type: "close",
-                  onClick: () => n()
+                  onClick: () => t()
                 }
               )
             ] })
@@ -70,10 +80,10 @@ const C = {
         /* @__PURE__ */ i(
           "button",
           {
-            className: t.bg,
+            className: s.bg,
             "aria-label": "close_backdrop",
             type: "button",
-            onClick: () => n()
+            onClick: () => t()
           }
         )
       ]
@@ -81,5 +91,5 @@ const C = {
   );
 };
 export {
-  O as Modal
+  R as Modal
 };

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

@@ -2,42 +2,42 @@ 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 [r, l] = d.useState([]), [f, a] = d.useState(""), [p, c] = d.useState({}), u = S(n);
+  u.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]);
+    c((e) => v(e, t)), l((e) => e.filter((o) => o.id !== t));
+  }, []), M = s((t) => {
+    l((e) => [...e, t]), a(t.id);
   }, []), m = s((t, e) => {
-    t && a((o) => o[t] === e ? o : {
+    t && c((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";
+    a(t || ""), document.body.style.overflow = r.length ? "hidden" : "unset";
   }, [r]), {
     openModal: s(
       (t, e = "s", o = !0) => (y, I) => {
         const R = h();
-        u({
+        M({
           id: R,
           modal: t,
           props: {
             size: e,
             showCloser: o,
             closeCallback: I,
-            t: c.current,
+            t: u.current,
             ...y
           }
         });
       },
-      [u]
+      [M]
     ),
     modals: r,
     setModalDirty: m,
-    currentModalId: M,
+    currentModalId: f,
     dirtyModals: p,
     closeModal: i
   };

package/dist/modal/types.d.ts

@@ -2,6 +2,7 @@
 type ModalProps = {
     closeCallback: () => void;
     close: () => void;
+    modalId?: string;
     size: ModalSize;
     showCloser?: boolean;
     t: TFunction;
@@ -12,7 +13,7 @@ export type TFunction = (field: string, options?: {
     [optionName: string]: any;
 }) => string;
 export type ModalSize = 's' | 'm' | 'full';
-export type OwnModalProps<T> = Omit<T, 'close' | 't'>;
+export type OwnModalProps<T> = Omit<T, 'close' | 't' | 'modalId'>;
 export type ModalObject = {
     modal: React.FC<ModalProps>;
     id: string;

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
+};