@alphakits/ui 2.4.6 → 2.4.7

package/dist/back-button/component.js

@@ -1,10 +1,7 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { ButtonArrow as s } from "../button-arrow/component.js";
-import n from "./index.module.css.js";
-const a = ({ onClick: o, t }) => /* @__PURE__ */ m("button", { className: n.component, type: "button", onClick: o, children: [
-  /* @__PURE__ */ r(s, { type: "back", size: "s" }),
-  t("common:back")
-] });
+import { jsx as o } from "react/jsx-runtime";
+import m from "@alphakits/icons/dist/BackS";
+import { Button as c } from "../button/component.js";
+const s = ({ onClick: t, t: r }) => /* @__PURE__ */ o(c, { view: "secondary", size: "xs", leftAddons: /* @__PURE__ */ o(m, {}), onClick: t, children: r("common:back") });
 export {
-  a as BackButton
+  s as BackButton
 };

package/dist/input/index.css

@@ -1 +1 @@
-:root{--text-primary-color: var(--color-text-primary);--text-secondary-color: var(--color-text-secondary);--text-tertiary-color: var(--color-text-tertiary);--border-radius: 4px;--focus-color: var(--color-border-link);--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif;--disabled-cursor: not-allowed;--arrow-transform: rotate(180deg)}:root{--input-clear-icon: url(https://alfabank.st/icons/glyph_cross-circle_m.svg);--input-color: var(--color-text-primary);--input-placeholder-color: color-mix(in srgb, var(--color-text-secondary) 35%, transparent);--input-focus-placeholder-color: color-mix(in srgb, var(--color-text-tertiary) 35%, transparent);--input-with-label-placeholder-color: color-mix(in srgb, var(--color-text-tertiary) 35%, transparent);--input-error-icon-display: flex;--input-success-icon-display: flex;--input-error-icon: url(https://alfabank.st/icons/icon_error_s_color.svg);--input-success-icon: url(https://alfabank.st/icons/icon_ok_s_color.svg);--input-disabled-color: var(--color-text-secondary);--input-read-only-color: var(--color-text-secondary)}.input_XkSq{font-size:16px!important;line-height:20px;font-weight:400;font-family:var(--font-family);position:relative;display:block;width:100%;height:100%;color:var(--input-color);background:none;border:none;margin:0;outline:none;text-overflow:ellipsis;box-sizing:border-box;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.input_XkSq::placeholder{transition:opacity .2s ease,color .2s ease;color:var(--input-placeholder-color)}.hasLabel_3lW-::placeholder{opacity:0;color:var(--input-with-label-placeholder-color)}.block_Lq9-{width:100%}.clearIcon_951a{width:24px;height:24px;background-repeat:no-repeat;background-position:50% 50%;display:block;background-image:var(--input-clear-icon);opacity:.3;transition:opacity .2s ease}.clearIcon_951a:hover{opacity:.6}.clearIcon_951a:active{opacity:1}.errorIcon_Z4ac{width:24px;height:24px;background-repeat:no-repeat;background-position:50% 50%;display:var(--input-error-icon-display);background-image:url(https://alfabank.st/icons/icon_error_s_color.svg)}.successIcon_yfoM{width:24px;height:24px;background-repeat:no-repeat;background-position:50% 50%;display:var(--input-success-icon-display);background-image:url(https://alfabank.st/icons/icon_ok_s_color.svg)}.input_XkSq:disabled{cursor:var(--disabled-cursor);color:var(--input-disabled-color)}.input_XkSq:focus.hasLabel_3lW-::placeholder{opacity:1}.input_XkSq:focus::placeholder{color:var(--input-focus-placeholder-color)}.focusVisible_3hin{outline:2px solid var(--focus-color);outline-offset:2px}.input_XkSq:read-only{cursor:var(--disabled-cursor);color:var(--input-read-only-color)}.input_XkSq:read-only:focus::placeholder{color:var(--input-placeholder-color)}.hasLabel_3lW-:read-only:focus::placeholder{opacity:0}.input_XkSq::-ms-clear{display:none;width:0;height:0}.input_XkSq:-webkit-autofill,.input_XkSq:-webkit-autofill:hover,.input_XkSq:-webkit-autofill:focus,.input_XkSq:-webkit-autofill:active{-webkit-transition:background-color 999999s ease-in-out 0s;transition:background-color 999999s ease-in-out 0s;-webkit-box-shadow:0 0 0 30px #ffffff00 inset!important}
+:root{--text-primary-color: var(--color-text-primary);--text-secondary-color: var(--color-text-secondary);--text-tertiary-color: var(--color-text-tertiary);--border-radius: 4px;--focus-color: var(--color-border-link);--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif;--disabled-cursor: not-allowed;--arrow-transform: rotate(180deg)}:root{--input-clear-icon: url(https://alfabank.st/icons/glyph_cross-circle_m.svg);--input-color: var(--color-text-primary);--input-placeholder-color: color-mix(in srgb, var(--color-text-secondary) 35%, transparent);--input-focus-placeholder-color: color-mix(in srgb, var(--color-text-tertiary, var(--color-text-secondary)) 35%, transparent);--input-with-label-placeholder-color: color-mix(in srgb, var(--color-text-tertiary, var(--color-text-secondary)) 35%, transparent);--input-error-icon-display: flex;--input-success-icon-display: flex;--input-error-icon: url(https://alfabank.st/icons/icon_error_s_color.svg);--input-success-icon: url(https://alfabank.st/icons/icon_ok_s_color.svg);--input-disabled-color: var(--color-text-secondary);--input-read-only-color: var(--color-text-secondary)}.input_XkSq{font-size:16px!important;line-height:20px;font-weight:400;font-family:var(--font-family);position:relative;display:block;width:100%;height:100%;color:var(--input-color);background:none;border:none;margin:0;outline:none;text-overflow:ellipsis;box-sizing:border-box;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.input_XkSq::placeholder{transition:opacity .2s ease,color .2s ease;color:var(--input-placeholder-color)}.hasLabel_3lW-::placeholder{opacity:0;color:var(--input-with-label-placeholder-color)}.block_Lq9-{width:100%}.clearIcon_951a{width:24px;height:24px;background-repeat:no-repeat;background-position:50% 50%;display:block;background-image:var(--input-clear-icon);opacity:.3;transition:opacity .2s ease}.clearIcon_951a:hover{opacity:.6}.clearIcon_951a:active{opacity:1}.errorIcon_Z4ac{width:24px;height:24px;background-repeat:no-repeat;background-position:50% 50%;display:var(--input-error-icon-display);background-image:url(https://alfabank.st/icons/icon_error_s_color.svg)}.successIcon_yfoM{width:24px;height:24px;background-repeat:no-repeat;background-position:50% 50%;display:var(--input-success-icon-display);background-image:url(https://alfabank.st/icons/icon_ok_s_color.svg)}.input_XkSq:disabled{cursor:var(--disabled-cursor);color:var(--input-disabled-color)}.input_XkSq:focus.hasLabel_3lW-::placeholder{opacity:1}.input_XkSq:focus::placeholder{color:var(--input-focus-placeholder-color)}.focusVisible_3hin{outline:2px solid var(--focus-color);outline-offset:2px}.input_XkSq:read-only{cursor:var(--disabled-cursor);color:var(--input-read-only-color)}.input_XkSq:read-only:focus::placeholder{color:var(--input-placeholder-color)}.hasLabel_3lW-:read-only:focus::placeholder{opacity:0}.input_XkSq::-ms-clear{display:none;width:0;height:0}.input_XkSq:-webkit-autofill,.input_XkSq:-webkit-autofill:hover,.input_XkSq:-webkit-autofill:focus,.input_XkSq:-webkit-autofill:active{-webkit-transition:background-color 999999s ease-in-out 0s;transition:background-color 999999s ease-in-out 0s;-webkit-box-shadow:0 0 0 30px #ffffff00 inset!important;-webkit-text-fill-color:var(--input-color)!important;caret-color:var(--input-color)}

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

@@ -1,77 +1,79 @@
-import { jsxs as w, jsx as i } from "react/jsx-runtime";
+import { jsxs as k, jsx as i } from "react/jsx-runtime";
+import y from "@alphakits/icons/dist/CloseM";
 import b from "classnames";
-import { useState as v, useLayoutEffect as x, useCallback as k, useEffect as E } from "react";
-import { ButtonArrow as d } from "../../../button-arrow/component.js";
-import { showConfirm as g } from "../../../confirm-popup/component.js";
-import s from "./index.module.css.js";
+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";
 const C = {
   s: 488,
   m: 888,
   full: "96%"
-}, h = 102, F = (e) => e === "full" ? `calc(-96vw - ${h}px)` : -C[e] - h, R = ({ modal: e, t: r, index: a, dirtyModals: m, closeModal: l, currentModalId: c }) => {
-  const f = F(e.props.size), [y, p] = v(f);
+}, 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);
   x(() => {
     const o = requestAnimationFrame(() => p(0));
     return () => cancelAnimationFrame(o);
   }, [e.id]);
-  const u = k(
-    (o) => m[o] ? g({
+  const u = w(
+    (o) => a[o] ? F({
       title: r("common:exitConfirm"),
       confirmText: r("common:Да"),
       cancelText: r("common:Нет"),
       confirmView: "negative"
     }) : Promise.resolve(!0),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [m, r]
-  ), t = k(
+    [a, r]
+  ), n = w(
     async (o) => {
-      const { id: n } = e;
-      await u(o || n) && (p(f), setTimeout(() => {
-        e.props.closeCallback && e.props.closeCallback(), l(o || n);
+      const { id: s } = e;
+      await u(o || s) && (p(m), setTimeout(() => {
+        e.props.closeCallback && e.props.closeCallback(), l(o || s);
       }, 250));
     },
-    [l, u, e, f]
+    [l, u, e, m]
   );
   return E(() => {
-    const o = (n) => {
-      (n.key === "27" || n.key === "Escape") && t(c);
+    const o = (s) => {
+      (s.key === "27" || s.key === "Escape") && n(c);
     };
     return e.id === c && window?.addEventListener("keydown", o), () => {
       window?.removeEventListener("keydown", o);
     };
-  }, [t, c, e.id]), /* @__PURE__ */ w(
+  }, [n, c, e.id]), /* @__PURE__ */ k(
     "div",
     {
-      className: s.container,
+      className: t.container,
       style: {
-        zIndex: 9999998 + a
+        zIndex: 9999998 + f
       },
       children: [
         /* @__PURE__ */ i(
           "div",
           {
-            className: b(s.right, s.content),
+            className: b(t.right, t.content),
             style: {
-              zIndex: 9999999 + a,
+              zIndex: 9999999 + f,
               width: C[e.props.size],
-              right: y
+              right: h
             },
-            children: /* @__PURE__ */ w("div", { className: s.inner, children: [
+            children: /* @__PURE__ */ k("div", { className: t.inner, children: [
               /* @__PURE__ */ i(
                 e.modal,
                 {
                   ...e.props,
                   modalId: e.id,
-                  close: () => t()
+                  close: () => n()
                 }
               ),
-              e.props.showCloser !== !1 && /* @__PURE__ */ i(
-                d,
+              /* @__PURE__ */ i(
+                g,
                 {
-                  className: s.button,
-                  size: "s",
-                  type: "close",
-                  onClick: () => t()
+                  className: t.button,
+                  view: "secondary",
+                  size: "xs",
+                  leftAddons: /* @__PURE__ */ i(y, {}),
+                  onClick: () => n()
                 }
               )
             ] })
@@ -80,10 +82,10 @@ const C = {
         /* @__PURE__ */ i(
           "button",
           {
-            className: s.bg,
+            className: t.bg,
             "aria-label": "close_backdrop",
             type: "button",
-            onClick: () => t()
+            onClick: () => n()
           }
         )
       ]
@@ -91,5 +93,5 @@ const C = {
   );
 };
 export {
-  R as Modal
+  j as Modal
 };

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, showCloser?: boolean) => (props?: OwnModalProps<T>, closeCallback?: () => void) => void;
+    openModal: <T>(modal: React.FC<T>, size?: ModalSize) => (props?: OwnModalProps<T>, closeCallback?: () => void) => void;
     modals: ModalObject[];
     setModalDirty: (id: string, isDirty: boolean) => void;
     currentModalId: string;

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

@@ -1,41 +1,40 @@
-import d, { useRef as S, useCallback as s, 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 [r, l] = d.useState([]), [f, a] = d.useState(""), [p, c] = d.useState({}), u = S(n);
+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);
   u.current = n;
-  const i = s((t) => {
-    c((e) => v(e, t)), l((e) => e.filter((o) => o.id !== t));
-  }, []), M = s((t) => {
+  const i = r((t) => {
+    c((e) => h(e, t)), l((e) => e.filter((o) => o.id !== t));
+  }, []), M = r((t) => {
     l((e) => [...e, t]), a(t.id);
-  }, []), m = s((t, e) => {
+  }, []), m = r((t, e) => {
     t && c((o) => o[t] === e ? o : {
       ...o,
       [t]: e
     });
   }, []);
-  return b(() => {
-    const t = [...r].pop()?.id;
-    a(t || ""), document.body.style.overflow = r.length ? "hidden" : "unset";
-  }, [r]), {
-    openModal: s(
-      (t, e = "s", o = !0) => (y, I) => {
-        const R = h();
+  return S(() => {
+    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();
         M({
-          id: R,
+          id: I,
           modal: t,
           props: {
             size: e,
-            showCloser: o,
-            closeCallback: I,
+            closeCallback: y,
             t: u.current,
-            ...y
+            ...o
           }
         });
       },
       [M]
     ),
-    modals: r,
+    modals: s,
     setModalDirty: m,
     currentModalId: f,
     dirtyModals: p,
@@ -43,5 +42,5 @@ const x = (n) => {
   };
 };
 export {
-  x as useModal
+  w as useModal
 };

package/dist/modal/types.d.ts

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

package/dist/sidepanel/component.d.ts

@@ -16,7 +16,6 @@ export type SidepanelProps = {
     bottomAddons?: React.ReactNode;
     dataTestId?: string;
     noCloser?: boolean;
-    showCloser?: boolean;
     noStickyFooter?: boolean;
     noStickyHeader?: boolean;
     children?: React.ReactNode;

package/dist/sidepanel/component.js

@@ -1,48 +1,46 @@
-import { jsx as e, jsxs as v } from "react/jsx-runtime";
-import N from "classnames";
-import x from "react";
-import { FlexColumns as S } from "../flex-columns/component.js";
-import { SidepanelHeader as g } from "../sidepanel-header/component.js";
-import { Skeleton as j } from "../skeleton/component.js";
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import v from "classnames";
+import N from "react";
+import { FlexColumns as x } from "../flex-columns/component.js";
+import { SidepanelHeader as S } from "../sidepanel-header/component.js";
+import { Skeleton as g } from "../skeleton/component.js";
 import r from "./index.module.css.js";
-const R = ({
+const H = ({
   dataTestId: o,
   title: m,
   loading: i,
   headerRightAddons: t,
   subtitle: a,
   noCloser: l,
-  showCloser: n,
-  headerBottomAddons: c,
-  noStickyFooter: d,
-  noStickyHeader: p,
+  headerBottomAddons: n,
+  noStickyFooter: c,
+  noStickyHeader: d,
   bottomAddons: s,
-  children: f,
-  ...h
-}) => /* @__PURE__ */ e(x.Fragment, { children: i ? /* @__PURE__ */ e(S, { className: r.loader, columns: 1, gr: 20, children: ["s1", "s2", "s3", "s4", "s5", "s6", "s7"].map((u) => /* @__PURE__ */ e(j, { animate: !0, visible: !0, className: r.input }, u)) }) : /* @__PURE__ */ v("div", { children: [
+  children: p,
+  ...f
+}) => /* @__PURE__ */ e(N.Fragment, { children: i ? /* @__PURE__ */ e(x, { className: r.loader, columns: 1, gr: 20, children: ["s1", "s2", "s3", "s4", "s5", "s6", "s7"].map((h) => /* @__PURE__ */ e(g, { animate: !0, visible: !0, className: r.input }, h)) }) : /* @__PURE__ */ u("div", { children: [
   /* @__PURE__ */ e(
-    g,
+    S,
     {
       title: m,
-      className: p ? void 0 : r.header,
+      className: d ? void 0 : r.header,
       subtitle: a,
       noCloser: l,
-      showCloser: n,
       dataTestId: o,
       rightAddons: t,
-      bottomAddons: c,
-      ...h
+      bottomAddons: n,
+      ...f
     }
   ),
-  /* @__PURE__ */ e("div", { className: r.content, children: f }),
+  /* @__PURE__ */ e("div", { className: r.content, children: p }),
   s && /* @__PURE__ */ e(
     "div",
     {
-      className: N(r.footer, { [r.noSticky]: d }),
+      className: v(r.footer, { [r.noSticky]: c }),
       children: s
     }
   )
 ] }) });
 export {
-  R as Sidepanel
+  H as Sidepanel
 };

package/dist/sidepanel-header/component.d.ts

@@ -13,7 +13,6 @@ export type SidepanelHeaderProps = {
     rightAddons?: React.ReactNode;
     bottomAddons?: React.ReactNode;
     noCloser?: boolean;
-    showCloser?: boolean;
     dataTestId?: string;
     subtitle?: string;
 } & Back;

package/dist/sidepanel-header/component.js

@@ -1,13 +1,13 @@
 import { jsxs as a, jsx as r } from "react/jsx-runtime";
 import p from "classnames";
-import { BackButton as g } from "../back-button/component.js";
-import { FlexColumns as w } from "../flex-columns/component.js";
+import { BackButton as f } from "../back-button/component.js";
+import { FlexColumns as g } from "../flex-columns/component.js";
 import { Typography as t } from "../typography/component.js";
 import e from "./index.module.css.js";
-const h = ({ title: m, subtitle: l }) => /* @__PURE__ */ a(w, { columns: 1, gr: 4, className: e.title, children: [
+const h = ({ title: m, subtitle: l }) => /* @__PURE__ */ a(g, { columns: 1, gr: 4, className: e.title, children: [
   /* @__PURE__ */ r(t.Title, { color: "primary", tag: "div", view: "small", weight: "bold", children: m }),
   l && /* @__PURE__ */ r(t.Text, { view: "title", weight: "regular", color: "secondary", children: l })
-] }), u = ({
+] }), j = ({
   className: m,
   dataTestId: l,
   title: o,
@@ -16,17 +16,16 @@ const h = ({ title: m, subtitle: l }) => /* @__PURE__ */ a(w, { columns: 1, gr:
   subtitle: c,
   t: d,
   bottomAddons: n,
-  noCloser: f,
-  showCloser: v
+  noCloser: v
 }) => /* @__PURE__ */ a("div", { "data-test-id": l, className: p(e.wrapper, m), children: [
   (i || o || s) && /* @__PURE__ */ a("div", { className: e.heading, children: [
-    i && d && /* @__PURE__ */ r(g, { onClick: i, t: d }),
+    i && d && /* @__PURE__ */ r(f, { onClick: i, t: d }),
     !i && o && /* @__PURE__ */ r(h, { title: o, subtitle: c }),
     s && /* @__PURE__ */ r(
       "div",
       {
         className: p(e.rightAddons, {
-          [e.noCloser]: !!f || v === !1
+          [e.noCloser]: !!v
         }),
         children: s
       }
@@ -36,5 +35,5 @@ const h = ({ title: m, subtitle: l }) => /* @__PURE__ */ a(w, { columns: 1, gr:
   !!n && /* @__PURE__ */ r("div", { className: e.bottomAddons, children: n })
 ] });
 export {
-  u as SidepanelHeader
+  j as SidepanelHeader
 };

package/package.json

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

package/dist/back-button/index.css

@@ -1 +0,0 @@
-.component_jvHy{font-size:16px;line-height:24px;font-weight:400;font-family:var(--font-family);display:flex;gap:8px;align-items:center;justify-content:start;background:transparent;outline:none;border:0;cursor:pointer;padding:0;color:var(--color-text-primary)}.component_jvHy:hover{opacity:.8}.component_jvHy:active{opacity:.6}

package/dist/back-button/index.module.css.js

@@ -1,9 +0,0 @@
-import * as __css from './index.css';
-export const __cssModule = __css;
-const o = "component_jvHy", n = {
-  component: o
-};
-export {
-  o as component,
-  n as default
-};