@alfalab/core-components-tabs 7.2.5 → 7.2.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/Component-3fe0d3e6.d.ts +3 -2
- package/components/primary-tablist/Component.desktop.js +7 -13
- package/components/primary-tablist/Component.js +15 -22
- package/components/primary-tablist/Component.mobile.js +8 -15
- package/components/primary-tablist/Component.responsive.js +10 -16
- package/components/primary-tablist/index.css +29 -29
- package/components/primary-tablist/mobile.css +32 -32
- package/components/scrollable-container/Component.js +3 -11
- package/components/scrollable-container/index.css +5 -5
- package/components/scrollable-container/index.js +1 -3
- package/components/secondary-tablist/Component.desktop.js +6 -12
- package/components/secondary-tablist/Component.js +6 -13
- package/components/secondary-tablist/Component.mobile.js +7 -14
- package/components/secondary-tablist/Component.responsive.js +9 -15
- package/components/secondary-tablist/index.css +11 -11
- package/components/secondary-tablist/mobile.css +13 -13
- package/components/tab/Component.js +2 -9
- package/components/tab/index.css +3 -3
- package/components/tab/index.js +1 -3
- package/components/tabs/Component.desktop.js +12 -18
- package/components/tabs/Component.js +3 -9
- package/components/tabs/Component.mobile.js +12 -18
- package/components/tabs/Component.responsive.js +16 -22
- package/components/title/Component.js +4 -11
- package/components/title/index.js +2 -4
- package/cssm/Component-3fe0d3e6.d.ts +3 -2
- package/cssm/components/primary-tablist/Component.desktop.js +7 -14
- package/cssm/components/primary-tablist/Component.js +15 -22
- package/cssm/components/primary-tablist/Component.mobile.js +9 -18
- package/cssm/components/primary-tablist/Component.responsive.js +9 -15
- package/cssm/components/scrollable-container/Component.js +3 -12
- package/cssm/components/scrollable-container/index.js +1 -3
- package/cssm/components/secondary-tablist/Component.desktop.js +6 -13
- package/cssm/components/secondary-tablist/Component.js +6 -13
- package/cssm/components/secondary-tablist/Component.mobile.js +8 -17
- package/cssm/components/secondary-tablist/Component.responsive.js +8 -14
- package/cssm/components/tab/Component.js +2 -10
- package/cssm/components/tab/index.js +1 -3
- package/cssm/components/tabs/Component.desktop.js +10 -16
- package/cssm/components/tabs/Component.js +3 -9
- package/cssm/components/tabs/Component.mobile.js +11 -17
- package/cssm/components/tabs/Component.responsive.js +16 -22
- package/cssm/components/title/Component.js +4 -11
- package/cssm/components/title/index.js +2 -4
- package/cssm/desktop.js +17 -19
- package/cssm/getDataTestId-3fe0d3e6.d.ts +1 -1
- package/cssm/hooks/use-collapsible-elements.js +2 -4
- package/cssm/hooks/use-tablist-titles.js +3 -5
- package/cssm/hooks/use-tabs.d.ts +2 -2
- package/cssm/hooks/use-tabs.js +0 -2
- package/cssm/index.js +22 -24
- package/cssm/mobile.js +17 -19
- package/cssm/responsive.js +23 -25
- package/cssm/synthetic-events.js +1 -3
- package/cssm/{tslib.es6-0857346e.d.ts → tslib.es6-0e9bf404.d.ts} +0 -0
- package/cssm/{tslib.es6-0857346e.js → tslib.es6-0e9bf404.js} +0 -0
- package/cssm/utils-1574ad8b.d.ts +3 -2
- package/desktop.js +18 -20
- package/esm/Component-3fe0d3e6.d.ts +3 -2
- package/esm/components/primary-tablist/Component.desktop.js +6 -6
- package/esm/components/primary-tablist/Component.js +8 -8
- package/esm/components/primary-tablist/Component.mobile.js +7 -7
- package/esm/components/primary-tablist/Component.responsive.js +9 -9
- 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/scrollable-container/index.js +1 -1
- package/esm/components/secondary-tablist/Component.desktop.js +5 -5
- package/esm/components/secondary-tablist/Component.js +3 -3
- package/esm/components/secondary-tablist/Component.mobile.js +6 -6
- package/esm/components/secondary-tablist/Component.responsive.js +8 -8
- 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/tab/index.js +1 -1
- package/esm/components/tabs/Component.desktop.js +11 -11
- package/esm/components/tabs/Component.mobile.js +11 -11
- package/esm/components/tabs/Component.responsive.js +15 -15
- package/esm/components/title/Component.js +1 -1
- package/esm/components/title/index.js +2 -2
- package/esm/desktop.js +15 -15
- package/esm/getDataTestId-3fe0d3e6.d.ts +1 -1
- package/esm/hooks/use-collapsible-elements.js +2 -2
- package/esm/hooks/use-tablist-titles.js +3 -3
- package/esm/hooks/use-tabs.d.ts +2 -2
- package/esm/index.js +19 -19
- package/esm/index.module-2661cbbc.js +4 -0
- package/esm/index.module-8fe5adc6.js +4 -0
- package/esm/mobile.js +14 -14
- package/esm/responsive.js +19 -19
- package/esm/synthetic-events.js +1 -1
- package/esm/{tslib.es6-442504cd.d.ts → tslib.es6-fd2adbbc.d.ts} +0 -0
- package/esm/{tslib.es6-442504cd.js → tslib.es6-fd2adbbc.js} +0 -0
- package/esm/utils-1574ad8b.d.ts +3 -2
- package/getDataTestId-3fe0d3e6.d.ts +1 -1
- package/hooks/use-collapsible-elements.js +2 -4
- package/hooks/use-tablist-titles.js +3 -5
- package/hooks/use-tabs.d.ts +2 -2
- package/hooks/use-tabs.js +0 -2
- package/index.js +22 -24
- package/index.module-401dd07b.js +6 -0
- package/index.module-b800d019.js +6 -0
- package/mobile.js +17 -19
- package/modern/Component-3fe0d3e6.d.ts +3 -2
- package/modern/components/primary-tablist/Component.desktop.js +5 -5
- package/modern/components/primary-tablist/Component.js +5 -5
- package/modern/components/primary-tablist/Component.mobile.js +6 -6
- package/modern/components/primary-tablist/Component.responsive.js +8 -8
- 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/scrollable-container/index.js +1 -1
- package/modern/components/secondary-tablist/Component.desktop.js +4 -4
- package/modern/components/secondary-tablist/Component.js +2 -2
- package/modern/components/secondary-tablist/Component.mobile.js +5 -5
- package/modern/components/secondary-tablist/Component.responsive.js +7 -7
- 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/tab/index.js +1 -1
- package/modern/components/tabs/Component.desktop.js +10 -10
- package/modern/components/tabs/Component.mobile.js +10 -10
- package/modern/components/tabs/Component.responsive.js +14 -14
- package/modern/components/title/index.js +1 -1
- package/modern/desktop.js +14 -14
- package/modern/getDataTestId-3fe0d3e6.d.ts +1 -1
- package/modern/hooks/use-collapsible-elements.js +1 -1
- package/modern/hooks/use-tablist-titles.js +1 -1
- package/modern/hooks/use-tabs.d.ts +2 -2
- package/modern/index.js +18 -18
- package/modern/index.module-7e5746f2.js +4 -0
- package/modern/index.module-b659d358.js +4 -0
- package/modern/mobile.js +13 -13
- package/modern/responsive.js +18 -18
- package/modern/utils-1574ad8b.d.ts +3 -2
- package/package.json +2 -2
- package/responsive.js +23 -25
- package/synthetic-events.js +1 -3
- package/{tslib.es6-e85b77d3.d.ts → tslib.es6-b58bcb17.d.ts} +0 -0
- package/{tslib.es6-e85b77d3.js → tslib.es6-b58bcb17.js} +0 -0
- package/utils-1574ad8b.d.ts +3 -2
- package/esm/index.module-06a4ba0a.js +0 -4
- package/esm/index.module-fff420f1.js +0 -4
- package/index.module-a1b32357.js +0 -6
- package/index.module-cfa18052.js +0 -6
- package/modern/index.module-06a4ba0a.js +0 -4
- package/modern/index.module-fff420f1.js +0 -4
|
@@ -1,24 +1,18 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-e85b77d3.js');
|
|
3
|
+
var tslib_es6 = require('../../tslib.es6-b58bcb17.js');
|
|
6
4
|
var React = require('react');
|
|
5
|
+
var components_secondaryTablist_Component = require('./Component.js');
|
|
6
|
+
var index_module = require('../../index.module-b800d019.js');
|
|
7
7
|
require('classnames');
|
|
8
|
+
require('@alfalab/core-components-tag');
|
|
8
9
|
require('../../hooks/use-tabs.js');
|
|
9
|
-
require('compute-scroll-into-view');
|
|
10
10
|
require('../scrollable-container/Component.js');
|
|
11
|
-
require('
|
|
12
|
-
var components_secondaryTablist_Component = require('./Component.js');
|
|
13
|
-
var index_module = require('../../index.module-cfa18052.js');
|
|
14
|
-
|
|
15
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
-
|
|
17
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
+
require('compute-scroll-into-view');
|
|
18
12
|
|
|
19
13
|
var SecondaryTabListDesktop = function (_a) {
|
|
20
14
|
var _b = _a.size, size = _b === void 0 ? 's' : _b, restProps = tslib_es6.__rest(_a, ["size"]);
|
|
21
|
-
return (
|
|
15
|
+
return (React.createElement(components_secondaryTablist_Component.SecondaryTabList, tslib_es6.__assign({}, restProps, { size: size, styles: index_module.commonStyles, tagSize: size })));
|
|
22
16
|
};
|
|
23
17
|
|
|
24
18
|
exports.SecondaryTabListDesktop = SecondaryTabListDesktop;
|
|
@@ -1,19 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-e85b77d3.js');
|
|
3
|
+
var tslib_es6 = require('../../tslib.es6-b58bcb17.js');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
var cn = require('classnames');
|
|
6
|
+
var coreComponentsTag = require('@alfalab/core-components-tag');
|
|
8
7
|
var hooks_useTabs = require('../../hooks/use-tabs.js');
|
|
9
|
-
require('compute-scroll-into-view');
|
|
10
8
|
var components_scrollableContainer_Component = require('../scrollable-container/Component.js');
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
|
-
|
|
15
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
16
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
9
|
+
require('compute-scroll-into-view');
|
|
17
10
|
|
|
18
11
|
var SecondaryTabList = function (_a) {
|
|
19
12
|
var _b = _a.styles, styles = _b === void 0 ? {} : _b, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, _c = _a.titles, titles = _c === void 0 ? [] : _c, _d = _a.selectedId, selectedId = _d === void 0 ? titles.length ? titles[0].id : undefined : _d, _e = _a.scrollable, scrollable = _e === void 0 ? true : _e, fullWidthScroll = _a.fullWidthScroll, _f = _a.tagSize, tagSize = _f === void 0 ? 'xs' : _f, onChange = _a.onChange, dataTestId = _a.dataTestId;
|
|
@@ -24,15 +17,15 @@ var SecondaryTabList = function (_a) {
|
|
|
24
17
|
}), focusedTab = _g.focusedTab, selectedTab = _g.selectedTab, getTabListItemProps = _g.getTabListItemProps;
|
|
25
18
|
var renderContent = function () {
|
|
26
19
|
var _a;
|
|
27
|
-
return (
|
|
20
|
+
return (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, size && styles[size], (_a = {},
|
|
28
21
|
_a[styles.fullWidthScroll] = fullWidthScroll,
|
|
29
22
|
_a)) }, titles.map(function (item, index) {
|
|
30
23
|
if (item.hidden)
|
|
31
24
|
return null;
|
|
32
|
-
return (
|
|
25
|
+
return (React.createElement(coreComponentsTag.Tag, tslib_es6.__assign({}, getTabListItemProps(index), { key: item.id, className: cn(styles.title, item.toggleClassName), checked: item.id === selectedId, size: tagSize, rightAddons: item.rightAddons }), item.title));
|
|
33
26
|
})));
|
|
34
27
|
};
|
|
35
|
-
return scrollable ? (
|
|
28
|
+
return scrollable ? (React.createElement(components_scrollableContainer_Component.ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll }, renderContent())) : (React.createElement("div", { className: cn(styles.container, containerClassName) }, renderContent()));
|
|
36
29
|
};
|
|
37
30
|
|
|
38
31
|
exports.SecondaryTabList = SecondaryTabList;
|
|
@@ -1,29 +1,22 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-e85b77d3.js');
|
|
3
|
+
var tslib_es6 = require('../../tslib.es6-b58bcb17.js');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
var cn = require('classnames');
|
|
6
|
+
var components_secondaryTablist_Component = require('./Component.js');
|
|
7
|
+
var index_module = require('../../index.module-b800d019.js');
|
|
8
|
+
require('@alfalab/core-components-tag');
|
|
8
9
|
require('../../hooks/use-tabs.js');
|
|
9
|
-
require('compute-scroll-into-view');
|
|
10
10
|
require('../scrollable-container/Component.js');
|
|
11
|
-
require('
|
|
12
|
-
var components_secondaryTablist_Component = require('./Component.js');
|
|
13
|
-
var index_module = require('../../index.module-cfa18052.js');
|
|
14
|
-
|
|
15
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
-
|
|
17
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
18
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
11
|
+
require('compute-scroll-into-view');
|
|
19
12
|
|
|
20
|
-
var mobileStyles = {"title":"
|
|
13
|
+
var mobileStyles = {"title":"tabs__title_1jie6 tabs__title_9ds1d","mobile":"tabs__mobile_1jie6"};
|
|
21
14
|
require('./mobile.css')
|
|
22
15
|
|
|
23
16
|
var styles = tslib_es6.__assign(tslib_es6.__assign({}, index_module.commonStyles), mobileStyles);
|
|
24
17
|
var SecondaryTabListMobile = function (_a) {
|
|
25
18
|
var className = _a.className, restProps = tslib_es6.__rest(_a, ["className"]);
|
|
26
|
-
return (
|
|
19
|
+
return (React.createElement(components_secondaryTablist_Component.SecondaryTabList, tslib_es6.__assign({}, restProps, { styles: styles, className: cn(className, styles.mobile), tagSize: 'xs' })));
|
|
27
20
|
};
|
|
28
21
|
|
|
29
22
|
exports.SecondaryTabListMobile = SecondaryTabListMobile;
|
|
@@ -1,23 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-e85b77d3.js');
|
|
3
|
+
var tslib_es6 = require('../../tslib.es6-b58bcb17.js');
|
|
6
4
|
var React = require('react');
|
|
7
|
-
require('classnames');
|
|
8
5
|
var hooks = require('@alfalab/hooks');
|
|
9
|
-
require('../../hooks/use-tabs.js');
|
|
10
|
-
require('compute-scroll-into-view');
|
|
11
|
-
require('../scrollable-container/Component.js');
|
|
12
|
-
require('@alfalab/core-components-tag');
|
|
13
|
-
require('./Component.js');
|
|
14
|
-
require('../../index.module-cfa18052.js');
|
|
15
6
|
var components_secondaryTablist_Component_desktop = require('./Component.desktop.js');
|
|
16
7
|
var components_secondaryTablist_Component_mobile = require('./Component.mobile.js');
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
8
|
+
require('./Component.js');
|
|
9
|
+
require('classnames');
|
|
10
|
+
require('@alfalab/core-components-tag');
|
|
11
|
+
require('../../hooks/use-tabs.js');
|
|
12
|
+
require('../scrollable-container/Component.js');
|
|
13
|
+
require('compute-scroll-into-view');
|
|
14
|
+
require('../../index.module-b800d019.js');
|
|
21
15
|
|
|
22
16
|
var SecondaryTabListResponsive = function (_a) {
|
|
23
17
|
var size = _a.size, _b = _a.defaultMatch, defaultMatch = _b === void 0 ? 'desktop' : _b, fullWidthScroll = _a.fullWidthScroll, restProps = tslib_es6.__rest(_a, ["size", "defaultMatch", "fullWidthScroll"]);
|
|
@@ -25,7 +19,7 @@ var SecondaryTabListResponsive = function (_a) {
|
|
|
25
19
|
['mobile', '(max-width: 767px)'],
|
|
26
20
|
['desktop', '(min-width: 768px)'],
|
|
27
21
|
], defaultMatch)[0];
|
|
28
|
-
return view === 'desktop' ? (
|
|
22
|
+
return view === 'desktop' ? (React.createElement(components_secondaryTablist_Component_desktop.SecondaryTabListDesktop, tslib_es6.__assign({ size: size }, restProps))) : (React.createElement(components_secondaryTablist_Component_mobile.SecondaryTabListMobile, tslib_es6.__assign({ fullWidthScroll: fullWidthScroll }, restProps)));
|
|
29
23
|
};
|
|
30
24
|
|
|
31
25
|
exports.SecondaryTabListResponsive = SecondaryTabListResponsive;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1b98h */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
/* Hard */
|
|
@@ -44,35 +44,35 @@
|
|
|
44
44
|
/* size xl */
|
|
45
45
|
--secondary-tablist-xl-gaps: var(--gap-m);
|
|
46
46
|
}
|
|
47
|
-
.
|
|
47
|
+
.tabs__component_9ds1d {
|
|
48
48
|
position: relative;
|
|
49
49
|
display: inline-flex;
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
.tabs__fullWidthScroll_9ds1d {
|
|
52
52
|
margin: 0 var(--gap-m);
|
|
53
53
|
}
|
|
54
|
-
.
|
|
54
|
+
.tabs__container_9ds1d {
|
|
55
55
|
overflow: hidden;
|
|
56
56
|
}
|
|
57
|
-
.
|
|
57
|
+
.tabs__title_9ds1d {
|
|
58
58
|
white-space: nowrap;
|
|
59
59
|
}
|
|
60
60
|
/* sizes */
|
|
61
|
-
.
|
|
61
|
+
.tabs__xxs_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
|
|
62
62
|
margin-left: var(--secondary-tablist-xxs-gaps);
|
|
63
63
|
}
|
|
64
|
-
.
|
|
64
|
+
.tabs__xs_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
|
|
65
65
|
margin-left: var(--secondary-tablist-xs-gaps);
|
|
66
66
|
}
|
|
67
|
-
.
|
|
67
|
+
.tabs__s_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
|
|
68
68
|
margin-left: var(--secondary-tablist-s-gaps);
|
|
69
69
|
}
|
|
70
|
-
.
|
|
70
|
+
.tabs__m_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
|
|
71
71
|
margin-left: var(--secondary-tablist-m-gaps);
|
|
72
72
|
}
|
|
73
|
-
.
|
|
73
|
+
.tabs__l_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
|
|
74
74
|
margin-left: var(--secondary-tablist-l-gaps);
|
|
75
75
|
}
|
|
76
|
-
.
|
|
76
|
+
.tabs__xl_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
|
|
77
77
|
margin-left: var(--secondary-tablist-xl-gaps);
|
|
78
78
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1ln9l */
|
|
2
2
|
:root {
|
|
3
3
|
}:root {
|
|
4
4
|
}:root {
|
|
@@ -49,26 +49,26 @@
|
|
|
49
49
|
|
|
50
50
|
/* size xl */
|
|
51
51
|
--secondary-tablist-xl-gaps: var(--gap-m);
|
|
52
|
-
}.
|
|
52
|
+
}.tabs__component_9ds1d {
|
|
53
53
|
position: relative;
|
|
54
54
|
display: inline-flex;
|
|
55
|
-
}.
|
|
55
|
+
}.tabs__fullWidthScroll_9ds1d {
|
|
56
56
|
margin: 0 var(--gap-m);
|
|
57
|
-
}.
|
|
57
|
+
}.tabs__container_9ds1d {
|
|
58
58
|
overflow: hidden;
|
|
59
|
-
}.
|
|
59
|
+
}.tabs__title_9ds1d {
|
|
60
60
|
white-space: nowrap;
|
|
61
|
-
}/* sizes */.
|
|
61
|
+
}/* sizes */.tabs__xxs_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
|
|
62
62
|
margin-left: var(--secondary-tablist-xxs-gaps);
|
|
63
|
-
}.
|
|
63
|
+
}.tabs__xs_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
|
|
64
64
|
margin-left: var(--secondary-tablist-xs-gaps);
|
|
65
|
-
}.
|
|
65
|
+
}.tabs__s_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
|
|
66
66
|
margin-left: var(--secondary-tablist-s-gaps);
|
|
67
|
-
}.
|
|
67
|
+
}.tabs__m_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
|
|
68
68
|
margin-left: var(--secondary-tablist-m-gaps);
|
|
69
|
-
}.
|
|
69
|
+
}.tabs__l_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
|
|
70
70
|
margin-left: var(--secondary-tablist-l-gaps);
|
|
71
|
-
}.
|
|
71
|
+
}.tabs__xl_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
|
|
72
72
|
margin-left: var(--secondary-tablist-xl-gaps);
|
|
73
73
|
}
|
|
74
74
|
:root {
|
|
@@ -885,8 +885,8 @@
|
|
|
885
885
|
/* size xl */
|
|
886
886
|
--secondary-tablist-xl-gaps: var(--gap-m);
|
|
887
887
|
}
|
|
888
|
-
.
|
|
888
|
+
.tabs__title_1jie6 {
|
|
889
889
|
}
|
|
890
|
-
.
|
|
890
|
+
.tabs__mobile_1jie6 .tabs__title_1jie6 + .tabs__title_1jie6 {
|
|
891
891
|
margin-left: var(--secondary-tablist-mobile-gaps);
|
|
892
892
|
}
|
|
@@ -1,22 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var cn = require('classnames');
|
|
7
5
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
12
|
-
|
|
13
|
-
var styles = {"component":"tabs__component_rlmfg","hidden":"tabs__hidden_rlmfg"};
|
|
6
|
+
var styles = {"component":"tabs__component_102bs","hidden":"tabs__hidden_102bs"};
|
|
14
7
|
require('./index.css')
|
|
15
8
|
|
|
16
9
|
var Tab = function (_a) {
|
|
17
10
|
var _b;
|
|
18
11
|
var children = _a.children, hidden = _a.hidden, className = _a.className, disabled = _a.disabled, dataTestId = _a.dataTestId;
|
|
19
|
-
return children ? (
|
|
12
|
+
return children ? (React.createElement("div", { className: cn(styles.component, (_b = {},
|
|
20
13
|
_b[styles.hidden] = hidden,
|
|
21
14
|
_b), className), hidden: hidden, role: 'tabpanel', tabIndex: disabled ? -1 : 0, "data-test-id": dataTestId }, children)) : null;
|
|
22
15
|
};
|
package/components/tab/index.css
CHANGED
package/components/tab/index.js
CHANGED
|
@@ -1,34 +1,28 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-e85b77d3.js');
|
|
3
|
+
var tslib_es6 = require('../../tslib.es6-b58bcb17.js');
|
|
6
4
|
var React = require('react');
|
|
5
|
+
var components_primaryTablist_Component_desktop = require('../primary-tablist/Component.desktop.js');
|
|
6
|
+
var components_secondaryTablist_Component_desktop = require('../secondary-tablist/Component.desktop.js');
|
|
7
|
+
var components_tabs_Component = require('./Component.js');
|
|
8
|
+
require('../primary-tablist/Component.js');
|
|
7
9
|
require('classnames');
|
|
8
10
|
require('@alfalab/core-components-badge');
|
|
9
11
|
require('@alfalab/core-components-keyboard-focusable');
|
|
10
12
|
require('@alfalab/core-components-picker-button/desktop');
|
|
13
|
+
require('../../hooks/use-tablist-titles.js');
|
|
11
14
|
require('@alfalab/hooks');
|
|
12
|
-
require('@juggle/resize-observer');
|
|
13
15
|
require('../../hooks/use-collapsible-elements.js');
|
|
16
|
+
require('@juggle/resize-observer');
|
|
14
17
|
require('../../hooks/use-tabs.js');
|
|
15
|
-
require('../../hooks/use-tablist-titles.js');
|
|
16
18
|
require('../../synthetic-events.js');
|
|
17
|
-
require('compute-scroll-into-view');
|
|
18
19
|
require('../scrollable-container/Component.js');
|
|
20
|
+
require('compute-scroll-into-view');
|
|
19
21
|
require('../title/Component.js');
|
|
20
|
-
require('
|
|
21
|
-
require('../../index.module-a1b32357.js');
|
|
22
|
-
var components_primaryTablist_Component_desktop = require('../primary-tablist/Component.desktop.js');
|
|
23
|
-
require('@alfalab/core-components-tag');
|
|
22
|
+
require('../../index.module-401dd07b.js');
|
|
24
23
|
require('../secondary-tablist/Component.js');
|
|
25
|
-
require('
|
|
26
|
-
|
|
27
|
-
var components_tabs_Component = require('./Component.js');
|
|
28
|
-
|
|
29
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
30
|
-
|
|
31
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
24
|
+
require('@alfalab/core-components-tag');
|
|
25
|
+
require('../../index.module-b800d019.js');
|
|
32
26
|
|
|
33
27
|
var views = {
|
|
34
28
|
primary: components_primaryTablist_Component_desktop.PrimaryTabListDesktop,
|
|
@@ -36,7 +30,7 @@ var views = {
|
|
|
36
30
|
};
|
|
37
31
|
var TabsDesktop = function (_a) {
|
|
38
32
|
var _b = _a.view, view = _b === void 0 ? 'primary' : _b, _c = _a.scrollable, scrollable = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? view === 'primary' ? 'm' : 's' : _d, restProps = tslib_es6.__rest(_a, ["view", "scrollable", "size"]);
|
|
39
|
-
return (
|
|
33
|
+
return (React.createElement(components_tabs_Component.Tabs, tslib_es6.__assign({ TabList: views[view], scrollable: scrollable, size: size }, restProps)));
|
|
40
34
|
};
|
|
41
35
|
|
|
42
36
|
exports.TabsDesktop = TabsDesktop;
|
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
|
|
7
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
-
|
|
9
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
10
|
-
|
|
11
5
|
var Tabs = function (_a) {
|
|
12
6
|
var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatch = _a.defaultMatch, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsible = _a.collapsible, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange;
|
|
13
|
-
var tabsArray =
|
|
7
|
+
var tabsArray = React.Children.toArray(children);
|
|
14
8
|
var titles = tabsArray.map(function (_a) {
|
|
15
9
|
var _b = _a.props, title = _b.title, id = _b.id, rightAddons = _b.rightAddons, disabled = _b.disabled, hidden = _b.hidden, toggleClassName = _b.toggleClassName;
|
|
16
10
|
return ({
|
|
@@ -23,8 +17,8 @@ var Tabs = function (_a) {
|
|
|
23
17
|
});
|
|
24
18
|
});
|
|
25
19
|
var tabs = tabsArray.filter(function (tab) { return tab.props.id === selectedId || tab.props.keepMounted || keepMounted; });
|
|
26
|
-
return (
|
|
27
|
-
|
|
20
|
+
return (React.createElement("div", { className: className },
|
|
21
|
+
React.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsible: collapsible, onChange: onChange, dataTestId: dataTestId, defaultMatch: defaultMatch, fullWidthScroll: fullWidthScroll }),
|
|
28
22
|
tabs.map(function (tab) { return React.cloneElement(tab, { hidden: tab.props.id !== selectedId }); })));
|
|
29
23
|
};
|
|
30
24
|
|
|
@@ -1,34 +1,28 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-e85b77d3.js');
|
|
3
|
+
var tslib_es6 = require('../../tslib.es6-b58bcb17.js');
|
|
6
4
|
var React = require('react');
|
|
5
|
+
var components_primaryTablist_Component_mobile = require('../primary-tablist/Component.mobile.js');
|
|
6
|
+
var components_secondaryTablist_Component_mobile = require('../secondary-tablist/Component.mobile.js');
|
|
7
|
+
var components_tabs_Component = require('./Component.js');
|
|
7
8
|
require('classnames');
|
|
9
|
+
require('../primary-tablist/Component.js');
|
|
8
10
|
require('@alfalab/core-components-badge');
|
|
9
11
|
require('@alfalab/core-components-keyboard-focusable');
|
|
10
12
|
require('@alfalab/core-components-picker-button/desktop');
|
|
13
|
+
require('../../hooks/use-tablist-titles.js');
|
|
11
14
|
require('@alfalab/hooks');
|
|
12
|
-
require('@juggle/resize-observer');
|
|
13
15
|
require('../../hooks/use-collapsible-elements.js');
|
|
16
|
+
require('@juggle/resize-observer');
|
|
14
17
|
require('../../hooks/use-tabs.js');
|
|
15
|
-
require('../../hooks/use-tablist-titles.js');
|
|
16
18
|
require('../../synthetic-events.js');
|
|
17
|
-
require('compute-scroll-into-view');
|
|
18
19
|
require('../scrollable-container/Component.js');
|
|
20
|
+
require('compute-scroll-into-view');
|
|
19
21
|
require('../title/Component.js');
|
|
20
|
-
require('
|
|
21
|
-
require('../../index.module-a1b32357.js');
|
|
22
|
-
require('@alfalab/core-components-tag');
|
|
22
|
+
require('../../index.module-401dd07b.js');
|
|
23
23
|
require('../secondary-tablist/Component.js');
|
|
24
|
-
require('
|
|
25
|
-
|
|
26
|
-
var components_primaryTablist_Component_mobile = require('../primary-tablist/Component.mobile.js');
|
|
27
|
-
var components_secondaryTablist_Component_mobile = require('../secondary-tablist/Component.mobile.js');
|
|
28
|
-
|
|
29
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
30
|
-
|
|
31
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
24
|
+
require('@alfalab/core-components-tag');
|
|
25
|
+
require('../../index.module-b800d019.js');
|
|
32
26
|
|
|
33
27
|
var views = {
|
|
34
28
|
primary: components_primaryTablist_Component_mobile.PrimaryTabListMobile,
|
|
@@ -36,7 +30,7 @@ var views = {
|
|
|
36
30
|
};
|
|
37
31
|
var TabsMobile = function (_a) {
|
|
38
32
|
var _b = _a.view, view = _b === void 0 ? 'primary' : _b, _c = _a.scrollable, scrollable = _c === void 0 ? true : _c, restProps = tslib_es6.__rest(_a, ["view", "scrollable"]);
|
|
39
|
-
return
|
|
33
|
+
return React.createElement(components_tabs_Component.Tabs, tslib_es6.__assign({ TabList: views[view], scrollable: scrollable }, restProps));
|
|
40
34
|
};
|
|
41
35
|
|
|
42
36
|
exports.TabsMobile = TabsMobile;
|
|
@@ -1,38 +1,32 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-e85b77d3.js');
|
|
3
|
+
var tslib_es6 = require('../../tslib.es6-b58bcb17.js');
|
|
6
4
|
var React = require('react');
|
|
5
|
+
var components_primaryTablist_Component_responsive = require('../primary-tablist/Component.responsive.js');
|
|
6
|
+
var components_secondaryTablist_Component_responsive = require('../secondary-tablist/Component.responsive.js');
|
|
7
|
+
var components_tabs_Component = require('./Component.js');
|
|
8
|
+
require('@alfalab/hooks');
|
|
9
|
+
require('../primary-tablist/Component.desktop.js');
|
|
10
|
+
require('../primary-tablist/Component.js');
|
|
7
11
|
require('classnames');
|
|
8
12
|
require('@alfalab/core-components-badge');
|
|
9
13
|
require('@alfalab/core-components-keyboard-focusable');
|
|
10
14
|
require('@alfalab/core-components-picker-button/desktop');
|
|
11
|
-
require('
|
|
12
|
-
require('@juggle/resize-observer');
|
|
15
|
+
require('../../hooks/use-tablist-titles.js');
|
|
13
16
|
require('../../hooks/use-collapsible-elements.js');
|
|
17
|
+
require('@juggle/resize-observer');
|
|
14
18
|
require('../../hooks/use-tabs.js');
|
|
15
|
-
require('../../hooks/use-tablist-titles.js');
|
|
16
19
|
require('../../synthetic-events.js');
|
|
17
|
-
require('compute-scroll-into-view');
|
|
18
20
|
require('../scrollable-container/Component.js');
|
|
21
|
+
require('compute-scroll-into-view');
|
|
19
22
|
require('../title/Component.js');
|
|
20
|
-
require('
|
|
21
|
-
require('../../index.module-a1b32357.js');
|
|
22
|
-
require('../primary-tablist/Component.desktop.js');
|
|
23
|
-
require('@alfalab/core-components-tag');
|
|
24
|
-
require('../secondary-tablist/Component.js');
|
|
25
|
-
require('../../index.module-cfa18052.js');
|
|
26
|
-
require('../secondary-tablist/Component.desktop.js');
|
|
27
|
-
var components_tabs_Component = require('./Component.js');
|
|
23
|
+
require('../../index.module-401dd07b.js');
|
|
28
24
|
require('../primary-tablist/Component.mobile.js');
|
|
29
|
-
|
|
25
|
+
require('../secondary-tablist/Component.desktop.js');
|
|
26
|
+
require('../secondary-tablist/Component.js');
|
|
27
|
+
require('@alfalab/core-components-tag');
|
|
28
|
+
require('../../index.module-b800d019.js');
|
|
30
29
|
require('../secondary-tablist/Component.mobile.js');
|
|
31
|
-
var components_secondaryTablist_Component_responsive = require('../secondary-tablist/Component.responsive.js');
|
|
32
|
-
|
|
33
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
34
|
-
|
|
35
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
36
30
|
|
|
37
31
|
var views = {
|
|
38
32
|
primary: components_primaryTablist_Component_responsive.PrimaryTabListResponsive,
|
|
@@ -40,7 +34,7 @@ var views = {
|
|
|
40
34
|
};
|
|
41
35
|
var TabsResponsive = function (_a) {
|
|
42
36
|
var _b = _a.view, view = _b === void 0 ? 'primary' : _b, _c = _a.scrollable, scrollable = _c === void 0 ? false : _c, restProps = tslib_es6.__rest(_a, ["view", "scrollable"]);
|
|
43
|
-
return
|
|
37
|
+
return React.createElement(components_tabs_Component.Tabs, tslib_es6.__assign({ TabList: views[view], scrollable: scrollable }, restProps));
|
|
44
38
|
};
|
|
45
39
|
|
|
46
40
|
exports.TabsResponsive = TabsResponsive;
|
|
@@ -1,27 +1,20 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-e85b77d3.js');
|
|
3
|
+
var tslib_es6 = require('../../tslib.es6-b58bcb17.js');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
var cn = require('classnames');
|
|
8
6
|
|
|
9
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
-
|
|
11
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
13
|
-
|
|
14
7
|
var Title = React.forwardRef(function (_a, ref) {
|
|
15
8
|
var _b, _c;
|
|
16
9
|
var id = _a.id, toggleClassName = _a.toggleClassName, title = _a.title, _d = _a.styles, styles = _d === void 0 ? {} : _d, _e = _a.rightAddons, rightAddons = _e === void 0 ? null : _e, _f = _a.hidden, hidden = _f === void 0 ? false : _f, _g = _a.selected, selected = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.collapsed, collapsed = _j === void 0 ? false : _j, _k = _a.focused, focused = _k === void 0 ? false : _k, _l = _a.isOption, isOption = _l === void 0 ? false : _l, restProps = tslib_es6.__rest(_a, ["id", "toggleClassName", "title", "styles", "rightAddons", "hidden", "selected", "disabled", "collapsed", "focused", "isOption"]);
|
|
17
|
-
return hidden ? null : (
|
|
10
|
+
return hidden ? null : (React.createElement("button", tslib_es6.__assign({}, restProps, { ref: ref, type: 'button', id: String(id), className: cn(styles.title, (_b = {},
|
|
18
11
|
_b[styles.selected] = selected,
|
|
19
12
|
_b[styles.disabled] = disabled,
|
|
20
13
|
_b[styles.collapsed] = collapsed && !isOption,
|
|
21
14
|
_b[styles.option] = isOption,
|
|
22
15
|
_b), toggleClassName) }),
|
|
23
|
-
|
|
24
|
-
rightAddons &&
|
|
16
|
+
React.createElement("span", { className: cn(styles.content, (_c = {}, _c[styles.focused] = focused, _c)) }, title),
|
|
17
|
+
rightAddons && React.createElement("span", { className: styles.rightAddons }, rightAddons)));
|
|
25
18
|
});
|
|
26
19
|
|
|
27
20
|
exports.Title = Title;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
require('../../tslib.es6-e85b77d3.js');
|
|
3
|
+
var components_title_Component = require('./Component.js');
|
|
4
|
+
require('../../tslib.es6-b58bcb17.js');
|
|
6
5
|
require('react');
|
|
7
6
|
require('classnames');
|
|
8
|
-
var components_title_Component = require('./Component.js');
|
|
9
7
|
|
|
10
8
|
|
|
11
9
|
|
|
@@ -35,7 +35,7 @@ declare const colors: readonly [
|
|
|
35
35
|
"link",
|
|
36
36
|
"negative"
|
|
37
37
|
];
|
|
38
|
-
type Color = typeof colors[number];
|
|
38
|
+
type Color = (typeof colors)[number];
|
|
39
39
|
type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
|
|
40
40
|
type NativeProps = HTMLAttributes<HTMLSpanElement>;
|
|
41
41
|
type TextBaseProps = {
|
|
@@ -231,4 +231,5 @@ type HeaderProps = {
|
|
|
231
231
|
onBack?: () => void;
|
|
232
232
|
};
|
|
233
233
|
declare const Header: FC<HeaderProps>;
|
|
234
|
-
export { CloserProps, Closer, Typography, typographyPresets,
|
|
234
|
+
export { CloserProps, Closer, Typography, typographyPresets, BackerProps, Backer, TitleResponsive, HeaderProps, Header };
|
|
235
|
+
export type { TitleProps, TextProps, Color };
|
|
@@ -1,34 +1,27 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-0857346e.js');
|
|
3
|
+
var tslib_es6 = require('../../tslib.es6-0e9bf404.js');
|
|
6
4
|
var React = require('react');
|
|
5
|
+
var components_primaryTablist_Component = require('./Component.js');
|
|
6
|
+
var styles = require('./index.module.css');
|
|
7
7
|
require('classnames');
|
|
8
8
|
require('@alfalab/core-components-badge/cssm');
|
|
9
9
|
require('@alfalab/core-components-keyboard-focusable/cssm');
|
|
10
10
|
require('@alfalab/core-components-picker-button/cssm/desktop');
|
|
11
|
+
require('../../hooks/use-tablist-titles.js');
|
|
11
12
|
require('@alfalab/hooks');
|
|
12
|
-
require('@juggle/resize-observer');
|
|
13
13
|
require('../../hooks/use-collapsible-elements.js');
|
|
14
|
+
require('@juggle/resize-observer');
|
|
14
15
|
require('../../hooks/use-tabs.js');
|
|
15
|
-
require('../../hooks/use-tablist-titles.js');
|
|
16
16
|
require('../../synthetic-events.js');
|
|
17
|
+
require('../scrollable-container/Component.js');
|
|
17
18
|
require('compute-scroll-into-view');
|
|
18
19
|
require('../scrollable-container/index.module.css');
|
|
19
|
-
require('../scrollable-container/Component.js');
|
|
20
20
|
require('../title/Component.js');
|
|
21
|
-
var components_primaryTablist_Component = require('./Component.js');
|
|
22
|
-
var styles = require('./index.module.css');
|
|
23
|
-
|
|
24
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
25
|
-
|
|
26
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
27
|
-
var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
|
|
28
21
|
|
|
29
22
|
var PrimaryTabListDesktop = function (_a) {
|
|
30
23
|
var _b = _a.size, size = _b === void 0 ? 'm' : _b, restProps = tslib_es6.__rest(_a, ["size"]);
|
|
31
|
-
return (
|
|
24
|
+
return (React.createElement(components_primaryTablist_Component.PrimaryTabList, tslib_es6.__assign({}, restProps, { size: size, styles: styles })));
|
|
32
25
|
};
|
|
33
26
|
|
|
34
27
|
exports.PrimaryTabListDesktop = PrimaryTabListDesktop;
|