@alphakits/ui 2.4.7 → 2.4.8

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:36px;right:32px;z-index:999}.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}@media screen and (max-width:823px){.right_e065,.center_nguy{max-width:100%!important;inset:0!important}.content_p1kc{width:100%!important;height:100%!important;max-height:100%!important;box-shadow:none!important;margin:0!important;border-radius:0!important}.button_js2W{top:24px!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:36px;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}@media screen and (max-width:823px){.right_e065,.center_nguy{max-width:100%!important;inset:0!important}.content_p1kc{width:100%!important;height:100%!important;max-height:100%!important;box-shadow:none!important;margin:0!important;border-radius:0!important}.button_js2W{top:24px!important;right:16px!important}}

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

@@ -1,19 +1,21 @@
 import * as __css from './index.css';
 export const __cssModule = __css;
-const n = "container_WE0K", t = "content_p1kc", o = "button_js2W", c = "inner_Zsdb", e = "right_e065", s = "bg_8ZfP", r = {
-  container: n,
-  content: t,
+const t = "container_WE0K", n = "content_p1kc", o = "button_js2W", e = "doubleModal_1ZTt", c = "inner_Zsdb", s = "right_e065", b = "bg_8ZfP", r = {
+  container: t,
+  content: n,
   button: o,
+  doubleModal: e,
   inner: c,
-  right: e,
-  bg: s
+  right: s,
+  bg: b
 };
 export {
-  s as bg,
+  b as bg,
   o as button,
-  n as container,
-  t as content,
+  t as container,
+  n as content,
   r as default,
+  e as doubleModal,
   c as inner,
-  e as right
+  s as right
 };

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

@@ -1,16 +1,16 @@
-import { jsxs as k, jsx as i } from "react/jsx-runtime";
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
 import y from "@alphakits/icons/dist/CloseM";
-import b from "classnames";
+import k from "classnames";
 import { useState as v, useLayoutEffect as x, useCallback as w, useEffect as E } from "react";
 import { Button as g } from "../../../button/component.js";
 import { showConfirm as F } from "../../../confirm-popup/component.js";
-import t from "./index.module.css.js";
+import s from "./index.module.css.js";
 const C = {
   s: 488,
   m: 888,
   full: "96%"
-}, d = 102, N = (e) => e === "full" ? `calc(-96vw - ${d}px)` : -C[e] - d, j = ({ modal: e, t: r, index: f, dirtyModals: a, closeModal: l, currentModalId: c }) => {
-  const m = N(e.props.size), [h, p] = v(m);
+}, b = 102, N = (e) => e === "full" ? `calc(-96vw - ${b}px)` : -C[e] - b, j = ({ modal: e, t: r, index: m, dirtyModals: a, closeModal: l, currentModalId: c }) => {
+  const f = N(e.props.size), [h, p] = v(f);
   x(() => {
     const o = requestAnimationFrame(() => p(0));
     return () => cancelAnimationFrame(o);
@@ -24,56 +24,58 @@ const C = {
     }) : Promise.resolve(!0),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [a, r]
-  ), n = w(
+  ), t = w(
     async (o) => {
-      const { id: s } = e;
-      await u(o || s) && (p(m), setTimeout(() => {
-        e.props.closeCallback && e.props.closeCallback(), l(o || s);
+      const { id: n } = e;
+      await u(o || n) && (p(f), setTimeout(() => {
+        e.props.closeCallback && e.props.closeCallback(), l(o || n);
       }, 250));
     },
-    [l, u, e, m]
+    [l, u, e, f]
   );
   return E(() => {
-    const o = (s) => {
-      (s.key === "27" || s.key === "Escape") && n(c);
+    const o = (n) => {
+      (n.key === "27" || n.key === "Escape") && t(c);
     };
     return e.id === c && window?.addEventListener("keydown", o), () => {
       window?.removeEventListener("keydown", o);
     };
-  }, [n, c, e.id]), /* @__PURE__ */ k(
+  }, [t, c, e.id]), /* @__PURE__ */ d(
     "div",
     {
-      className: t.container,
+      className: s.container,
       style: {
-        zIndex: 9999998 + f
+        zIndex: 9999998 + m
       },
       children: [
         /* @__PURE__ */ i(
           "div",
           {
-            className: b(t.right, t.content),
+            className: k(s.right, s.content),
             style: {
-              zIndex: 9999999 + f,
+              zIndex: 9999999 + m,
               width: C[e.props.size],
               right: h
             },
-            children: /* @__PURE__ */ k("div", { className: t.inner, children: [
+            children: /* @__PURE__ */ d("div", { className: s.inner, children: [
               /* @__PURE__ */ i(
                 e.modal,
                 {
                   ...e.props,
                   modalId: e.id,
-                  close: () => n()
+                  close: () => t()
                 }
               ),
               /* @__PURE__ */ i(
                 g,
                 {
-                  className: t.button,
+                  className: k(s.button, {
+                    [s.doubleModal]: e.props.isDouble
+                  }),
                   view: "secondary",
                   size: "xs",
                   leftAddons: /* @__PURE__ */ i(y, {}),
-                  onClick: () => n()
+                  onClick: () => t()
                 }
               )
             ] })
@@ -82,10 +84,10 @@ const C = {
         /* @__PURE__ */ i(
           "button",
           {
-            className: t.bg,
+            className: s.bg,
             "aria-label": "close_backdrop",
             type: "button",
-            onClick: () => n()
+            onClick: () => t()
           }
         )
       ]

package/dist/modal/hooks/use-modal.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { ModalObject, ModalSize, OwnModalProps, TFunction } from '../types';
 export declare const useModal: (t: TFunction) => {
-    openModal: <T>(modal: React.FC<T>, size?: ModalSize) => (props?: OwnModalProps<T>, closeCallback?: () => void) => void;
+    openModal: <T>(modal: React.FC<T>, size?: ModalSize, isDouble?: boolean) => (props?: OwnModalProps<T>, closeCallback?: () => void) => void;
     modals: ModalObject[];
     setModalDirty: (id: string, isDirty: boolean) => void;
     currentModalId: string;

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

@@ -1,11 +1,11 @@
-import d, { useRef as R, useCallback as r, useEffect as S } from "react";
-import { v4 as b } from "uuid";
-import { deletePropertyById as h } from "../utils/delete-property-by-id.js";
-const w = (n) => {
-  const [s, l] = d.useState([]), [f, a] = d.useState(""), [p, c] = d.useState({}), u = R(n);
+import d, { useRef as S, useCallback as r, 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 [s, l] = d.useState([]), [f, a] = d.useState(""), [p, c] = d.useState({}), u = S(n);
   u.current = n;
   const i = r((t) => {
-    c((e) => h(e, t)), l((e) => e.filter((o) => o.id !== t));
+    c((e) => v(e, t)), l((e) => e.filter((o) => o.id !== t));
   }, []), M = r((t) => {
     l((e) => [...e, t]), a(t.id);
   }, []), m = r((t, e) => {
@@ -14,21 +14,22 @@ const w = (n) => {
       [t]: e
     });
   }, []);
-  return S(() => {
+  return b(() => {
     const t = [...s].pop()?.id;
     a(t || ""), document.body.style.overflow = s.length ? "hidden" : "unset";
   }, [s]), {
     openModal: r(
-      (t, e = "s") => (o, y) => {
-        const I = b();
+      (t, e = "s", o) => (y, I) => {
+        const R = h();
         M({
-          id: I,
+          id: R,
           modal: t,
           props: {
             size: e,
-            closeCallback: y,
+            isDouble: o,
+            closeCallback: I,
             t: u.current,
-            ...o
+            ...y
           }
         });
       },
@@ -42,5 +43,5 @@ const w = (n) => {
   };
 };
 export {
-  w as useModal
+  x as useModal
 };

package/dist/modal/types.d.ts

@@ -4,6 +4,7 @@ type ModalProps = {
     close: () => void;
     modalId?: string;
     size: ModalSize;
+    isDouble?: boolean;
     t: TFunction;
 } & unknown;
 export type TFunction = (field: string, options?: {
@@ -19,7 +20,7 @@ export type ModalObject = {
     props: ModalProps;
 };
 export type ContextProps = {
-    openModal: <T>(modal: React.FC<T>, size?: ModalSize) => (props?: OwnModalProps<T>, closeCallback?: () => void) => void;
+    openModal: <T>(modal: React.FC<T>, size?: ModalSize, isDouble?: boolean) => (props?: OwnModalProps<T>, closeCallback?: () => void) => void;
     modals: ModalObject[];
     currentModalId: ModalObject['id'];
     setModalDirty: (id: ModalObject['id'], isDirty: boolean) => void;

package/package.json

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