mimir-ui-kit 1.41.5 → 1.41.6

package/dist/assets/CardTrail.css

@@ -1 +1 @@
-._card-trail_vv8gl_3{display:flex;flex-direction:column}._card-trail-header_vv8gl_7{display:flex;align-items:flex-end;justify-content:space-between}._card-trail-header_vv8gl_7:not(:last-child){margin-bottom:var(--mimir-space-xs)}._card-trail-header-title_vv8gl_15{margin-bottom:0;font-weight:var(--mimir-font-weight-text-medium);font-size:var(--mimir-size-text-l);font-family:var(--mimir-font-montserrat);line-height:var(--mimir-line-height-text-s1);letter-spacing:calc(var(--mimir-size-text-l) * -.02)}@media (max-width: 600px){._card-trail-header-title_vv8gl_15{font-size:var(--mimir-size-text-m);letter-spacing:calc(var(--mimir-size-text-m) * -.02)}}._card-trail-header-merged-button_vv8gl_29{margin-left:auto}._card-trail-list_vv8gl_32{display:flex;margin-bottom:0;padding:0;overflow:auto;white-space:nowrap;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}._card-trail-list_vv8gl_32::-webkit-scrollbar{display:none}._card-trail-list-item_vv8gl_45{white-space:normal;white-space:initial;scroll-snap-align:start}._card-trail-list-item_vv8gl_45._pointer_vv8gl_49{cursor:pointer}
+._card-trail_c21mz_3{display:flex;flex-direction:column}._card-trail-header_c21mz_7{display:flex;align-items:flex-end;justify-content:space-between}._card-trail-header_c21mz_7:not(:last-child){margin-bottom:var(--mimir-space-xs)}._card-trail-header-title_c21mz_15{margin-bottom:0;font-weight:var(--mimir-font-weight-text-medium);font-size:var(--mimir-size-text-l);font-family:var(--mimir-font-montserrat);line-height:var(--mimir-line-height-text-s1);letter-spacing:calc(var(--mimir-size-text-l) * -.02)}@media (max-width: 600px){._card-trail-header-title_c21mz_15{font-size:var(--mimir-size-text-m);letter-spacing:calc(var(--mimir-size-text-m) * -.02)}}._card-trail-header-merged-button_c21mz_29{margin-left:auto}._card-trail-list_c21mz_32{display:flex;margin-bottom:0;padding:0;overflow:auto;white-space:nowrap;scroll-behavior:smooth;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}._card-trail-list_c21mz_32::-webkit-scrollbar{display:none}._card-trail-list-item_c21mz_45{white-space:normal;white-space:initial;scroll-snap-align:start}._card-trail-list-item_c21mz_45._pointer_c21mz_49{cursor:pointer}

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

@@ -9,10 +9,18 @@ export type TProps = {
      * Расстояние между карточками.
      */
     spaceBetween?: number;
+    /**
+     * Делитель ширины карточками, который позволяет оставлять предыдщую карточку немного выглядывать.
+     */
+    dividedCardWidth?: number;
     /**
      * Количество карточек для перелистывания.
      */
     scrollStep?: number;
+    /**
+     * Index карточке, у которой надо брать ширирну.
+     */
+    currentCardIndex?: number;
     /**
      * Флаг, определяющий, нужно ли при клике на карточку скроллиться до нее.
      */

package/dist/components/CardTrail/CardTrail.js

@@ -1,116 +1,118 @@
-import { jsxs as v, jsx as s } from "react/jsx-runtime";
+import { jsxs as N, jsx as s } from "react/jsx-runtime";
 import { c as i } from "../../index-DIxK0V-G.js";
-import { forwardRef as x, useRef as p, useState as B, useEffect as H, Children as O } from "react";
-import { DEFAULT_SPACE_BETWEEN as R, DEFAULT_SCROLL_STEP as j } from "./constants.js";
-import { hasHorizontalScroll as u, isScrollAtEdge as C } from "./utils.js";
-import { useMergeRefs as F } from "../../hooks/useMergeRefs/useMergeRefs.js";
-import { useThrottledCallback as U } from "../../hooks/useThrottledCallback/index.js";
-import { MergedButton as $ } from "../MergedButton/MergedButton.js";
-import '../../assets/CardTrail.css';const q = "_pointer_vv8gl_49", l = {
-  "card-trail": "_card-trail_vv8gl_3",
-  "card-trail-header": "_card-trail-header_vv8gl_7",
-  "card-trail-header-title": "_card-trail-header-title_vv8gl_15",
-  "card-trail-header-merged-button": "_card-trail-header-merged-button_vv8gl_29",
-  "card-trail-list": "_card-trail-list_vv8gl_32",
-  "card-trail-list-item": "_card-trail-list-item_vv8gl_45",
-  pointer: q
-}, P = x((b, N) => {
+import { forwardRef as H, useRef as E, useState as u, useEffect as O, Children as $ } from "react";
+import { DEFAULT_SPACE_BETWEEN as j, DEFAULT_SCROLL_STEP as V, DEFAULT_DIVIDED as q, DEFAULT_CARD_INDEX as X } from "./constants.js";
+import { hasHorizontalScroll as h, isScrollAtEdge as S } from "./utils.js";
+import { useMergeRefs as G } from "../../hooks/useMergeRefs/useMergeRefs.js";
+import { useThrottledCallback as J } from "../../hooks/useThrottledCallback/index.js";
+import { MergedButton as K } from "../MergedButton/MergedButton.js";
+import '../../assets/CardTrail.css';const P = "_pointer_c21mz_49", c = {
+  "card-trail": "_card-trail_c21mz_3",
+  "card-trail-header": "_card-trail-header_c21mz_7",
+  "card-trail-header-title": "_card-trail-header-title_c21mz_15",
+  "card-trail-header-merged-button": "_card-trail-header-merged-button_c21mz_29",
+  "card-trail-list": "_card-trail-list_c21mz_32",
+  "card-trail-list-item": "_card-trail-list-item_c21mz_45",
+  pointer: P
+}, lr = H((v, D) => {
   const {
-    cardClassName: S,
-    cardTrailClassName: E,
-    cardTrailHeaderClassName: T,
-    cardTrailListClassName: k,
-    cardTrailMergedButtonClassName: L,
-    children: h,
-    title: m,
-    spaceBetween: d = R,
-    scrollStep: f = j,
-    mergedButtonProps: c,
-    scrollToCard: _ = !1,
-    needButtons: w = !0
-  } = b, r = p(null), n = p(null), [o, y] = B({
+    cardClassName: T,
+    cardTrailClassName: z,
+    cardTrailHeaderClassName: L,
+    cardTrailListClassName: A,
+    cardTrailMergedButtonClassName: W,
+    children: m,
+    title: f,
+    spaceBetween: d = j,
+    scrollStep: _ = V,
+    mergedButtonProps: l,
+    scrollToCard: C = !1,
+    needButtons: k = !0,
+    dividedCardWidth: p = q,
+    currentCardIndex: g = X
+  } = v, r = E(null), n = E(null), [o, I] = u({
     leftButton: !0,
     rightButton: !1
-  }), [A, g] = B(
-    () => u(r == null ? void 0 : r.current)
-  ), W = F(r, N), z = U(() => {
-    const t = !C(r.current, "left"), e = !C(r.current, "right");
-    y({
-      leftButton: !t,
-      rightButton: !e
+  }), [w, B] = u(0), [y, b] = u(
+    () => h(r == null ? void 0 : r.current)
+  ), x = G(r, D), M = J(() => {
+    const e = !S(r.current, "left"), t = !S(r.current, "right");
+    I({
+      leftButton: !e,
+      rightButton: !t
     });
-  }, 300), M = (t) => () => {
+  }, 300), F = (e) => () => {
     var a;
-    if (!_)
+    if (!C)
       return;
-    const e = (a = r == null ? void 0 : r.current) == null ? void 0 : a.querySelector(
-      `[data-active-card='${t}']`
+    const t = (a = r == null ? void 0 : r.current) == null ? void 0 : a.querySelector(
+      `[data-active-card='${e}']`
     );
-    e && (e == null || e.scrollIntoView({
+    t && (t == null || t.scrollIntoView({
       behavior: "smooth",
       block: "nearest",
       inline: "center"
     }));
-  }, D = () => {
+  }, R = () => {
     var a;
     if (!r.current || o.leftButton) return;
-    const t = r.current, e = ((a = t.children[0]) == null ? void 0 : a.clientWidth) ?? 0;
-    t.scrollBy({
-      left: -(e + d) * f,
+    const e = r.current, t = ((a = e.children[g]) == null ? void 0 : a.clientWidth) ?? 0;
+    B(t / p), e.scrollBy({
+      left: -(t + d) * _,
       behavior: "smooth"
     });
-  }, I = () => {
+  }, U = () => {
     var a;
     if (!r.current || o.rightButton) return;
-    const t = r.current, e = ((a = t.children[0]) == null ? void 0 : a.clientWidth) ?? 0;
-    t.scrollBy({
-      left: (e + d) * f,
+    const e = r.current, t = ((a = e.children[g]) == null ? void 0 : a.clientWidth) ?? 0;
+    B(t / p), e.scrollBy({
+      left: (t + d) * _,
       behavior: "smooth"
     });
   };
-  return H(() => {
-    const t = r.current;
-    if (t)
+  return O(() => {
+    const e = r.current;
+    if (e)
       return n.current = new ResizeObserver(() => {
-        g(u(r == null ? void 0 : r.current));
-      }), n.current.observe(t), g(u(r == null ? void 0 : r.current)), () => {
+        b(h(r == null ? void 0 : r.current));
+      }), n.current.observe(e), b(h(r == null ? void 0 : r.current)), () => {
         n.current && n.current.disconnect();
       };
-  }, [h]), /* @__PURE__ */ v("section", { className: i(l["card-trail"], E), children: [
-    /* @__PURE__ */ v(
+  }, [m]), /* @__PURE__ */ N("section", { className: i(c["card-trail"], z), children: [
+    /* @__PURE__ */ N(
       "header",
       {
         className: i(
-          l["card-trail-header"],
-          T
+          c["card-trail-header"],
+          L
         ),
         children: [
-          m && /* @__PURE__ */ s("h3", { className: l["card-trail-header-title"], children: m }),
-          A && w && /* @__PURE__ */ s(
-            $,
+          f && /* @__PURE__ */ s("h3", { className: c["card-trail-header-title"], children: f }),
+          y && k && /* @__PURE__ */ s(
+            K,
             {
               buttonsWrapperClassName: i(
-                l["card-trail-header-merged-button"],
-                L
+                c["card-trail-header-merged-button"],
+                W
               ),
               buttons: [
                 {
                   isIconButton: !0,
                   iconName: "ArrowLeft16px",
                   variant: "gray",
-                  onClick: D,
+                  onClick: R,
                   disabled: o.leftButton,
                   size: "s",
-                  ...c == null ? void 0 : c.leftButton
+                  ...l == null ? void 0 : l.leftButton
                 },
                 {
                   isIconButton: !0,
                   iconName: "ArrowRight16px",
                   variant: "gray",
-                  onClick: I,
+                  onClick: U,
                   size: "s",
                   disabled: o.rightButton,
-                  ...c == null ? void 0 : c.rightButton
+                  ...l == null ? void 0 : l.rightButton
                 }
               ]
             }
@@ -121,22 +123,22 @@ import '../../assets/CardTrail.css';const q = "_pointer_vv8gl_49", l = {
     /* @__PURE__ */ s(
       "ul",
       {
-        onScroll: z,
-        style: { gap: d },
-        className: i(l["card-trail-list"], k),
-        ref: W,
-        children: O.map(h, (t, e) => /* @__PURE__ */ s(
+        onScroll: M,
+        style: { gap: d, scrollPadding: `0 ${w}px` },
+        className: i(c["card-trail-list"], A),
+        ref: x,
+        children: $.map(m, (e, t) => /* @__PURE__ */ s(
           "li",
           {
-            onClick: M(e),
-            "data-active-card": e,
-            "data-testid": `card-trail-item-${e}`,
+            onClick: F(t),
+            "data-active-card": t,
+            "data-testid": `card-trail-item-${t}`,
             className: i(
-              l["card-trail-list-item"],
-              { [l.pointer]: _ },
-              S
+              c["card-trail-list-item"],
+              { [c.pointer]: C },
+              T
             ),
-            children: t
+            children: e
           }
         ))
       }
@@ -144,5 +146,5 @@ import '../../assets/CardTrail.css';const q = "_pointer_vv8gl_49", l = {
   ] });
 });
 export {
-  P as CardTrail
+  lr as CardTrail
 };

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

@@ -1,2 +1,4 @@
 export declare const DEFAULT_SPACE_BETWEEN = 10;
 export declare const DEFAULT_SCROLL_STEP = 1;
+export declare const DEFAULT_CARD_INDEX = 1;
+export declare const DEFAULT_DIVIDED = 1;

package/dist/components/CardTrail/constants.js

@@ -1,5 +1,7 @@
-const E = 10, L = 1;
+const E = 10, D = 1, _ = 1, A = 1;
 export {
-  L as DEFAULT_SCROLL_STEP,
+  _ as DEFAULT_CARD_INDEX,
+  A as DEFAULT_DIVIDED,
+  D as DEFAULT_SCROLL_STEP,
   E as DEFAULT_SPACE_BETWEEN
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.41.5",
+  "version": "1.41.6",
   "type": "module",
   "exports": {
     ".": {