skillgrid 0.0.84 → 0.0.86

package/dist/components/Snackbar/Provider/SnackbarProvider.js

@@ -1,76 +1,165 @@
-import { jsx as n, jsxs as y } from "react/jsx-runtime";
-import { useReducer as I, useEffect as c } from "react";
-import d from "react-dom";
-import T from "classnames";
-import { nanoid as k } from "nanoid";
-import i from "./SnackbarProvider.module.css.js";
-import { Snackbar as w } from "../Snackbar.js";
-import { snackbarReducer as O } from "../lib/snackbarReducer/snackbarReducer.js";
-import { MAX_VISIBLE as R } from "../lib/constants.js";
-import { SnackbarContext as q } from "../lib/useSnackbar.js";
-const V = (p) => {
-  const { children: m, dataTestId: f = "snackbar-wrapper" } = p, [o, s] = I(O, { visible: [], queue: [] }), u = (e) => {
-    const t = k(), r = { ...e, id: t, open: !0 };
-    s({ type: "ENQUEUE", snack: r });
-  }, S = (e) => {
-    s({ type: "REMOVE", id: e });
+import { jsx as u, jsxs as M } from "react/jsx-runtime";
+import { useReducer as O, useEffect as v, useRef as T, useState as S, useLayoutEffect as x } from "react";
+import E from "react-dom";
+import N from "classnames";
+import { nanoid as W } from "nanoid";
+import l from "./SnackbarProvider.module.css.js";
+import { Snackbar as C } from "../Snackbar.js";
+import { snackbarReducer as I } from "../lib/snackbarReducer/snackbarReducer.js";
+import { MAX_VISIBLE as k } from "../lib/constants.js";
+import { SnackbarContext as G } from "../lib/useSnackbar.js";
+const f = {
+  hug: 0,
+  fix: 1,
+  fill: 2
+}, H = (n) => n.reduce((d, p) => {
+  const t = p.mode ?? "fix";
+  return f[t] > f[d] ? t : d;
+}, "hug"), R = ({
+  snacks: n,
+  dataTestId: d,
+  onClose: p
+}) => {
+  const t = T(null), [s, h] = S("hug"), [m, g] = S(0), a = H(n), c = n.length > 0 && f[a] > f[s] ? a : s;
+  x(() => {
+    if (n.length === 0) {
+      h("hug"), g(0);
+      return;
+    }
+    h((r) => f[a] > f[r] ? a : r);
+  }, [n.length, a]), x(() => {
+    if (n.length === 0 || c !== "hug")
+      return;
+    const r = t.current;
+    if (!r) return;
+    const e = () => {
+      const i = r.getBoundingClientRect().width;
+      g(
+        (y) => Math.max(y, i)
+      );
+    };
+    e();
+    const o = new ResizeObserver(e);
+    return o.observe(r), () => o.disconnect();
+  }, [c, n.length]);
+  const b = n.length > 1;
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref: t,
+      className: N(l.snackGroup, {
+        [l.snackGroupHug]: c === "hug",
+        [l.snackGroupFix]: c === "fix",
+        [l.snackGroupFill]: c === "fill"
+      }),
+      style: m > 0 ? {
+        /**
+         * Сохранённая hug-ширина продолжает действовать
+         * и после перехода в fix/fill.
+         *
+         * Например:
+         * hug 820px -> fix не должен уменьшить стек до 600px.
+         */
+        minWidth: `min(${m}px, 100%)`
+      } : void 0,
+      children: n.map((r, e) => {
+        const o = (n.length - 1 - e) * -8;
+        return /* @__PURE__ */ u(
+          "div",
+          {
+            "data-testid": d,
+            className: l.snackWrapper,
+            style: {
+              transform: `translateY(${o}px)`
+            },
+            children: /* @__PURE__ */ u(
+              C,
+              {
+                ...r,
+                open: !r.exiting,
+                isStack: b,
+                stretchToStack: !0,
+                forceClose: r.exiting,
+                onClose: () => p(r.id)
+              }
+            )
+          },
+          r.id
+        );
+      })
+    }
+  );
+}, B = (n) => {
+  const { children: d, dataTestId: p = "snackbar-wrapper" } = n, [t, s] = O(I, {
+    visible: [],
+    queue: []
+  }), h = (e) => {
+    const o = W(), i = {
+      ...e,
+      id: o,
+      open: !0
+    };
+    s({
+      type: "ENQUEUE",
+      snack: i
+    });
+  }, m = (e) => {
+    s({
+      type: "REMOVE",
+      id: e
+    });
   };
-  c(() => {
+  v(() => {
     s({ type: "SHOW_NEXT" });
-  }, [o.queue, o.visible]), c(() => {
-    if (o.queue.length !== 0)
-      if (o.visible.length >= R) {
-        const e = o.visible[0];
-        s({ type: "START_EXIT", id: e.id });
+  }, [t.queue, t.visible]), v(() => {
+    if (t.queue.length !== 0)
+      if (t.visible.length >= k) {
+        const e = t.visible[0];
+        s({
+          type: "START_EXIT",
+          id: e.id
+        });
       } else
         s({ type: "SHOW_NEXT" });
-  }, [o.queue]);
-  const l = (e) => e.map((t, r) => {
-    const g = (e.length - 1 - r) * -8, a = e.length > 1;
-    a && !t.wasInStack && (t.wasInStack = !0);
-    const x = t.wasInStack || a ? "fix" : t.mode;
-    return /* @__PURE__ */ n(
-      "div",
+  }, [t.queue]);
+  const g = t.visible.filter((e) => !e.parent), a = t.visible.filter((e) => e.parent), c = E.createPortal(
+    /* @__PURE__ */ u("div", { className: l.stack, children: /* @__PURE__ */ u(
+      R,
       {
-        "data-testid": f,
-        className: i.snackWrapper,
-        style: {
-          transform: `translateY(${g}px)`
-        },
-        children: /* @__PURE__ */ n(
-          w,
-          {
-            ...t,
-            open: !t.exiting,
-            isStack: a,
-            mode: x,
-            forceClose: t.exiting,
-            onClose: () => S(t.id)
-          }
-        )
-      },
-      t.id
-    );
-  }), b = o.visible.filter((e) => !e.parent), h = o.visible.filter((e) => e.parent), v = d.createPortal(
-    /* @__PURE__ */ n("div", { className: i.stack, children: l(b) }),
+        snacks: g,
+        dataTestId: p,
+        onClose: m
+      }
+    ) }),
     document.body
-  ), E = h.reduce((e, t) => {
-    if (!t.parent) return e;
-    const r = t.parent.id || `parent-${t.parent.className}`;
-    return (e[r] || (e[r] = [])).push(t), e;
-  }, {}), N = Object.entries(E).map(([e, t]) => {
-    const r = t[0];
-    return r.parent ? d.createPortal(
-      /* @__PURE__ */ n("div", { className: T(i.stack, i.local), children: l(t) }, e),
-      r.parent
+  ), b = a.reduce(
+    (e, o) => {
+      if (!o.parent) return e;
+      const i = o.parent.id || `parent-${o.parent.className}`;
+      return (e[i] || (e[i] = [])).push(o), e;
+    },
+    {}
+  ), r = Object.entries(b).map(([e, o]) => {
+    const i = o[0];
+    return i.parent ? E.createPortal(
+      /* @__PURE__ */ u("div", { className: N(l.stack, l.local), children: /* @__PURE__ */ u(
+        R,
+        {
+          snacks: o,
+          dataTestId: p,
+          onClose: m
+        }
+      ) }),
+      i.parent,
+      e
     ) : null;
   });
-  return /* @__PURE__ */ y(q.Provider, { value: { show: u }, children: [
-    m,
-    v,
-    N
+  return /* @__PURE__ */ M(G.Provider, { value: { show: h }, children: [
+    d,
+    c,
+    r
   ] });
 };
 export {
-  V as SnackbarProvider
+  B as SnackbarProvider
 };

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

@@ -1,11 +1,19 @@
-import '../../../assets/components/Snackbar/Provider/SnackbarProvider.module-F1FVM9qU.css';const a = "_stack_11xtv_1", c = "_local_11xtv_19", s = "_snackWrapper_11xtv_28", t = {
-  stack: a,
+import '../../../assets/components/Snackbar/Provider/SnackbarProvider.module-CXp57W1g.css';const s = "_stack_184s0_1", c = "_local_184s0_20", a = "_snackGroup_184s0_27", o = "_snackGroupHug_184s0_43", n = "_snackGroupFix_184s0_54", _ = "_snackGroupFill_184s0_64", p = "_snackWrapper_184s0_68", r = {
+  stack: s,
   local: c,
-  snackWrapper: s
+  snackGroup: a,
+  snackGroupHug: o,
+  snackGroupFix: n,
+  snackGroupFill: _,
+  snackWrapper: p
 };
 export {
-  t as default,
+  r as default,
   c as local,
-  s as snackWrapper,
-  a as stack
+  a as snackGroup,
+  _ as snackGroupFill,
+  n as snackGroupFix,
+  o as snackGroupHug,
+  p as snackWrapper,
+  s as stack
 };

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
 };