@alphakits/ui 2.4.3 → 2.4.5

package/dist/confirm-popup/component.js

@@ -0,0 +1,138 @@
+import { jsx as i, jsxs as p } from "react/jsx-runtime";
+import { useCallback as b, useEffect as x } from "react";
+import { createPortal as N } from "react-dom";
+import { createRoot as P } from "react-dom/client";
+import { Button as v } from "../button/component.js";
+import { Typography as y } from "../typography/component.js";
+import n from "./index.module.css.js";
+const g = ({
+  title: e,
+  description: t,
+  confirmText: r,
+  cancelText: l,
+  confirmView: d = "primary",
+  mode: m = "confirm",
+  onConfirm: c,
+  onCancel: o
+}) => {
+  const s = m === "alert", C = b(
+    (a) => {
+      a.target === a.currentTarget && o();
+    },
+    [o]
+  );
+  return x(() => {
+    const a = (w) => {
+      w.key === "Escape" && o(), w.key === "Enter" && (s ? o : c)();
+    };
+    return window.addEventListener("keydown", a), () => window.removeEventListener("keydown", a);
+  }, [o, c, s]), N(
+    /* @__PURE__ */ i(
+      "div",
+      {
+        className: n.backdrop,
+        onClick: C,
+        role: "dialog",
+        "aria-modal": "true",
+        children: /* @__PURE__ */ p("div", { className: n.card, children: [
+          /* @__PURE__ */ p("div", { className: n.content, children: [
+            /* @__PURE__ */ i(
+              y.Title,
+              {
+                tag: "h3",
+                view: "xsmall",
+                color: "primary",
+                className: n.title,
+                children: e
+              }
+            ),
+            t && /* @__PURE__ */ i(
+              y.Text,
+              {
+                tag: "p",
+                color: "secondary",
+                view: "primary-medium",
+                className: n.description,
+                children: t
+              }
+            )
+          ] }),
+          /* @__PURE__ */ p("div", { className: n.actions, children: [
+            !s && /* @__PURE__ */ i(v, { size: "s", view: "outlined", block: !0, onClick: o, children: l }),
+            /* @__PURE__ */ i(
+              v,
+              {
+                size: "s",
+                className: n[d],
+                view: "primary",
+                block: !0,
+                onClick: s ? o : c,
+                children: s ? l : r
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    document.body
+  );
+};
+let u = null, f = null;
+const h = () => {
+  u && (u.unmount(), u = null), f && (f.remove(), f = null);
+}, k = (e, t) => {
+  h();
+  const r = document.createElement("div");
+  r.setAttribute("data-confirm-popup", ""), document.body.appendChild(r);
+  const l = P(r);
+  u = l, f = r;
+  let d = !1;
+  const m = (c) => () => {
+    d || (d = !0, h(), c(), t());
+  };
+  l.render(
+    /* @__PURE__ */ i(
+      g,
+      {
+        ...e,
+        onConfirm: m(e.onConfirm),
+        onCancel: m(e.onCancel)
+      }
+    )
+  );
+}, R = (e) => typeof window > "u" ? Promise.resolve(!1) : new Promise((t) => {
+  let r = !1;
+  k(
+    {
+      ...e,
+      mode: "confirm",
+      onConfirm: () => {
+        r = !0;
+      },
+      onCancel: () => {
+        r = !1;
+      }
+    },
+    () => t(r)
+  );
+}), K = (e) => typeof window > "u" ? Promise.resolve() : new Promise((t) => {
+  k(
+    {
+      title: e.title,
+      description: e.description,
+      confirmText: "",
+      cancelText: e.buttonText ?? "Понятно",
+      mode: "alert",
+      onConfirm: () => {
+      },
+      onCancel: () => {
+      }
+    },
+    () => t()
+  );
+});
+export {
+  g as ConfirmPopup,
+  K as showAlert,
+  R as showConfirm
+};

package/dist/confirm-popup/index.css

@@ -0,0 +1 @@
+.backdrop_bTWm{position:fixed;inset:0;z-index:99999990;background:#00000073;display:flex;align-items:center;justify-content:center;padding:16px;animation:backdrop-in_2Gfp .15s ease-out}.card_QdKQ{background:var(--color-bg-primary);border-radius:16px;box-shadow:0 16px 48px #00000047;width:100%;max-width:380px;padding:24px;display:flex;flex-direction:column;gap:20px;animation:card-in_kaZX .18s ease-out}.content_qypP{display:flex;flex-direction:column;gap:6px}.title_Ax6t,.description_pjZB{margin:0}.actions_MbU4{display:flex;gap:8px}.actions_MbU4>*{flex:1 1 0;min-width:0}.negative_htRp{background:var(--color-bg-negative);border:1px solid var(--color-border-secondary)}@keyframes backdrop-in_2Gfp{0%{opacity:0}to{opacity:1}}@keyframes card-in_kaZX{0%{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

package/dist/confirm-popup/index.d.ts

@@ -0,0 +1 @@
+export * from './component';

package/dist/confirm-popup/index.js

@@ -0,0 +1,6 @@
+import { ConfirmPopup as f, showAlert as m, showConfirm as p } from "./component.js";
+export {
+  f as ConfirmPopup,
+  m as showAlert,
+  p as showConfirm
+};

package/dist/confirm-popup/index.module.css.js

@@ -0,0 +1,23 @@
+import * as __css from './index.css';
+export const __cssModule = __css;
+const t = "backdrop_bTWm", c = "card_QdKQ", n = "content_qypP", o = "title_Ax6t", a = "description_pjZB", i = "actions_MbU4", e = "negative_htRp", s = {
+  backdrop: t,
+  "backdrop-in": "backdrop-in_2Gfp",
+  card: c,
+  "card-in": "card-in_kaZX",
+  content: n,
+  title: o,
+  description: a,
+  actions: i,
+  negative: e
+};
+export {
+  i as actions,
+  t as backdrop,
+  c as card,
+  n as content,
+  s as default,
+  a as description,
+  e as negative,
+  o as title
+};

package/dist/form/component.js

@@ -7,7 +7,7 @@ import { ModalContext as x } from "../modal/context.js";
 import { showError as T, showSuccess as F } from "../utils/show-toast/index.js";
 import { RestForm as w } from "./templates/rest-form/index.js";
 const E = { baz: "", bar: "" }, M = { buz: "", bur: "" }, V = (l) => {
-  const [i, c] = a.useState(!0), [f, u] = a.useState(!1), [p, m] = a.useState(!1);
+  const [i, c] = a.useState(!0), [f, m] = a.useState(!1), [p, u] = a.useState(!1);
   return a.useEffect(() => {
     setTimeout(() => c(!1), 500);
   }, []), /* @__PURE__ */ e(
@@ -17,30 +17,30 @@ const E = { baz: "", bar: "" }, M = { buz: "", bur: "" }, V = (l) => {
       initialValues: M,
       customValidationFields: ["bur"],
       save: () => new Promise((b) => {
-        u(!0), setTimeout(() => {
-          b(), u(!1), F("", "Saved");
+        m(!0), setTimeout(() => {
+          b(), m(!1), F("", "Saved");
         }, 3e3);
       }),
       remove: () => new Promise((b) => {
-        m(!0), setTimeout(() => {
-          b(), m(!1), T("Some error from server", "Error");
+        u(!0), setTimeout(() => {
+          b(), u(!1), T("Some error from server", "Error");
         }, 3e3);
       }),
       title: "custom title other",
       loading: i,
-      submitButtonText: "submit",
+      submitButtonText: "common:submit",
       updating: f,
       removing: p,
       close: l?.close,
       t: (b) => b,
-      children: ({ values: b, touched: d, errors: r, handleChange: o }) => /* @__PURE__ */ C(S, { columns: 1, gr: 16, gc: 0, children: [
+      children: ({ values: b, touched: g, errors: r, handleChange: o }) => /* @__PURE__ */ C(S, { columns: 1, gr: 16, gc: 0, children: [
         /* @__PURE__ */ e(
           t,
           {
             label: "buz",
             value: b.buz,
             onChange: o("buz"),
-            error: d.buz && r.buz
+            error: g.buz && r.buz
           }
         ),
         /* @__PURE__ */ e(
@@ -49,14 +49,14 @@ const E = { baz: "", bar: "" }, M = { buz: "", bur: "" }, V = (l) => {
             label: "bur",
             value: b.bur,
             onChange: o("bur"),
-            error: d.bur && r.bur
+            error: g.bur && r.bur
           }
         )
       ] })
     }
   );
 }, O = (l) => {
-  const [i, c] = a.useState(!0), [f, u] = a.useState(!1), [p, m] = a.useState(!1), { openModal: g } = a.useContext(x), v = g(V);
+  const [i, c] = a.useState(!0), [f, m] = a.useState(!1), [p, u] = a.useState(!1), { openModal: v } = a.useContext(x), d = v(V);
   return a.useEffect(() => {
     setTimeout(() => c(!1), 500);
   }, []), /* @__PURE__ */ e(
@@ -66,13 +66,13 @@ const E = { baz: "", bar: "" }, M = { buz: "", bur: "" }, V = (l) => {
       initialValues: E,
       customValidationFields: ["bar"],
       save: () => new Promise((r) => {
-        u(!0), setTimeout(() => {
-          r(), u(!1), F("", "Saved");
+        m(!0), setTimeout(() => {
+          r(), m(!1), F("", "Saved");
         }, 3e3);
       }),
       remove: () => new Promise((r) => {
-        m(!0), setTimeout(() => {
-          r(), m(!1), T("Some error from server", "Error");
+        u(!0), setTimeout(() => {
+          r(), u(!1), T("Some error from server", "Error");
         }, 3e3);
       }),
       title: "Настройки",
@@ -81,7 +81,7 @@ const E = { baz: "", bar: "" }, M = { buz: "", bur: "" }, V = (l) => {
       },
       softError: "Some error",
       loading: i,
-      submitButtonText: "csdcds",
+      submitButtonText: "common:save",
       updating: f,
       removing: p,
       close: l?.close,
@@ -168,7 +168,7 @@ const E = { baz: "", bar: "" }, M = { buz: "", bur: "" }, V = (l) => {
             error: o.bar && n.bar
           }
         ),
-        /* @__PURE__ */ e(z, { onClick: v, children: "openCrudModalOther" })
+        /* @__PURE__ */ e(z, { onClick: d, children: "openCrudModalOther" })
       ] })
     }
   );

package/dist/form/templates/filters-form/index.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
 import { Formik as d } from "formik";
 import u from "react";
 import { Button as i } from "../../../button/component.js";
@@ -8,42 +8,42 @@ const C = ({
   initialValues: n,
   defaultValues: m,
   children: s,
-  submitCallback: l,
-  close: o,
-  t: r
+  submitCallback: c,
+  close: r,
+  t: e
 }) => {
-  const a = p(n, m);
-  return /* @__PURE__ */ e(d, { initialValues: a, onSubmit: (t) => {
-    l(t), o();
-  }, children: (t) => (process.env.REACT_APP_STAGE, /* @__PURE__ */ e(
+  const l = p(n, m);
+  return /* @__PURE__ */ t(d, { initialValues: l, onSubmit: (o) => {
+    c(o), r();
+  }, children: (o) => (process.env.REACT_APP_STAGE, /* @__PURE__ */ t(
     f,
     {
-      title: r("filters"),
-      bottomAddons: /* @__PURE__ */ c(u.Fragment, { children: [
-        /* @__PURE__ */ e(
+      title: e("common:filters"),
+      bottomAddons: /* @__PURE__ */ a(u.Fragment, { children: [
+        /* @__PURE__ */ t(
           i,
           {
             view: "primary",
             size: "s",
             block: !0,
             dataTestId: "buttonSave",
-            onClick: () => t.submitForm(),
-            children: r("save")
+            onClick: () => o.submitForm(),
+            children: e("common:save")
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           i,
           {
             block: !0,
             view: "secondary",
             size: "s",
             dataTestId: "buttonCancel",
-            onClick: o,
-            children: r("cancel")
+            onClick: r,
+            children: e("common:cancel")
           }
         )
       ] }),
-      children: s(t)
+      children: s(o)
     }
   )) });
 };

package/dist/form/templates/rest-form/form.d.ts

@@ -1,5 +1,5 @@
 import { FormikProps, FormikValues } from 'formik';
 import { Props } from '.';
 type FormProps<T extends FormikValues> = Props<T> & FormikProps<T>;
-export declare function Form<T extends FormikValues>({ recordId, title, subtitle, headerBottomAddons, initialValues, submitButtonText, customFooter, loading, updating, removing, customValidationFields, validate, save, remove, close, back, t, children, headerAddon, error, softError, ...formProps }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Form<T extends FormikValues>({ recordId, title, subtitle, headerBottomAddons, initialValues, submitButtonText, customFooter, loading, updating, removing, customValidationFields, validate, save, remove, close, back, t, children, headerAddon, error, softError, modalId, ...formProps }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/form/templates/rest-form/form.js

@@ -1,115 +1,120 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import V from "@alphakits/icons/dist/TrashM";
-import D, { useContext as H, useRef as q, useCallback as x, useEffect as G } from "react";
-import { Button as F } from "../../../button/component.js";
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import A from "@alphakits/icons/dist/TrashM";
+import D, { useContext as H, useCallback as C, useEffect as q } from "react";
+import { Button as k } from "../../../button/component.js";
+import { showConfirm as G } from "../../../confirm-popup/component.js";
 import { Flex as J } from "../../../flex/component.js";
 import { FlexColumns as K } from "../../../flex-columns/component.js";
 import { IconButton as L } from "../../../icon-button/component.js";
 import { ModalContext as N } from "../../../modal/context.js";
 import { Sidepanel as O } from "../../../sidepanel/component.js";
-import { ToastPlate as I } from "../../../toast-plate/component.js";
-function ie({
-  recordId: R,
-  title: M,
-  subtitle: T,
-  headerBottomAddons: b,
-  initialValues: w,
-  submitButtonText: y,
-  customFooter: B,
-  loading: n,
+import { ToastPlate as x } from "../../../toast-plate/component.js";
+function ce({
+  recordId: w,
+  title: T,
+  subtitle: F,
+  headerBottomAddons: u,
+  initialValues: y,
+  submitButtonText: I,
+  customFooter: M,
+  loading: r,
   updating: i,
-  removing: s,
+  removing: m,
   customValidationFields: Q,
   validate: U,
   save: W,
-  remove: a,
-  close: S,
-  back: z,
-  t: r,
-  children: P,
+  remove: c,
+  close: R,
+  back: B,
+  t: e,
+  children: S,
   headerAddon: h,
   error: X,
-  softError: d,
-  ...g
+  softError: s,
+  modalId: g,
+  ...z
 }) {
-  const { setModalDirty: e, currentModalId: l } = H(N), c = q("");
-  !c.current && l && (c.current = l);
-  const t = c.current || l, { submitCount: m, handleSubmit: C, isValid: f, ...u } = g, v = !!R && !!a, k = x(
+  const { setModalDirty: o, currentModalId: P } = H(N), t = g || P, { submitCount: a, handleSubmit: p, isValid: l, ...d } = z, b = !!w && !!c, v = C(
     () => {
-      e(t, !1), C();
+      o(t, !1), p();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [t, e, C]
-  ), j = x(() => {
-    e(t, !1), confirm(r("common:deleteConfirm")) && a?.();
-  }, [t, r, e, a]);
-  G(() => {
-    n || e(t, u.dirty);
-  }, [u.dirty, n, t, e]);
-  const A = v || h ? /* @__PURE__ */ p(D.Fragment, { children: [
+    [t, o, p]
+  ), V = C(async () => {
+    o(t, !1), await G({
+      title: e("common:deleteConfirm"),
+      confirmText: e("common:remove"),
+      cancelText: e("common:cancel"),
+      confirmView: "negative"
+    }) && c?.();
+  }, [t, e, o, c]);
+  q(() => {
+    r || o(t, d.dirty);
+  }, [d.dirty, r, t, o]);
+  const j = b || h ? /* @__PURE__ */ f(D.Fragment, { children: [
     h,
-    v && /* @__PURE__ */ o(
+    b && /* @__PURE__ */ n(
       L,
       {
         dataTestId: "removeTariffBtn",
         size: "m",
         disabled: i,
-        loading: s,
-        onClick: j,
-        icon: V
+        loading: m,
+        onClick: V,
+        icon: A
       }
     )
   ] }) : null;
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ n(
     O,
     {
-      headerRightAddons: A,
-      title: M,
-      subtitle: T,
-      loading: i || s || n,
-      headerBottomAddons: (b || !!d || !f && !!m) && /* @__PURE__ */ p(K, { columns: 1, gr: 8, children: [
-        b,
-        !!d && /* @__PURE__ */ o(I, { view: "negative", children: d }),
-        !f && !!m && /* @__PURE__ */ o(I, { view: "negative", children: "Please correct errors before submitting form." })
+      headerRightAddons: j,
+      title: T,
+      subtitle: F,
+      loading: i || m || r,
+      headerBottomAddons: (u || !!s || !l && !!a) && /* @__PURE__ */ f(K, { columns: 1, gr: 8, children: [
+        u,
+        !!s && /* @__PURE__ */ n(x, { view: "negative", children: s }),
+        !l && !!a && /* @__PURE__ */ n(x, { view: "negative", children: "Please correct errors before submitting form." })
       ] }),
-      back: z,
-      t: r,
-      bottomAddons: B || /* @__PURE__ */ p(J, { gap: "md", children: [
-        /* @__PURE__ */ o(
-          F,
+      back: B,
+      t: e,
+      bottomAddons: M || /* @__PURE__ */ f(J, { gap: "md", children: [
+        /* @__PURE__ */ n(
+          k,
           {
             view: "primary",
             size: "s",
             block: !0,
-            loading: n,
-            disabled: i || s,
+            loading: r,
+            disabled: i || m,
             dataTestId: "buttonSave",
-            onClick: () => k(),
-            children: r(y || "save")
+            onClick: () => v(),
+            children: e(I || "common:save")
           }
         ),
-        /* @__PURE__ */ o(
-          F,
+        /* @__PURE__ */ n(
+          k,
           {
             block: !0,
             view: "secondary",
             size: "s",
             dataTestId: "buttonCancel",
-            onClick: S,
-            children: r("cancel")
+            onClick: R,
+            children: e("common:cancel")
           }
         )
       ] }),
-      children: P({
-        submitCount: m,
-        isValid: f,
-        handleSubmit: k,
-        initialValues: w,
-        ...u
+      children: S({
+        submitCount: a,
+        isValid: l,
+        handleSubmit: v,
+        initialValues: y,
+        ...d
       })
     }
   );
 }
 export {
-  ie as Form
+  ce as Form
 };

package/dist/form/templates/rest-form/index.d.ts

@@ -22,6 +22,7 @@ export type Props<T extends FormikValues> = {
     submitButtonText?: string;
     children: (props: FormikProps<FormikValues & T>) => React.ReactNode;
     close: () => void;
+    modalId?: string;
     t: TFunction;
     headerAddon?: React.ReactNode;
 };

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export * from './checkbox-group';
 export * from './checkbox-lists';
 export * from './collapsable-row';
 export * from './collapse';
+export * from './confirm-popup';
 export * from './copy-button';
 export * from './date';
 export * from './date-switcher';