mimir-ui-kit 1.43.3 → 1.43.4

package/dist/components/CardTrail/CardTrail.d.ts

@@ -28,7 +28,7 @@ export type TProps = {
     /**
      * Значение, которое раздвигает отрицательными и положительным отступами.
      */
-    padding?: number;
+    padding?: number | string;
     /**
      * Флаг, определяющий, нужны ли кнопки для перелистывания.
      */

package/dist/components/CardTrail/CardTrail.js

@@ -1,66 +1,67 @@
-import { jsxs as S, jsx as u } from "react/jsx-runtime";
-import { c as n } from "../../index-DIxK0V-G.js";
-import { forwardRef as q, useRef as f, useState as _, useEffect as P, Children as X } from "react";
-import { DEFAULT_SPACE_BETWEEN as Y, DEFAULT_SCROLL_STEP as G, DEFAULT_DIVIDED as J, DEFAULT_CARD_INDEX as K } from "./constants.js";
-import { hasHorizontalScroll as g, isScrollAtEdge as T } from "./utils.js";
-import { useMergeRefs as Q } from "../../hooks/useMergeRefs/useMergeRefs.js";
-import { useThrottledCallback as Z } from "../../hooks/useThrottledCallback/index.js";
-import { MergedButton as rr } from "../MergedButton/MergedButton.js";
-import '../../assets/CardTrail.css';const tr = "_pointer_1wzbr_50", i = {
+import { jsxs as w, jsx as d } from "react/jsx-runtime";
+import { c as l } from "../../index-DIxK0V-G.js";
+import { forwardRef as Y, useRef as f, useState as _, useEffect as G, Children as J } from "react";
+import { DEFAULT_SPACE_BETWEEN as K, DEFAULT_SCROLL_STEP as Q, DEFAULT_DIVIDED as Z, DEFAULT_CARD_INDEX as rr } from "./constants.js";
+import { hasHorizontalScroll as g, getCSSVariableNumericValue as D, isScrollAtEdge as L } from "./utils.js";
+import { useMergeRefs as tr } from "../../hooks/useMergeRefs/useMergeRefs.js";
+import { useThrottledCallback as er } from "../../hooks/useThrottledCallback/index.js";
+import { MergedButton as ar } from "../MergedButton/MergedButton.js";
+import '../../assets/CardTrail.css';const ir = "_pointer_1wzbr_50", i = {
   "card-trail": "_card-trail_1wzbr_3",
   "card-trail-header": "_card-trail-header_1wzbr_7",
   "card-trail-header-title": "_card-trail-header-title_1wzbr_15",
   "card-trail-header-merged-button": "_card-trail-header-merged-button_1wzbr_29",
   "card-trail-list": "_card-trail-list_1wzbr_32",
   "card-trail-list-item": "_card-trail-list-item_1wzbr_46",
-  pointer: tr
+  pointer: ir
 };
-let v = {};
-const dr = q((w, D) => {
+let z = {};
+const mr = Y((W, A) => {
   const {
-    cardClassName: L,
-    cardTrailClassName: z,
-    cardTrailHeaderClassName: W,
-    cardTrailListClassName: A,
-    cardTrailMergedButtonClassName: R,
-    children: b,
-    title: p,
-    spaceBetween: o = Y,
-    scrollStep: C = G,
-    dividedCardWidth: k = J,
-    currentCardIndex: h = K,
+    cardClassName: R,
+    cardTrailClassName: k,
+    cardTrailHeaderClassName: I,
+    cardTrailListClassName: y,
+    cardTrailMergedButtonClassName: M,
+    children: p,
+    title: u,
+    spaceBetween: n = K,
+    scrollStep: b = Q,
+    dividedCardWidth: V = Z,
+    currentCardIndex: h = rr,
     mergedButtonProps: c,
-    scrollToCard: B = !1,
-    needButtons: I = !0,
-    padding: l = 0
-  } = w, r = f(null), N = f(!0), s = f(null), [d, y] = _({
+    scrollToCard: C = !1,
+    needButtons: B = !0,
+    padding: N = 0
+  } = W, r = f(null), S = f(!0), o = f(null), [s, x] = _({
     leftButton: !0,
     rightButton: !1
-  }), [M, x] = _(0), [U, E] = _(
+  }), [U, F] = _(0), [E, T] = _(
     () => g(r == null ? void 0 : r.current)
-  ), F = Q(r, D), H = Z(() => {
-    var a;
-    if (N.current) {
-      N.current = !1;
-      const m = r.current, V = ((a = m == null ? void 0 : m.children[h]) == null ? void 0 : a.clientWidth) ?? 0;
-      x(
-        V / k + l + o
+  ), H = tr(r, A), O = er(() => {
+    var v;
+    if (S.current) {
+      S.current = !1;
+      const m = r.current, P = ((v = m == null ? void 0 : m.children[h]) == null ? void 0 : v.clientWidth) ?? 0, X = D(N);
+      F(
+        P / V + X + n
       );
     }
-    v = {
-      paddingLeft: l,
-      paddingRight: l,
-      marginLeft: -l,
-      marginRight: -l
+    const t = D(N);
+    z = {
+      paddingLeft: t,
+      paddingRight: t,
+      marginLeft: -t,
+      marginRight: -t
     };
-    const t = !T(r.current, "left"), e = !T(r.current, "right");
-    y({
-      leftButton: !t,
-      rightButton: !e
+    const e = !L(r.current, "left"), a = !L(r.current, "right");
+    x({
+      leftButton: !e,
+      rightButton: !a
     });
-  }, 300), O = (t) => () => {
+  }, 300), $ = (t) => () => {
     var a;
-    if (!B)
+    if (!C)
       return;
     const e = (a = r == null ? void 0 : r.current) == null ? void 0 : a.querySelector(
       `[data-active-card='${t}']`
@@ -70,55 +71,55 @@ const dr = q((w, D) => {
       block: "nearest",
       inline: "center"
     }));
-  }, $ = () => {
+  }, j = () => {
     var a;
-    if (!r.current || d.leftButton) return;
+    if (!r.current || s.leftButton) return;
     const t = r.current, e = ((a = t.children[h]) == null ? void 0 : a.clientWidth) ?? 0;
     t.scrollBy({
-      left: -(e + o) * C,
+      left: -(e + n) * b,
       behavior: "smooth"
     });
-  }, j = () => {
+  }, q = () => {
     var a;
-    if (!r.current || d.rightButton) return;
+    if (!r.current || s.rightButton) return;
     const t = r.current, e = ((a = t.children[h]) == null ? void 0 : a.clientWidth) ?? 0;
     t.scrollBy({
-      left: (e + o) * C,
+      left: (e + n) * b,
       behavior: "smooth"
     });
   };
-  return P(() => {
+  return G(() => {
     const t = r.current;
     if (t)
-      return s.current = new ResizeObserver(() => {
-        E(g(r == null ? void 0 : r.current));
-      }), s.current.observe(t), E(g(r == null ? void 0 : r.current)), () => {
-        s.current && s.current.disconnect();
+      return o.current = new ResizeObserver(() => {
+        T(g(r == null ? void 0 : r.current));
+      }), o.current.observe(t), T(g(r == null ? void 0 : r.current)), () => {
+        o.current && o.current.disconnect();
       };
-  }, [b]), /* @__PURE__ */ S("section", { className: n(i["card-trail"], z), children: [
-    /* @__PURE__ */ S(
+  }, [p]), /* @__PURE__ */ w("section", { className: l(i["card-trail"], k), children: [
+    (u || E && B) && /* @__PURE__ */ w(
       "header",
       {
-        className: n(
+        className: l(
           i["card-trail-header"],
-          W
+          I
         ),
         children: [
-          p && /* @__PURE__ */ u("h3", { className: i["card-trail-header-title"], children: p }),
-          U && I && /* @__PURE__ */ u(
-            rr,
+          u && /* @__PURE__ */ d("h3", { className: i["card-trail-header-title"], children: u }),
+          E && B && /* @__PURE__ */ d(
+            ar,
             {
-              buttonsWrapperClassName: n(
+              buttonsWrapperClassName: l(
                 i["card-trail-header-merged-button"],
-                R
+                M
               ),
               buttons: [
                 {
                   isIconButton: !0,
                   iconName: "ArrowLeft16px",
                   variant: "gray",
-                  onClick: $,
-                  disabled: d.leftButton,
+                  onClick: j,
+                  disabled: s.leftButton,
                   size: "s",
                   ...c == null ? void 0 : c.leftButton
                 },
@@ -126,9 +127,9 @@ const dr = q((w, D) => {
                   isIconButton: !0,
                   iconName: "ArrowRight16px",
                   variant: "gray",
-                  onClick: j,
+                  onClick: q,
                   size: "s",
-                  disabled: d.rightButton,
+                  disabled: s.rightButton,
                   ...c == null ? void 0 : c.rightButton
                 }
               ]
@@ -137,27 +138,27 @@ const dr = q((w, D) => {
         ]
       }
     ),
-    /* @__PURE__ */ u(
+    /* @__PURE__ */ d(
       "ul",
       {
-        onScroll: H,
+        onScroll: O,
         style: {
-          gap: o,
-          scrollPadding: `0 ${M}px`,
-          ...v
+          gap: n,
+          scrollPadding: `0 ${U}px`,
+          ...z
         },
-        className: n(i["card-trail-list"], A),
-        ref: F,
-        children: X.map(b, (t, e) => /* @__PURE__ */ u(
+        className: l(i["card-trail-list"], y),
+        ref: H,
+        children: J.map(p, (t, e) => /* @__PURE__ */ d(
           "li",
           {
-            onClick: O(e),
+            onClick: $(e),
             "data-active-card": e,
             "data-testid": `card-trail-item-${e}`,
-            className: n(
+            className: l(
               i["card-trail-list-item"],
-              { [i.pointer]: B },
-              L
+              { [i.pointer]: C },
+              R
             ),
             children: t
           }
@@ -167,5 +168,5 @@ const dr = q((w, D) => {
   ] });
 });
 export {
-  dr as CardTrail
+  mr as CardTrail
 };

package/dist/components/CardTrail/utils.d.ts

@@ -7,3 +7,4 @@
  */
 export declare const isScrollAtEdge: (container: HTMLElement | null, direction: "left" | "right", tolerance?: number) => boolean;
 export declare const hasHorizontalScroll: (element: HTMLElement | null) => boolean;
+export declare const getCSSVariableNumericValue: (value: string | number) => number;

package/dist/components/CardTrail/utils.js

@@ -1,9 +1,18 @@
-const c = (r, i, t = 1) => {
-  if (!r) return !0;
-  const { scrollLeft: l, scrollWidth: s, clientWidth: o } = r;
-  return i === "left" ? l <= t : l >= s - o - t;
-}, e = (r) => r ? r.scrollWidth > r.clientWidth : !1;
+const i = (t, r, e = 1) => {
+  if (!t) return !0;
+  const { scrollLeft: o, scrollWidth: s, clientWidth: l } = t;
+  return r === "left" ? o <= e : o >= s - l - e;
+}, n = (t) => t ? t.scrollWidth > t.clientWidth : !1, c = (t) => {
+  if (typeof t == "number")
+    return t;
+  if (t.startsWith("--")) {
+    const r = getComputedStyle(document.documentElement).getPropertyValue(t).trim();
+    return parseFloat(r) || 0;
+  }
+  return parseFloat(t) || 0;
+};
 export {
-  e as hasHorizontalScroll,
-  c as isScrollAtEdge
+  c as getCSSVariableNumericValue,
+  n as hasHorizontalScroll,
+  i as isScrollAtEdge
 };