mimir-ui-kit 1.41.1 → 1.41.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
._card-
|
|
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}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._buttons_8yyst_2{display:inline-flex}._merged-button_8yyst_6{--button-height: var(--button-height-m);--button-space: var(--mimir-control-space-xs)}._merged-button_8yyst_6:first-child{border-radius:0;border-top-left-radius:var(--mimir-control-radius);border-bottom-left-radius:var(--mimir-control-radius)}._merged-button_8yyst_6:last-child{border-radius:0;border-top-right-radius:var(--mimir-control-radius);border-bottom-right-radius:var(--mimir-control-radius)}._merged-button_8yyst_6:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover)}._merged-button_8yyst_6:active{color:var(--button-color-active);background:var(--button-bg-color-active)}._merged-button_8yyst_6._gray_8yyst_28{--button-bg-color: var(--black-5);--button-bg-color-hover: var(--black-5);--button-bg-color-active: var(--asphalt-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._merged-button_8yyst_6._white_8yyst_36{--button-bg-color: var(--white-normal);--button-bg-color-active: var(--asphalt-normal);--button-bg-color-hover: var(--white-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._merged-button_8yyst_6._transparent_8yyst_44{--button-bg-color: var(--black-5);--button-bg-color-hover: var(--black-5);--button-bg-color-active: var(--asphalt-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--light-text);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._merged-button_8yyst_6._is-icon_8yyst_53{width:var(--button-height);min-width:var(--button-height);padding:0}._merged-button_8yyst_6._is-icon_8yyst_53._s_8yyst_58{--button-height: 32px;width:32px;width:var(--button-height)}._merged-button_8yyst_6._is-icon_8yyst_53._m_8yyst_6{--button-height: 40px;width:40px;width:var(--button-height)}._merged-button_8yyst_6._one-button_8yyst_66{border-radius:var(--mimir-control-radius)}._merged-button_8yyst_6:disabled{--button-cursor: not-allowed;color:var(--disabled-color);background-color:var(--black-5)}._merged-button_8yyst_6:disabled:hover,._merged-button_8yyst_6:disabled:active,._merged-button_8yyst_6:disabled:focus{color:var(--disabled-color);background-color:var(--black-5);box-shadow:none}
|
|
@@ -1,105 +1,113 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as v, jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import { c as i } from "../../index-DIxK0V-G.js";
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { DEFAULT_SPACE_BETWEEN as
|
|
5
|
-
import { hasHorizontalScroll as
|
|
6
|
-
import { useMergeRefs as
|
|
7
|
-
import { useThrottledCallback as
|
|
8
|
-
import { MergedButton as
|
|
9
|
-
import '../../assets/CardTrail.css';const
|
|
10
|
-
"card-trail": "_card-
|
|
11
|
-
"card-trail-header": "_card-trail-
|
|
12
|
-
"card-trail-header-title": "_card-trail-header-
|
|
13
|
-
"card-trail-header-merged-button": "_card-trail-header-merged-
|
|
14
|
-
"card-trail-list": "_card-trail-
|
|
15
|
-
"card-trail-list-item": "_card-trail-list-
|
|
16
|
-
pointer:
|
|
17
|
-
},
|
|
3
|
+
import { forwardRef as I, useRef as p, useState as C, useEffect as x, Children as H } from "react";
|
|
4
|
+
import { DEFAULT_SPACE_BETWEEN as O, DEFAULT_SCROLL_STEP as R } from "./constants.js";
|
|
5
|
+
import { hasHorizontalScroll as u, isScrollAtEdge as b } from "./utils.js";
|
|
6
|
+
import { useMergeRefs as j } from "../../hooks/useMergeRefs/useMergeRefs.js";
|
|
7
|
+
import { useThrottledCallback as F } from "../../hooks/useThrottledCallback/index.js";
|
|
8
|
+
import { MergedButton as U } from "../MergedButton/MergedButton.js";
|
|
9
|
+
import '../../assets/CardTrail.css';const $ = "_pointer_vv8gl_49", l = {
|
|
10
|
+
"card-trail": "_card-trail_vv8gl_3",
|
|
11
|
+
"card-trail-header": "_card-trail-header_vv8gl_7",
|
|
12
|
+
"card-trail-header-title": "_card-trail-header-title_vv8gl_15",
|
|
13
|
+
"card-trail-header-merged-button": "_card-trail-header-merged-button_vv8gl_29",
|
|
14
|
+
"card-trail-list": "_card-trail-list_vv8gl_32",
|
|
15
|
+
"card-trail-list-item": "_card-trail-list-item_vv8gl_45",
|
|
16
|
+
pointer: $
|
|
17
|
+
}, Z = I((B, N) => {
|
|
18
18
|
const {
|
|
19
|
-
cardClassName:
|
|
20
|
-
cardTrailClassName:
|
|
21
|
-
cardTrailHeaderClassName:
|
|
22
|
-
cardTrailListClassName:
|
|
23
|
-
cardTrailMergedButtonClassName:
|
|
24
|
-
children:
|
|
19
|
+
cardClassName: S,
|
|
20
|
+
cardTrailClassName: E,
|
|
21
|
+
cardTrailHeaderClassName: T,
|
|
22
|
+
cardTrailListClassName: k,
|
|
23
|
+
cardTrailMergedButtonClassName: L,
|
|
24
|
+
children: h,
|
|
25
25
|
title: m,
|
|
26
|
-
spaceBetween:
|
|
27
|
-
scrollStep:
|
|
26
|
+
spaceBetween: d = O,
|
|
27
|
+
scrollStep: f = R,
|
|
28
28
|
mergedButtonProps: c,
|
|
29
|
-
scrollToCard:
|
|
30
|
-
} =
|
|
29
|
+
scrollToCard: _ = !1
|
|
30
|
+
} = B, r = p(null), n = p(null), [o, w] = C({
|
|
31
31
|
leftButton: !0,
|
|
32
32
|
rightButton: !1
|
|
33
|
-
}), [
|
|
34
|
-
() =>
|
|
35
|
-
),
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
leftButton: !
|
|
39
|
-
rightButton: !
|
|
33
|
+
}), [y, g] = C(
|
|
34
|
+
() => u(r == null ? void 0 : r.current)
|
|
35
|
+
), A = j(r, N), W = F(() => {
|
|
36
|
+
const t = !b(r.current, "left"), e = !b(r.current, "right");
|
|
37
|
+
w({
|
|
38
|
+
leftButton: !t,
|
|
39
|
+
rightButton: !e
|
|
40
40
|
});
|
|
41
|
-
}, 300),
|
|
41
|
+
}, 300), z = (t) => () => {
|
|
42
42
|
var a;
|
|
43
|
-
if (!
|
|
43
|
+
if (!_)
|
|
44
44
|
return;
|
|
45
|
-
const
|
|
46
|
-
`[data-active-card='${
|
|
45
|
+
const e = (a = r == null ? void 0 : r.current) == null ? void 0 : a.querySelector(
|
|
46
|
+
`[data-active-card='${t}']`
|
|
47
47
|
);
|
|
48
|
-
|
|
48
|
+
e && (e == null || e.scrollIntoView({
|
|
49
49
|
behavior: "smooth",
|
|
50
50
|
block: "nearest",
|
|
51
51
|
inline: "center"
|
|
52
52
|
}));
|
|
53
|
-
},
|
|
53
|
+
}, M = () => {
|
|
54
54
|
var a;
|
|
55
|
-
if (!
|
|
56
|
-
const
|
|
57
|
-
|
|
58
|
-
left: -(
|
|
55
|
+
if (!r.current || o.leftButton) return;
|
|
56
|
+
const t = r.current, e = ((a = t.children[0]) == null ? void 0 : a.clientWidth) ?? 0;
|
|
57
|
+
t.scrollBy({
|
|
58
|
+
left: -(e + d) * f,
|
|
59
59
|
behavior: "smooth"
|
|
60
60
|
});
|
|
61
|
-
},
|
|
61
|
+
}, D = () => {
|
|
62
62
|
var a;
|
|
63
|
-
if (!
|
|
64
|
-
const
|
|
65
|
-
|
|
66
|
-
left: (
|
|
63
|
+
if (!r.current || o.rightButton) return;
|
|
64
|
+
const t = r.current, e = ((a = t.children[0]) == null ? void 0 : a.clientWidth) ?? 0;
|
|
65
|
+
t.scrollBy({
|
|
66
|
+
left: (e + d) * f,
|
|
67
67
|
behavior: "smooth"
|
|
68
68
|
});
|
|
69
69
|
};
|
|
70
70
|
return x(() => {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
71
|
+
const t = r.current;
|
|
72
|
+
if (t)
|
|
73
|
+
return n.current = new ResizeObserver(() => {
|
|
74
|
+
g(u(r == null ? void 0 : r.current));
|
|
75
|
+
}), n.current.observe(t), g(u(r == null ? void 0 : r.current)), () => {
|
|
76
|
+
n.current && n.current.disconnect();
|
|
77
|
+
};
|
|
78
|
+
}, [h]), /* @__PURE__ */ v("section", { className: i(l["card-trail"], E), children: [
|
|
79
|
+
/* @__PURE__ */ v(
|
|
74
80
|
"header",
|
|
75
81
|
{
|
|
76
82
|
className: i(
|
|
77
83
|
l["card-trail-header"],
|
|
78
|
-
|
|
84
|
+
T
|
|
79
85
|
),
|
|
80
86
|
children: [
|
|
81
|
-
m && /* @__PURE__ */
|
|
82
|
-
|
|
83
|
-
|
|
87
|
+
m && /* @__PURE__ */ s("h3", { className: l["card-trail-header-title"], children: m }),
|
|
88
|
+
y && /* @__PURE__ */ s(
|
|
89
|
+
U,
|
|
84
90
|
{
|
|
85
91
|
buttonsWrapperClassName: i(
|
|
86
92
|
l["card-trail-header-merged-button"],
|
|
87
|
-
|
|
93
|
+
L
|
|
88
94
|
),
|
|
89
95
|
buttons: [
|
|
90
96
|
{
|
|
91
97
|
isIconButton: !0,
|
|
92
98
|
iconName: "ArrowLeft16px",
|
|
93
99
|
variant: "gray",
|
|
94
|
-
onClick:
|
|
100
|
+
onClick: M,
|
|
95
101
|
disabled: o.leftButton,
|
|
102
|
+
size: "s",
|
|
96
103
|
...c == null ? void 0 : c.leftButton
|
|
97
104
|
},
|
|
98
105
|
{
|
|
99
106
|
isIconButton: !0,
|
|
100
107
|
iconName: "ArrowRight16px",
|
|
101
108
|
variant: "gray",
|
|
102
|
-
onClick:
|
|
109
|
+
onClick: D,
|
|
110
|
+
size: "s",
|
|
103
111
|
disabled: o.rightButton,
|
|
104
112
|
...c == null ? void 0 : c.rightButton
|
|
105
113
|
}
|
|
@@ -109,25 +117,25 @@ import '../../assets/CardTrail.css';const q = "_pointer_pmokd_47", l = {
|
|
|
109
117
|
]
|
|
110
118
|
}
|
|
111
119
|
),
|
|
112
|
-
/* @__PURE__ */
|
|
120
|
+
/* @__PURE__ */ s(
|
|
113
121
|
"ul",
|
|
114
122
|
{
|
|
115
|
-
onScroll:
|
|
116
|
-
style: { gap:
|
|
117
|
-
className: i(l["card-trail-list"],
|
|
118
|
-
ref:
|
|
119
|
-
children: H.map(
|
|
123
|
+
onScroll: W,
|
|
124
|
+
style: { gap: d },
|
|
125
|
+
className: i(l["card-trail-list"], k),
|
|
126
|
+
ref: A,
|
|
127
|
+
children: H.map(h, (t, e) => /* @__PURE__ */ s(
|
|
120
128
|
"li",
|
|
121
129
|
{
|
|
122
|
-
onClick:
|
|
123
|
-
"data-active-card":
|
|
124
|
-
"data-testid": `card-trail-item-${
|
|
130
|
+
onClick: z(e),
|
|
131
|
+
"data-active-card": e,
|
|
132
|
+
"data-testid": `card-trail-item-${e}`,
|
|
125
133
|
className: i(
|
|
126
134
|
l["card-trail-list-item"],
|
|
127
|
-
{ [l.pointer]:
|
|
128
|
-
|
|
135
|
+
{ [l.pointer]: _ },
|
|
136
|
+
S
|
|
129
137
|
),
|
|
130
|
-
children:
|
|
138
|
+
children: t
|
|
131
139
|
}
|
|
132
140
|
))
|
|
133
141
|
}
|
|
@@ -135,5 +143,5 @@ import '../../assets/CardTrail.css';const q = "_pointer_pmokd_47", l = {
|
|
|
135
143
|
] });
|
|
136
144
|
});
|
|
137
145
|
export {
|
|
138
|
-
|
|
146
|
+
Z as CardTrail
|
|
139
147
|
};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { EMergedButtonVariantRound } from './constants';
|
|
2
|
-
import { TButtonProps } from '../Button';
|
|
2
|
+
import { TButtonProps, EButtonSize } from '../Button';
|
|
3
3
|
|
|
4
|
-
export type TButtonPropsWithoutStyles = Omit<TButtonProps, 'clear' | 'variant' | 'form'> & {
|
|
4
|
+
export type TButtonPropsWithoutStyles = Omit<TButtonProps, 'clear' | 'variant' | 'form' | 'size'> & {
|
|
5
5
|
variant?: `${EMergedButtonVariantRound}` | EMergedButtonVariantRound;
|
|
6
6
|
'data-testid'?: string;
|
|
7
|
+
size?: Exclude<EButtonSize, 'xl' | 'l' | 'ms' | 'xs' | 'xxl' | 'm-s'> | `${Exclude<EButtonSize, 'xl' | 'l' | 'ms' | 'xs' | 'xxl' | 'm-s'>}`;
|
|
7
8
|
};
|
|
8
|
-
type TProps = {
|
|
9
|
+
export type TProps = {
|
|
9
10
|
/**
|
|
10
11
|
* Массив кнопок, который отрисуется в контейнере
|
|
11
12
|
* */
|
|
@@ -19,4 +20,3 @@ type TProps = {
|
|
|
19
20
|
* Компонент объединенных кнопок, с округлением у первой и последней кнопки, а так же с другими variant, нежели у обычного Button.
|
|
20
21
|
*/
|
|
21
22
|
export declare const MergedButton: import('react').MemoExoticComponent<({ buttons, buttonsWrapperClassName }: TProps) => import("react/jsx-runtime").JSX.Element>;
|
|
22
|
-
export {};
|
|
@@ -1,50 +1,58 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { c as
|
|
3
|
-
import { memo as
|
|
4
|
-
import { EMergedButtonVariantRound as
|
|
5
|
-
import { Button as
|
|
6
|
-
import '../../assets/MergedButton.css';const
|
|
7
|
-
buttons:
|
|
8
|
-
"merged-button": "_merged-
|
|
2
|
+
import { c as r } from "../../index-DIxK0V-G.js";
|
|
3
|
+
import { memo as g } from "react";
|
|
4
|
+
import { EMergedButtonVariantRound as p } from "./constants.js";
|
|
5
|
+
import { Button as d } from "../Button/Button.js";
|
|
6
|
+
import '../../assets/MergedButton.css';const l = "_buttons_8yyst_2", B = "_gray_8yyst_28", I = "_white_8yyst_36", f = "_transparent_8yyst_44", h = "_s_8yyst_58", N = "_m_8yyst_6", o = {
|
|
7
|
+
buttons: l,
|
|
8
|
+
"merged-button": "_merged-button_8yyst_6",
|
|
9
9
|
gray: B,
|
|
10
10
|
white: I,
|
|
11
11
|
transparent: f,
|
|
12
|
-
"is-icon": "_is-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
"is-icon": "_is-icon_8yyst_53",
|
|
13
|
+
s: h,
|
|
14
|
+
m: N,
|
|
15
|
+
"one-button": "_one-button_8yyst_66"
|
|
16
|
+
}, v = g(
|
|
17
|
+
({ buttons: s, buttonsWrapperClassName: c }) => /* @__PURE__ */ e("div", { className: r(o.buttons, c), children: s.map(
|
|
16
18
|
({
|
|
17
|
-
variant: i =
|
|
19
|
+
variant: i = p.White,
|
|
18
20
|
disabled: n,
|
|
19
|
-
className:
|
|
21
|
+
className: m,
|
|
22
|
+
size: _ = "m",
|
|
20
23
|
...t
|
|
21
|
-
},
|
|
22
|
-
const
|
|
24
|
+
}, a) => {
|
|
25
|
+
const y = {
|
|
23
26
|
...t,
|
|
24
27
|
isIconButton: t.isIconButton ?? !1,
|
|
25
28
|
iconName: t.isIconButton ? t.iconName : void 0,
|
|
26
29
|
leftIcon: t.isIconButton ? void 0 : t.leftIcon,
|
|
27
30
|
rightIcon: t.isIconButton ? void 0 : t.rightIcon
|
|
28
|
-
},
|
|
29
|
-
|
|
30
|
-
[
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
}, u = r(
|
|
32
|
+
o["merged-button"],
|
|
33
|
+
o[_ ?? "m"],
|
|
34
|
+
m,
|
|
35
|
+
{
|
|
36
|
+
[o[i]]: !n,
|
|
37
|
+
[o.disabled]: n,
|
|
38
|
+
[o["is-icon"]]: t.isIconButton,
|
|
39
|
+
[o["one-button"]]: s.length === 1
|
|
40
|
+
}
|
|
41
|
+
);
|
|
34
42
|
return /* @__PURE__ */ e(
|
|
35
|
-
|
|
43
|
+
d,
|
|
36
44
|
{
|
|
37
45
|
clear: !0,
|
|
38
46
|
disabled: n,
|
|
39
|
-
className:
|
|
40
|
-
...
|
|
47
|
+
className: u,
|
|
48
|
+
...y
|
|
41
49
|
},
|
|
42
|
-
|
|
50
|
+
a
|
|
43
51
|
);
|
|
44
52
|
}
|
|
45
53
|
) })
|
|
46
54
|
);
|
|
47
|
-
|
|
55
|
+
v.displayName = "MergedButton";
|
|
48
56
|
export {
|
|
49
|
-
|
|
57
|
+
v as MergedButton
|
|
50
58
|
};
|