@alfalab/core-components-tabs 8.0.2 → 8.0.4
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.
- package/Component-63dec22f.d.ts +18 -1
- package/Component.mobile-ebda875c.d.ts +1 -1
- package/collapsible.js +2 -2
- package/components/primary-tablist/Component.collapsible.desktop.js +1 -1
- package/components/primary-tablist/Component.collapsible.js +1 -1
- package/components/primary-tablist/Component.collapsible.mobile.js +2 -2
- package/components/primary-tablist/Component.collapsible.responsive.js +3 -3
- package/components/primary-tablist/Component.desktop.js +1 -1
- package/components/primary-tablist/Component.mobile.js +2 -2
- package/components/primary-tablist/Component.responsive.js +3 -3
- package/components/primary-tablist/index.css +29 -29
- package/components/primary-tablist/mobile.css +32 -32
- package/components/scrollable-container/Component.js +1 -1
- package/components/scrollable-container/index.css +5 -5
- package/components/secondary-tablist/Component.desktop.js +1 -1
- package/components/secondary-tablist/Component.mobile.js +2 -2
- package/components/secondary-tablist/Component.responsive.js +2 -2
- package/components/secondary-tablist/index.css +11 -11
- package/components/secondary-tablist/mobile.css +13 -13
- package/components/tab/Component.js +1 -1
- package/components/tab/index.css +3 -3
- package/components/tabs/Component.collabsible.desktop.js +1 -1
- package/components/tabs/Component.collapsible.mobile.js +2 -2
- package/components/tabs/Component.collapsible.responsive.js +2 -2
- package/components/tabs/Component.desktop.js +2 -2
- package/components/tabs/Component.mobile.js +3 -3
- package/components/tabs/Component.responsive.js +3 -3
- package/cssm/Component-63dec22f.d.ts +18 -1
- package/cssm/Component.mobile-ebda875c.d.ts +1 -1
- package/cssm/components/primary-tablist/Component.collapsible.js +1 -1
- package/cssm/components/primary-tablist/Component.collapsible.responsive.js +1 -1
- package/cssm/components/primary-tablist/Component.responsive.js +1 -1
- package/cssm/components/secondary-tablist/Component.responsive.js +1 -1
- package/cssm/index-f12ee135.d.ts +9 -1
- package/cssm/shared-4cd3936b.d.ts +1 -28
- package/cssm/types-1b036d4b.d.ts +13 -0
- package/cssm/useSkeleton-ebda875c.d.ts +12 -0
- package/desktop.js +2 -2
- package/esm/Component-63dec22f.d.ts +18 -1
- package/esm/Component.mobile-ebda875c.d.ts +1 -1
- package/esm/collapsible.js +2 -2
- package/esm/components/primary-tablist/Component.collapsible.desktop.js +1 -1
- package/esm/components/primary-tablist/Component.collapsible.js +1 -1
- package/esm/components/primary-tablist/Component.collapsible.mobile.js +2 -2
- package/esm/components/primary-tablist/Component.collapsible.responsive.js +3 -3
- package/esm/components/primary-tablist/Component.desktop.js +1 -1
- package/esm/components/primary-tablist/Component.mobile.js +2 -2
- package/esm/components/primary-tablist/Component.responsive.js +3 -3
- package/esm/components/primary-tablist/index.css +29 -29
- package/esm/components/primary-tablist/mobile.css +32 -32
- package/esm/components/scrollable-container/Component.js +1 -1
- package/esm/components/scrollable-container/index.css +5 -5
- package/esm/components/secondary-tablist/Component.desktop.js +1 -1
- package/esm/components/secondary-tablist/Component.mobile.js +2 -2
- package/esm/components/secondary-tablist/Component.responsive.js +2 -2
- package/esm/components/secondary-tablist/index.css +11 -11
- package/esm/components/secondary-tablist/mobile.css +13 -13
- package/esm/components/tab/Component.js +1 -1
- package/esm/components/tab/index.css +3 -3
- package/esm/components/tabs/Component.collabsible.desktop.js +1 -1
- package/esm/components/tabs/Component.collapsible.mobile.js +2 -2
- package/esm/components/tabs/Component.collapsible.responsive.js +2 -2
- package/esm/components/tabs/Component.desktop.js +2 -2
- package/esm/components/tabs/Component.mobile.js +3 -3
- package/esm/components/tabs/Component.responsive.js +3 -3
- package/esm/desktop.js +2 -2
- package/esm/index-f12ee135.d.ts +9 -1
- package/esm/index.js +3 -3
- package/esm/index.module-8dec482b.js +4 -0
- package/esm/index.module-966b3998.js +4 -0
- package/esm/mobile.js +3 -3
- package/esm/mobile.module-39766406.js +4 -0
- package/esm/shared-4cd3936b.d.ts +1 -28
- package/esm/types-1b036d4b.d.ts +13 -0
- package/esm/useSkeleton-ebda875c.d.ts +12 -0
- package/index-f12ee135.d.ts +9 -1
- package/index.js +3 -3
- package/index.module-07185e4d.js +6 -0
- package/index.module-56e66dc4.js +6 -0
- package/mobile.js +3 -3
- package/{mobile.module-2c14d5d3.js → mobile.module-6c98e36e.js} +1 -1
- package/modern/Component-63dec22f.d.ts +18 -1
- package/modern/Component.mobile-ebda875c.d.ts +1 -1
- package/modern/collapsible.js +2 -2
- package/modern/components/primary-tablist/Component.collapsible.desktop.js +1 -1
- package/modern/components/primary-tablist/Component.collapsible.js +1 -1
- package/modern/components/primary-tablist/Component.collapsible.mobile.js +2 -2
- package/modern/components/primary-tablist/Component.collapsible.responsive.js +3 -3
- package/modern/components/primary-tablist/Component.desktop.js +1 -1
- package/modern/components/primary-tablist/Component.mobile.js +2 -2
- package/modern/components/primary-tablist/Component.responsive.js +3 -3
- package/modern/components/primary-tablist/index.css +29 -29
- package/modern/components/primary-tablist/mobile.css +32 -32
- package/modern/components/scrollable-container/Component.js +1 -1
- package/modern/components/scrollable-container/index.css +5 -5
- package/modern/components/secondary-tablist/Component.desktop.js +1 -1
- package/modern/components/secondary-tablist/Component.mobile.js +2 -2
- package/modern/components/secondary-tablist/Component.responsive.js +2 -2
- package/modern/components/secondary-tablist/index.css +11 -11
- package/modern/components/secondary-tablist/mobile.css +13 -13
- package/modern/components/tab/Component.js +1 -1
- package/modern/components/tab/index.css +3 -3
- package/modern/components/tabs/Component.collabsible.desktop.js +1 -1
- package/modern/components/tabs/Component.collapsible.mobile.js +2 -2
- package/modern/components/tabs/Component.collapsible.responsive.js +2 -2
- package/modern/components/tabs/Component.desktop.js +2 -2
- package/modern/components/tabs/Component.mobile.js +3 -3
- package/modern/components/tabs/Component.responsive.js +3 -3
- package/modern/desktop.js +2 -2
- package/modern/index-f12ee135.d.ts +9 -1
- package/modern/index.js +3 -3
- package/modern/index.module-9e555350.js +4 -0
- package/modern/index.module-d7578f28.js +4 -0
- package/modern/mobile.js +3 -3
- package/modern/mobile.module-90edca62.js +4 -0
- package/modern/shared-4cd3936b.d.ts +1 -28
- package/modern/types-1b036d4b.d.ts +13 -0
- package/modern/useSkeleton-ebda875c.d.ts +12 -0
- package/package.json +3 -3
- package/shared-4cd3936b.d.ts +1 -28
- package/src/components/primary-tablist/Component.collapsible.responsive.tsx +1 -1
- package/src/components/primary-tablist/Component.collapsible.tsx +1 -1
- package/src/components/primary-tablist/Component.responsive.tsx +1 -1
- package/src/components/secondary-tablist/Component.responsive.tsx +1 -1
- package/types-1b036d4b.d.ts +13 -0
- package/useSkeleton-ebda875c.d.ts +12 -0
- package/esm/index.module-049f9ac4.js +0 -4
- package/esm/index.module-14dc8ef8.js +0 -4
- package/esm/mobile.module-1655f441.js +0 -4
- package/index.module-23f5d47d.js +0 -6
- package/index.module-51a99123.js +0 -6
- package/modern/index.module-809d9d38.js +0 -4
- package/modern/index.module-e0adf3ca.js +0 -4
- package/modern/mobile.module-0e6fb7d7.js +0 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: gfrn8 */
|
|
2
2
|
:root {
|
|
3
3
|
}/* deprecated */:root {
|
|
4
4
|
--color-light-border-accent: #ef3124;
|
|
@@ -90,11 +90,11 @@
|
|
|
90
90
|
/* size l */
|
|
91
91
|
|
|
92
92
|
/* size xl */
|
|
93
|
-
}.
|
|
93
|
+
}.tabs__component_u0ax3 {
|
|
94
94
|
position: relative;
|
|
95
95
|
display: inline-flex;
|
|
96
96
|
min-width: 100%
|
|
97
|
-
}.
|
|
97
|
+
}.tabs__component_u0ax3:before {
|
|
98
98
|
content: '';
|
|
99
99
|
display: block;
|
|
100
100
|
position: absolute;
|
|
@@ -102,17 +102,17 @@
|
|
|
102
102
|
height: 1px;
|
|
103
103
|
width: 100%;
|
|
104
104
|
background-color: var(--primary-tablist-bottom-border-color);
|
|
105
|
-
}.
|
|
105
|
+
}.tabs__fullWidthScroll_u0ax3 {
|
|
106
106
|
min-width: calc(100% - 2 * var(--gap-m));
|
|
107
107
|
margin: 0 var(--gap-m);
|
|
108
|
-
}.
|
|
108
|
+
}.tabs__container_u0ax3 {
|
|
109
109
|
position: relative;
|
|
110
110
|
overflow: hidden;
|
|
111
111
|
|
|
112
112
|
/* focus-outline fix */
|
|
113
113
|
margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
|
|
114
114
|
padding: var(--gap-2xs) 0 var(--gap-2xs) var(--gap-2xs);
|
|
115
|
-
}.
|
|
115
|
+
}.tabs__title_u0ax3 {
|
|
116
116
|
display: flex;
|
|
117
117
|
align-items: center;
|
|
118
118
|
height: 100%;
|
|
@@ -129,76 +129,76 @@
|
|
|
129
129
|
user-select: none;
|
|
130
130
|
cursor: pointer;
|
|
131
131
|
outline: none
|
|
132
|
-
}.
|
|
132
|
+
}.tabs__title_u0ax3:not(.tabs__disabled_u0ax3):hover {
|
|
133
133
|
color: var(--primary-tablist-hover-color);
|
|
134
|
-
}.
|
|
134
|
+
}.tabs__focused_u0ax3 {
|
|
135
135
|
outline: 2px solid var(--focus-color);
|
|
136
136
|
outline-offset: 2px;
|
|
137
|
-
}.
|
|
137
|
+
}.tabs__collapsed_u0ax3 {
|
|
138
138
|
order: 99;
|
|
139
139
|
visibility: collapse;
|
|
140
|
-
}.
|
|
140
|
+
}.tabs__selected_u0ax3 {
|
|
141
141
|
cursor: default;
|
|
142
142
|
color: var(--primary-tablist-selected-color);
|
|
143
|
-
}.
|
|
143
|
+
}.tabs__disabled_u0ax3 {
|
|
144
144
|
cursor: var(--disabled-cursor);
|
|
145
145
|
color: var(--primary-tablist-disabled-color);
|
|
146
|
-
}.
|
|
146
|
+
}.tabs__line_u0ax3 {
|
|
147
147
|
position: absolute;
|
|
148
148
|
height: 3px;
|
|
149
149
|
bottom: 0;
|
|
150
150
|
left: 0;
|
|
151
151
|
background-color: var(--primary-tablist-line-color);
|
|
152
152
|
transition: transform 0.2s ease, width 0.2s ease;
|
|
153
|
-
}/* sizes */.
|
|
153
|
+
}/* sizes */.tabs__s_u0ax3 .tabs__title_u0ax3, .tabs__xs_u0ax3 .tabs__title_u0ax3, .tabs__xxs_u0ax3 .tabs__title_u0ax3 {
|
|
154
154
|
padding: var(--primary-tablist-s-padding);
|
|
155
155
|
font-size: var(--primary-tablist-s-font-size);
|
|
156
156
|
font-weight: var(--primary-tablist-s-font-weight);
|
|
157
157
|
font-family: var(--primary-tablist-s-font-family);
|
|
158
158
|
line-height: 24px;
|
|
159
|
-
}.
|
|
159
|
+
}.tabs__s_u0ax3 .tabs__title_u0ax3 + .tabs__title_u0ax3, .tabs__xs_u0ax3 .tabs__title_u0ax3 + .tabs__title_u0ax3, .tabs__xxs_u0ax3 .tabs__title_u0ax3 + .tabs__title_u0ax3 {
|
|
160
160
|
margin-left: var(--primary-tablist-s-gaps);
|
|
161
|
-
}.
|
|
161
|
+
}.tabs__s_u0ax3 .tabs__pickerWrapper_u0ax3, .tabs__xs_u0ax3 .tabs__pickerWrapper_u0ax3, .tabs__xxs_u0ax3 .tabs__pickerWrapper_u0ax3 {
|
|
162
162
|
margin-left: var(--primary-tablist-s-gaps);
|
|
163
|
-
}.
|
|
163
|
+
}.tabs__s_u0ax3 .tabs__option_u0ax3, .tabs__xs_u0ax3 .tabs__option_u0ax3, .tabs__xxs_u0ax3 .tabs__option_u0ax3 {
|
|
164
164
|
padding: 0;
|
|
165
|
-
}.
|
|
165
|
+
}.tabs__m_u0ax3 .tabs__title_u0ax3 {
|
|
166
166
|
padding: var(--primary-tablist-m-padding);
|
|
167
167
|
font-size: var(--primary-tablist-m-font-size);
|
|
168
168
|
font-weight: var(--primary-tablist-m-font-weight);
|
|
169
169
|
font-family: var(--primary-tablist-m-font-family);
|
|
170
170
|
line-height: 24px;
|
|
171
|
-
}.
|
|
171
|
+
}.tabs__m_u0ax3 .tabs__title_u0ax3 + .tabs__title_u0ax3 {
|
|
172
172
|
margin-left: var(--primary-tablist-m-gaps);
|
|
173
|
-
}.
|
|
173
|
+
}.tabs__m_u0ax3 .tabs__pickerWrapper_u0ax3 {
|
|
174
174
|
margin-left: var(--primary-tablist-m-gaps);
|
|
175
|
-
}.
|
|
175
|
+
}.tabs__m_u0ax3 .tabs__option_u0ax3 {
|
|
176
176
|
padding: 0;
|
|
177
|
-
}.
|
|
177
|
+
}.tabs__l_u0ax3 .tabs__title_u0ax3 {
|
|
178
178
|
padding: var(--primary-tablist-l-padding);
|
|
179
179
|
font-size: var(--primary-tablist-l-font-size);
|
|
180
180
|
font-weight: var(--primary-tablist-l-font-weight);
|
|
181
181
|
font-family: var(--primary-tablist-l-font-family);
|
|
182
182
|
line-height: 24px;
|
|
183
|
-
}.
|
|
183
|
+
}.tabs__l_u0ax3 .tabs__title_u0ax3 + .tabs__title_u0ax3 {
|
|
184
184
|
margin-left: var(--primary-tablist-l-gaps);
|
|
185
|
-
}.
|
|
185
|
+
}.tabs__l_u0ax3 .tabs__pickerWrapper_u0ax3 {
|
|
186
186
|
margin-left: var(--primary-tablist-l-gaps);
|
|
187
|
-
}.
|
|
187
|
+
}.tabs__l_u0ax3 .tabs__option_u0ax3 {
|
|
188
188
|
padding: 0;
|
|
189
|
-
}.
|
|
189
|
+
}.tabs__xl_u0ax3 .tabs__title_u0ax3 {
|
|
190
190
|
padding: var(--primary-tablist-xl-padding);
|
|
191
191
|
font-size: var(--primary-tablist-xl-font-size);
|
|
192
192
|
font-weight: var(--primary-tablist-xl-font-weight);
|
|
193
193
|
font-family: var(--primary-tablist-xl-font-family);
|
|
194
194
|
line-height: 32px;
|
|
195
|
-
}.
|
|
195
|
+
}.tabs__xl_u0ax3 .tabs__title_u0ax3 + .tabs__title_u0ax3 {
|
|
196
196
|
margin-left: var(--primary-tablist-xl-gaps);
|
|
197
|
-
}.
|
|
197
|
+
}.tabs__xl_u0ax3 .tabs__pickerWrapper_u0ax3 {
|
|
198
198
|
margin-left: var(--primary-tablist-xl-gaps);
|
|
199
|
-
}.
|
|
199
|
+
}.tabs__xl_u0ax3 .tabs__option_u0ax3 {
|
|
200
200
|
padding: 0;
|
|
201
|
-
}.
|
|
201
|
+
}.tabs__rightAddons_u0ax3 {
|
|
202
202
|
display: flex;
|
|
203
203
|
justify-content: center;
|
|
204
204
|
align-items: center;
|
|
@@ -1106,13 +1106,13 @@
|
|
|
1106
1106
|
|
|
1107
1107
|
/* size xl */
|
|
1108
1108
|
--secondary-tablist-xl-gaps: var(--gap-m);
|
|
1109
|
-
} .
|
|
1110
|
-
} .
|
|
1109
|
+
} .tabs__title_1p8jd {
|
|
1110
|
+
} .tabs__mobile_1p8jd .tabs__title_1p8jd {
|
|
1111
1111
|
padding: var(--primary-tablist-mobile-padding);
|
|
1112
1112
|
font-size: var(--primary-tablist-mobile-font-size);
|
|
1113
1113
|
font-weight: var(--primary-tablist-mobile-font-weight);
|
|
1114
1114
|
font-family: var(--primary-tablist-mobile-font-family);
|
|
1115
1115
|
line-height: var(--primary-tablist-mobile-line-height)
|
|
1116
|
-
} .
|
|
1116
|
+
} .tabs__mobile_1p8jd .tabs__title_1p8jd + .tabs__title_1p8jd {
|
|
1117
1117
|
margin-left: var(--primary-tablist-mobile-gaps);
|
|
1118
1118
|
}
|
|
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
|
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import computeScrollIntoView from 'compute-scroll-into-view';
|
|
4
4
|
|
|
5
|
-
const styles = {"container":"
|
|
5
|
+
const styles = {"container":"tabs__container_1oy30","fullWidthScroll":"tabs__fullWidthScroll_1oy30"};
|
|
6
6
|
require('./index.css')
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: d984n */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
/* size l */
|
|
43
43
|
|
|
44
44
|
/* size xl */
|
|
45
|
-
} .
|
|
45
|
+
} .tabs__container_1oy30 {
|
|
46
46
|
position: relative;
|
|
47
47
|
overflow-x: auto;
|
|
48
48
|
overflow-y: hidden;
|
|
@@ -52,10 +52,10 @@
|
|
|
52
52
|
/* focus-outline fix */
|
|
53
53
|
margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
|
|
54
54
|
padding: var(--gap-2xs) 0 var(--gap-2xs) var(--gap-2xs)
|
|
55
|
-
} .
|
|
55
|
+
} .tabs__container_1oy30::-webkit-scrollbar {
|
|
56
56
|
display: none;
|
|
57
|
-
} .
|
|
57
|
+
} .tabs__container_1oy30 > * {
|
|
58
58
|
flex-shrink: 0;
|
|
59
|
-
} .
|
|
59
|
+
} .tabs__fullWidthScroll_1oy30 {
|
|
60
60
|
margin: 0 var(--gap-m-neg);
|
|
61
61
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TagDesktop } from '@alfalab/core-components-tag/modern/desktop';
|
|
3
3
|
import { SecondaryTabList } from './Component.js';
|
|
4
|
-
import { c as commonStyles } from '../../index.module-
|
|
4
|
+
import { c as commonStyles } from '../../index.module-9e555350.js';
|
|
5
5
|
import 'classnames';
|
|
6
6
|
import '../../hooks/use-tabs.js';
|
|
7
7
|
import '@alfalab/core-components-shared/modern';
|
|
@@ -2,13 +2,13 @@ import React from 'react';
|
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { TagMobile } from '@alfalab/core-components-tag/modern/mobile';
|
|
4
4
|
import { SecondaryTabList } from './Component.js';
|
|
5
|
-
import { c as commonStyles } from '../../index.module-
|
|
5
|
+
import { c as commonStyles } from '../../index.module-9e555350.js';
|
|
6
6
|
import '../../hooks/use-tabs.js';
|
|
7
7
|
import '@alfalab/core-components-shared/modern';
|
|
8
8
|
import '../scrollable-container/Component.js';
|
|
9
9
|
import 'compute-scroll-into-view';
|
|
10
10
|
|
|
11
|
-
const mobileStyles = {"title":"
|
|
11
|
+
const mobileStyles = {"title":"tabs__title_4ytlm tabs__title_1067v","mobile":"tabs__mobile_4ytlm"};
|
|
12
12
|
require('./mobile.css')
|
|
13
13
|
|
|
14
14
|
const styles = {
|
|
@@ -9,10 +9,10 @@ import '../../hooks/use-tabs.js';
|
|
|
9
9
|
import '@alfalab/core-components-shared/modern';
|
|
10
10
|
import '../scrollable-container/Component.js';
|
|
11
11
|
import 'compute-scroll-into-view';
|
|
12
|
-
import '../../index.module-
|
|
12
|
+
import '../../index.module-9e555350.js';
|
|
13
13
|
import '@alfalab/core-components-tag/modern/mobile';
|
|
14
14
|
|
|
15
|
-
const SecondaryTabListResponsive = ({ size, defaultMatchMediaValue, fullWidthScroll, breakpoint =
|
|
15
|
+
const SecondaryTabListResponsive = ({ size, defaultMatchMediaValue, fullWidthScroll, breakpoint = 1024, ...restProps }) => {
|
|
16
16
|
const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
|
|
17
17
|
return isDesktop ? (React.createElement(SecondaryTabListDesktop, { size: size, ...restProps })) : (React.createElement(SecondaryTabListMobile, { fullWidthScroll: fullWidthScroll, ...restProps }));
|
|
18
18
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1a0ki */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -50,29 +50,29 @@
|
|
|
50
50
|
|
|
51
51
|
/* size xl */
|
|
52
52
|
--secondary-tablist-xl-gaps: var(--gap-m);
|
|
53
|
-
} .
|
|
53
|
+
} .tabs__component_1067v {
|
|
54
54
|
position: relative;
|
|
55
55
|
display: inline-flex;
|
|
56
|
-
} .
|
|
56
|
+
} .tabs__fullWidthScroll_1067v {
|
|
57
57
|
margin: 0 var(--gap-m);
|
|
58
|
-
} .
|
|
58
|
+
} .tabs__container_1067v {
|
|
59
59
|
overflow: hidden;
|
|
60
60
|
|
|
61
61
|
/* focus-outline fix */
|
|
62
62
|
margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
|
|
63
63
|
padding: var(--gap-2xs) 0 var(--gap-2xs) var(--gap-2xs);
|
|
64
|
-
} .
|
|
64
|
+
} .tabs__title_1067v {
|
|
65
65
|
white-space: nowrap;
|
|
66
|
-
} /* sizes */ .
|
|
66
|
+
} /* sizes */ .tabs__xxs_1067v .tabs__title_1067v + .tabs__title_1067v {
|
|
67
67
|
margin-left: var(--secondary-tablist-xxs-gaps);
|
|
68
|
-
} .
|
|
68
|
+
} .tabs__xs_1067v .tabs__title_1067v + .tabs__title_1067v {
|
|
69
69
|
margin-left: var(--secondary-tablist-xs-gaps);
|
|
70
|
-
} .
|
|
70
|
+
} .tabs__s_1067v .tabs__title_1067v + .tabs__title_1067v {
|
|
71
71
|
margin-left: var(--secondary-tablist-s-gaps);
|
|
72
|
-
} .
|
|
72
|
+
} .tabs__m_1067v .tabs__title_1067v + .tabs__title_1067v {
|
|
73
73
|
margin-left: var(--secondary-tablist-m-gaps);
|
|
74
|
-
} .
|
|
74
|
+
} .tabs__l_1067v .tabs__title_1067v + .tabs__title_1067v {
|
|
75
75
|
margin-left: var(--secondary-tablist-l-gaps);
|
|
76
|
-
} .
|
|
76
|
+
} .tabs__xl_1067v .tabs__title_1067v + .tabs__title_1067v {
|
|
77
77
|
margin-left: var(--secondary-tablist-xl-gaps);
|
|
78
78
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: bly95 */
|
|
2
2
|
:root {
|
|
3
3
|
}/* deprecated */:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
}:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -51,30 +51,30 @@
|
|
|
51
51
|
|
|
52
52
|
/* size xl */
|
|
53
53
|
--secondary-tablist-xl-gaps: var(--gap-m);
|
|
54
|
-
}.
|
|
54
|
+
}.tabs__component_1067v {
|
|
55
55
|
position: relative;
|
|
56
56
|
display: inline-flex;
|
|
57
|
-
}.
|
|
57
|
+
}.tabs__fullWidthScroll_1067v {
|
|
58
58
|
margin: 0 var(--gap-m);
|
|
59
|
-
}.
|
|
59
|
+
}.tabs__container_1067v {
|
|
60
60
|
overflow: hidden;
|
|
61
61
|
|
|
62
62
|
/* focus-outline fix */
|
|
63
63
|
margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
|
|
64
64
|
padding: var(--gap-2xs) 0 var(--gap-2xs) var(--gap-2xs);
|
|
65
|
-
}.
|
|
65
|
+
}.tabs__title_1067v {
|
|
66
66
|
white-space: nowrap;
|
|
67
|
-
}/* sizes */.
|
|
67
|
+
}/* sizes */.tabs__xxs_1067v .tabs__title_1067v + .tabs__title_1067v {
|
|
68
68
|
margin-left: var(--secondary-tablist-xxs-gaps);
|
|
69
|
-
}.
|
|
69
|
+
}.tabs__xs_1067v .tabs__title_1067v + .tabs__title_1067v {
|
|
70
70
|
margin-left: var(--secondary-tablist-xs-gaps);
|
|
71
|
-
}.
|
|
71
|
+
}.tabs__s_1067v .tabs__title_1067v + .tabs__title_1067v {
|
|
72
72
|
margin-left: var(--secondary-tablist-s-gaps);
|
|
73
|
-
}.
|
|
73
|
+
}.tabs__m_1067v .tabs__title_1067v + .tabs__title_1067v {
|
|
74
74
|
margin-left: var(--secondary-tablist-m-gaps);
|
|
75
|
-
}.
|
|
75
|
+
}.tabs__l_1067v .tabs__title_1067v + .tabs__title_1067v {
|
|
76
76
|
margin-left: var(--secondary-tablist-l-gaps);
|
|
77
|
-
}.
|
|
77
|
+
}.tabs__xl_1067v .tabs__title_1067v + .tabs__title_1067v {
|
|
78
78
|
margin-left: var(--secondary-tablist-xl-gaps);
|
|
79
79
|
} :root {
|
|
80
80
|
--color-dark-indigo: #0b1f35;
|
|
@@ -979,7 +979,7 @@
|
|
|
979
979
|
|
|
980
980
|
/* size xl */
|
|
981
981
|
--secondary-tablist-xl-gaps: var(--gap-m);
|
|
982
|
-
} .
|
|
983
|
-
} .
|
|
982
|
+
} .tabs__title_4ytlm {
|
|
983
|
+
} .tabs__mobile_4ytlm .tabs__title_4ytlm + .tabs__title_4ytlm {
|
|
984
984
|
margin-left: var(--secondary-tablist-mobile-gaps);
|
|
985
985
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
|
|
4
|
-
const styles = {"component":"
|
|
4
|
+
const styles = {"component":"tabs__component_154wx","hidden":"tabs__hidden_154wx"};
|
|
5
5
|
require('./index.css')
|
|
6
6
|
|
|
7
7
|
const Tab = ({ children, hidden, className, disabled, dataTestId }) => children ? (React.createElement("div", { className: cn(styles.component, {
|
|
@@ -15,7 +15,7 @@ import '../../hooks/use-tabs.js';
|
|
|
15
15
|
import '@alfalab/core-components-shared/modern';
|
|
16
16
|
import '../../synthetic-events.js';
|
|
17
17
|
import '../title/Component.js';
|
|
18
|
-
import '../../index.module-
|
|
18
|
+
import '../../index.module-d7578f28.js';
|
|
19
19
|
|
|
20
20
|
const TabsCollapsibleDesktop = ({ ...restProps }) => (React.createElement(Tabs, { TabList: CollapsiblePrimaryTabListDesktop, ...restProps }));
|
|
21
21
|
|
|
@@ -15,8 +15,8 @@ import '../../hooks/use-tabs.js';
|
|
|
15
15
|
import '@alfalab/core-components-shared/modern';
|
|
16
16
|
import '../../synthetic-events.js';
|
|
17
17
|
import '../title/Component.js';
|
|
18
|
-
import '../../index.module-
|
|
19
|
-
import '../../mobile.module-
|
|
18
|
+
import '../../index.module-d7578f28.js';
|
|
19
|
+
import '../../mobile.module-90edca62.js';
|
|
20
20
|
|
|
21
21
|
const TabsCollapsibleMobile = ({ ...restProps }) => (React.createElement(Tabs, { TabList: CollapsiblePrimaryTabListMobile, ...restProps }));
|
|
22
22
|
|
|
@@ -16,9 +16,9 @@ import '../../hooks/use-tabs.js';
|
|
|
16
16
|
import '@alfalab/core-components-shared/modern';
|
|
17
17
|
import '../../synthetic-events.js';
|
|
18
18
|
import '../title/Component.js';
|
|
19
|
-
import '../../index.module-
|
|
19
|
+
import '../../index.module-d7578f28.js';
|
|
20
20
|
import '../primary-tablist/Component.collapsible.mobile.js';
|
|
21
|
-
import '../../mobile.module-
|
|
21
|
+
import '../../mobile.module-90edca62.js';
|
|
22
22
|
|
|
23
23
|
const TabsCollapsibleResponsive = ({ ...restProps }) => (React.createElement(Tabs, { TabList: CollapsiblePrimaryTabListResponsive, ...restProps }));
|
|
24
24
|
|
|
@@ -10,10 +10,10 @@ import '@alfalab/core-components-shared/modern';
|
|
|
10
10
|
import '../scrollable-container/Component.js';
|
|
11
11
|
import 'compute-scroll-into-view';
|
|
12
12
|
import '../title/Component.js';
|
|
13
|
-
import '../../index.module-
|
|
13
|
+
import '../../index.module-d7578f28.js';
|
|
14
14
|
import '@alfalab/core-components-tag/modern/desktop';
|
|
15
15
|
import '../secondary-tablist/Component.js';
|
|
16
|
-
import '../../index.module-
|
|
16
|
+
import '../../index.module-9e555350.js';
|
|
17
17
|
|
|
18
18
|
const views = {
|
|
19
19
|
primary: PrimaryTabListDesktop,
|
|
@@ -10,11 +10,11 @@ import '@alfalab/core-components-shared/modern';
|
|
|
10
10
|
import '../scrollable-container/Component.js';
|
|
11
11
|
import 'compute-scroll-into-view';
|
|
12
12
|
import '../title/Component.js';
|
|
13
|
-
import '../../index.module-
|
|
14
|
-
import '../../mobile.module-
|
|
13
|
+
import '../../index.module-d7578f28.js';
|
|
14
|
+
import '../../mobile.module-90edca62.js';
|
|
15
15
|
import '@alfalab/core-components-tag/modern/mobile';
|
|
16
16
|
import '../secondary-tablist/Component.js';
|
|
17
|
-
import '../../index.module-
|
|
17
|
+
import '../../index.module-9e555350.js';
|
|
18
18
|
|
|
19
19
|
const views = {
|
|
20
20
|
primary: PrimaryTabListMobile,
|
|
@@ -12,13 +12,13 @@ import '@alfalab/core-components-shared/modern';
|
|
|
12
12
|
import '../scrollable-container/Component.js';
|
|
13
13
|
import 'compute-scroll-into-view';
|
|
14
14
|
import '../title/Component.js';
|
|
15
|
-
import '../../index.module-
|
|
15
|
+
import '../../index.module-d7578f28.js';
|
|
16
16
|
import '../primary-tablist/Component.mobile.js';
|
|
17
|
-
import '../../mobile.module-
|
|
17
|
+
import '../../mobile.module-90edca62.js';
|
|
18
18
|
import '../secondary-tablist/Component.desktop.js';
|
|
19
19
|
import '@alfalab/core-components-tag/modern/desktop';
|
|
20
20
|
import '../secondary-tablist/Component.js';
|
|
21
|
-
import '../../index.module-
|
|
21
|
+
import '../../index.module-9e555350.js';
|
|
22
22
|
import '../secondary-tablist/Component.mobile.js';
|
|
23
23
|
import '@alfalab/core-components-tag/modern/mobile';
|
|
24
24
|
|
package/modern/desktop.js
CHANGED
|
@@ -11,8 +11,8 @@ import '@alfalab/core-components-shared/modern';
|
|
|
11
11
|
import './components/scrollable-container/Component.js';
|
|
12
12
|
import 'compute-scroll-into-view';
|
|
13
13
|
import './components/title/Component.js';
|
|
14
|
-
import './index.module-
|
|
14
|
+
import './index.module-d7578f28.js';
|
|
15
15
|
import '@alfalab/core-components-tag/modern/desktop';
|
|
16
16
|
import './components/secondary-tablist/Component.js';
|
|
17
|
-
import './index.module-
|
|
17
|
+
import './index.module-9e555350.js';
|
|
18
18
|
import './components/tabs/Component.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react-transition-group" />
|
|
2
2
|
/// <reference types="react" />
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { HTMLAttributes, ReactNode, RefObject, FC } from "react";
|
|
4
|
+
import { HTMLAttributes, ReactElement, ReactNode, RefObject, FC } from "react";
|
|
5
5
|
import { TransitionProps } from "react-transition-group/Transition";
|
|
6
6
|
import { BaseModalProps } from "./index-bdb4c6b9";
|
|
7
7
|
import { NavigationBarProps } from "./index-c76d6398";
|
|
@@ -92,6 +92,14 @@ type BottomSheetProps = {
|
|
|
92
92
|
* Дополнительный класс для обертки модального окна
|
|
93
93
|
*/
|
|
94
94
|
modalWrapperClassName?: string;
|
|
95
|
+
/**
|
|
96
|
+
* Дополнительный класс для маркера
|
|
97
|
+
*/
|
|
98
|
+
swipeableMarkerClassName?: string;
|
|
99
|
+
/**
|
|
100
|
+
* Кастомный маркер
|
|
101
|
+
*/
|
|
102
|
+
swipeableMarker?: ReactElement;
|
|
95
103
|
/**
|
|
96
104
|
* TransitionProps, прокидываются в компонент CSSTransitionProps.
|
|
97
105
|
*/
|
package/modern/index.js
CHANGED
|
@@ -13,13 +13,13 @@ import '@alfalab/core-components-shared/modern';
|
|
|
13
13
|
import './components/scrollable-container/Component.js';
|
|
14
14
|
import 'compute-scroll-into-view';
|
|
15
15
|
import './components/title/Component.js';
|
|
16
|
-
import './index.module-
|
|
16
|
+
import './index.module-d7578f28.js';
|
|
17
17
|
import './components/primary-tablist/Component.mobile.js';
|
|
18
|
-
import './mobile.module-
|
|
18
|
+
import './mobile.module-90edca62.js';
|
|
19
19
|
import './components/secondary-tablist/Component.desktop.js';
|
|
20
20
|
import '@alfalab/core-components-tag/modern/desktop';
|
|
21
21
|
import './components/secondary-tablist/Component.js';
|
|
22
|
-
import './index.module-
|
|
22
|
+
import './index.module-9e555350.js';
|
|
23
23
|
import './components/secondary-tablist/Component.mobile.js';
|
|
24
24
|
import '@alfalab/core-components-tag/modern/mobile';
|
|
25
25
|
import './components/tabs/Component.js';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
const commonStyles = {"component":"tabs__component_1067v","fullWidthScroll":"tabs__fullWidthScroll_1067v","container":"tabs__container_1067v","title":"tabs__title_1067v","xxs":"tabs__xxs_1067v","xs":"tabs__xs_1067v","s":"tabs__s_1067v","m":"tabs__m_1067v","l":"tabs__l_1067v","xl":"tabs__xl_1067v"};
|
|
2
|
+
require('./components/secondary-tablist/index.css')
|
|
3
|
+
|
|
4
|
+
export { commonStyles as c };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
const commonStyles = {"component":"tabs__component_u0ax3","fullWidthScroll":"tabs__fullWidthScroll_u0ax3","container":"tabs__container_u0ax3","title":"tabs__title_u0ax3","disabled":"tabs__disabled_u0ax3","focused":"tabs__focused_u0ax3","collapsed":"tabs__collapsed_u0ax3","selected":"tabs__selected_u0ax3","line":"tabs__line_u0ax3","s":"tabs__s_u0ax3","xs":"tabs__xs_u0ax3","xxs":"tabs__xxs_u0ax3","pickerWrapper":"tabs__pickerWrapper_u0ax3","option":"tabs__option_u0ax3","m":"tabs__m_u0ax3","l":"tabs__l_u0ax3","xl":"tabs__xl_u0ax3","rightAddons":"tabs__rightAddons_u0ax3"};
|
|
2
|
+
require('./components/primary-tablist/index.css')
|
|
3
|
+
|
|
4
|
+
export { commonStyles as c };
|
package/modern/mobile.js
CHANGED
|
@@ -11,9 +11,9 @@ import '@alfalab/core-components-shared/modern';
|
|
|
11
11
|
import './components/scrollable-container/Component.js';
|
|
12
12
|
import 'compute-scroll-into-view';
|
|
13
13
|
import './components/title/Component.js';
|
|
14
|
-
import './index.module-
|
|
15
|
-
import './mobile.module-
|
|
14
|
+
import './index.module-d7578f28.js';
|
|
15
|
+
import './mobile.module-90edca62.js';
|
|
16
16
|
import '@alfalab/core-components-tag/modern/mobile';
|
|
17
17
|
import './components/secondary-tablist/Component.js';
|
|
18
|
-
import './index.module-
|
|
18
|
+
import './index.module-9e555350.js';
|
|
19
19
|
import './components/tabs/Component.js';
|
|
@@ -93,33 +93,6 @@ type AdditionalMobileProps = {
|
|
|
93
93
|
};
|
|
94
94
|
type SelectMobileProps = Omit<BaseSelectProps, "Checkmark" | "onScroll"> & AdditionalMobileProps;
|
|
95
95
|
declare const SelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & AdditionalMobileProps & React.RefAttributes<unknown>>;
|
|
96
|
-
type SkeletonProps = {
|
|
97
|
-
/**
|
|
98
|
-
* Флаг, явно задающий состояние, при котором контент закрывается прелоадером
|
|
99
|
-
*/
|
|
100
|
-
visible?: boolean;
|
|
101
|
-
/**
|
|
102
|
-
* Флаг явного включения анимации скелета
|
|
103
|
-
*/
|
|
104
|
-
animate?: boolean;
|
|
105
|
-
/**
|
|
106
|
-
* Дополнительный класс
|
|
107
|
-
*/
|
|
108
|
-
className?: string;
|
|
109
|
-
/**
|
|
110
|
-
* Дополнительные инлайн стили
|
|
111
|
-
*/
|
|
112
|
-
style?: React.CSSProperties;
|
|
113
|
-
/**
|
|
114
|
-
* Идентификатор для систем автоматизированного тестирования
|
|
115
|
-
*/
|
|
116
|
-
dataTestId?: string;
|
|
117
|
-
/**
|
|
118
|
-
* Дочерние элементы.
|
|
119
|
-
*/
|
|
120
|
-
children?: ReactNode;
|
|
121
|
-
};
|
|
122
|
-
declare const Skeleton: React.FC<SkeletonProps>;
|
|
123
96
|
type FooterProps = {
|
|
124
97
|
handleClear?: () => void;
|
|
125
98
|
handleApply?: () => void;
|
|
@@ -128,7 +101,7 @@ type FooterProps = {
|
|
|
128
101
|
declare const Footer: ({ handleApply, handleClear, showClear }: FooterProps) => React.JSX.Element;
|
|
129
102
|
export * from "./index-ebda875c";
|
|
130
103
|
export * from "./Component-5e1b8383";
|
|
131
|
-
export { useSelectWithLoading, useLazyLoading, AdditionalMobileProps, SelectMobileProps, SelectMobile,
|
|
104
|
+
export { useSelectWithLoading, useLazyLoading, AdditionalMobileProps, SelectMobileProps, SelectMobile, FooterProps, Footer };
|
|
132
105
|
export * from "./hook-9ea9e32c";
|
|
133
106
|
export * from "./typings-5e1b8383";
|
|
134
107
|
export * from "./utils-5e1b8383";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
|
|
2
|
+
type WidthUnit = number | string;
|
|
3
|
+
type TextSkeletonProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Кол-во строк текста
|
|
6
|
+
*/
|
|
7
|
+
rows?: number;
|
|
8
|
+
/**
|
|
9
|
+
* Ширина строки
|
|
10
|
+
*/
|
|
11
|
+
width?: WidthUnit | WidthUnit[];
|
|
12
|
+
};
|
|
13
|
+
export { TextElementType, TextSkeletonProps };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { TextSkeletonProps } from "./types-1b036d4b";
|
|
4
|
+
type SkeletonProps = {
|
|
5
|
+
wrapperClassName?: string;
|
|
6
|
+
dataTestId?: string;
|
|
7
|
+
};
|
|
8
|
+
declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeletonProps): {
|
|
9
|
+
renderSkeleton: (props: SkeletonProps) => React.JSX.Element | null;
|
|
10
|
+
textRef: React.RefObject<HTMLElement>;
|
|
11
|
+
};
|
|
12
|
+
export { useSkeleton };
|