@alphakits/ui 2.4.4 → 2.4.6

package/dist/calendar/component.js

@@ -1,4 +1,4 @@
-import { jsxs as P, jsx as y } from "react/jsx-runtime";
+import { jsxs as P, jsx as M } from "react/jsx-runtime";
 import se from "classnames";
 import { forwardRef as ae, useState as S, useMemo as o, useCallback as a } from "react";
 import { startOfMonth as D, isSameDay as le } from "../utils/date/index.js";
@@ -14,48 +14,48 @@ const me = ce, Pe = ae(
     className: b,
     defaultView: Y = "days",
     value: n,
-    month: i,
+    month: d,
     defaultMonth: p = Date.now(),
-    minDate: d,
-    maxDate: h,
+    minDate: h,
+    maxDate: f,
     selectedFrom: l,
     selectedTo: V,
     offDays: j,
     events: R,
-    onChange: f,
+    onChange: w,
     onMonthChange: B,
     onYearChange: E,
     locale: H = "en",
     shortNames: L = !0,
     dataTestId: O
   }, T) => {
-    const [e, w] = S(Y), [U, W] = S(!1), m = me[H], r = o(() => n ? new Date(n) : void 0, [n]), q = o(
+    const [e, c] = S(Y), [U, W] = S(!1), m = me[H], r = o(() => n ? new Date(n) : void 0, [n]), q = o(
       () => D(
         r ?? (l != null ? new Date(l) : new Date(p))
       ),
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [p, l, r]
     ), z = o(
-      () => i ? new Date(i) : void 0,
-      [i]
-    ), G = o(
       () => d ? new Date(d) : void 0,
       [d]
-    ), I = o(
+    ), G = o(
       () => h ? new Date(h) : void 0,
       [h]
+    ), I = o(
+      () => f ? new Date(f) : void 0,
+      [f]
     ), {
-      activeMonth: c,
+      activeMonth: i,
       activeYear: J,
       weeks: k,
       months: K,
       canSetPrevMonth: Q,
       canSetNextMonth: X,
-      setMonthByDate: M,
+      setMonthByDate: y,
       setPrevMonth: v,
       setNextMonth: x,
-      setNextYear: C,
-      setPrevYear: u,
+      setNextYear: u,
+      setPrevYear: C,
       highlighted: Z,
       getDayProps: _,
       getMonthProps: $,
@@ -69,13 +69,13 @@ const me = ce, Pe = ae(
       selected: r,
       offDays: j,
       events: R,
-      onChange: f,
+      onChange: w,
       onMonthChange: B,
       onYearChange: E,
-      setView: w
+      setView: c
     }), N = a(
       (t) => {
-        w(e === t ? "days" : t);
+        c(e === t ? "days" : t);
       },
       [e]
     ), s = o(() => {
@@ -85,19 +85,20 @@ const me = ce, Pe = ae(
       () => !r || !le(r, s),
       [r, s]
     ), te = a(() => {
-      w("days"), M(D(s)), f?.(s.getTime());
-    }, [f, M, s]), oe = a(() => {
-      e === "days" ? v() : u();
-    }, [v, e, u]), ne = a(() => {
-      e === "days" ? x() : C();
-    }, [x, e, C]), re = a(() => {
+      c("days"), y(D(s)), w?.(s.getTime());
+    }, [w, y, s]), oe = a(() => {
+      e === "days" ? v() : C();
+    }, [v, e, C]), ne = a(() => {
+      e === "days" ? x() : u();
+    }, [x, e, u]), re = a(() => {
       N("months");
     }, [N]);
     return A(() => {
       W(!1);
     }, [e]), A(() => {
-      const t = n != null && D(new Date(n));
-      t && t.getTime() !== c.getTime() && M(t);
+      if (n == null) return;
+      const t = D(new Date(n));
+      t.getTime() !== i.getTime() && y(t), e !== "days" && c("days");
     }, [n]), /* @__PURE__ */ P(
       "div",
       {
@@ -107,10 +108,10 @@ const me = ce, Pe = ae(
         }),
         "data-test-id": O,
         children: [
-          /* @__PURE__ */ y(
+          /* @__PURE__ */ M(
             de,
             {
-              month: we(c, m, !1),
+              month: we(i, m, !1),
               onTodayClick: te,
               showToday: ee,
               year: J.getFullYear().toString(),
@@ -124,22 +125,22 @@ const me = ce, Pe = ae(
             }
           ),
           /* @__PURE__ */ P("div", { className: g.container, children: [
-            e === "days" && /* @__PURE__ */ y(
+            e === "days" && /* @__PURE__ */ M(
               ie,
               {
                 locale: m,
                 weeks: k,
-                activeMonth: c,
+                activeMonth: i,
                 selectedFrom: l,
                 selectedTo: V,
                 getDayProps: _,
                 highlighted: Z
               }
             ),
-            e === "months" && /* @__PURE__ */ y(
+            e === "months" && /* @__PURE__ */ M(
               he,
               {
-                selectedMonth: c,
+                selectedMonth: i,
                 selectedLocale: m,
                 shortNames: L,
                 months: K,

package/dist/confirm-popup/component.js

@@ -1,54 +1,73 @@
-import { jsx as n, jsxs as w } from "react/jsx-runtime";
-import { useCallback as C, useEffect as b } from "react";
-import { createPortal as P } from "react-dom";
-import { createRoot as g } from "react-dom/client";
-import { Button as y } from "../button/component.js";
-import { Flex as E } from "../flex/component.js";
-import { Typography as v } from "../typography/component.js";
-import f from "./index.module.css.js";
-const T = ({
+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: i,
-  confirmView: m = "primary",
-  mode: a = "confirm",
-  onConfirm: l,
+  cancelText: l,
+  confirmView: d = "primary",
+  mode: m = "confirm",
+  onConfirm: c,
   onCancel: o
 }) => {
-  const c = a === "alert", x = C(
-    (s) => {
-      s.target === s.currentTarget && o();
+  const s = m === "alert", C = b(
+    (a) => {
+      a.target === a.currentTarget && o();
     },
     [o]
   );
-  return b(() => {
-    const s = (p) => {
-      p.key === "Escape" && o(), p.key === "Enter" && (c ? o : l)();
+  return x(() => {
+    const a = (w) => {
+      w.key === "Escape" && o(), w.key === "Enter" && (s ? o : c)();
     };
-    return window.addEventListener("keydown", s), () => window.removeEventListener("keydown", s);
-  }, [o, l, c]), P(
-    /* @__PURE__ */ n(
+    return window.addEventListener("keydown", a), () => window.removeEventListener("keydown", a);
+  }, [o, c, s]), N(
+    /* @__PURE__ */ i(
       "div",
       {
-        className: f.backdrop,
-        onClick: x,
+        className: n.backdrop,
+        onClick: C,
         role: "dialog",
         "aria-modal": "true",
-        children: /* @__PURE__ */ w("div", { className: f.card, children: [
-          /* @__PURE__ */ n(v.Title, { tag: "h3", view: "xsmall", color: "primary", children: e }),
-          t && /* @__PURE__ */ n(v.Text, { color: "secondary", view: "primary-medium", children: t }),
-          /* @__PURE__ */ w(E, { gap: "xs", justify: "start", children: [
-            !c && /* @__PURE__ */ n(y, { size: "xs", view: "outlined", block: !0, onClick: o, children: i }),
-            /* @__PURE__ */ n(
-              y,
+        children: /* @__PURE__ */ p("div", { className: n.card, children: [
+          /* @__PURE__ */ p("div", { className: n.content, children: [
+            /* @__PURE__ */ i(
+              y.Title,
               {
-                size: "xs",
-                className: f[m],
+                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: c ? o : l,
-                children: c ? i : r
+                onClick: s ? o : c,
+                children: s ? l : r
               }
             )
           ] })
@@ -58,30 +77,30 @@ const T = ({
     document.body
   );
 };
-let d = null, u = null;
+let u = null, f = null;
 const h = () => {
-  d && (d.unmount(), d = null), u && (u.remove(), u = null);
+  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 i = g(r);
-  d = i, u = r;
-  let m = !1;
-  const a = (l) => () => {
-    m || (m = !0, h(), l(), t());
+  const l = P(r);
+  u = l, f = r;
+  let d = !1;
+  const m = (c) => () => {
+    d || (d = !0, h(), c(), t());
   };
-  i.render(
-    /* @__PURE__ */ n(
-      T,
+  l.render(
+    /* @__PURE__ */ i(
+      g,
       {
         ...e,
-        onConfirm: a(e.onConfirm),
-        onCancel: a(e.onCancel)
+        onConfirm: m(e.onConfirm),
+        onCancel: m(e.onCancel)
       }
     )
   );
-}, K = (e) => typeof window > "u" ? Promise.resolve(!1) : new Promise((t) => {
+}, R = (e) => typeof window > "u" ? Promise.resolve(!1) : new Promise((t) => {
   let r = !1;
   k(
     {
@@ -96,7 +115,7 @@ const h = () => {
     },
     () => t(r)
   );
-}), q = (e) => typeof window > "u" ? Promise.resolve() : new Promise((t) => {
+}), K = (e) => typeof window > "u" ? Promise.resolve() : new Promise((t) => {
   k(
     {
       title: e.title,
@@ -113,7 +132,7 @@ const h = () => {
   );
 });
 export {
-  T as ConfirmPopup,
-  q as showAlert,
-  K as showConfirm
+  g as ConfirmPopup,
+  K as showAlert,
+  R as showConfirm
 };

package/dist/confirm-popup/index.css

@@ -1 +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:12px;box-shadow:0 12px 40px #00000040;width:100%;max-width:360px;padding:20px;display:flex;flex-direction:column;gap:12px;animation:card-in_kaZX .18s ease-out}.actions_MbU4{display:flex;gap:8px;margin-top:4px}.negative_htRp{background:var(--color-bg-negative);border:1px solid var(--color-border-secondary)}.actions_MbU4>*{flex:1}@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)}}
+.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.module.css.js

@@ -1,17 +1,23 @@
 import * as __css from './index.css';
 export const __cssModule = __css;
-const a = "backdrop_bTWm", c = "card_QdKQ", n = "actions_MbU4", t = "negative_htRp", o = {
-  backdrop: a,
+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",
-  actions: n,
-  negative: t
+  content: n,
+  title: o,
+  description: a,
+  actions: i,
+  negative: e
 };
 export {
-  n as actions,
-  a as backdrop,
+  i as actions,
+  t as backdrop,
   c as card,
-  o as default,
-  t as negative
+  n as content,
+  s as default,
+  a as description,
+  e as negative,
+  o as title
 };

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