@alfalab/core-components-tabs 8.1.5 → 8.1.6
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/collapsible.js +1 -1
- package/components/primary-tablist/Component.collapsible.js +1 -1
- package/components/primary-tablist/Component.desktop.js +3 -2
- package/components/primary-tablist/Component.js +14 -4
- package/components/primary-tablist/Component.mobile.js +4 -3
- package/components/primary-tablist/Component.responsive.js +3 -2
- package/components/primary-tablist/index.css +30 -30
- package/components/primary-tablist/mobile.css +33 -33
- package/components/scroll-controls/Component.js +1 -1
- package/components/scroll-controls/index.css +14 -14
- package/components/scrollable-container/Component.js +1 -1
- package/components/scrollable-container/index.css +6 -6
- 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 +1 -1
- 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.collapsible.js +1 -1
- package/components/tabs/Component.desktop.js +4 -3
- package/components/tabs/Component.mobile.js +4 -3
- package/components/tabs/Component.responsive.js +4 -3
- package/cssm/components/primary-tablist/Component.desktop.js +2 -1
- package/cssm/components/primary-tablist/Component.js +14 -4
- package/cssm/components/primary-tablist/Component.mobile.js +2 -1
- package/cssm/components/primary-tablist/Component.responsive.js +2 -1
- package/cssm/components/tabs/Component.desktop.js +2 -1
- package/cssm/components/tabs/Component.mobile.js +2 -1
- package/cssm/components/tabs/Component.responsive.js +2 -1
- package/cssm/desktop.js +2 -1
- package/cssm/index.js +2 -1
- package/cssm/mobile.js +2 -1
- package/desktop.js +4 -3
- package/esm/collapsible.js +1 -1
- package/esm/components/primary-tablist/Component.collapsible.js +1 -1
- package/esm/components/primary-tablist/Component.desktop.js +3 -2
- package/esm/components/primary-tablist/Component.js +14 -4
- package/esm/components/primary-tablist/Component.mobile.js +4 -3
- package/esm/components/primary-tablist/Component.responsive.js +3 -2
- package/esm/components/primary-tablist/index.css +30 -30
- package/esm/components/primary-tablist/mobile.css +33 -33
- package/esm/components/scroll-controls/Component.js +1 -1
- package/esm/components/scroll-controls/index.css +14 -14
- package/esm/components/scrollable-container/Component.js +1 -1
- package/esm/components/scrollable-container/index.css +6 -6
- 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 +1 -1
- 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.collapsible.js +1 -1
- package/esm/components/tabs/Component.desktop.js +4 -3
- package/esm/components/tabs/Component.mobile.js +4 -3
- package/esm/components/tabs/Component.responsive.js +4 -3
- package/esm/desktop.js +4 -3
- package/esm/index.js +4 -3
- package/esm/index.module-072f7a03.js +4 -0
- package/esm/index.module-64994e8d.js +4 -0
- package/esm/mobile.js +4 -3
- package/index-ebda875c.d.ts +21 -86
- package/index.js +4 -3
- package/index.module-5f6b14c2.js +6 -0
- package/index.module-e4f107c7.js +6 -0
- package/mobile.js +4 -3
- package/modern/collapsible.js +1 -1
- package/modern/components/primary-tablist/Component.collapsible.js +1 -1
- package/modern/components/primary-tablist/Component.desktop.js +3 -2
- package/modern/components/primary-tablist/Component.js +14 -4
- package/modern/components/primary-tablist/Component.mobile.js +4 -3
- package/modern/components/primary-tablist/Component.responsive.js +3 -2
- package/modern/components/primary-tablist/index.css +30 -30
- package/modern/components/primary-tablist/mobile.css +33 -33
- package/modern/components/scroll-controls/Component.js +1 -1
- package/modern/components/scroll-controls/index.css +14 -14
- package/modern/components/scrollable-container/Component.js +1 -1
- package/modern/components/scrollable-container/index.css +6 -6
- 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 +1 -1
- 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.collapsible.js +1 -1
- package/modern/components/tabs/Component.desktop.js +4 -3
- package/modern/components/tabs/Component.mobile.js +4 -3
- package/modern/components/tabs/Component.responsive.js +4 -3
- package/modern/desktop.js +4 -3
- package/modern/index.js +4 -3
- package/modern/index.module-5e57388f.js +4 -0
- package/modern/index.module-633b90f6.js +4 -0
- package/modern/mobile.js +4 -3
- package/package.json +2 -30
- package/src/components/primary-tablist/Component.tsx +18 -3
- package/esm/index.module-55063a9a.js +0 -4
- package/esm/index.module-82cf190f.js +0 -4
- package/index.module-869888c7.js +0 -6
- package/index.module-d1432e9e.js +0 -6
- package/modern/index.module-2d531cfb.js +0 -4
- package/modern/index.module-7b0d0808.js +0 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: ayhu5 */
|
|
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_18whg {
|
|
55
55
|
position: relative;
|
|
56
56
|
display: inline-flex;
|
|
57
|
-
}.
|
|
57
|
+
}.tabs__fullWidthScroll_18whg {
|
|
58
58
|
margin: 0 var(--gap-m);
|
|
59
|
-
}.
|
|
59
|
+
}.tabs__container_18whg {
|
|
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_18whg {
|
|
66
66
|
white-space: nowrap;
|
|
67
|
-
}/* sizes */.
|
|
67
|
+
}/* sizes */.tabs__xxs_18whg .tabs__title_18whg + .tabs__title_18whg {
|
|
68
68
|
margin-left: var(--secondary-tablist-xxs-gaps);
|
|
69
|
-
}.
|
|
69
|
+
}.tabs__xs_18whg .tabs__title_18whg + .tabs__title_18whg {
|
|
70
70
|
margin-left: var(--secondary-tablist-xs-gaps);
|
|
71
|
-
}.
|
|
71
|
+
}.tabs__s_18whg .tabs__title_18whg + .tabs__title_18whg {
|
|
72
72
|
margin-left: var(--secondary-tablist-s-gaps);
|
|
73
|
-
}.
|
|
73
|
+
}.tabs__m_18whg .tabs__title_18whg + .tabs__title_18whg {
|
|
74
74
|
margin-left: var(--secondary-tablist-m-gaps);
|
|
75
|
-
}.
|
|
75
|
+
}.tabs__l_18whg .tabs__title_18whg + .tabs__title_18whg {
|
|
76
76
|
margin-left: var(--secondary-tablist-l-gaps);
|
|
77
|
-
}.
|
|
77
|
+
}.tabs__xl_18whg .tabs__title_18whg + .tabs__title_18whg {
|
|
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_1a8it {
|
|
983
|
+
} .tabs__mobile_1a8it .tabs__title_1a8it + .tabs__title_1a8it {
|
|
984
984
|
margin-left: var(--secondary-tablist-mobile-gaps);
|
|
985
985
|
}
|
|
@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
11
11
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
12
12
|
|
|
13
|
-
var styles = {"component":"
|
|
13
|
+
var styles = {"component":"tabs__component_1uww4","hidden":"tabs__hidden_1uww4"};
|
|
14
14
|
require('./index.css')
|
|
15
15
|
|
|
16
16
|
var Tab = function (_a) {
|
package/components/tab/index.css
CHANGED
|
@@ -19,7 +19,7 @@ require('../../hooks/use-tabs.js');
|
|
|
19
19
|
require('@alfalab/core-components-shared');
|
|
20
20
|
require('../../synthetic-events.js');
|
|
21
21
|
require('../title/Component.js');
|
|
22
|
-
require('../../index.module-
|
|
22
|
+
require('../../index.module-5f6b14c2.js');
|
|
23
23
|
|
|
24
24
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
25
25
|
|
|
@@ -8,10 +8,11 @@ var components_primaryTablist_Component_desktop = require('../primary-tablist/Co
|
|
|
8
8
|
var components_secondaryTablist_Component_desktop = require('../secondary-tablist/Component.desktop.js');
|
|
9
9
|
var components_tabs_Component = require('./Component.js');
|
|
10
10
|
require('../primary-tablist/Component.js');
|
|
11
|
+
require('@juggle/resize-observer');
|
|
11
12
|
require('classnames');
|
|
12
13
|
require('@alfalab/core-components-keyboard-focusable');
|
|
13
|
-
require('../../hooks/use-tabs.js');
|
|
14
14
|
require('@alfalab/core-components-shared');
|
|
15
|
+
require('../../hooks/use-tabs.js');
|
|
15
16
|
require('../scrollable-container/Component.js');
|
|
16
17
|
require('compute-scroll-into-view');
|
|
17
18
|
require('../scroll-controls/Component.js');
|
|
@@ -21,10 +22,10 @@ require('@alfalab/icons-glyph/ChevronLeftMIcon');
|
|
|
21
22
|
require('@alfalab/icons-glyph/ChevronRightMIcon');
|
|
22
23
|
require('../scroll-controls/utils.js');
|
|
23
24
|
require('../title/Component.js');
|
|
24
|
-
require('../../index.module-
|
|
25
|
+
require('../../index.module-5f6b14c2.js');
|
|
25
26
|
require('@alfalab/core-components-tag/desktop');
|
|
26
27
|
require('../secondary-tablist/Component.js');
|
|
27
|
-
require('../../index.module-
|
|
28
|
+
require('../../index.module-e4f107c7.js');
|
|
28
29
|
|
|
29
30
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
30
31
|
|
|
@@ -9,9 +9,10 @@ var components_secondaryTablist_Component_mobile = require('../secondary-tablist
|
|
|
9
9
|
var components_tabs_Component = require('./Component.js');
|
|
10
10
|
require('classnames');
|
|
11
11
|
require('../primary-tablist/Component.js');
|
|
12
|
+
require('@juggle/resize-observer');
|
|
12
13
|
require('@alfalab/core-components-keyboard-focusable');
|
|
13
|
-
require('../../hooks/use-tabs.js');
|
|
14
14
|
require('@alfalab/core-components-shared');
|
|
15
|
+
require('../../hooks/use-tabs.js');
|
|
15
16
|
require('../scrollable-container/Component.js');
|
|
16
17
|
require('compute-scroll-into-view');
|
|
17
18
|
require('../scroll-controls/Component.js');
|
|
@@ -21,10 +22,10 @@ require('@alfalab/icons-glyph/ChevronLeftMIcon');
|
|
|
21
22
|
require('@alfalab/icons-glyph/ChevronRightMIcon');
|
|
22
23
|
require('../scroll-controls/utils.js');
|
|
23
24
|
require('../title/Component.js');
|
|
24
|
-
require('../../index.module-
|
|
25
|
+
require('../../index.module-5f6b14c2.js');
|
|
25
26
|
require('@alfalab/core-components-tag/mobile');
|
|
26
27
|
require('../secondary-tablist/Component.js');
|
|
27
|
-
require('../../index.module-
|
|
28
|
+
require('../../index.module-e4f107c7.js');
|
|
28
29
|
|
|
29
30
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
30
31
|
|
|
@@ -10,10 +10,11 @@ var components_tabs_Component = require('./Component.js');
|
|
|
10
10
|
require('@alfalab/core-components-mq');
|
|
11
11
|
require('../primary-tablist/Component.desktop.js');
|
|
12
12
|
require('../primary-tablist/Component.js');
|
|
13
|
+
require('@juggle/resize-observer');
|
|
13
14
|
require('classnames');
|
|
14
15
|
require('@alfalab/core-components-keyboard-focusable');
|
|
15
|
-
require('../../hooks/use-tabs.js');
|
|
16
16
|
require('@alfalab/core-components-shared');
|
|
17
|
+
require('../../hooks/use-tabs.js');
|
|
17
18
|
require('../scrollable-container/Component.js');
|
|
18
19
|
require('compute-scroll-into-view');
|
|
19
20
|
require('../scroll-controls/Component.js');
|
|
@@ -23,12 +24,12 @@ require('@alfalab/icons-glyph/ChevronLeftMIcon');
|
|
|
23
24
|
require('@alfalab/icons-glyph/ChevronRightMIcon');
|
|
24
25
|
require('../scroll-controls/utils.js');
|
|
25
26
|
require('../title/Component.js');
|
|
26
|
-
require('../../index.module-
|
|
27
|
+
require('../../index.module-5f6b14c2.js');
|
|
27
28
|
require('../primary-tablist/Component.mobile.js');
|
|
28
29
|
require('../secondary-tablist/Component.desktop.js');
|
|
29
30
|
require('@alfalab/core-components-tag/desktop');
|
|
30
31
|
require('../secondary-tablist/Component.js');
|
|
31
|
-
require('../../index.module-
|
|
32
|
+
require('../../index.module-e4f107c7.js');
|
|
32
33
|
require('../secondary-tablist/Component.mobile.js');
|
|
33
34
|
require('@alfalab/core-components-tag/mobile');
|
|
34
35
|
|
|
@@ -6,10 +6,11 @@ var tslib = require('tslib');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var components_primaryTablist_Component = require('./Component.js');
|
|
8
8
|
var styles = require('./index.module.css');
|
|
9
|
+
require('@juggle/resize-observer');
|
|
9
10
|
require('classnames');
|
|
10
11
|
require('@alfalab/core-components-keyboard-focusable/cssm');
|
|
11
|
-
require('../../hooks/use-tabs.js');
|
|
12
12
|
require('@alfalab/core-components-shared/cssm');
|
|
13
|
+
require('../../hooks/use-tabs.js');
|
|
13
14
|
require('../scrollable-container/Component.js');
|
|
14
15
|
require('compute-scroll-into-view');
|
|
15
16
|
require('../scroll-controls/Component.js');
|
|
@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
6
|
var React = require('react');
|
|
7
|
+
var resizeObserver = require('@juggle/resize-observer');
|
|
7
8
|
var cn = require('classnames');
|
|
8
9
|
var coreComponentsKeyboardFocusable = require('@alfalab/core-components-keyboard-focusable/cssm');
|
|
10
|
+
var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
|
|
9
11
|
var hooks_useTabs = require('../../hooks/use-tabs.js');
|
|
10
12
|
var components_scrollableContainer_Component = require('../scrollable-container/Component.js');
|
|
11
13
|
var components_title_Component = require('../title/Component.js');
|
|
12
|
-
require('@alfalab/core-components-shared/cssm');
|
|
13
14
|
require('compute-scroll-into-view');
|
|
14
15
|
require('../scroll-controls/Component.js');
|
|
15
16
|
require('lodash.debounce');
|
|
@@ -34,10 +35,19 @@ var PrimaryTabList = function (_a) {
|
|
|
34
35
|
onChange: onChange,
|
|
35
36
|
}), selectedTab = _f.selectedTab, focusedTab = _f.focusedTab, getTabListItemProps = _f.getTabListItemProps;
|
|
36
37
|
React.useEffect(function () {
|
|
37
|
-
if (selectedTab
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
if (selectedTab) {
|
|
39
|
+
var updateLineWidth = function () {
|
|
40
|
+
if (lineRef.current) {
|
|
41
|
+
lineRef.current.style.width = "".concat(selectedTab.offsetWidth, "px");
|
|
42
|
+
lineRef.current.style.transform = "translateX(".concat(selectedTab.offsetLeft, "px)");
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
var ResizeObserver_1 = window.ResizeObserver || resizeObserver.ResizeObserver;
|
|
46
|
+
var observer_1 = new ResizeObserver_1(updateLineWidth);
|
|
47
|
+
observer_1.observe(selectedTab);
|
|
48
|
+
return function () { return observer_1.disconnect(); };
|
|
40
49
|
}
|
|
50
|
+
return coreComponentsShared.fnUtils.noop;
|
|
41
51
|
}, [selectedTab]);
|
|
42
52
|
var renderContent = function () {
|
|
43
53
|
var _a;
|
|
@@ -8,9 +8,10 @@ var cn = require('classnames');
|
|
|
8
8
|
var components_primaryTablist_Component = require('./Component.js');
|
|
9
9
|
var styles$1 = require('./index.module.css');
|
|
10
10
|
var mobileStyles = require('./mobile.module.css');
|
|
11
|
+
require('@juggle/resize-observer');
|
|
11
12
|
require('@alfalab/core-components-keyboard-focusable/cssm');
|
|
12
|
-
require('../../hooks/use-tabs.js');
|
|
13
13
|
require('@alfalab/core-components-shared/cssm');
|
|
14
|
+
require('../../hooks/use-tabs.js');
|
|
14
15
|
require('../scrollable-container/Component.js');
|
|
15
16
|
require('compute-scroll-into-view');
|
|
16
17
|
require('../scroll-controls/Component.js');
|
|
@@ -8,10 +8,11 @@ var coreComponentsMq = require('@alfalab/core-components-mq/cssm');
|
|
|
8
8
|
var components_primaryTablist_Component_desktop = require('./Component.desktop.js');
|
|
9
9
|
var components_primaryTablist_Component_mobile = require('./Component.mobile.js');
|
|
10
10
|
require('./Component.js');
|
|
11
|
+
require('@juggle/resize-observer');
|
|
11
12
|
require('classnames');
|
|
12
13
|
require('@alfalab/core-components-keyboard-focusable/cssm');
|
|
13
|
-
require('../../hooks/use-tabs.js');
|
|
14
14
|
require('@alfalab/core-components-shared/cssm');
|
|
15
|
+
require('../../hooks/use-tabs.js');
|
|
15
16
|
require('../scrollable-container/Component.js');
|
|
16
17
|
require('compute-scroll-into-view');
|
|
17
18
|
require('../scroll-controls/Component.js');
|
|
@@ -8,10 +8,11 @@ var components_primaryTablist_Component_desktop = require('../primary-tablist/Co
|
|
|
8
8
|
var components_secondaryTablist_Component_desktop = require('../secondary-tablist/Component.desktop.js');
|
|
9
9
|
var components_tabs_Component = require('./Component.js');
|
|
10
10
|
require('../primary-tablist/Component.js');
|
|
11
|
+
require('@juggle/resize-observer');
|
|
11
12
|
require('classnames');
|
|
12
13
|
require('@alfalab/core-components-keyboard-focusable/cssm');
|
|
13
|
-
require('../../hooks/use-tabs.js');
|
|
14
14
|
require('@alfalab/core-components-shared/cssm');
|
|
15
|
+
require('../../hooks/use-tabs.js');
|
|
15
16
|
require('../scrollable-container/Component.js');
|
|
16
17
|
require('compute-scroll-into-view');
|
|
17
18
|
require('../scroll-controls/Component.js');
|
|
@@ -9,9 +9,10 @@ var components_secondaryTablist_Component_mobile = require('../secondary-tablist
|
|
|
9
9
|
var components_tabs_Component = require('./Component.js');
|
|
10
10
|
require('classnames');
|
|
11
11
|
require('../primary-tablist/Component.js');
|
|
12
|
+
require('@juggle/resize-observer');
|
|
12
13
|
require('@alfalab/core-components-keyboard-focusable/cssm');
|
|
13
|
-
require('../../hooks/use-tabs.js');
|
|
14
14
|
require('@alfalab/core-components-shared/cssm');
|
|
15
|
+
require('../../hooks/use-tabs.js');
|
|
15
16
|
require('../scrollable-container/Component.js');
|
|
16
17
|
require('compute-scroll-into-view');
|
|
17
18
|
require('../scroll-controls/Component.js');
|
|
@@ -10,10 +10,11 @@ var components_tabs_Component = require('./Component.js');
|
|
|
10
10
|
require('@alfalab/core-components-mq/cssm');
|
|
11
11
|
require('../primary-tablist/Component.desktop.js');
|
|
12
12
|
require('../primary-tablist/Component.js');
|
|
13
|
+
require('@juggle/resize-observer');
|
|
13
14
|
require('classnames');
|
|
14
15
|
require('@alfalab/core-components-keyboard-focusable/cssm');
|
|
15
|
-
require('../../hooks/use-tabs.js');
|
|
16
16
|
require('@alfalab/core-components-shared/cssm');
|
|
17
|
+
require('../../hooks/use-tabs.js');
|
|
17
18
|
require('../scrollable-container/Component.js');
|
|
18
19
|
require('compute-scroll-into-view');
|
|
19
20
|
require('../scroll-controls/Component.js');
|
package/cssm/desktop.js
CHANGED
|
@@ -9,10 +9,11 @@ var components_tabs_Component_desktop = require('./components/tabs/Component.des
|
|
|
9
9
|
require('tslib');
|
|
10
10
|
require('react');
|
|
11
11
|
require('./components/primary-tablist/Component.js');
|
|
12
|
+
require('@juggle/resize-observer');
|
|
12
13
|
require('classnames');
|
|
13
14
|
require('@alfalab/core-components-keyboard-focusable/cssm');
|
|
14
|
-
require('./hooks/use-tabs.js');
|
|
15
15
|
require('@alfalab/core-components-shared/cssm');
|
|
16
|
+
require('./hooks/use-tabs.js');
|
|
16
17
|
require('./components/scrollable-container/Component.js');
|
|
17
18
|
require('compute-scroll-into-view');
|
|
18
19
|
require('./components/scroll-controls/Component.js');
|
package/cssm/index.js
CHANGED
|
@@ -11,10 +11,11 @@ require('react');
|
|
|
11
11
|
require('@alfalab/core-components-mq/cssm');
|
|
12
12
|
require('./components/primary-tablist/Component.desktop.js');
|
|
13
13
|
require('./components/primary-tablist/Component.js');
|
|
14
|
+
require('@juggle/resize-observer');
|
|
14
15
|
require('classnames');
|
|
15
16
|
require('@alfalab/core-components-keyboard-focusable/cssm');
|
|
16
|
-
require('./hooks/use-tabs.js');
|
|
17
17
|
require('@alfalab/core-components-shared/cssm');
|
|
18
|
+
require('./hooks/use-tabs.js');
|
|
18
19
|
require('./components/scrollable-container/Component.js');
|
|
19
20
|
require('compute-scroll-into-view');
|
|
20
21
|
require('./components/scroll-controls/Component.js');
|
package/cssm/mobile.js
CHANGED
|
@@ -10,9 +10,10 @@ require('tslib');
|
|
|
10
10
|
require('react');
|
|
11
11
|
require('classnames');
|
|
12
12
|
require('./components/primary-tablist/Component.js');
|
|
13
|
+
require('@juggle/resize-observer');
|
|
13
14
|
require('@alfalab/core-components-keyboard-focusable/cssm');
|
|
14
|
-
require('./hooks/use-tabs.js');
|
|
15
15
|
require('@alfalab/core-components-shared/cssm');
|
|
16
|
+
require('./hooks/use-tabs.js');
|
|
16
17
|
require('./components/scrollable-container/Component.js');
|
|
17
18
|
require('compute-scroll-into-view');
|
|
18
19
|
require('./components/scroll-controls/Component.js');
|
package/desktop.js
CHANGED
|
@@ -9,10 +9,11 @@ var components_tabs_Component_desktop = require('./components/tabs/Component.des
|
|
|
9
9
|
require('tslib');
|
|
10
10
|
require('react');
|
|
11
11
|
require('./components/primary-tablist/Component.js');
|
|
12
|
+
require('@juggle/resize-observer');
|
|
12
13
|
require('classnames');
|
|
13
14
|
require('@alfalab/core-components-keyboard-focusable');
|
|
14
|
-
require('./hooks/use-tabs.js');
|
|
15
15
|
require('@alfalab/core-components-shared');
|
|
16
|
+
require('./hooks/use-tabs.js');
|
|
16
17
|
require('./components/scrollable-container/Component.js');
|
|
17
18
|
require('compute-scroll-into-view');
|
|
18
19
|
require('./components/scroll-controls/Component.js');
|
|
@@ -22,10 +23,10 @@ require('@alfalab/icons-glyph/ChevronLeftMIcon');
|
|
|
22
23
|
require('@alfalab/icons-glyph/ChevronRightMIcon');
|
|
23
24
|
require('./components/scroll-controls/utils.js');
|
|
24
25
|
require('./components/title/Component.js');
|
|
25
|
-
require('./index.module-
|
|
26
|
+
require('./index.module-5f6b14c2.js');
|
|
26
27
|
require('@alfalab/core-components-tag/desktop');
|
|
27
28
|
require('./components/secondary-tablist/Component.js');
|
|
28
|
-
require('./index.module-
|
|
29
|
+
require('./index.module-e4f107c7.js');
|
|
29
30
|
require('./components/tabs/Component.js');
|
|
30
31
|
|
|
31
32
|
|
package/esm/collapsible.js
CHANGED
|
@@ -16,5 +16,5 @@ import './hooks/use-tabs.js';
|
|
|
16
16
|
import '@alfalab/core-components-shared/esm';
|
|
17
17
|
import './synthetic-events.js';
|
|
18
18
|
import './components/title/Component.js';
|
|
19
|
-
import './index.module-
|
|
19
|
+
import './index.module-072f7a03.js';
|
|
20
20
|
import './components/tabs/Component.js';
|
|
@@ -7,7 +7,7 @@ import { PickerButtonDesktop } from '@alfalab/core-components-picker-button/esm/
|
|
|
7
7
|
import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
|
|
8
8
|
import { createSyntheticMouseEvent } from '../../synthetic-events.js';
|
|
9
9
|
import { Title } from '../title/Component.js';
|
|
10
|
-
import { c as commonStyles } from '../../index.module-
|
|
10
|
+
import { c as commonStyles } from '../../index.module-072f7a03.js';
|
|
11
11
|
import '@alfalab/core-components-mq/esm';
|
|
12
12
|
import '../../hooks/use-collapsible-elements.js';
|
|
13
13
|
import '@juggle/resize-observer';
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { __rest, __assign } from 'tslib';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { PrimaryTabList } from './Component.js';
|
|
4
|
-
import { c as commonStyles } from '../../index.module-
|
|
4
|
+
import { c as commonStyles } from '../../index.module-072f7a03.js';
|
|
5
|
+
import '@juggle/resize-observer';
|
|
5
6
|
import 'classnames';
|
|
6
7
|
import '@alfalab/core-components-keyboard-focusable/esm';
|
|
7
|
-
import '../../hooks/use-tabs.js';
|
|
8
8
|
import '@alfalab/core-components-shared/esm';
|
|
9
|
+
import '../../hooks/use-tabs.js';
|
|
9
10
|
import '../scrollable-container/Component.js';
|
|
10
11
|
import 'compute-scroll-into-view';
|
|
11
12
|
import '../scroll-controls/Component.js';
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { __rest, __assign } from 'tslib';
|
|
2
2
|
import React, { useRef, useEffect } from 'react';
|
|
3
|
+
import { ResizeObserver } from '@juggle/resize-observer';
|
|
3
4
|
import cn from 'classnames';
|
|
4
5
|
import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable/esm';
|
|
6
|
+
import { fnUtils } from '@alfalab/core-components-shared/esm';
|
|
5
7
|
import { useTabs } from '../../hooks/use-tabs.js';
|
|
6
8
|
import { ScrollableContainer } from '../scrollable-container/Component.js';
|
|
7
9
|
import { Title } from '../title/Component.js';
|
|
8
|
-
import '@alfalab/core-components-shared/esm';
|
|
9
10
|
import 'compute-scroll-into-view';
|
|
10
11
|
import '../scroll-controls/Component.js';
|
|
11
12
|
import 'lodash.debounce';
|
|
@@ -23,10 +24,19 @@ var PrimaryTabList = function (_a) {
|
|
|
23
24
|
onChange: onChange,
|
|
24
25
|
}), selectedTab = _f.selectedTab, focusedTab = _f.focusedTab, getTabListItemProps = _f.getTabListItemProps;
|
|
25
26
|
useEffect(function () {
|
|
26
|
-
if (selectedTab
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
if (selectedTab) {
|
|
28
|
+
var updateLineWidth = function () {
|
|
29
|
+
if (lineRef.current) {
|
|
30
|
+
lineRef.current.style.width = "".concat(selectedTab.offsetWidth, "px");
|
|
31
|
+
lineRef.current.style.transform = "translateX(".concat(selectedTab.offsetLeft, "px)");
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
var ResizeObserver_1 = window.ResizeObserver || ResizeObserver;
|
|
35
|
+
var observer_1 = new ResizeObserver_1(updateLineWidth);
|
|
36
|
+
observer_1.observe(selectedTab);
|
|
37
|
+
return function () { return observer_1.disconnect(); };
|
|
29
38
|
}
|
|
39
|
+
return fnUtils.noop;
|
|
30
40
|
}, [selectedTab]);
|
|
31
41
|
var renderContent = function () {
|
|
32
42
|
var _a;
|
|
@@ -2,10 +2,11 @@ import { __assign, __rest } from 'tslib';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { PrimaryTabList } from './Component.js';
|
|
5
|
-
import { c as commonStyles } from '../../index.module-
|
|
5
|
+
import { c as commonStyles } from '../../index.module-072f7a03.js';
|
|
6
|
+
import '@juggle/resize-observer';
|
|
6
7
|
import '@alfalab/core-components-keyboard-focusable/esm';
|
|
7
|
-
import '../../hooks/use-tabs.js';
|
|
8
8
|
import '@alfalab/core-components-shared/esm';
|
|
9
|
+
import '../../hooks/use-tabs.js';
|
|
9
10
|
import '../scrollable-container/Component.js';
|
|
10
11
|
import 'compute-scroll-into-view';
|
|
11
12
|
import '../scroll-controls/Component.js';
|
|
@@ -16,7 +17,7 @@ import '@alfalab/icons-glyph/ChevronRightMIcon';
|
|
|
16
17
|
import '../scroll-controls/utils.js';
|
|
17
18
|
import '../title/Component.js';
|
|
18
19
|
|
|
19
|
-
var mobileStyles = {"title":"
|
|
20
|
+
var mobileStyles = {"title":"tabs__title_1amkw tabs__title_u6di4","mobile":"tabs__mobile_1amkw"};
|
|
20
21
|
require('./mobile.css')
|
|
21
22
|
|
|
22
23
|
var styles = __assign(__assign({}, commonStyles), mobileStyles);
|
|
@@ -4,10 +4,11 @@ import { useMatchMedia } from '@alfalab/core-components-mq/esm';
|
|
|
4
4
|
import { PrimaryTabListDesktop } from './Component.desktop.js';
|
|
5
5
|
import { PrimaryTabListMobile } from './Component.mobile.js';
|
|
6
6
|
import './Component.js';
|
|
7
|
+
import '@juggle/resize-observer';
|
|
7
8
|
import 'classnames';
|
|
8
9
|
import '@alfalab/core-components-keyboard-focusable/esm';
|
|
9
|
-
import '../../hooks/use-tabs.js';
|
|
10
10
|
import '@alfalab/core-components-shared/esm';
|
|
11
|
+
import '../../hooks/use-tabs.js';
|
|
11
12
|
import '../scrollable-container/Component.js';
|
|
12
13
|
import 'compute-scroll-into-view';
|
|
13
14
|
import '../scroll-controls/Component.js';
|
|
@@ -17,7 +18,7 @@ import '@alfalab/icons-glyph/ChevronLeftMIcon';
|
|
|
17
18
|
import '@alfalab/icons-glyph/ChevronRightMIcon';
|
|
18
19
|
import '../scroll-controls/utils.js';
|
|
19
20
|
import '../title/Component.js';
|
|
20
|
-
import '../../index.module-
|
|
21
|
+
import '../../index.module-072f7a03.js';
|
|
21
22
|
|
|
22
23
|
var PrimaryTabListResponsive = function (_a) {
|
|
23
24
|
var size = _a.size, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, fullWidthScroll = _a.fullWidthScroll, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["size", "breakpoint", "fullWidthScroll", "defaultMatchMediaValue"]);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1q408 */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-border-accent: #ef3124;
|
|
@@ -83,11 +83,11 @@
|
|
|
83
83
|
/* size l */
|
|
84
84
|
|
|
85
85
|
/* size xl */
|
|
86
|
-
} .
|
|
86
|
+
} .tabs__component_u6di4 {
|
|
87
87
|
position: relative;
|
|
88
88
|
display: inline-flex;
|
|
89
89
|
min-width: 100%
|
|
90
|
-
} .
|
|
90
|
+
} .tabs__component_u6di4:before {
|
|
91
91
|
content: '';
|
|
92
92
|
display: block;
|
|
93
93
|
position: absolute;
|
|
@@ -95,17 +95,17 @@
|
|
|
95
95
|
height: 1px;
|
|
96
96
|
width: 100%;
|
|
97
97
|
background-color: var(--primary-tablist-bottom-border-color);
|
|
98
|
-
} .
|
|
98
|
+
} .tabs__fullWidthScroll_u6di4 {
|
|
99
99
|
min-width: calc(100% - 2 * var(--gap-m));
|
|
100
100
|
margin: 0 var(--gap-m);
|
|
101
|
-
} .
|
|
101
|
+
} .tabs__container_u6di4 {
|
|
102
102
|
position: relative;
|
|
103
103
|
overflow: hidden;
|
|
104
104
|
|
|
105
105
|
/* focus-outline fix */
|
|
106
106
|
margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
|
|
107
107
|
padding: var(--gap-2xs) 0 var(--gap-2xs) var(--gap-2xs);
|
|
108
|
-
} .
|
|
108
|
+
} .tabs__title_u6di4 {
|
|
109
109
|
display: flex;
|
|
110
110
|
align-items: center;
|
|
111
111
|
height: 100%;
|
|
@@ -121,78 +121,78 @@
|
|
|
121
121
|
-webkit-user-select: none;
|
|
122
122
|
user-select: none;
|
|
123
123
|
outline: none
|
|
124
|
-
} .
|
|
124
|
+
} .tabs__title_u6di4:not(.tabs__disabled_u6di4):hover {
|
|
125
125
|
color: var(--primary-tablist-hover-color);
|
|
126
|
-
} .
|
|
126
|
+
} .tabs__focused_u6di4 {
|
|
127
127
|
outline: 2px solid var(--focus-color);
|
|
128
128
|
outline-offset: 2px;
|
|
129
|
-
} .
|
|
129
|
+
} .tabs__collapsed_u6di4 {
|
|
130
130
|
order: 99;
|
|
131
131
|
visibility: collapse;
|
|
132
|
-
} .
|
|
132
|
+
} .tabs__selected_u6di4 {
|
|
133
133
|
cursor: default;
|
|
134
134
|
color: var(--primary-tablist-selected-color);
|
|
135
|
-
} .
|
|
135
|
+
} .tabs__disabled_u6di4 {
|
|
136
136
|
cursor: var(--disabled-cursor);
|
|
137
137
|
color: var(--primary-tablist-disabled-color);
|
|
138
|
-
} .
|
|
138
|
+
} .tabs__line_u6di4 {
|
|
139
139
|
position: absolute;
|
|
140
140
|
height: 3px;
|
|
141
141
|
bottom: 0;
|
|
142
142
|
left: 0;
|
|
143
143
|
background-color: var(--primary-tablist-line-color);
|
|
144
144
|
transition: transform 0.2s ease, width 0.2s ease;
|
|
145
|
-
} .
|
|
145
|
+
} .tabs__option_u6di4 {
|
|
146
146
|
color: var(--color-light-text-primary);
|
|
147
|
-
} /* sizes */ .
|
|
147
|
+
} /* sizes */ .tabs__s_u6di4 .tabs__title_u6di4, .tabs__xs_u6di4 .tabs__title_u6di4, .tabs__xxs_u6di4 .tabs__title_u6di4 {
|
|
148
148
|
padding: var(--primary-tablist-s-padding);
|
|
149
149
|
font-size: var(--primary-tablist-s-font-size);
|
|
150
150
|
font-weight: var(--primary-tablist-s-font-weight);
|
|
151
151
|
font-family: var(--primary-tablist-s-font-family);
|
|
152
152
|
line-height: 24px;
|
|
153
|
-
} .
|
|
153
|
+
} .tabs__s_u6di4 .tabs__title_u6di4 + .tabs__title_u6di4, .tabs__xs_u6di4 .tabs__title_u6di4 + .tabs__title_u6di4, .tabs__xxs_u6di4 .tabs__title_u6di4 + .tabs__title_u6di4 {
|
|
154
154
|
margin-left: var(--primary-tablist-s-gaps);
|
|
155
|
-
} .
|
|
155
|
+
} .tabs__s_u6di4 .tabs__pickerWrapper_u6di4, .tabs__xs_u6di4 .tabs__pickerWrapper_u6di4, .tabs__xxs_u6di4 .tabs__pickerWrapper_u6di4 {
|
|
156
156
|
margin-left: var(--primary-tablist-s-gaps);
|
|
157
|
-
} .
|
|
157
|
+
} .tabs__s_u6di4 .tabs__option_u6di4, .tabs__xs_u6di4 .tabs__option_u6di4, .tabs__xxs_u6di4 .tabs__option_u6di4 {
|
|
158
158
|
padding: 0;
|
|
159
|
-
} .
|
|
159
|
+
} .tabs__m_u6di4 .tabs__title_u6di4 {
|
|
160
160
|
padding: var(--primary-tablist-m-padding);
|
|
161
161
|
font-size: var(--primary-tablist-m-font-size);
|
|
162
162
|
font-weight: var(--primary-tablist-m-font-weight);
|
|
163
163
|
font-family: var(--primary-tablist-m-font-family);
|
|
164
164
|
line-height: 24px;
|
|
165
|
-
} .
|
|
165
|
+
} .tabs__m_u6di4 .tabs__title_u6di4 + .tabs__title_u6di4 {
|
|
166
166
|
margin-left: var(--primary-tablist-m-gaps);
|
|
167
|
-
} .
|
|
167
|
+
} .tabs__m_u6di4 .tabs__pickerWrapper_u6di4 {
|
|
168
168
|
margin-left: var(--primary-tablist-m-gaps);
|
|
169
|
-
} .
|
|
169
|
+
} .tabs__m_u6di4 .tabs__option_u6di4 {
|
|
170
170
|
padding: 0;
|
|
171
|
-
} .
|
|
171
|
+
} .tabs__l_u6di4 .tabs__title_u6di4 {
|
|
172
172
|
padding: var(--primary-tablist-l-padding);
|
|
173
173
|
font-size: var(--primary-tablist-l-font-size);
|
|
174
174
|
font-weight: var(--primary-tablist-l-font-weight);
|
|
175
175
|
font-family: var(--primary-tablist-l-font-family);
|
|
176
176
|
line-height: 24px;
|
|
177
|
-
} .
|
|
177
|
+
} .tabs__l_u6di4 .tabs__title_u6di4 + .tabs__title_u6di4 {
|
|
178
178
|
margin-left: var(--primary-tablist-l-gaps);
|
|
179
|
-
} .
|
|
179
|
+
} .tabs__l_u6di4 .tabs__pickerWrapper_u6di4 {
|
|
180
180
|
margin-left: var(--primary-tablist-l-gaps);
|
|
181
|
-
} .
|
|
181
|
+
} .tabs__l_u6di4 .tabs__option_u6di4 {
|
|
182
182
|
padding: 0;
|
|
183
|
-
} .
|
|
183
|
+
} .tabs__xl_u6di4 .tabs__title_u6di4 {
|
|
184
184
|
padding: var(--primary-tablist-xl-padding);
|
|
185
185
|
font-size: var(--primary-tablist-xl-font-size);
|
|
186
186
|
font-weight: var(--primary-tablist-xl-font-weight);
|
|
187
187
|
font-family: var(--primary-tablist-xl-font-family);
|
|
188
188
|
line-height: 32px;
|
|
189
|
-
} .
|
|
189
|
+
} .tabs__xl_u6di4 .tabs__title_u6di4 + .tabs__title_u6di4 {
|
|
190
190
|
margin-left: var(--primary-tablist-xl-gaps);
|
|
191
|
-
} .
|
|
191
|
+
} .tabs__xl_u6di4 .tabs__pickerWrapper_u6di4 {
|
|
192
192
|
margin-left: var(--primary-tablist-xl-gaps);
|
|
193
|
-
} .
|
|
193
|
+
} .tabs__xl_u6di4 .tabs__option_u6di4 {
|
|
194
194
|
padding: 0;
|
|
195
|
-
} .
|
|
195
|
+
} .tabs__rightAddons_u6di4 {
|
|
196
196
|
display: flex;
|
|
197
197
|
justify-content: center;
|
|
198
198
|
align-items: center;
|