@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.
Files changed (103) hide show
  1. package/collapsible.js +1 -1
  2. package/components/primary-tablist/Component.collapsible.js +1 -1
  3. package/components/primary-tablist/Component.desktop.js +3 -2
  4. package/components/primary-tablist/Component.js +14 -4
  5. package/components/primary-tablist/Component.mobile.js +4 -3
  6. package/components/primary-tablist/Component.responsive.js +3 -2
  7. package/components/primary-tablist/index.css +30 -30
  8. package/components/primary-tablist/mobile.css +33 -33
  9. package/components/scroll-controls/Component.js +1 -1
  10. package/components/scroll-controls/index.css +14 -14
  11. package/components/scrollable-container/Component.js +1 -1
  12. package/components/scrollable-container/index.css +6 -6
  13. package/components/secondary-tablist/Component.desktop.js +1 -1
  14. package/components/secondary-tablist/Component.mobile.js +2 -2
  15. package/components/secondary-tablist/Component.responsive.js +1 -1
  16. package/components/secondary-tablist/index.css +11 -11
  17. package/components/secondary-tablist/mobile.css +13 -13
  18. package/components/tab/Component.js +1 -1
  19. package/components/tab/index.css +3 -3
  20. package/components/tabs/Component.collapsible.js +1 -1
  21. package/components/tabs/Component.desktop.js +4 -3
  22. package/components/tabs/Component.mobile.js +4 -3
  23. package/components/tabs/Component.responsive.js +4 -3
  24. package/cssm/components/primary-tablist/Component.desktop.js +2 -1
  25. package/cssm/components/primary-tablist/Component.js +14 -4
  26. package/cssm/components/primary-tablist/Component.mobile.js +2 -1
  27. package/cssm/components/primary-tablist/Component.responsive.js +2 -1
  28. package/cssm/components/tabs/Component.desktop.js +2 -1
  29. package/cssm/components/tabs/Component.mobile.js +2 -1
  30. package/cssm/components/tabs/Component.responsive.js +2 -1
  31. package/cssm/desktop.js +2 -1
  32. package/cssm/index.js +2 -1
  33. package/cssm/mobile.js +2 -1
  34. package/desktop.js +4 -3
  35. package/esm/collapsible.js +1 -1
  36. package/esm/components/primary-tablist/Component.collapsible.js +1 -1
  37. package/esm/components/primary-tablist/Component.desktop.js +3 -2
  38. package/esm/components/primary-tablist/Component.js +14 -4
  39. package/esm/components/primary-tablist/Component.mobile.js +4 -3
  40. package/esm/components/primary-tablist/Component.responsive.js +3 -2
  41. package/esm/components/primary-tablist/index.css +30 -30
  42. package/esm/components/primary-tablist/mobile.css +33 -33
  43. package/esm/components/scroll-controls/Component.js +1 -1
  44. package/esm/components/scroll-controls/index.css +14 -14
  45. package/esm/components/scrollable-container/Component.js +1 -1
  46. package/esm/components/scrollable-container/index.css +6 -6
  47. package/esm/components/secondary-tablist/Component.desktop.js +1 -1
  48. package/esm/components/secondary-tablist/Component.mobile.js +2 -2
  49. package/esm/components/secondary-tablist/Component.responsive.js +1 -1
  50. package/esm/components/secondary-tablist/index.css +11 -11
  51. package/esm/components/secondary-tablist/mobile.css +13 -13
  52. package/esm/components/tab/Component.js +1 -1
  53. package/esm/components/tab/index.css +3 -3
  54. package/esm/components/tabs/Component.collapsible.js +1 -1
  55. package/esm/components/tabs/Component.desktop.js +4 -3
  56. package/esm/components/tabs/Component.mobile.js +4 -3
  57. package/esm/components/tabs/Component.responsive.js +4 -3
  58. package/esm/desktop.js +4 -3
  59. package/esm/index.js +4 -3
  60. package/esm/index.module-072f7a03.js +4 -0
  61. package/esm/index.module-64994e8d.js +4 -0
  62. package/esm/mobile.js +4 -3
  63. package/index-ebda875c.d.ts +21 -86
  64. package/index.js +4 -3
  65. package/index.module-5f6b14c2.js +6 -0
  66. package/index.module-e4f107c7.js +6 -0
  67. package/mobile.js +4 -3
  68. package/modern/collapsible.js +1 -1
  69. package/modern/components/primary-tablist/Component.collapsible.js +1 -1
  70. package/modern/components/primary-tablist/Component.desktop.js +3 -2
  71. package/modern/components/primary-tablist/Component.js +14 -4
  72. package/modern/components/primary-tablist/Component.mobile.js +4 -3
  73. package/modern/components/primary-tablist/Component.responsive.js +3 -2
  74. package/modern/components/primary-tablist/index.css +30 -30
  75. package/modern/components/primary-tablist/mobile.css +33 -33
  76. package/modern/components/scroll-controls/Component.js +1 -1
  77. package/modern/components/scroll-controls/index.css +14 -14
  78. package/modern/components/scrollable-container/Component.js +1 -1
  79. package/modern/components/scrollable-container/index.css +6 -6
  80. package/modern/components/secondary-tablist/Component.desktop.js +1 -1
  81. package/modern/components/secondary-tablist/Component.mobile.js +2 -2
  82. package/modern/components/secondary-tablist/Component.responsive.js +1 -1
  83. package/modern/components/secondary-tablist/index.css +11 -11
  84. package/modern/components/secondary-tablist/mobile.css +13 -13
  85. package/modern/components/tab/Component.js +1 -1
  86. package/modern/components/tab/index.css +3 -3
  87. package/modern/components/tabs/Component.collapsible.js +1 -1
  88. package/modern/components/tabs/Component.desktop.js +4 -3
  89. package/modern/components/tabs/Component.mobile.js +4 -3
  90. package/modern/components/tabs/Component.responsive.js +4 -3
  91. package/modern/desktop.js +4 -3
  92. package/modern/index.js +4 -3
  93. package/modern/index.module-5e57388f.js +4 -0
  94. package/modern/index.module-633b90f6.js +4 -0
  95. package/modern/mobile.js +4 -3
  96. package/package.json +2 -30
  97. package/src/components/primary-tablist/Component.tsx +18 -3
  98. package/esm/index.module-55063a9a.js +0 -4
  99. package/esm/index.module-82cf190f.js +0 -4
  100. package/index.module-869888c7.js +0 -6
  101. package/index.module-d1432e9e.js +0 -6
  102. package/modern/index.module-2d531cfb.js +0 -4
  103. package/modern/index.module-7b0d0808.js +0 -4
@@ -1,4 +1,4 @@
1
- /* hash: 1v9sg */
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
- }.tabs__component_o2nwu {
54
+ }.tabs__component_18whg {
55
55
  position: relative;
56
56
  display: inline-flex;
57
- }.tabs__fullWidthScroll_o2nwu {
57
+ }.tabs__fullWidthScroll_18whg {
58
58
  margin: 0 var(--gap-m);
59
- }.tabs__container_o2nwu {
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
- }.tabs__title_o2nwu {
65
+ }.tabs__title_18whg {
66
66
  white-space: nowrap;
67
- }/* sizes */.tabs__xxs_o2nwu .tabs__title_o2nwu + .tabs__title_o2nwu {
67
+ }/* sizes */.tabs__xxs_18whg .tabs__title_18whg + .tabs__title_18whg {
68
68
  margin-left: var(--secondary-tablist-xxs-gaps);
69
- }.tabs__xs_o2nwu .tabs__title_o2nwu + .tabs__title_o2nwu {
69
+ }.tabs__xs_18whg .tabs__title_18whg + .tabs__title_18whg {
70
70
  margin-left: var(--secondary-tablist-xs-gaps);
71
- }.tabs__s_o2nwu .tabs__title_o2nwu + .tabs__title_o2nwu {
71
+ }.tabs__s_18whg .tabs__title_18whg + .tabs__title_18whg {
72
72
  margin-left: var(--secondary-tablist-s-gaps);
73
- }.tabs__m_o2nwu .tabs__title_o2nwu + .tabs__title_o2nwu {
73
+ }.tabs__m_18whg .tabs__title_18whg + .tabs__title_18whg {
74
74
  margin-left: var(--secondary-tablist-m-gaps);
75
- }.tabs__l_o2nwu .tabs__title_o2nwu + .tabs__title_o2nwu {
75
+ }.tabs__l_18whg .tabs__title_18whg + .tabs__title_18whg {
76
76
  margin-left: var(--secondary-tablist-l-gaps);
77
- }.tabs__xl_o2nwu .tabs__title_o2nwu + .tabs__title_o2nwu {
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
- } .tabs__title_yk169 {
983
- } .tabs__mobile_yk169 .tabs__title_yk169 + .tabs__title_yk169 {
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":"tabs__component_hxwfi","hidden":"tabs__hidden_hxwfi"};
13
+ var styles = {"component":"tabs__component_1uww4","hidden":"tabs__hidden_1uww4"};
14
14
  require('./index.css')
15
15
 
16
16
  var Tab = function (_a) {
@@ -1,8 +1,8 @@
1
- /* hash: 1z2f8 */
2
- .tabs__component_hxwfi {
1
+ /* hash: tid3i */
2
+ .tabs__component_1uww4 {
3
3
  outline: none;
4
4
  }
5
5
 
6
- .tabs__hidden_hxwfi {
6
+ .tabs__hidden_1uww4 {
7
7
  display: none;
8
8
  }
@@ -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-869888c7.js');
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-869888c7.js');
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-d1432e9e.js');
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-869888c7.js');
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-d1432e9e.js');
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-869888c7.js');
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-d1432e9e.js');
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 && lineRef.current) {
38
- lineRef.current.style.width = "".concat(selectedTab.offsetWidth, "px");
39
- lineRef.current.style.transform = "translateX(".concat(selectedTab.offsetLeft, "px)");
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-869888c7.js');
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-d1432e9e.js');
29
+ require('./index.module-e4f107c7.js');
29
30
  require('./components/tabs/Component.js');
30
31
 
31
32
 
@@ -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-55063a9a.js';
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-55063a9a.js';
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-55063a9a.js';
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 && lineRef.current) {
27
- lineRef.current.style.width = "".concat(selectedTab.offsetWidth, "px");
28
- lineRef.current.style.transform = "translateX(".concat(selectedTab.offsetLeft, "px)");
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-55063a9a.js';
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":"tabs__title_psrdh tabs__title_1sfro","mobile":"tabs__mobile_psrdh"};
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-55063a9a.js';
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: v5vzb */
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
- } .tabs__component_1sfro {
86
+ } .tabs__component_u6di4 {
87
87
  position: relative;
88
88
  display: inline-flex;
89
89
  min-width: 100%
90
- } .tabs__component_1sfro:before {
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
- } .tabs__fullWidthScroll_1sfro {
98
+ } .tabs__fullWidthScroll_u6di4 {
99
99
  min-width: calc(100% - 2 * var(--gap-m));
100
100
  margin: 0 var(--gap-m);
101
- } .tabs__container_1sfro {
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
- } .tabs__title_1sfro {
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
- } .tabs__title_1sfro:not(.tabs__disabled_1sfro):hover {
124
+ } .tabs__title_u6di4:not(.tabs__disabled_u6di4):hover {
125
125
  color: var(--primary-tablist-hover-color);
126
- } .tabs__focused_1sfro {
126
+ } .tabs__focused_u6di4 {
127
127
  outline: 2px solid var(--focus-color);
128
128
  outline-offset: 2px;
129
- } .tabs__collapsed_1sfro {
129
+ } .tabs__collapsed_u6di4 {
130
130
  order: 99;
131
131
  visibility: collapse;
132
- } .tabs__selected_1sfro {
132
+ } .tabs__selected_u6di4 {
133
133
  cursor: default;
134
134
  color: var(--primary-tablist-selected-color);
135
- } .tabs__disabled_1sfro {
135
+ } .tabs__disabled_u6di4 {
136
136
  cursor: var(--disabled-cursor);
137
137
  color: var(--primary-tablist-disabled-color);
138
- } .tabs__line_1sfro {
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
- } .tabs__option_1sfro {
145
+ } .tabs__option_u6di4 {
146
146
  color: var(--color-light-text-primary);
147
- } /* sizes */ .tabs__s_1sfro .tabs__title_1sfro, .tabs__xs_1sfro .tabs__title_1sfro, .tabs__xxs_1sfro .tabs__title_1sfro {
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
- } .tabs__s_1sfro .tabs__title_1sfro + .tabs__title_1sfro, .tabs__xs_1sfro .tabs__title_1sfro + .tabs__title_1sfro, .tabs__xxs_1sfro .tabs__title_1sfro + .tabs__title_1sfro {
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
- } .tabs__s_1sfro .tabs__pickerWrapper_1sfro, .tabs__xs_1sfro .tabs__pickerWrapper_1sfro, .tabs__xxs_1sfro .tabs__pickerWrapper_1sfro {
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
- } .tabs__s_1sfro .tabs__option_1sfro, .tabs__xs_1sfro .tabs__option_1sfro, .tabs__xxs_1sfro .tabs__option_1sfro {
157
+ } .tabs__s_u6di4 .tabs__option_u6di4, .tabs__xs_u6di4 .tabs__option_u6di4, .tabs__xxs_u6di4 .tabs__option_u6di4 {
158
158
  padding: 0;
159
- } .tabs__m_1sfro .tabs__title_1sfro {
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
- } .tabs__m_1sfro .tabs__title_1sfro + .tabs__title_1sfro {
165
+ } .tabs__m_u6di4 .tabs__title_u6di4 + .tabs__title_u6di4 {
166
166
  margin-left: var(--primary-tablist-m-gaps);
167
- } .tabs__m_1sfro .tabs__pickerWrapper_1sfro {
167
+ } .tabs__m_u6di4 .tabs__pickerWrapper_u6di4 {
168
168
  margin-left: var(--primary-tablist-m-gaps);
169
- } .tabs__m_1sfro .tabs__option_1sfro {
169
+ } .tabs__m_u6di4 .tabs__option_u6di4 {
170
170
  padding: 0;
171
- } .tabs__l_1sfro .tabs__title_1sfro {
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
- } .tabs__l_1sfro .tabs__title_1sfro + .tabs__title_1sfro {
177
+ } .tabs__l_u6di4 .tabs__title_u6di4 + .tabs__title_u6di4 {
178
178
  margin-left: var(--primary-tablist-l-gaps);
179
- } .tabs__l_1sfro .tabs__pickerWrapper_1sfro {
179
+ } .tabs__l_u6di4 .tabs__pickerWrapper_u6di4 {
180
180
  margin-left: var(--primary-tablist-l-gaps);
181
- } .tabs__l_1sfro .tabs__option_1sfro {
181
+ } .tabs__l_u6di4 .tabs__option_u6di4 {
182
182
  padding: 0;
183
- } .tabs__xl_1sfro .tabs__title_1sfro {
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
- } .tabs__xl_1sfro .tabs__title_1sfro + .tabs__title_1sfro {
189
+ } .tabs__xl_u6di4 .tabs__title_u6di4 + .tabs__title_u6di4 {
190
190
  margin-left: var(--primary-tablist-xl-gaps);
191
- } .tabs__xl_1sfro .tabs__pickerWrapper_1sfro {
191
+ } .tabs__xl_u6di4 .tabs__pickerWrapper_u6di4 {
192
192
  margin-left: var(--primary-tablist-xl-gaps);
193
- } .tabs__xl_1sfro .tabs__option_1sfro {
193
+ } .tabs__xl_u6di4 .tabs__option_u6di4 {
194
194
  padding: 0;
195
- } .tabs__rightAddons_1sfro {
195
+ } .tabs__rightAddons_u6di4 {
196
196
  display: flex;
197
197
  justify-content: center;
198
198
  align-items: center;