@alphakits/ui 2.3.1 → 2.4.1

package/dist/link/component.d.ts

@@ -10,7 +10,7 @@ export type LinkProps = NativeProps & {
     className?: string;
     dataTestId?: string;
     onClick?: NativeProps['onClick'];
-    children: ReactNode;
+    children?: ReactNode;
 };
 export declare const Link: React.ForwardRefExoticComponent<NativeProps & {
     href?: string | undefined;
@@ -22,6 +22,6 @@ export declare const Link: React.ForwardRefExoticComponent<NativeProps & {
     className?: string | undefined;
     dataTestId?: string | undefined;
     onClick?: NativeProps['onClick'];
-    children: ReactNode;
+    children?: ReactNode;
 } & React.RefAttributes<HTMLAnchorElement>>;
 export {};

package/dist/link/component.js

@@ -1,7 +1,7 @@
 import { jsx as a, jsxs as N } from "react/jsx-runtime";
+import n from "classnames";
 import R, { forwardRef as k, useRef as b } from "react";
 import j from "react-merge-refs";
-import n from "classnames";
 import { useFocus as w } from "../hooks/useFocus/index.js";
 import e from "./index.module.css.js";
 const g = k(

package/dist/loader/component.js

@@ -1,13 +1,14 @@
-import { jsxs as o, jsx as c } from "react/jsx-runtime";
+import { jsxs as i, jsx as c } from "react/jsx-runtime";
 import t from "classnames";
-import i from "./index.module.css.js";
-const l = ({ className: r, dataTestId: e }) => /* @__PURE__ */ o(
+import o from "./index.module.css.js";
+const d = ({ className: r, dataTestId: e }) => /* @__PURE__ */ i(
   "svg",
   {
     height: "24",
     width: "24",
     viewBox: "0 0 24 24",
-    className: t(i.component, r),
+    "aria-hidden": "true",
+    className: t(o.component, r),
     "data-test-id": e,
     children: [
       /* @__PURE__ */ c("circle", { cx: "4", cy: "12", r: "2" }),
@@ -17,5 +18,5 @@ const l = ({ className: r, dataTestId: e }) => /* @__PURE__ */ o(
   }
 );
 export {
-  l as Loader
+  d as Loader
 };

package/dist/masked-input/component.js

@@ -1,21 +1,12 @@
 import { jsx as g } from "react/jsx-runtime";
-import M, { useRef as l, useState as m, useCallback as c, useEffect as i } from "react";
-import w from "react-merge-refs";
-import P from "classnames";
+import M from "classnames";
+import w, { useRef as l, useState as m, useCallback as c, useEffect as i } from "react";
+import P from "react-merge-refs";
 import { createTextMaskInputElement as v } from "text-mask-core";
 import { Input as A } from "../input/component.js";
 import L from "./index.module.css.js";
-const T = " ", q = M.forwardRef(
-  ({
-    mask: p,
-    value: n,
-    defaultValue: s,
-    className: d,
-    onBeforeDisplay: f,
-    onChange: u,
-    onClear: o,
-    ...x
-  }, C) => {
+const T = " ", q = w.forwardRef(
+  ({ mask: p, value: n, defaultValue: s, className: d, onBeforeDisplay: f, onChange: u, onClear: o, ...x }, C) => {
     const r = l(null), a = l(null), [R, h] = m(n || s || ""), [k, E] = m(!0), t = c((e = "") => {
       a.current && r.current && (a.current.update(e), h(r.current.value));
     }, []), H = c(
@@ -52,11 +43,11 @@ const T = " ", q = M.forwardRef(
       A,
       {
         ...x,
-        className: P(d, { [L.textHidden]: k }),
+        className: M(d, { [L.textHidden]: k }),
         value: R,
         onChange: H,
         onClear: I,
-        ref: w([C, r])
+        ref: P([C, r])
       }
     );
   }

package/dist/menu/component.js

@@ -1,11 +1,11 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import s from "classnames";
-import { useMenu as S } from "./hooks/use-menu.js";
-import { ContentHeader as j } from "./components/content-header/index.js";
-import { MenuAvatar as L } from "./components/menu-avatar/index.js";
-import { MenuBackButton as T } from "./components/menu-back-button/index.js";
-import { MenuButtonsList as W } from "./components/menu-buttons-list/index.js";
-import { UserButton as $ } from "./components/user-button/index.js";
+import { ContentHeader as S } from "./components/content-header/index.js";
+import { MenuAvatar as j } from "./components/menu-avatar/index.js";
+import { MenuBackButton as L } from "./components/menu-back-button/index.js";
+import { MenuButtonsList as T } from "./components/menu-buttons-list/index.js";
+import { UserButton as W } from "./components/user-button/index.js";
+import { useMenu as $ } from "./hooks/use-menu.js";
 import t from "./index.module.css.js";
 const E = ({
   pathname: i,
@@ -22,12 +22,7 @@ const E = ({
   navigate: v,
   t: c
 }) => {
-  const {
-    staticMenu: n,
-    setStaticMenu: B,
-    showMenu: a,
-    ref: C
-  } = S(), r = n || a, l = `/${i.split("/").slice(-1)[0]}`, N = () => v("/app/calendar"), y = s(t.left_menu, {
+  const { staticMenu: n, setStaticMenu: B, showMenu: a, ref: C } = $(), r = n || a, l = `/${i.split("/").slice(-1)[0]}`, N = () => v("/app/calendar"), y = s(t.left_menu, {
     [t.menu_static]: n,
     [t.hidden_menu_opened]: a
   }), x = s(t.content_wrapper, {
@@ -37,7 +32,7 @@ const E = ({
   return /* @__PURE__ */ o("div", { className: s(t.layout_wrapper), children: [
     /* @__PURE__ */ o("div", { ref: C, className: y, children: [
       /* @__PURE__ */ e(
-        L,
+        j,
         {
           title: _,
           showTitle: r,
@@ -45,9 +40,9 @@ const E = ({
           onClick: k
         }
       ),
-      u && /* @__PURE__ */ e(T, { showTitle: r, onClick: N }),
+      u && /* @__PURE__ */ e(L, { showTitle: r, onClick: N }),
       /* @__PURE__ */ e(
-        W,
+        T,
         {
           routes: p,
           showLabels: r,
@@ -60,13 +55,13 @@ const E = ({
     /* @__PURE__ */ o("div", { className: x, children: [
       /* @__PURE__ */ o("div", { className: t.content_header, children: [
         /* @__PURE__ */ e(
-          j,
+          S,
           {
             onClick: () => B(!n),
             title: c(`menu.${l}`)
           }
         ),
-        /* @__PURE__ */ e($, { photo: f, fullName: d, options: h })
+        /* @__PURE__ */ e(W, { photo: f, fullName: d, options: h })
       ] }),
       m
     ] })

package/dist/menu/components/content-header/index.js

@@ -4,15 +4,7 @@ import { IconButton as m } from "../../../icon-button/component.js";
 import { Typography as n } from "../../../typography/component.js";
 import p from "./index.module.css.js";
 const f = ({ onClick: r, title: t }) => /* @__PURE__ */ e("div", { children: [
-  /* @__PURE__ */ o(
-    m,
-    {
-      size: "m",
-      icon: i,
-      onClick: r,
-      className: p.open_button
-    }
-  ),
+  /* @__PURE__ */ o(m, { size: "m", icon: i, onClick: r, className: p.open_button }),
   /* @__PURE__ */ o(n.Title, { color: "primary", tag: "div", view: "xsmall", weight: "regular", children: t })
 ] });
 export {

package/dist/menu/components/menu-avatar/index.js

@@ -3,12 +3,7 @@ import n from "classnames";
 import { Avatar as c } from "../../../avatar/component.js";
 import { Typography as d } from "../../../typography/component.js";
 import r from "./index.module.css.js";
-const u = ({
-  showTitle: o,
-  title: e,
-  image: i,
-  onClick: t
-}) => {
+const u = ({ showTitle: o, title: e, image: i, onClick: t }) => {
   const a = () => {
     t && t();
   };

package/dist/menu/components/menu-button/index.js

@@ -20,16 +20,7 @@ const f = ({
     to: s,
     children: [
       o && /* @__PURE__ */ t("div", { className: e.leftAddons, children: o }),
-      /* @__PURE__ */ t(
-        d.Text,
-        {
-          view: "title",
-          weight: "medium",
-          color: "secondary",
-          className: e.text,
-          children: m
-        }
-      ),
+      /* @__PURE__ */ t(d.Text, { view: "title", weight: "medium", color: "secondary", className: e.text, children: m }),
       i && /* @__PURE__ */ t("div", { className: e.rightAddons, children: i })
     ]
   }

package/dist/menu/components/menu-buttons-list/index.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { MenuElement } from '../..';
 import { TFunction } from '../../../modal';
+import { MenuElement } from '../..';
 type Props = {
     routes: MenuElement[];
     showLabels?: boolean;

package/dist/menu/components/menu-buttons-list/index.js

@@ -1,13 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { MenuButton as p } from "../menu-button/index.js";
 import a from "./index.module.css.js";
-const d = ({
-  routes: e,
-  showLabels: o,
-  currentPath: s,
-  t: l,
-  Link: m
-}) => /* @__PURE__ */ i("div", { className: a.component, children: !!e.length && e.map((t) => {
+const d = ({ routes: e, showLabels: o, currentPath: s, t: l, Link: m }) => /* @__PURE__ */ i("div", { className: a.component, children: !!e.length && e.map((t) => {
   const n = `/${t.path.split("/").slice(-1)[0]}`;
   return /* @__PURE__ */ i(
     p,

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

@@ -1,23 +1,23 @@
-import { useState as i, useRef as m, useCallback as a, useEffect as l } from "react";
+import { useState as c, useRef as i, useCallback as m, useEffect as l } from "react";
 const d = () => {
-  const [e, f] = i(!0), [n, o] = i(!1), t = m(void 0), s = m(null), c = a(() => {
-    e || o(!0);
-  }, [e]), u = a(() => {
-    t.current && clearTimeout(t.current), t.current = setTimeout(c, 600);
-  }, [c]);
+  const [e, a] = c(!0), [f, n] = c(!1), t = i(void 0), o = i(null), s = m(() => {
+    e || n(!0);
+  }, [e]), u = m(() => {
+    t.current && clearTimeout(t.current), t.current = setTimeout(s, 600);
+  }, [s]);
   return l(() => {
-    const r = s.current;
+    const r = o.current;
     if (!(e || !r))
       return r.addEventListener("mousemove", u), r.addEventListener("mouseleave", () => {
-        clearTimeout(t.current), o(!1);
+        clearTimeout(t.current), n(!1);
       }), () => {
         r.removeEventListener("mousemove", u), clearTimeout(t.current);
       };
-  }, [e, n, u]), {
-    ref: s,
+  }, [e, u]), {
+    ref: o,
     staticMenu: e,
-    showMenu: n,
-    setStaticMenu: f
+    showMenu: f,
+    setStaticMenu: a
   };
 };
 export {

package/dist/message/component.js

@@ -5,18 +5,18 @@ import { Flex as j } from "../flex/component.js";
 import { Image as p } from "../image/component.js";
 import { ImageGallery as I } from "../image-gallery/component.js";
 import { Padding as z } from "../padding/component.js";
-import { Typography as t } from "../typography/component.js";
+import { Typography as l } from "../typography/component.js";
 import i from "./index.module.css.js";
 const P = ({
   className: h,
   dataTestId: g,
   title: m,
-  date: o,
-  rightAddons: s,
+  date: s,
+  rightAddons: o,
   answer: d,
   text: f,
   image: y,
-  photos: l = [],
+  photos: a = [],
   withImage: v = !0
 }) => {
   const [w, c] = n(!1), [x, u] = n(0);
@@ -24,30 +24,49 @@ const P = ({
     /* @__PURE__ */ r("div", { className: i.topRow, children: [
       /* @__PURE__ */ r("div", { className: i.leftSide, children: [
         v && /* @__PURE__ */ e(p, { src: y, size: "s", text: m, view: "circle" }),
-        /* @__PURE__ */ e(t.Text, { color: "primary", className: i.title, view: "title", weight: "bold", children: m }),
-        o && /* @__PURE__ */ e(t.Text, { view: "title", color: "secondary", weight: "regular", children: o })
+        /* @__PURE__ */ e(
+          l.Text,
+          {
+            color: "primary",
+            className: i.title,
+            view: "title",
+            weight: "bold",
+            children: m
+          }
+        ),
+        s && /* @__PURE__ */ e(l.Text, { view: "title", color: "secondary", weight: "regular", children: s })
       ] }),
-      s && /* @__PURE__ */ e("div", { className: i.rightAddons, children: s })
+      o && /* @__PURE__ */ e("div", { className: i.rightAddons, children: o })
     ] }),
     /* @__PURE__ */ r("div", { className: i.text, children: [
-      /* @__PURE__ */ e(t.Text, { view: "primary-medium", color: "primary", weight: "medium", children: f }),
-      !!d && /* @__PURE__ */ e(t.Text, { className: i.answer, view: "primary-small", color: "secondary", weight: "medium", children: d }),
-      !!l.length && /* @__PURE__ */ r(S.Fragment, { children: [
+      /* @__PURE__ */ e(l.Text, { view: "primary-medium", color: "primary", weight: "medium", children: f }),
+      !!d && /* @__PURE__ */ e(
+        l.Text,
+        {
+          className: i.answer,
+          view: "primary-small",
+          color: "secondary",
+          weight: "medium",
+          children: d
+        }
+      ),
+      !!a.length && /* @__PURE__ */ r(S.Fragment, { children: [
         /* @__PURE__ */ e(z, { padding: "8px 0" }),
-        /* @__PURE__ */ e(j, { justify: "start", gap: "md", children: l.map((a, N) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e(j, { justify: "start", gap: "md", children: a.map((t, N) => /* @__PURE__ */ e(
           T,
           {
             view: "ghost",
             onClick: () => {
               u(N), c(!0);
             },
-            children: /* @__PURE__ */ e(p, { src: a, size: "xl", view: "default" })
-          }
+            children: /* @__PURE__ */ e(p, { src: t, size: "xl", view: "default" })
+          },
+          t
         )) }),
         /* @__PURE__ */ e(
           I,
           {
-            photos: l.map((a) => ({ src: a })),
+            photos: a.map((t) => ({ src: t })),
             initialSlide: x || 0,
             open: w,
             onClose: () => c(!1)

package/dist/modal/components/modals/modal.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { ModalObject, TFunction } from '../../types';
 import { ModalsProps } from '.';
 type ModalProps = {
@@ -6,5 +5,5 @@ type ModalProps = {
     index: number;
     t: TFunction;
 } & Pick<ModalsProps, 'dirtyModals' | 'closeModal' | 'currentModalId'>;
-export declare const Modal: ({ modal, t, index, dirtyModals, closeModal, currentModalId, }: ModalProps) => React.JSX.Element;
+export declare const Modal: ({ modal, t, index, dirtyModals, closeModal, currentModalId }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,36 +1,33 @@
-import { jsx as n, jsxs as u } from "react/jsx-runtime";
-import y, { useState as C, useLayoutEffect as d, useCallback as h, useEffect as z } from "react";
-import v from "classnames";
-import { ButtonArrow as x } from "../../../button-arrow/component.js";
+import { jsxs as k, jsx as n } from "react/jsx-runtime";
+import y from "classnames";
+import { useState as C, useLayoutEffect as d, useCallback as b, useEffect as z } from "react";
+import { ButtonArrow as v } from "../../../button-arrow/component.js";
 import o from "./index.module.css.js";
-const k = {
+const h = {
   s: 488,
   m: 888,
   full: "96%"
-}, F = ({
-  modal: e,
-  t: b,
-  index: l,
-  dirtyModals: p,
-  closeModal: a,
-  currentModalId: r
-}) => {
-  const c = -k[e.props.size] - 102, [w, f] = C(c);
+}, j = ({ modal: e, t: l, index: p, dirtyModals: a, closeModal: f, currentModalId: r }) => {
+  const c = -h[e.props.size] - 102, [w, m] = C(c);
   d(() => {
-    setTimeout(() => f(0), 0);
+    setTimeout(() => m(0), 0);
   }, []);
-  const m = h(
+  const u = b(
     (s) => (
       // eslint-disable-next-line no-restricted-globals
-      !p[s] || confirm(b("common:exitConfirm"))
+      !a[s] || confirm(l("common:exitConfirm"))
     ),
-    [p]
-  ), t = h((s) => {
-    const { id: i } = e;
-    m(s || i) && (f(c), setTimeout(() => {
-      e.props.closeCallback && e.props.closeCallback(), a(s || i);
-    }, 250));
-  }, [a, m, e, c]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [a, l]
+  ), t = b(
+    (s) => {
+      const { id: i } = e;
+      u(s || i) && (m(c), setTimeout(() => {
+        e.props.closeCallback && e.props.closeCallback(), f(s || i);
+      }, 250));
+    },
+    [f, u, e, c]
+  );
   return z(() => {
     const s = (i) => {
       (i.key === "27" || i.key === "Escape") && t(r);
@@ -38,27 +35,27 @@ const k = {
     return e.id === r && window?.addEventListener("keydown", s), () => {
       window?.removeEventListener("keydown", s);
     };
-  }, [t, r, e.id]), /* @__PURE__ */ n(y.Fragment, { children: /* @__PURE__ */ u(
+  }, [t, r, e.id]), /* @__PURE__ */ k(
     "div",
     {
       className: o.container,
       style: {
-        zIndex: 9999998 + l
+        zIndex: 9999998 + p
       },
       children: [
         /* @__PURE__ */ n(
           "div",
           {
-            className: v(o.right, o.content),
+            className: y(o.right, o.content),
             style: {
-              zIndex: 9999999 + l,
-              width: k[e.props.size],
+              zIndex: 9999999 + p,
+              width: h[e.props.size],
               right: w
             },
-            children: /* @__PURE__ */ u("div", { className: o.inner, children: [
+            children: /* @__PURE__ */ k("div", { className: o.inner, children: [
               /* @__PURE__ */ n(e.modal, { ...e.props, close: () => t() }),
               e.props.showCloser !== !1 && /* @__PURE__ */ n(
-                x,
+                v,
                 {
                   className: o.button,
                   size: "s",
@@ -80,8 +77,8 @@ const k = {
         )
       ]
     }
-  ) });
+  );
 };
 export {
-  F as Modal
+  j as Modal
 };

package/dist/modal/context.js

@@ -11,14 +11,7 @@ const u = M.createContext({
   setModalDirty: () => {
   }
 }), h = ({ children: l, t: i, portal: o }) => {
-  const {
-    modals: r,
-    openModal: t,
-    setModalDirty: d,
-    currentModalId: e,
-    dirtyModals: n,
-    closeModal: s
-  } = f(i);
+  const { modals: r, openModal: t, setModalDirty: d, currentModalId: e, dirtyModals: n, closeModal: s } = f(i);
   return /* @__PURE__ */ m(
     u.Provider,
     {
@@ -29,7 +22,17 @@ const u = M.createContext({
         currentModalId: e
       },
       children: [
-        /* @__PURE__ */ a(c, { getPortalContainer: o ? () => o : void 0, children: /* @__PURE__ */ a(p, { modals: r, dirtyModals: n, closeModal: s, openModal: t, setModalDirty: d, currentModalId: e }) }),
+        /* @__PURE__ */ a(c, { getPortalContainer: o ? () => o : void 0, children: /* @__PURE__ */ a(
+          p,
+          {
+            modals: r,
+            dirtyModals: n,
+            closeModal: s,
+            openModal: t,
+            setModalDirty: d,
+            currentModalId: e
+          }
+        ) }),
         l
       ]
     }

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 extends unknown>(modal: React.FC<T>, size?: ModalSize, showCloser?: boolean) => (props?: OwnModalProps<T>, closeCallback?: () => void) => void;
+    openModal: <T>(modal: React.FC<T>, size?: ModalSize, showCloser?: 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,42 +1,42 @@
-import n, { useEffect as I } from "react";
-import { v4 as S } from "uuid";
+import n, { useCallback as I, useEffect as S } from "react";
+import { v4 as b } from "uuid";
 import { deletePropertyById as g } from "../utils/delete-property-by-id.js";
 const x = (c) => {
-  const [s, l] = n.useState([]), [u, M] = n.useState(""), [i, a] = n.useState({}), p = (t) => {
+  const [r, l] = n.useState([]), [u, M] = n.useState(""), [p, a] = n.useState({}), f = (t) => {
     a((o) => g(o, t)), l((o) => o.filter((e) => e.id !== t));
-  }, m = (t) => {
+  }, i = (t) => {
     l((o) => [...o, t]);
-  }, f = (t, o) => {
-    a((e) => ({
+  }, m = I((t, o) => {
+    t && a((e) => e[t] === o ? e : {
       ...e,
       [t]: o
-    }));
-  };
-  return I(() => {
-    const t = [...s].pop()?.id;
-    M(t || ""), document.body.style.overflow = s.length ? "hidden" : "unset";
-  }, [s]), {
+    });
+  }, []);
+  return S(() => {
+    const t = [...r].pop()?.id;
+    M(t || ""), document.body.style.overflow = r.length ? "hidden" : "unset";
+  }, [r]), {
     openModal: (t, o = "s", e = !0) => {
-      const y = (d, r) => ({
-        id: S(),
+      const y = (s, d) => ({
+        id: b(),
         modal: t,
         props: {
           size: o,
           showCloser: e,
-          closeCallback: r,
+          closeCallback: d,
           t: c,
-          ...d
+          ...s
         }
       });
-      return (d, r) => {
-        m(y(d, r));
+      return (s, d) => {
+        i(y(s, d));
       };
     },
-    modals: s,
-    setModalDirty: f,
+    modals: r,
+    setModalDirty: m,
     currentModalId: u,
-    dirtyModals: i,
-    closeModal: p
+    dirtyModals: p,
+    closeModal: f
   };
 };
 export {

package/dist/mq/component.js

@@ -2,12 +2,7 @@ import { jsx as n } from "react/jsx-runtime";
 import { useEffect as m, Fragment as p } from "react";
 import { useMatchMedia as u } from "./use-match-media.js";
 import { isPointerEventsSupported as f, isTouchSupported as d } from "./utils.js";
-const e = typeof window < "u", S = e && (f() || d()), R = ({
-  children: i,
-  query: s = "",
-  touch: r,
-  onMatchChange: t
-}) => {
+const e = typeof window < "u", S = e && (f() || d()), R = ({ children: i, query: s = "", touch: r, onMatchChange: t }) => {
   const [c] = u(s), o = (r === void 0 ? !0 : r === S) && (!s || c);
   return m(() => {
     t && t(o);