@alfalab/core-components-tabs 7.3.4 → 7.3.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 (100) hide show
  1. package/components/primary-tablist/Component.desktop.js +2 -2
  2. package/components/primary-tablist/Component.js +2 -2
  3. package/components/primary-tablist/Component.mobile.js +3 -3
  4. package/components/primary-tablist/Component.responsive.js +2 -2
  5. package/components/primary-tablist/index.css +29 -29
  6. package/components/primary-tablist/mobile.css +34 -33
  7. package/components/scrollable-container/Component.js +1 -1
  8. package/components/scrollable-container/index.css +5 -5
  9. package/components/secondary-tablist/Component.desktop.js +2 -2
  10. package/components/secondary-tablist/Component.js +1 -1
  11. package/components/secondary-tablist/Component.mobile.js +3 -3
  12. package/components/secondary-tablist/Component.responsive.js +2 -2
  13. package/components/secondary-tablist/index.css +11 -11
  14. package/components/secondary-tablist/mobile.css +15 -14
  15. package/components/tab/Component.js +1 -1
  16. package/components/tab/index.css +3 -3
  17. package/components/tabs/Component.desktop.js +3 -3
  18. package/components/tabs/Component.mobile.js +3 -3
  19. package/components/tabs/Component.responsive.js +3 -3
  20. package/components/title/Component.js +1 -1
  21. package/components/title/index.js +1 -1
  22. package/cssm/components/primary-tablist/Component.js +1 -1
  23. package/cssm/hooks/use-collapsible-elements.js +4 -6
  24. package/cssm/hooks/use-tablist-titles.js +1 -1
  25. package/desktop.js +3 -3
  26. package/esm/components/primary-tablist/Component.desktop.js +2 -2
  27. package/esm/components/primary-tablist/Component.js +2 -2
  28. package/esm/components/primary-tablist/Component.mobile.js +3 -3
  29. package/esm/components/primary-tablist/Component.responsive.js +2 -2
  30. package/esm/components/primary-tablist/index.css +29 -29
  31. package/esm/components/primary-tablist/mobile.css +34 -33
  32. package/esm/components/scrollable-container/Component.js +1 -1
  33. package/esm/components/scrollable-container/index.css +5 -5
  34. package/esm/components/secondary-tablist/Component.desktop.js +2 -2
  35. package/esm/components/secondary-tablist/Component.js +1 -1
  36. package/esm/components/secondary-tablist/Component.mobile.js +3 -3
  37. package/esm/components/secondary-tablist/Component.responsive.js +2 -2
  38. package/esm/components/secondary-tablist/index.css +11 -11
  39. package/esm/components/secondary-tablist/mobile.css +15 -14
  40. package/esm/components/tab/Component.js +1 -1
  41. package/esm/components/tab/index.css +3 -3
  42. package/esm/components/tabs/Component.desktop.js +3 -3
  43. package/esm/components/tabs/Component.mobile.js +3 -3
  44. package/esm/components/tabs/Component.responsive.js +3 -3
  45. package/esm/components/title/Component.js +1 -1
  46. package/esm/components/title/index.js +1 -1
  47. package/esm/desktop.js +3 -3
  48. package/esm/hooks/use-collapsible-elements.js +5 -7
  49. package/esm/hooks/use-tablist-titles.js +2 -2
  50. package/esm/index.js +3 -3
  51. package/esm/index.module-07028906.js +4 -0
  52. package/esm/index.module-65c3d6bc.js +4 -0
  53. package/esm/mobile.js +3 -3
  54. package/esm/responsive.js +3 -3
  55. package/esm/synthetic-events.js +1 -1
  56. package/esm/{tslib.es6-ef625021.d.ts → tslib.es6-3bc6f388.d.ts} +0 -0
  57. package/esm/{tslib.es6-ef625021.js → tslib.es6-3bc6f388.js} +0 -0
  58. package/hooks/use-collapsible-elements.js +5 -7
  59. package/hooks/use-tablist-titles.js +2 -2
  60. package/index.js +3 -3
  61. package/index.module-dd06cfbf.js +6 -0
  62. package/index.module-e46cc90c.js +6 -0
  63. package/mobile.js +3 -3
  64. package/modern/components/primary-tablist/Component.desktop.js +1 -1
  65. package/modern/components/primary-tablist/Component.js +1 -1
  66. package/modern/components/primary-tablist/Component.mobile.js +2 -2
  67. package/modern/components/primary-tablist/Component.responsive.js +1 -1
  68. package/modern/components/primary-tablist/index.css +29 -29
  69. package/modern/components/primary-tablist/mobile.css +34 -33
  70. package/modern/components/scrollable-container/Component.js +1 -1
  71. package/modern/components/scrollable-container/index.css +5 -5
  72. package/modern/components/secondary-tablist/Component.desktop.js +1 -1
  73. package/modern/components/secondary-tablist/Component.mobile.js +2 -2
  74. package/modern/components/secondary-tablist/Component.responsive.js +1 -1
  75. package/modern/components/secondary-tablist/index.css +11 -11
  76. package/modern/components/secondary-tablist/mobile.css +15 -14
  77. package/modern/components/tab/Component.js +1 -1
  78. package/modern/components/tab/index.css +3 -3
  79. package/modern/components/tabs/Component.desktop.js +2 -2
  80. package/modern/components/tabs/Component.mobile.js +2 -2
  81. package/modern/components/tabs/Component.responsive.js +2 -2
  82. package/modern/desktop.js +2 -2
  83. package/modern/hooks/use-collapsible-elements.js +4 -6
  84. package/modern/hooks/use-tablist-titles.js +1 -1
  85. package/modern/index.js +2 -2
  86. package/modern/index.module-3a799412.js +4 -0
  87. package/modern/index.module-d05b11d2.js +4 -0
  88. package/modern/mobile.js +2 -2
  89. package/modern/responsive.js +2 -2
  90. package/package.json +3 -3
  91. package/responsive.js +3 -3
  92. package/synthetic-events.js +1 -1
  93. package/{tslib.es6-860bcbc6.d.ts → tslib.es6-57c5c09e.d.ts} +0 -0
  94. package/{tslib.es6-860bcbc6.js → tslib.es6-57c5c09e.js} +0 -0
  95. package/esm/index.module-ba97f96d.js +0 -4
  96. package/esm/index.module-da19acab.js +0 -4
  97. package/index.module-3b1c7c9a.js +0 -6
  98. package/index.module-88a600f7.js +0 -6
  99. package/modern/index.module-08b2503f.js +0 -4
  100. package/modern/index.module-a4ad700d.js +0 -4
@@ -1,4 +1,4 @@
1
- /* hash: x86sm */
1
+ /* hash: 3r47e */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  } :root {
@@ -50,29 +50,29 @@
50
50
 
51
51
  /* size xl */
52
52
  --secondary-tablist-xl-gaps: var(--gap-m);
53
- } .tabs__component_lu2o6 {
53
+ } .tabs__component_1xkkh {
54
54
  position: relative;
55
55
  display: inline-flex;
56
- } .tabs__fullWidthScroll_lu2o6 {
56
+ } .tabs__fullWidthScroll_1xkkh {
57
57
  margin: 0 var(--gap-m);
58
- } .tabs__container_lu2o6 {
58
+ } .tabs__container_1xkkh {
59
59
  overflow: hidden;
60
60
 
61
61
  /* focus-outline fix */
62
62
  margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
63
63
  padding: var(--gap-2xs) 0 var(--gap-2xs) var(--gap-2xs);
64
- } .tabs__title_lu2o6 {
64
+ } .tabs__title_1xkkh {
65
65
  white-space: nowrap;
66
- } /* sizes */ .tabs__xxs_lu2o6 .tabs__title_lu2o6 + .tabs__title_lu2o6 {
66
+ } /* sizes */ .tabs__xxs_1xkkh .tabs__title_1xkkh + .tabs__title_1xkkh {
67
67
  margin-left: var(--secondary-tablist-xxs-gaps);
68
- } .tabs__xs_lu2o6 .tabs__title_lu2o6 + .tabs__title_lu2o6 {
68
+ } .tabs__xs_1xkkh .tabs__title_1xkkh + .tabs__title_1xkkh {
69
69
  margin-left: var(--secondary-tablist-xs-gaps);
70
- } .tabs__s_lu2o6 .tabs__title_lu2o6 + .tabs__title_lu2o6 {
70
+ } .tabs__s_1xkkh .tabs__title_1xkkh + .tabs__title_1xkkh {
71
71
  margin-left: var(--secondary-tablist-s-gaps);
72
- } .tabs__m_lu2o6 .tabs__title_lu2o6 + .tabs__title_lu2o6 {
72
+ } .tabs__m_1xkkh .tabs__title_1xkkh + .tabs__title_1xkkh {
73
73
  margin-left: var(--secondary-tablist-m-gaps);
74
- } .tabs__l_lu2o6 .tabs__title_lu2o6 + .tabs__title_lu2o6 {
74
+ } .tabs__l_1xkkh .tabs__title_1xkkh + .tabs__title_1xkkh {
75
75
  margin-left: var(--secondary-tablist-l-gaps);
76
- } .tabs__xl_lu2o6 .tabs__title_lu2o6 + .tabs__title_lu2o6 {
76
+ } .tabs__xl_1xkkh .tabs__title_1xkkh + .tabs__title_1xkkh {
77
77
  margin-left: var(--secondary-tablist-xl-gaps);
78
78
  }
@@ -1,4 +1,4 @@
1
- /* hash: 1qdro */
1
+ /* hash: 16pmx */
2
2
  :root {
3
3
  }/* deprecated */:root {
4
4
  }:root {
@@ -51,30 +51,30 @@
51
51
 
52
52
  /* size xl */
53
53
  --secondary-tablist-xl-gaps: var(--gap-m);
54
- }.tabs__component_lu2o6 {
54
+ }.tabs__component_1xkkh {
55
55
  position: relative;
56
56
  display: inline-flex;
57
- }.tabs__fullWidthScroll_lu2o6 {
57
+ }.tabs__fullWidthScroll_1xkkh {
58
58
  margin: 0 var(--gap-m);
59
- }.tabs__container_lu2o6 {
59
+ }.tabs__container_1xkkh {
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_lu2o6 {
65
+ }.tabs__title_1xkkh {
66
66
  white-space: nowrap;
67
- }/* sizes */.tabs__xxs_lu2o6 .tabs__title_lu2o6 + .tabs__title_lu2o6 {
67
+ }/* sizes */.tabs__xxs_1xkkh .tabs__title_1xkkh + .tabs__title_1xkkh {
68
68
  margin-left: var(--secondary-tablist-xxs-gaps);
69
- }.tabs__xs_lu2o6 .tabs__title_lu2o6 + .tabs__title_lu2o6 {
69
+ }.tabs__xs_1xkkh .tabs__title_1xkkh + .tabs__title_1xkkh {
70
70
  margin-left: var(--secondary-tablist-xs-gaps);
71
- }.tabs__s_lu2o6 .tabs__title_lu2o6 + .tabs__title_lu2o6 {
71
+ }.tabs__s_1xkkh .tabs__title_1xkkh + .tabs__title_1xkkh {
72
72
  margin-left: var(--secondary-tablist-s-gaps);
73
- }.tabs__m_lu2o6 .tabs__title_lu2o6 + .tabs__title_lu2o6 {
73
+ }.tabs__m_1xkkh .tabs__title_1xkkh + .tabs__title_1xkkh {
74
74
  margin-left: var(--secondary-tablist-m-gaps);
75
- }.tabs__l_lu2o6 .tabs__title_lu2o6 + .tabs__title_lu2o6 {
75
+ }.tabs__l_1xkkh .tabs__title_1xkkh + .tabs__title_1xkkh {
76
76
  margin-left: var(--secondary-tablist-l-gaps);
77
- }.tabs__xl_lu2o6 .tabs__title_lu2o6 + .tabs__title_lu2o6 {
77
+ }.tabs__xl_1xkkh .tabs__title_1xkkh + .tabs__title_1xkkh {
78
78
  margin-left: var(--secondary-tablist-xl-gaps);
79
79
  } :root {
80
80
  --color-dark-indigo: #0b1f35;
@@ -810,7 +810,8 @@
810
810
  sans-serif;
811
811
  --disabled-cursor: not-allowed;
812
812
  --arrow-transform: rotate(180deg);
813
- --size-xs-height: 32px;
813
+ --size-xxs-height: 32px;
814
+ --size-xs-height: 40px;
814
815
  --size-s-height: 48px;
815
816
  --size-m-height: 56px;
816
817
  --size-l-height: 64px;
@@ -880,7 +881,7 @@
880
881
 
881
882
  /* size xl */
882
883
  --secondary-tablist-xl-gaps: var(--gap-m);
883
- } .tabs__title_1m49l {
884
- } .tabs__mobile_1m49l .tabs__title_1m49l + .tabs__title_1m49l {
884
+ } .tabs__title_124hg {
885
+ } .tabs__mobile_124hg .tabs__title_124hg + .tabs__title_124hg {
885
886
  margin-left: var(--secondary-tablist-mobile-gaps);
886
887
  }
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import cn from 'classnames';
3
3
 
4
- var styles = {"component":"tabs__component_1e556","hidden":"tabs__hidden_1e556"};
4
+ var styles = {"component":"tabs__component_r78ti","hidden":"tabs__hidden_r78ti"};
5
5
  require('./index.css')
6
6
 
7
7
  var Tab = function (_a) {
@@ -1,8 +1,8 @@
1
- /* hash: x3c1w */
2
- .tabs__component_1e556 {
1
+ /* hash: gpg1w */
2
+ .tabs__component_r78ti {
3
3
  outline: none;
4
4
  }
5
5
 
6
- .tabs__hidden_1e556 {
6
+ .tabs__hidden_r78ti {
7
7
  display: none;
8
8
  }
@@ -1,4 +1,4 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-ef625021.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-3bc6f388.js';
2
2
  import React from 'react';
3
3
  import { PrimaryTabListDesktop } from '../primary-tablist/Component.desktop.js';
4
4
  import { SecondaryTabListDesktop } from '../secondary-tablist/Component.desktop.js';
@@ -17,10 +17,10 @@ import '../../synthetic-events.js';
17
17
  import '../scrollable-container/Component.js';
18
18
  import 'compute-scroll-into-view';
19
19
  import '../title/Component.js';
20
- import '../../index.module-ba97f96d.js';
20
+ import '../../index.module-07028906.js';
21
21
  import '../secondary-tablist/Component.js';
22
22
  import '@alfalab/core-components-tag/esm';
23
- import '../../index.module-da19acab.js';
23
+ import '../../index.module-65c3d6bc.js';
24
24
 
25
25
  var views = {
26
26
  primary: PrimaryTabListDesktop,
@@ -1,4 +1,4 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-ef625021.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-3bc6f388.js';
2
2
  import React from 'react';
3
3
  import { PrimaryTabListMobile } from '../primary-tablist/Component.mobile.js';
4
4
  import { SecondaryTabListMobile } from '../secondary-tablist/Component.mobile.js';
@@ -17,10 +17,10 @@ import '../../synthetic-events.js';
17
17
  import '../scrollable-container/Component.js';
18
18
  import 'compute-scroll-into-view';
19
19
  import '../title/Component.js';
20
- import '../../index.module-ba97f96d.js';
20
+ import '../../index.module-07028906.js';
21
21
  import '../secondary-tablist/Component.js';
22
22
  import '@alfalab/core-components-tag/esm';
23
- import '../../index.module-da19acab.js';
23
+ import '../../index.module-65c3d6bc.js';
24
24
 
25
25
  var views = {
26
26
  primary: PrimaryTabListMobile,
@@ -1,4 +1,4 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-ef625021.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-3bc6f388.js';
2
2
  import React from 'react';
3
3
  import { PrimaryTabListResponsive } from '../primary-tablist/Component.responsive.js';
4
4
  import { SecondaryTabListResponsive } from '../secondary-tablist/Component.responsive.js';
@@ -18,12 +18,12 @@ import '../../synthetic-events.js';
18
18
  import '../scrollable-container/Component.js';
19
19
  import 'compute-scroll-into-view';
20
20
  import '../title/Component.js';
21
- import '../../index.module-ba97f96d.js';
21
+ import '../../index.module-07028906.js';
22
22
  import '../primary-tablist/Component.mobile.js';
23
23
  import '../secondary-tablist/Component.desktop.js';
24
24
  import '../secondary-tablist/Component.js';
25
25
  import '@alfalab/core-components-tag/esm';
26
- import '../../index.module-da19acab.js';
26
+ import '../../index.module-65c3d6bc.js';
27
27
  import '../secondary-tablist/Component.mobile.js';
28
28
 
29
29
  var views = {
@@ -1,4 +1,4 @@
1
- import { _ as __rest, a as __assign } from '../../tslib.es6-ef625021.js';
1
+ import { _ as __rest, a as __assign } from '../../tslib.es6-3bc6f388.js';
2
2
  import React, { forwardRef } from 'react';
3
3
  import cn from 'classnames';
4
4
 
@@ -1,4 +1,4 @@
1
1
  export { Title } from './Component.js';
2
- import '../../tslib.es6-ef625021.js';
2
+ import '../../tslib.es6-3bc6f388.js';
3
3
  import 'react';
4
4
  import 'classnames';
package/esm/desktop.js CHANGED
@@ -5,7 +5,7 @@ export { Tab } from './components/tab/Component.js';
5
5
  export { TabsDesktop } from './components/tabs/Component.desktop.js';
6
6
  export { useTabs } from './hooks/use-tabs.js';
7
7
  export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
8
- import './tslib.es6-ef625021.js';
8
+ import './tslib.es6-3bc6f388.js';
9
9
  import 'react';
10
10
  import './components/primary-tablist/Component.js';
11
11
  import 'classnames';
@@ -16,10 +16,10 @@ import './hooks/use-tablist-titles.js';
16
16
  import '@alfalab/hooks';
17
17
  import './synthetic-events.js';
18
18
  import './components/title/Component.js';
19
- import './index.module-ba97f96d.js';
19
+ import './index.module-07028906.js';
20
20
  import 'compute-scroll-into-view';
21
21
  import './components/secondary-tablist/Component.js';
22
22
  import '@alfalab/core-components-tag/esm';
23
- import './index.module-da19acab.js';
23
+ import './index.module-65c3d6bc.js';
24
24
  import './components/tabs/Component.js';
25
25
  import '@juggle/resize-observer';
@@ -1,4 +1,4 @@
1
- import { b as __spreadArray } from '../tslib.es6-ef625021.js';
1
+ import { b as __spreadArray } from '../tslib.es6-3bc6f388.js';
2
2
  import { useState, useRef } from 'react';
3
3
  import { ResizeObserver } from '@juggle/resize-observer';
4
4
  import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
@@ -14,17 +14,15 @@ var useCollapsibleElements = function (selectors, deps) {
14
14
  if (!container)
15
15
  return;
16
16
  var addon = addonRef.current;
17
- var moreElement = Array.from(container.querySelectorAll('[role="tablist"]')).pop();
18
- var moreElementRect = moreElement === null || moreElement === void 0 ? void 0 : moreElement.getBoundingClientRect();
17
+ var containerWidth = (inlineSize || container.clientWidth) - ((addon === null || addon === void 0 ? void 0 : addon.scrollWidth) || 0) * 1.5; // при расчётах, даём кнопке "Ещё" чуть больше места, чтобы точно влезла
19
18
  var elements = Array.from(container.querySelectorAll(selectors));
20
- var containerWidth = (inlineSize || container.clientWidth) - ((moreElementRect === null || moreElementRect === void 0 ? void 0 : moreElementRect.width) || 0) * 1.5; // при рассчётах, даём кнопке "Ещё" чуть больше места, чтобы точно влезла
21
19
  var collapsedIds = elements.reduce(function (acc, element) {
22
- var offsetLeft = element.offsetLeft, offsetWidth = element.offsetWidth, id = element.id;
23
- var elementOffset = offsetLeft + offsetWidth;
20
+ var offsetLeft = element.offsetLeft, scrollWidth = element.scrollWidth, id = element.id;
21
+ var elementOffset = offsetLeft + scrollWidth;
24
22
  var isCollapsedElement = getComputedStyle(element).visibility === 'collapse';
25
23
  var maxWidth = addon && !isCollapsedElement
26
24
  ? containerWidth -
27
- (addon.offsetWidth + parseFloat(getComputedStyle(addon).marginLeft))
25
+ (addon.scrollWidth + parseFloat(getComputedStyle(addon).marginLeft))
28
26
  : containerWidth;
29
27
  if (elementOffset >= maxWidth)
30
28
  acc.push(id);
@@ -1,4 +1,4 @@
1
- import { a as __assign } from '../tslib.es6-ef625021.js';
1
+ import { a as __assign } from '../tslib.es6-3bc6f388.js';
2
2
  import { useMemo } from 'react';
3
3
  import { useMedia } from '@alfalab/hooks';
4
4
  import { useCollapsibleElements } from './use-collapsible-elements.js';
@@ -7,7 +7,7 @@ import '@juggle/resize-observer';
7
7
 
8
8
  var useTablistTitles = function (_a) {
9
9
  var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, collapsible = _a.collapsible, collapsedTabsIds = _a.collapsedTabsIds, breakpoint = _a.breakpoint, onChange = _a.onChange;
10
- var _c = useCollapsibleElements('[role=tab]', [titles]), containerRef = _c.containerRef, addonRef = _c.addonRef, idsCollapsedElements = _c.idsCollapsedElements;
10
+ var _c = useCollapsibleElements('[role=tab]', [titles, collapsedTabsIds]), containerRef = _c.containerRef, addonRef = _c.addonRef, idsCollapsedElements = _c.idsCollapsedElements;
11
11
  var view = useMedia([['desktop', "(min-width: ".concat(breakpoint, "px)")]], 'desktop')[0];
12
12
  var tablistTitles = useMemo(function () {
13
13
  var idsCollapsedTitles = [];
package/esm/index.js CHANGED
@@ -4,7 +4,7 @@ export { SecondaryTabListResponsive } from './components/secondary-tablist/Compo
4
4
  export { Tab } from './components/tab/Component.js';
5
5
  export { TabsResponsive } from './components/tabs/Component.responsive.js';
6
6
  export { useTabs } from './hooks/use-tabs.js';
7
- import './tslib.es6-ef625021.js';
7
+ import './tslib.es6-3bc6f388.js';
8
8
  import 'react';
9
9
  import '@alfalab/hooks';
10
10
  import './components/primary-tablist/Component.desktop.js';
@@ -19,11 +19,11 @@ import '@juggle/resize-observer';
19
19
  import './synthetic-events.js';
20
20
  import './components/title/Component.js';
21
21
  import 'compute-scroll-into-view';
22
- import './index.module-ba97f96d.js';
22
+ import './index.module-07028906.js';
23
23
  import './components/primary-tablist/Component.mobile.js';
24
24
  import './components/secondary-tablist/Component.desktop.js';
25
25
  import './components/secondary-tablist/Component.js';
26
26
  import '@alfalab/core-components-tag/esm';
27
- import './index.module-da19acab.js';
27
+ import './index.module-65c3d6bc.js';
28
28
  import './components/secondary-tablist/Component.mobile.js';
29
29
  import './components/tabs/Component.js';
@@ -0,0 +1,4 @@
1
+ var commonStyles = {"component":"tabs__component_rz0bu","fullWidthScroll":"tabs__fullWidthScroll_rz0bu","container":"tabs__container_rz0bu","title":"tabs__title_rz0bu","disabled":"tabs__disabled_rz0bu","focused":"tabs__focused_rz0bu","collapsed":"tabs__collapsed_rz0bu","selected":"tabs__selected_rz0bu","line":"tabs__line_rz0bu","s":"tabs__s_rz0bu","xs":"tabs__xs_rz0bu","xxs":"tabs__xxs_rz0bu","pickerWrapper":"tabs__pickerWrapper_rz0bu","option":"tabs__option_rz0bu","m":"tabs__m_rz0bu","l":"tabs__l_rz0bu","xl":"tabs__xl_rz0bu","rightAddons":"tabs__rightAddons_rz0bu"};
2
+ require('./components/primary-tablist/index.css')
3
+
4
+ export { commonStyles as c };
@@ -0,0 +1,4 @@
1
+ var commonStyles = {"component":"tabs__component_1xkkh","fullWidthScroll":"tabs__fullWidthScroll_1xkkh","container":"tabs__container_1xkkh","title":"tabs__title_1xkkh","xxs":"tabs__xxs_1xkkh","xs":"tabs__xs_1xkkh","s":"tabs__s_1xkkh","m":"tabs__m_1xkkh","l":"tabs__l_1xkkh","xl":"tabs__xl_1xkkh"};
2
+ require('./components/secondary-tablist/index.css')
3
+
4
+ export { commonStyles as c };
package/esm/mobile.js CHANGED
@@ -4,7 +4,7 @@ export { SecondaryTabListMobile } from './components/secondary-tablist/Component
4
4
  export { Tab } from './components/tab/Component.js';
5
5
  export { TabsMobile } from './components/tabs/Component.mobile.js';
6
6
  export { useTabs } from './hooks/use-tabs.js';
7
- import './tslib.es6-ef625021.js';
7
+ import './tslib.es6-3bc6f388.js';
8
8
  import 'react';
9
9
  import 'classnames';
10
10
  import './components/primary-tablist/Component.js';
@@ -18,8 +18,8 @@ import '@juggle/resize-observer';
18
18
  import './synthetic-events.js';
19
19
  import './components/title/Component.js';
20
20
  import 'compute-scroll-into-view';
21
- import './index.module-ba97f96d.js';
21
+ import './index.module-07028906.js';
22
22
  import './components/secondary-tablist/Component.js';
23
23
  import '@alfalab/core-components-tag/esm';
24
- import './index.module-da19acab.js';
24
+ import './index.module-65c3d6bc.js';
25
25
  import './components/tabs/Component.js';
package/esm/responsive.js CHANGED
@@ -5,7 +5,7 @@ export { Tab } from './components/tab/Component.js';
5
5
  export { TabsResponsive } from './components/tabs/Component.responsive.js';
6
6
  export { useTabs } from './hooks/use-tabs.js';
7
7
  export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
8
- import './tslib.es6-ef625021.js';
8
+ import './tslib.es6-3bc6f388.js';
9
9
  import 'react';
10
10
  import '@alfalab/hooks';
11
11
  import './components/primary-tablist/Component.desktop.js';
@@ -19,11 +19,11 @@ import '@juggle/resize-observer';
19
19
  import './synthetic-events.js';
20
20
  import './components/title/Component.js';
21
21
  import 'compute-scroll-into-view';
22
- import './index.module-ba97f96d.js';
22
+ import './index.module-07028906.js';
23
23
  import './components/primary-tablist/Component.mobile.js';
24
24
  import './components/secondary-tablist/Component.desktop.js';
25
25
  import './components/secondary-tablist/Component.js';
26
26
  import '@alfalab/core-components-tag/esm';
27
- import './index.module-da19acab.js';
27
+ import './index.module-65c3d6bc.js';
28
28
  import './components/secondary-tablist/Component.mobile.js';
29
29
  import './components/tabs/Component.js';
@@ -1,4 +1,4 @@
1
- import { a as __assign } from './tslib.es6-ef625021.js';
1
+ import { a as __assign } from './tslib.es6-3bc6f388.js';
2
2
 
3
3
  var createSyntheticEvent = function (event) {
4
4
  var isDefaultPrevented = false;
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var tslib_es6 = require('../tslib.es6-860bcbc6.js');
3
+ var tslib_es6 = require('../tslib.es6-57c5c09e.js');
4
4
  var React = require('react');
5
5
  var resizeObserver = require('@juggle/resize-observer');
6
6
  var hooks = require('@alfalab/hooks');
@@ -16,17 +16,15 @@ var useCollapsibleElements = function (selectors, deps) {
16
16
  if (!container)
17
17
  return;
18
18
  var addon = addonRef.current;
19
- var moreElement = Array.from(container.querySelectorAll('[role="tablist"]')).pop();
20
- var moreElementRect = moreElement === null || moreElement === void 0 ? void 0 : moreElement.getBoundingClientRect();
19
+ var containerWidth = (inlineSize || container.clientWidth) - ((addon === null || addon === void 0 ? void 0 : addon.scrollWidth) || 0) * 1.5; // при расчётах, даём кнопке "Ещё" чуть больше места, чтобы точно влезла
21
20
  var elements = Array.from(container.querySelectorAll(selectors));
22
- var containerWidth = (inlineSize || container.clientWidth) - ((moreElementRect === null || moreElementRect === void 0 ? void 0 : moreElementRect.width) || 0) * 1.5; // при рассчётах, даём кнопке "Ещё" чуть больше места, чтобы точно влезла
23
21
  var collapsedIds = elements.reduce(function (acc, element) {
24
- var offsetLeft = element.offsetLeft, offsetWidth = element.offsetWidth, id = element.id;
25
- var elementOffset = offsetLeft + offsetWidth;
22
+ var offsetLeft = element.offsetLeft, scrollWidth = element.scrollWidth, id = element.id;
23
+ var elementOffset = offsetLeft + scrollWidth;
26
24
  var isCollapsedElement = getComputedStyle(element).visibility === 'collapse';
27
25
  var maxWidth = addon && !isCollapsedElement
28
26
  ? containerWidth -
29
- (addon.offsetWidth + parseFloat(getComputedStyle(addon).marginLeft))
27
+ (addon.scrollWidth + parseFloat(getComputedStyle(addon).marginLeft))
30
28
  : containerWidth;
31
29
  if (elementOffset >= maxWidth)
32
30
  acc.push(id);
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var tslib_es6 = require('../tslib.es6-860bcbc6.js');
3
+ var tslib_es6 = require('../tslib.es6-57c5c09e.js');
4
4
  var React = require('react');
5
5
  var hooks = require('@alfalab/hooks');
6
6
  var hooks_useCollapsibleElements = require('./use-collapsible-elements.js');
@@ -9,7 +9,7 @@ require('@juggle/resize-observer');
9
9
 
10
10
  var useTablistTitles = function (_a) {
11
11
  var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, collapsible = _a.collapsible, collapsedTabsIds = _a.collapsedTabsIds, breakpoint = _a.breakpoint, onChange = _a.onChange;
12
- var _c = hooks_useCollapsibleElements.useCollapsibleElements('[role=tab]', [titles]), containerRef = _c.containerRef, addonRef = _c.addonRef, idsCollapsedElements = _c.idsCollapsedElements;
12
+ var _c = hooks_useCollapsibleElements.useCollapsibleElements('[role=tab]', [titles, collapsedTabsIds]), containerRef = _c.containerRef, addonRef = _c.addonRef, idsCollapsedElements = _c.idsCollapsedElements;
13
13
  var view = hooks.useMedia([['desktop', "(min-width: ".concat(breakpoint, "px)")]], 'desktop')[0];
14
14
  var tablistTitles = React.useMemo(function () {
15
15
  var idsCollapsedTitles = [];
package/index.js CHANGED
@@ -6,7 +6,7 @@ var components_secondaryTablist_Component_responsive = require('./components/sec
6
6
  var components_tab_Component = require('./components/tab/Component.js');
7
7
  var components_tabs_Component_responsive = require('./components/tabs/Component.responsive.js');
8
8
  var hooks_useTabs = require('./hooks/use-tabs.js');
9
- require('./tslib.es6-860bcbc6.js');
9
+ require('./tslib.es6-57c5c09e.js');
10
10
  require('react');
11
11
  require('@alfalab/hooks');
12
12
  require('./components/primary-tablist/Component.desktop.js');
@@ -21,12 +21,12 @@ require('@juggle/resize-observer');
21
21
  require('./synthetic-events.js');
22
22
  require('./components/title/Component.js');
23
23
  require('compute-scroll-into-view');
24
- require('./index.module-88a600f7.js');
24
+ require('./index.module-dd06cfbf.js');
25
25
  require('./components/primary-tablist/Component.mobile.js');
26
26
  require('./components/secondary-tablist/Component.desktop.js');
27
27
  require('./components/secondary-tablist/Component.js');
28
28
  require('@alfalab/core-components-tag');
29
- require('./index.module-3b1c7c9a.js');
29
+ require('./index.module-e46cc90c.js');
30
30
  require('./components/secondary-tablist/Component.mobile.js');
31
31
  require('./components/tabs/Component.js');
32
32
 
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var commonStyles = {"component":"tabs__component_rz0bu","fullWidthScroll":"tabs__fullWidthScroll_rz0bu","container":"tabs__container_rz0bu","title":"tabs__title_rz0bu","disabled":"tabs__disabled_rz0bu","focused":"tabs__focused_rz0bu","collapsed":"tabs__collapsed_rz0bu","selected":"tabs__selected_rz0bu","line":"tabs__line_rz0bu","s":"tabs__s_rz0bu","xs":"tabs__xs_rz0bu","xxs":"tabs__xxs_rz0bu","pickerWrapper":"tabs__pickerWrapper_rz0bu","option":"tabs__option_rz0bu","m":"tabs__m_rz0bu","l":"tabs__l_rz0bu","xl":"tabs__xl_rz0bu","rightAddons":"tabs__rightAddons_rz0bu"};
4
+ require('./components/primary-tablist/index.css')
5
+
6
+ exports.commonStyles = commonStyles;
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var commonStyles = {"component":"tabs__component_1xkkh","fullWidthScroll":"tabs__fullWidthScroll_1xkkh","container":"tabs__container_1xkkh","title":"tabs__title_1xkkh","xxs":"tabs__xxs_1xkkh","xs":"tabs__xs_1xkkh","s":"tabs__s_1xkkh","m":"tabs__m_1xkkh","l":"tabs__l_1xkkh","xl":"tabs__xl_1xkkh"};
4
+ require('./components/secondary-tablist/index.css')
5
+
6
+ exports.commonStyles = commonStyles;
package/mobile.js CHANGED
@@ -6,7 +6,7 @@ var components_secondaryTablist_Component_mobile = require('./components/seconda
6
6
  var components_tab_Component = require('./components/tab/Component.js');
7
7
  var components_tabs_Component_mobile = require('./components/tabs/Component.mobile.js');
8
8
  var hooks_useTabs = require('./hooks/use-tabs.js');
9
- require('./tslib.es6-860bcbc6.js');
9
+ require('./tslib.es6-57c5c09e.js');
10
10
  require('react');
11
11
  require('classnames');
12
12
  require('./components/primary-tablist/Component.js');
@@ -20,10 +20,10 @@ require('@juggle/resize-observer');
20
20
  require('./synthetic-events.js');
21
21
  require('./components/title/Component.js');
22
22
  require('compute-scroll-into-view');
23
- require('./index.module-88a600f7.js');
23
+ require('./index.module-dd06cfbf.js');
24
24
  require('./components/secondary-tablist/Component.js');
25
25
  require('@alfalab/core-components-tag');
26
- require('./index.module-3b1c7c9a.js');
26
+ require('./index.module-e46cc90c.js');
27
27
  require('./components/tabs/Component.js');
28
28
 
29
29
 
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { PrimaryTabList } from './Component.js';
3
- import { c as commonStyles } from '../../index.module-a4ad700d.js';
3
+ import { c as commonStyles } from '../../index.module-3a799412.js';
4
4
  import 'classnames';
5
5
  import '@alfalab/core-components-badge/modern';
6
6
  import '@alfalab/core-components-keyboard-focusable/modern';
@@ -51,7 +51,7 @@ const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titl
51
51
  [styles.fullWidthScroll]: fullWidthScroll,
52
52
  }) },
53
53
  tablistTitles.map((title, index) => (React.createElement(KeyboardFocusable, { key: title.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...title, focused: focused, styles: styles }))))),
54
- collapsedOptions.length ? (React.createElement("span", { ref: addonRef, role: 'tablist', className: styles.pickerWrapper },
54
+ collapsedOptions.length ? (React.createElement("span", { ref: addonRef, role: 'menu', className: styles.pickerWrapper },
55
55
  React.createElement(PickerButtonDesktop, { fieldClassName: styles.title, optionClassName: cn(styles.pickerOption, size && styles[size]), options: collapsedOptions, onChange: handleOptionsChange, rightAddons: collapsedAddonsLength ? (React.createElement(Badge, { view: 'count', content: collapsedAddonsLength })) : null, size: 'l', view: 'ghost', label: '\u0415\u0449\u0451', popoverPosition: 'bottom-end' }))) : null,
56
56
  React.createElement("div", { className: styles.line, ref: lineRef })));
57
57
  return scrollable && !collapsible ? (React.createElement(ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll }, renderContent())) : (React.createElement("div", { ref: containerRef, className: cn(styles.container, containerClassName) }, renderContent()));
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { PrimaryTabList } from './Component.js';
4
- import { c as commonStyles } from '../../index.module-a4ad700d.js';
4
+ import { c as commonStyles } from '../../index.module-3a799412.js';
5
5
  import '@alfalab/core-components-badge/modern';
6
6
  import '@alfalab/core-components-keyboard-focusable/modern';
7
7
  import '@alfalab/core-components-picker-button/modern/desktop';
@@ -15,7 +15,7 @@ import '../scrollable-container/Component.js';
15
15
  import 'compute-scroll-into-view';
16
16
  import '../title/Component.js';
17
17
 
18
- const mobileStyles = {"title":"tabs__title_1awe6 tabs__title_mcuzy","mobile":"tabs__mobile_1awe6"};
18
+ const mobileStyles = {"title":"tabs__title_u0qfl tabs__title_rz0bu","mobile":"tabs__mobile_u0qfl"};
19
19
  require('./mobile.css')
20
20
 
21
21
  const styles = {
@@ -15,7 +15,7 @@ import '../../synthetic-events.js';
15
15
  import '../scrollable-container/Component.js';
16
16
  import 'compute-scroll-into-view';
17
17
  import '../title/Component.js';
18
- import '../../index.module-a4ad700d.js';
18
+ import '../../index.module-3a799412.js';
19
19
 
20
20
  const PrimaryTabListResponsive = ({ size, defaultMatch = 'desktop', collapsible, collapsedTabsIds, fullWidthScroll, ...restProps }) => {
21
21
  const [view] = useMedia([