skillgrid 0.0.85 → 0.0.87

package/dist/components/Snackbar/Provider/SnackbarProvider.type.d.ts

@@ -3,9 +3,10 @@ import { SnackbarProps } from '../Snackbar.type';
  * Параметры, которые можно передать в метод `show()` для отображения Snackbar.
  * Наследует все пропсы Snackbar, кроме управляемых провайдером (`open`, `onClose`).
  */
-export type ShowSnackbarProps = Omit<SnackbarProps, 'open' | 'onClose' | 'isStack' | 'forceClose'> & {
+export type ShowSnackbarProps = Omit<SnackbarProps, 'open' | 'onClose' | 'isStack' | 'forceClose' | 'stretchToStack'> & {
     /**
-     * Контейнер, в котором Snackbar будет показан (по умолчанию — `document.body`).
+     * Контейнер, в котором Snackbar будет показан
+     * (по умолчанию — document.body).
      */
     parent?: HTMLElement;
 };
@@ -20,8 +21,12 @@ export interface InternalSnackbar extends ShowSnackbarProps {
     open: boolean;
     /** Флаг завершения анимации (используется при скрытии). */
     exiting?: boolean;
-    /** Флаг, указывающий, что Snackbar когда-либо находился в стеке */
-    wasInStack?: boolean;
+}
+export type StackWidthMode = NonNullable<InternalSnackbar['mode']>;
+export interface SnackbarGroupProps {
+    snacks: InternalSnackbar[];
+    dataTestId: string;
+    onClose: (id: string) => void;
 }
 /**
  * Интерфейс контекста Snackbar-провайдера.

package/dist/components/Snackbar/Snackbar.js

@@ -1,157 +1,195 @@
 import { jsxs as w, jsx as n } from "react/jsx-runtime";
-import { forwardRef as W, useRef as i, useState as x, useEffect as a } from "react";
+import { forwardRef as Z, useRef as s, useState as x, useEffect as a } from "react";
+import S from "classnames";
 import e from "./Snackbar.module.css.js";
-import b from "classnames";
-import { useSwipe as Z } from "./lib/useSwipe.js";
-import { Typography as _ } from "../Typography/Typography.js";
+import { useSwipe as _ } from "./lib/useSwipe.js";
+import { Typography as $ } from "../Typography/Typography.js";
 import { Button as E } from "../Button/Button.js";
-import { CloseIcon as $ } from "./assets/close.js";
-import { stackDurationMap as tt, durationMap as et, animationMap as nt } from "./lib/constants.js";
-import { Loader as ot } from "../Loader/Loader.js";
+import { CloseIcon as tt } from "./assets/close.js";
+import { stackDurationMap as et, durationMap as nt, animationMap as ot } from "./lib/constants.js";
+import { Loader as st } from "../Loader/Loader.js";
 import { InfoIcon as it } from "./assets/info.js";
-import { ErrorIcon as st } from "./assets/error.js";
-import { SuccessIcon as rt } from "./assets/success.js";
-const xt = W((M, u) => {
-  const {
-    open: o,
-    variant: d = "info",
-    mode: H = "fix",
-    onClose: p,
-    autoHideDuration: S = 6e3,
-    disableAutoHide: h = !1,
-    showButtonClose: A = !0,
-    showIcon: B = !0,
-    content: v,
-    classNameSnackbarRoot: D,
-    icon: N,
-    isStack: k = !1,
-    forceClose: R,
-    linkButtonProps: y,
-    closeOnLinkClick: V = !0,
-    "data-testid": j = "snackbar"
-  } = M, L = i(null), T = i(null), [g, z] = x(!1), [l, m] = x(!1), [C, f] = x(), F = i(0), O = i(0), X = i(0), Y = i(0), q = i(!1), s = i(null), c = (t) => {
-    clearTimeout(s.current || 0), s.current = null;
-    const r = k ? tt[t] : et[t];
-    t === "swipe" || (m(!0), f(t)), s.current = setTimeout(() => {
-      p == null || p(), m(!1), f(void 0), s.current = null;
-    }, r);
-  };
-  Z({
-    ref: T,
-    open: o,
-    onClose: c,
-    setExiting: m,
-    setExitReason: f,
-    swiping: q,
-    startX: F,
-    startY: O,
-    currentX: X,
-    currentY: Y
-  }), a(() => {
-    R && c("close");
-  }, [R]), a(() => {
-    if (o && !h && d !== "loading") {
-      const t = setTimeout(() => c("timeout"), S);
-      return () => clearTimeout(t);
-    }
-  }, [o, h, d, S]), a(() => {
-    o && (m(!1), f(void 0));
-  }, [o]), a(() => {
-    const t = L.current;
-    t && requestAnimationFrame(() => {
-      const r = parseFloat(getComputedStyle(t).lineHeight), I = t.offsetHeight, U = Math.round(I / r);
-      z(U > 1);
-    });
-  }, [v]), a(() => {
-    if (!o) return;
-    const t = (r) => {
-      r.key === "Escape" && c("escape");
+import { ErrorIcon as rt } from "./assets/error.js";
+import { SuccessIcon as ct } from "./assets/success.js";
+const St = Z(
+  (M, u) => {
+    const {
+      open: o,
+      variant: d = "info",
+      mode: H = "fix",
+      onClose: p,
+      autoHideDuration: b = 6e3,
+      disableAutoHide: h = !1,
+      showButtonClose: A = !0,
+      showIcon: B = !0,
+      content: v,
+      classNameSnackbarRoot: D,
+      icon: N,
+      isStack: k = !1,
+      stretchToStack: V = !1,
+      forceClose: R,
+      linkButtonProps: y,
+      closeOnLinkClick: j = !0,
+      "data-testid": z = "snackbar"
+    } = M, T = s(null), L = s(null), [g, F] = x(!1), [l, m] = x(!1), [C, f] = x(), O = s(0), X = s(0), Y = s(0), q = s(0), K = s(!1), i = s(null), c = (t) => {
+      clearTimeout(i.current || 0), i.current = null;
+      const r = k ? et[t] : nt[t];
+      t === "swipe" || (m(!0), f(t)), i.current = setTimeout(() => {
+        p == null || p(), m(!1), f(void 0), i.current = null;
+      }, r);
     };
-    return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
-  }, [o]), a(() => () => {
-    s.current && (clearTimeout(s.current), s.current = null);
-  }, []);
-  const K = l && C && e[nt[C]];
-  if (!o && !l) return null;
-  const P = {
-    success: /* @__PURE__ */ n(rt, { className: e.icon }),
-    error: /* @__PURE__ */ n(st, { className: e.icon }),
-    info: /* @__PURE__ */ n(it, { className: e.icon }),
-    loading: /* @__PURE__ */ n(ot, { "data-testid": "snackbar-icon-loading", variant: "contrast" })
-  }, G = b(
-    e.snackbar,
-    e[H],
-    { [e.exiting]: l && C },
-    { [e.snackbarVertical]: g },
-    D,
-    K,
-    {
-      [e.snackbarStack]: k && !l,
-      // при появлении стека
-      [e.exitingStack]: k && l
-      // при уходе стека
-    }
-  ), J = (t) => {
-    T.current = t, u && (typeof u == "function" ? u(t) : u.current = t);
-  }, Q = (t, r) => {
-    t == null || t(r);
-  };
-  return /* @__PURE__ */ w("div", { ref: J, "data-testid": j, className: G, children: [
-    /* @__PURE__ */ w(
+    _({
+      ref: L,
+      open: o,
+      onClose: c,
+      setExiting: m,
+      setExitReason: f,
+      swiping: K,
+      startX: O,
+      startY: X,
+      currentX: Y,
+      currentY: q
+    }), a(() => {
+      R && c("close");
+    }, [R]), a(() => {
+      if (o && !h && d !== "loading") {
+        const t = setTimeout(
+          () => c("timeout"),
+          b
+        );
+        return () => clearTimeout(t);
+      }
+    }, [
+      o,
+      h,
+      d,
+      b
+    ]), a(() => {
+      o && (m(!1), f(void 0));
+    }, [o]), a(() => {
+      const t = T.current;
+      t && requestAnimationFrame(() => {
+        const r = parseFloat(getComputedStyle(t).lineHeight), I = t.offsetHeight, U = Math.round(I / r);
+        F(U > 1);
+      });
+    }, [v]), a(() => {
+      if (!o) return;
+      const t = (r) => {
+        r.key === "Escape" && c("escape");
+      };
+      return window.addEventListener("keydown", t), () => {
+        window.removeEventListener("keydown", t);
+      };
+    }, [o]), a(() => () => {
+      i.current && (clearTimeout(i.current), i.current = null);
+    }, []);
+    const P = l && C && e[ot[C]];
+    if (!o && !l)
+      return null;
+    const W = {
+      success: /* @__PURE__ */ n(ct, { className: e.icon }),
+      error: /* @__PURE__ */ n(rt, { className: e.icon }),
+      info: /* @__PURE__ */ n(it, { className: e.icon }),
+      loading: /* @__PURE__ */ n(
+        st,
+        {
+          "data-testid": "snackbar-icon-loading",
+          variant: "contrast"
+        }
+      )
+    }, G = S(
+      e.snackbar,
+      e[H],
+      {
+        [e.exiting]: l && C
+      },
+      {
+        [e.snackbarVertical]: g
+      },
+      D,
+      P,
+      {
+        /*
+         * Ширина элемента в provider-стеке теперь не зависит
+         * от количества элементов.
+         *
+         * Даже когда после удаления остаётся один snackbar,
+         * он продолжает занимать сохранённую ширину группы.
+         */
+        [e.stackWidth]: V,
+        [e.snackbarStack]: k && !l,
+        [e.exitingStack]: k && l
+      }
+    ), J = (t) => {
+      L.current = t, u && (typeof u == "function" ? u(t) : u.current = t);
+    }, Q = (t, r) => {
+      t == null || t(r);
+    };
+    return /* @__PURE__ */ w(
       "div",
       {
-        className: b(e.content, {
-          [e.contentVertical]: g
-        }),
+        ref: J,
+        "data-testid": z,
+        className: G,
         children: [
-          B && /* @__PURE__ */ n("div", { className: e.icon, children: N || P[d] }),
           /* @__PURE__ */ w(
             "div",
             {
-              className: b(e.textActionsContainer, {
-                [e.textActionsContainerVertical]: g
+              className: S(e.content, {
+                [e.contentVertical]: g
               }),
               children: [
-                /* @__PURE__ */ n(
-                  _.Label,
+                B && /* @__PURE__ */ n("div", { className: e.icon, children: N || W[d] }),
+                /* @__PURE__ */ w(
+                  "div",
                   {
-                    className: e.contentText,
-                    ref: L,
-                    typographyStyle: "contrast",
-                    children: v
-                  }
-                ),
-                y && /* @__PURE__ */ n(
-                  E.Link,
-                  {
-                    size: "s",
-                    className: e.buttonLink,
-                    buttonStyle: "contrast",
-                    ...y,
-                    onClick: (t) => {
-                      Q(y.onClick, t), V && c("timeout");
-                    }
+                    className: S(e.textActionsContainer, {
+                      [e.textActionsContainerVertical]: g
+                    }),
+                    children: [
+                      /* @__PURE__ */ n(
+                        $.Label,
+                        {
+                          className: e.contentText,
+                          ref: T,
+                          typographyStyle: "contrast",
+                          children: v
+                        }
+                      ),
+                      y && /* @__PURE__ */ n(
+                        E.Link,
+                        {
+                          size: "s",
+                          className: e.buttonLink,
+                          buttonStyle: "contrast",
+                          ...y,
+                          onClick: (t) => {
+                            Q(y.onClick, t), j && c("timeout");
+                          }
+                        }
+                      )
+                    ]
                   }
                 )
               ]
             }
+          ),
+          A && /* @__PURE__ */ n(
+            E,
+            {
+              iconLeft: /* @__PURE__ */ n(tt, {}),
+              onClick: () => c("close"),
+              mode: "tertiary",
+              size: "l",
+              buttonStyle: "contrast",
+              style: { padding: "0px" }
+            }
           )
         ]
       }
-    ),
-    A && /* @__PURE__ */ n(
-      E,
-      {
-        iconLeft: /* @__PURE__ */ n($, {}),
-        onClick: () => c("close"),
-        mode: "tertiary",
-        size: "l",
-        buttonStyle: "contrast",
-        style: { padding: "0px" }
-      }
-    )
-  ] });
-});
+    );
+  }
+);
 export {
-  xt as Snackbar
+  St as Snackbar
 };

package/dist/components/Snackbar/Snackbar.module.css.js

@@ -1,47 +1,49 @@
-import '../../assets/components/Snackbar/Snackbar.module-KVPJ2b4w.css';const t = "_snackbar_1j7iw_15", i = "_slideIn_1j7iw_1", n = "_snackbarStack_1j7iw_44", e = "_snackbarVertical_1j7iw_49", c = "_fix_1j7iw_57", _ = "_fill_1j7iw_63", o = "_hug_1j7iw_69", s = "_content_1j7iw_75", a = "_textActionsContainer_1j7iw_85", r = "_textActionsContainerVertical_1j7iw_92", x = "_contentVertical_1j7iw_97", l = "_contentText_1j7iw_101", w = "_icon_1j7iw_106", j = "_buttonLink_1j7iw_111", g = "_exiting_1j7iw_117", k = "_slideOut_1j7iw_1", u = "_exitingTimeout_1j7iw_123", b = "_exitingClose_1j7iw_128", C = "_exitingStack_1j7iw_135", T = "_swipeTransition_1j7iw_142", V = "_exitingEscape_1j7iw_148", d = {
+import '../../assets/components/Snackbar/Snackbar.module-gnMPmaUr.css';const t = "_snackbar_92a88_13", n = "_slideIn_92a88_1", i = "_snackbarStack_92a88_44", a = "_snackbarVertical_92a88_49", c = "_fix_92a88_56", e = "_fill_92a88_62", _ = "_hug_92a88_68", s = "_stackWidth_92a88_80", o = "_content_92a88_86", r = "_textActionsContainer_92a88_96", x = "_textActionsContainerVertical_92a88_103", l = "_contentVertical_92a88_108", k = "_contentText_92a88_112", g = "_icon_92a88_117", u = "_buttonLink_92a88_122", b = "_exiting_92a88_128", d = "_slideOut_92a88_1", C = "_exitingTimeout_92a88_134", T = "_exitingClose_92a88_139", V = "_exitingStack_92a88_145", f = "_swipeTransition_92a88_151", p = "_exitingEscape_92a88_157", h = {
   snackbar: t,
-  slideIn: i,
-  snackbarStack: n,
-  snackbarVertical: e,
+  slideIn: n,
+  snackbarStack: i,
+  snackbarVertical: a,
   fix: c,
-  fill: _,
-  hug: o,
-  content: s,
-  textActionsContainer: a,
-  textActionsContainerVertical: r,
-  contentVertical: x,
-  contentText: l,
-  icon: w,
-  buttonLink: j,
-  exiting: g,
-  slideOut: k,
-  exitingTimeout: u,
-  exitingClose: b,
-  exitingStack: C,
-  swipeTransition: T,
-  exitingEscape: V
+  fill: e,
+  hug: _,
+  stackWidth: s,
+  content: o,
+  textActionsContainer: r,
+  textActionsContainerVertical: x,
+  contentVertical: l,
+  contentText: k,
+  icon: g,
+  buttonLink: u,
+  exiting: b,
+  slideOut: d,
+  exitingTimeout: C,
+  exitingClose: T,
+  exitingStack: V,
+  swipeTransition: f,
+  exitingEscape: p
 };
 export {
-  j as buttonLink,
-  s as content,
-  l as contentText,
-  x as contentVertical,
-  d as default,
-  g as exiting,
-  b as exitingClose,
-  V as exitingEscape,
-  C as exitingStack,
-  u as exitingTimeout,
-  _ as fill,
+  u as buttonLink,
+  o as content,
+  k as contentText,
+  l as contentVertical,
+  h as default,
+  b as exiting,
+  T as exitingClose,
+  p as exitingEscape,
+  V as exitingStack,
+  C as exitingTimeout,
+  e as fill,
   c as fix,
-  o as hug,
-  w as icon,
-  i as slideIn,
-  k as slideOut,
+  _ as hug,
+  g as icon,
+  n as slideIn,
+  d as slideOut,
   t as snackbar,
-  n as snackbarStack,
-  e as snackbarVertical,
-  T as swipeTransition,
-  a as textActionsContainer,
-  r as textActionsContainerVertical
+  i as snackbarStack,
+  a as snackbarVertical,
+  s as stackWidth,
+  f as swipeTransition,
+  r as textActionsContainer,
+  x as textActionsContainerVertical
 };

package/dist/components/Snackbar/Snackbar.type.d.ts

@@ -77,8 +77,15 @@ export type SnackbarProps = {
      */
     linkButtonProps?: LinkButtonProps;
     /**
-    * Если true —  по клику на кнопку "Link" закроется снекбар
+    * Если true — по клику на кнопку "Link" закроется снекбар
     * По дефолту true
     */
     closeOnLinkClick?: boolean;
+    /**
+     * Растягивает Snackbar до ширины контейнера стека.
+     * Служебный prop SnackbarProvider.
+     *
+     * @internal
+     */
+    stretchToStack?: boolean;
 };

package/dist/components/Tabs/ScrollWrapper.js

@@ -1,15 +1,15 @@
 import { jsxs as N, jsx as r } from "react/jsx-runtime";
 import { useRef as W, useState as g, useEffect as w } from "react";
-import { clsx as i } from "clsx";
+import { clsx as a } from "clsx";
 import e from "./ScrollWrapper.module.css.js";
 import { useBackgroundColor as M } from "../../hooks/useBackgroundColor.js";
 const B = "white", G = ({
   children: b,
-  withControls: a = !0,
+  withControls: i = !0,
   className: L,
   size: c
 }) => {
-  const s = W(null), [d, C] = g(!1), [h, k] = g(!1), { ref: x, bgColor: R } = M(), E = x ?? { current: null }, f = R ?? B, u = a && d, m = a && h, v = ({ direction: t }) => /* @__PURE__ */ r(
+  const s = W(null), [d, C] = g(!1), [h, k] = g(!1), { ref: x, bgColor: R } = M(), E = x ?? { current: null }, f = R ?? B, u = i && d, m = i && h, v = ({ direction: t }) => /* @__PURE__ */ r(
     "svg",
     {
       height: "12px",
@@ -49,11 +49,11 @@ const B = "white", G = ({
       return t.addEventListener("scroll", l, { passive: !0 }), window.addEventListener("resize", l), () => {
         t.removeEventListener("scroll", l), window.removeEventListener("resize", l);
       };
-  }, []), /* @__PURE__ */ N("div", { ref: E, className: i(e.wrapper, L), children: [
+  }, []), /* @__PURE__ */ N("div", { ref: E, className: a(e.wrapper, L), children: [
     u && /* @__PURE__ */ r(
       "div",
       {
-        className: i(e.mask, e.maskLeft, d && e.visible),
+        className: a(e.mask, e.maskLeft, d && e.visible),
         style: {
           background: `linear-gradient(to right, ${f} 17%, transparent 80%)`
         }
@@ -62,7 +62,7 @@ const B = "white", G = ({
     m && /* @__PURE__ */ r(
       "div",
       {
-        className: i(e.mask, e.maskRight, h && e.visible),
+        className: a(e.mask, e.maskRight, h && e.visible),
         style: {
           background: `linear-gradient(to left, ${f} 17%, transparent 80%)`
         }
@@ -75,7 +75,8 @@ const B = "white", G = ({
         type: "button",
         tabIndex: -1,
         "aria-hidden": "true",
-        className: i(e.control, e.left, e[c]),
+        "data-testid": "tabs-scroll-control-left",
+        className: a(e.control, e.left, e[c]),
         onClick: () => p("left"),
         children: /* @__PURE__ */ r(v, { direction: "left" })
       }
@@ -86,7 +87,8 @@ const B = "white", G = ({
         type: "button",
         tabIndex: -1,
         "aria-hidden": "true",
-        className: i(e.control, e.right, e[c]),
+        "data-testid": "tabs-scroll-control-right",
+        className: a(e.control, e.right, e[c]),
         onClick: () => p("right"),
         children: /* @__PURE__ */ r(v, { direction: "right" })
       }