@alphakits/ui 2.5.3 → 2.5.4

package/dist/modal/components/modals/index.css

@@ -1 +1 @@
-.container_WE0K{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}.content_p1kc{background:var(--color-bg-primary);box-shadow:0 0 10px #0003}@media print{.content_p1kc{width:100%!important}}.button_js2W{position:absolute!important;top:34px;right:32px;z-index:999}.button_js2W.doubleModal_1ZTt{right:384px}.inner_Zsdb{height:100%;box-sizing:border-box;overflow:auto}.right_e065{position:fixed;top:0;right:0;bottom:0;transition:width .2s,opacity .2s,right .2s;transition-delay:width .1s;transition-timing-function:ease-in}.bg_8ZfP{transition:opacity .2s;background:#00000080;position:fixed;display:block;border:0;inset:0}.bottomSheet_CI-8{inset:0!important;width:100%!important;max-width:100%!important;height:100dvh;max-height:100dvh;border-radius:0!important;transform:translateY(100%);transition:transform .25s cubic-bezier(.32,.72,0,1)}@supports not (height: 100dvh){.bottomSheet_CI-8{height:100vh;max-height:100vh}}.bottomSheet_CI-8.open_eGDW{transform:translateY(0)}.bottomSheet_CI-8[data-anim-done=true]{transform:none;transition:none}@media screen and (max-width:823px){.right_e065,.center_nguy{max-width:100%!important;right:0!important;left:0!important}.content_p1kc{box-shadow:none!important;margin:0!important}.button_js2W{top:16px!important;right:16px!important}}
+.container_WE0K{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}.content_p1kc{background:var(--color-bg-primary);box-shadow:0 0 10px #0003}@media print{.content_p1kc{width:100%!important}}.button_js2W{position:absolute!important;top:34px;right:32px;z-index:999}.button_js2W.doubleModal_1ZTt{right:384px}.inner_Zsdb{height:100%;box-sizing:border-box;overflow:auto}.right_e065{position:fixed;top:0;right:0;bottom:0;transition:width .2s,opacity .2s,right .2s;transition-delay:width .1s;transition-timing-function:ease-in}.bg_8ZfP{transition:opacity .2s;background:#00000080;position:fixed;display:block;border:0;inset:0}.bottomSheet_CI-8{top:100dvh!important;bottom:auto!important;left:0!important;right:0!important;width:100%!important;max-width:100%!important;height:100dvh;max-height:100dvh;border-radius:0!important;transition:top .25s cubic-bezier(.32,.72,0,1)}@supports not (height: 100dvh){.bottomSheet_CI-8{top:100vh!important;height:100vh;max-height:100vh}}.bottomSheet_CI-8.open_eGDW{top:0!important}@media screen and (max-width:823px){.right_e065,.center_nguy{max-width:100%!important;right:0!important;left:0!important}.content_p1kc{box-shadow:none!important;margin:0!important}.button_js2W{top:16px!important;right:16px!important}}

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

@@ -1,16 +1,16 @@
-import { jsxs as w, jsx as d } from "react/jsx-runtime";
-import z from "@alphakits/icons/dist/CloseM";
-import k from "classnames";
-import { useState as S, useRef as T, useLayoutEffect as j, useCallback as p, useEffect as A } from "react";
-import { Button as B } from "../../../button/component.js";
-import { showConfirm as q } from "../../../confirm-popup/component.js";
-import { useMatchMedia as K } from "../../../mq/use-match-media.js";
+import { jsxs as E, jsx as l } from "react/jsx-runtime";
+import O from "@alphakits/icons/dist/CloseM";
+import C from "classnames";
+import { useState as L, useRef as w, useLayoutEffect as N, useEffect as k, useCallback as S } from "react";
+import { Button as z } from "../../../button/component.js";
+import { showConfirm as j } from "../../../confirm-popup/component.js";
+import { useMatchMedia as B } from "../../../mq/use-match-media.js";
 import s from "./index.module.css.js";
-const N = {
+const R = {
   s: 488,
   m: 888,
   full: "96%"
-}, F = 102, _ = "(max-width: 823px)", P = (e) => e === "full" ? `calc(-96vw - ${F}px)` : -N[e] - F, $ = [
+}, T = 102, D = "(max-width: 823px)", K = (e) => e === "full" ? `calc(-96vw - ${T}px)` : -R[e] - T, _ = [
   'a[href]:not([tabindex="-1"])',
   'area[href]:not([tabindex="-1"])',
   'button:not([disabled]):not([tabindex="-1"])',
@@ -25,44 +25,37 @@ const N = {
   'audio[controls]:not([tabindex="-1"])',
   'video[controls]:not([tabindex="-1"])',
   'details > summary:first-of-type:not([tabindex="-1"])'
-].join(","), R = (e) => e ? Array.from(e.querySelectorAll($)).filter((r) => {
+].join(","), F = (e) => e ? Array.from(e.querySelectorAll(_)).filter((r) => {
   if (r.hidden || r.getAttribute("aria-hidden") === "true") return !1;
   const a = window.getComputedStyle(r);
   return a.visibility === "hidden" || a.display === "none" ? !1 : r.offsetWidth > 0 || r.offsetHeight > 0 || r.getClientRects().length > 0;
-}) : [], Q = ({ modal: e, t: c, index: r, dirtyModals: a, closeModal: y, currentModalId: u }) => {
-  const O = P(e.props.size), [f] = K(_), [m, h] = S(!1), [L, x] = S(!1), i = T(null), v = T(null);
-  j(() => {
-    const t = requestAnimationFrame(() => h(!0));
-    return () => cancelAnimationFrame(t);
-  }, [e.id]);
-  const D = p(
-    (t) => {
-      t.propertyName === "transform" && t.target === t.currentTarget && (!m || !f || x(!0));
-    },
-    [m, f]
-  );
-  A(() => {
+}) : [], W = ({ modal: e, t: c, index: r, dirtyModals: a, closeModal: m, currentModalId: u }) => {
+  const A = K(e.props.size), [b] = B(D), [p, y] = L(!1), i = w(null), x = w(null);
+  N(() => {
+    const o = requestAnimationFrame(() => y(!0));
+    return () => cancelAnimationFrame(o);
+  }, [e.id]), k(() => {
     if (e.id !== u) return;
-    v.current = document.activeElement || null;
-    const t = setTimeout(() => {
-      const o = R(i.current)[0] || i.current;
-      o && typeof o.focus == "function" && o.focus({ preventScroll: !0 });
+    x.current = document.activeElement || null;
+    const o = setTimeout(() => {
+      const n = F(i.current)[0] || i.current;
+      n && typeof n.focus == "function" && n.focus({ preventScroll: !0 });
     }, 50);
     return () => {
-      clearTimeout(t);
-      const n = document.activeElement;
-      if (!n || !i.current?.contains(n)) return;
-      const o = v.current;
-      if (o && typeof o.focus == "function" && document.body.contains(o))
+      clearTimeout(o);
+      const t = document.activeElement;
+      if (!t || !i.current?.contains(t)) return;
+      const n = x.current;
+      if (n && typeof n.focus == "function" && document.body.contains(n))
         try {
-          o.focus({ preventScroll: !0 });
+          n.focus({ preventScroll: !0 });
         } catch {
           document.body.focus();
         }
     };
   }, [e.id, u]);
-  const g = p(
-    (t) => a[t] ? q({
+  const h = S(
+    (o) => a[o] ? j({
       title: c("common:exitConfirm"),
       confirmText: c("common:Да"),
       cancelText: c("common:Нет"),
@@ -70,38 +63,38 @@ const N = {
     }) : Promise.resolve(!0),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [a, c]
-  ), l = p(
-    async (t) => {
-      const { id: n } = e;
-      await g(t || n) && (x(!1), requestAnimationFrame(() => h(!1)), setTimeout(() => {
-        e.props.closeCallback && e.props.closeCallback(), y(t || n);
+  ), f = S(
+    async (o) => {
+      const { id: t } = e;
+      await h(o || t) && (y(!1), setTimeout(() => {
+        e.props.closeCallback && e.props.closeCallback(), m(o || t);
       }, 250));
     },
-    [y, g, e]
+    [m, h, e]
   );
-  return A(() => {
-    const t = (n) => {
-      if (n.key === "27" || n.key === "Escape") {
-        l(u);
+  return k(() => {
+    const o = (t) => {
+      if (t.key === "27" || t.key === "Escape") {
+        f(u);
         return;
       }
-      if (n.key !== "Tab") return;
-      const o = R(i.current);
-      if (!o.length) {
-        n.preventDefault(), i.current && i.current.focus({ preventScroll: !0 });
+      if (t.key !== "Tab") return;
+      const n = F(i.current);
+      if (!n.length) {
+        t.preventDefault(), i.current && i.current.focus({ preventScroll: !0 });
         return;
       }
-      const E = o[0], C = o[o.length - 1], b = document.activeElement;
-      if (n.shiftKey && (b === E || !i.current?.contains(b))) {
-        n.preventDefault(), C.focus({ preventScroll: !0 });
+      const v = n[0], g = n[n.length - 1], d = document.activeElement;
+      if (t.shiftKey && (d === v || !i.current?.contains(d))) {
+        t.preventDefault(), g.focus({ preventScroll: !0 });
         return;
       }
-      !n.shiftKey && (b === C || !i.current?.contains(b)) && (n.preventDefault(), E.focus({ preventScroll: !0 }));
+      !t.shiftKey && (d === g || !i.current?.contains(d)) && (t.preventDefault(), v.focus({ preventScroll: !0 }));
     };
-    return e.id === u && window?.addEventListener("keydown", t), () => {
-      window?.removeEventListener("keydown", t);
+    return e.id === u && window?.addEventListener("keydown", o), () => {
+      window?.removeEventListener("keydown", o);
     };
-  }, [l, u, e.id]), /* @__PURE__ */ w(
+  }, [f, u, e.id]), /* @__PURE__ */ E(
     "div",
     {
       className: s.container,
@@ -109,60 +102,58 @@ const N = {
         zIndex: 9999998 + r
       },
       children: [
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ l(
           "div",
           {
             ref: i,
-            className: k(s.right, s.content, {
-              [s.open]: m,
-              [s.bottomSheet]: f
+            className: C(s.right, s.content, {
+              [s.open]: p,
+              [s.bottomSheet]: b
             }),
             style: {
               zIndex: 9999999 + r,
-              width: N[e.props.size],
+              width: R[e.props.size],
               // На десктопе right-slide управляется JS-ом (старая
               // схема — анимация ширины и right'а синхронны). На
               // мобиле right=0 всегда, а появление контролируется
-              // CSS-классом .open → transform: translateY(0).
-              right: f || m ? 0 : O
+              // CSS (.bottomSheet.open → top: 0).
+              right: b || p ? 0 : A
             },
-            onTransitionEnd: D,
-            "data-anim-done": f && L ? "true" : void 0,
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": `modal-title-${e.id}`,
             tabIndex: -1,
-            children: /* @__PURE__ */ w("div", { className: s.inner, children: [
-              /* @__PURE__ */ d(
+            children: /* @__PURE__ */ E("div", { className: s.inner, children: [
+              /* @__PURE__ */ l(
                 e.modal,
                 {
                   ...e.props,
                   modalId: e.id,
-                  close: () => l()
+                  close: () => f()
                 }
               ),
-              /* @__PURE__ */ d(
-                B,
+              /* @__PURE__ */ l(
+                z,
                 {
-                  className: k(s.button, {
+                  className: C(s.button, {
                     [s.doubleModal]: e.props.isDouble
                   }),
                   view: "secondary",
                   size: "xs",
-                  leftAddons: /* @__PURE__ */ d(z, {}),
-                  onClick: () => l()
+                  leftAddons: /* @__PURE__ */ l(O, {}),
+                  onClick: () => f()
                 }
               )
             ] })
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ l(
           "button",
           {
             className: s.bg,
             "aria-label": "Close dialog",
             type: "button",
-            onClick: () => l()
+            onClick: () => f()
           }
         )
       ]
@@ -170,5 +161,5 @@ const N = {
   );
 };
 export {
-  Q as Modal
+  W as Modal
 };

package/package.json

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