@alfalab/core-components-tabs 9.1.1 → 9.2.1

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 (70) hide show
  1. package/components/primary-tablist/index.css +131 -131
  2. package/components/primary-tablist/index.module.css.js +1 -1
  3. package/components/primary-tablist/mobile.css +219 -219
  4. package/components/primary-tablist/mobile.module.css.js +1 -1
  5. package/components/scroll-controls/index.css +11 -11
  6. package/components/scroll-controls/index.module.css.js +1 -1
  7. package/components/scrollable-container/index.css +5 -5
  8. package/components/scrollable-container/index.module.css.js +1 -1
  9. package/components/secondary-tablist/index.css +18 -18
  10. package/components/secondary-tablist/index.module.css.js +1 -1
  11. package/components/secondary-tablist/mobile.css +22 -22
  12. package/components/secondary-tablist/mobile.module.css.js +1 -1
  13. package/components/tab/index.css +2 -2
  14. package/components/tab/index.module.css.js +1 -1
  15. package/components/tabs/Component.d.ts +1 -1
  16. package/components/tabs/Component.js +2 -11
  17. package/components/tabs/Component.js.map +1 -1
  18. package/cssm/components/tabs/Component.d.ts +1 -1
  19. package/cssm/components/tabs/Component.js +2 -11
  20. package/cssm/components/tabs/Component.js.map +1 -1
  21. package/cssm/hooks/use-tablist-titles.d.ts +49 -0
  22. package/cssm/typings.d.ts +11 -1
  23. package/esm/components/primary-tablist/index.css +131 -131
  24. package/esm/components/primary-tablist/index.module.css.js +1 -1
  25. package/esm/components/primary-tablist/mobile.css +219 -219
  26. package/esm/components/primary-tablist/mobile.module.css.js +1 -1
  27. package/esm/components/scroll-controls/index.css +11 -11
  28. package/esm/components/scroll-controls/index.module.css.js +1 -1
  29. package/esm/components/scrollable-container/index.css +5 -5
  30. package/esm/components/scrollable-container/index.module.css.js +1 -1
  31. package/esm/components/secondary-tablist/index.css +18 -18
  32. package/esm/components/secondary-tablist/index.module.css.js +1 -1
  33. package/esm/components/secondary-tablist/mobile.css +22 -22
  34. package/esm/components/secondary-tablist/mobile.module.css.js +1 -1
  35. package/esm/components/tab/index.css +2 -2
  36. package/esm/components/tab/index.module.css.js +1 -1
  37. package/esm/components/tabs/Component.d.ts +1 -1
  38. package/esm/components/tabs/Component.js +2 -11
  39. package/esm/components/tabs/Component.js.map +1 -1
  40. package/esm/hooks/use-tablist-titles.d.ts +49 -0
  41. package/esm/typings.d.ts +11 -1
  42. package/hooks/use-tablist-titles.d.ts +49 -0
  43. package/modern/components/primary-tablist/index.css +131 -131
  44. package/modern/components/primary-tablist/index.module.css.js +1 -1
  45. package/modern/components/primary-tablist/mobile.css +219 -219
  46. package/modern/components/primary-tablist/mobile.module.css.js +1 -1
  47. package/modern/components/scroll-controls/index.css +11 -11
  48. package/modern/components/scroll-controls/index.module.css.js +1 -1
  49. package/modern/components/scrollable-container/index.css +5 -5
  50. package/modern/components/scrollable-container/index.module.css.js +1 -1
  51. package/modern/components/secondary-tablist/index.css +18 -18
  52. package/modern/components/secondary-tablist/index.module.css.js +1 -1
  53. package/modern/components/secondary-tablist/mobile.css +22 -22
  54. package/modern/components/secondary-tablist/mobile.module.css.js +1 -1
  55. package/modern/components/tab/index.css +2 -2
  56. package/modern/components/tab/index.module.css.js +1 -1
  57. package/modern/components/tabs/Component.d.ts +1 -1
  58. package/modern/components/tabs/Component.js +2 -1
  59. package/modern/components/tabs/Component.js.map +1 -1
  60. package/modern/hooks/use-tablist-titles.d.ts +49 -0
  61. package/modern/typings.d.ts +11 -1
  62. package/moderncssm/components/tabs/Component.d.ts +1 -1
  63. package/moderncssm/components/tabs/Component.js +2 -1
  64. package/moderncssm/components/tabs/Component.js.map +1 -1
  65. package/moderncssm/hooks/use-tablist-titles.d.ts +49 -0
  66. package/moderncssm/typings.d.ts +11 -1
  67. package/package.json +6 -6
  68. package/src/components/tabs/Component.tsx +3 -0
  69. package/src/typings.ts +24 -1
  70. package/typings.d.ts +11 -1
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./mobile.css');
4
4
 
5
- var mobileStyles = {"title":"tabs__title_1jzj4 tabs__title_1uuqs","mobile":"tabs__mobile_1jzj4","paragraph-primary-large":"tabs__paragraph-primary-large_1jzj4","paragraph-primary-medium":"tabs__paragraph-primary-medium_1jzj4","paragraph-primary-small":"tabs__paragraph-primary-small_1jzj4","action-primary-large":"tabs__action-primary-large_1jzj4","action-primary-medium":"tabs__action-primary-medium_1jzj4","action-primary-small":"tabs__action-primary-small_1jzj4","accent-primary-large":"tabs__accent-primary-large_1jzj4","accent-primary-medium":"tabs__accent-primary-medium_1jzj4","accent-primary-small":"tabs__accent-primary-small_1jzj4","pickerWrapper":"tabs__pickerWrapper_1jzj4","option":"tabs__option_1jzj4","scrollControls":"tabs__scrollControls_1jzj4","headline-system-xlarge":"tabs__headline-system-xlarge_1jzj4","headline-system-large":"tabs__headline-system-large_1jzj4","headline-system-medium":"tabs__headline-system-medium_1jzj4","headline-system-small":"tabs__headline-system-small_1jzj4","headline-system-xsmall":"tabs__headline-system-xsmall_1jzj4","headline-xlarge":"tabs__headline-xlarge_1jzj4","headline-large":"tabs__headline-large_1jzj4","headline-medium":"tabs__headline-medium_1jzj4","headline-small":"tabs__headline-small_1jzj4","headline-xsmall":"tabs__headline-xsmall_1jzj4"};
5
+ var mobileStyles = {"title":"tabs__title_1uj9p tabs__title_vpnkp","mobile":"tabs__mobile_1uj9p","paragraph-primary-large":"tabs__paragraph-primary-large_1uj9p","paragraph-primary-medium":"tabs__paragraph-primary-medium_1uj9p","paragraph-primary-small":"tabs__paragraph-primary-small_1uj9p","action-primary-large":"tabs__action-primary-large_1uj9p","action-primary-medium":"tabs__action-primary-medium_1uj9p","action-primary-small":"tabs__action-primary-small_1uj9p","accent-primary-large":"tabs__accent-primary-large_1uj9p","accent-primary-medium":"tabs__accent-primary-medium_1uj9p","accent-primary-small":"tabs__accent-primary-small_1uj9p","pickerWrapper":"tabs__pickerWrapper_1uj9p","option":"tabs__option_1uj9p","scrollControls":"tabs__scrollControls_1uj9p","headline-system-xlarge":"tabs__headline-system-xlarge_1uj9p","headline-system-large":"tabs__headline-system-large_1uj9p","headline-system-medium":"tabs__headline-system-medium_1uj9p","headline-system-small":"tabs__headline-system-small_1uj9p","headline-system-xsmall":"tabs__headline-system-xsmall_1uj9p","headline-xlarge":"tabs__headline-xlarge_1uj9p","headline-large":"tabs__headline-large_1uj9p","headline-medium":"tabs__headline-medium_1uj9p","headline-small":"tabs__headline-small_1uj9p","headline-xsmall":"tabs__headline-xsmall_1uj9p"};
6
6
 
7
7
  module.exports = mobileStyles;
8
8
  //# sourceMappingURL=mobile.module.css.js.map
@@ -9,14 +9,14 @@
9
9
  --gap-8: var(--gap-xs);
10
10
  } :root {
11
11
  --primary-tablist-bottom-border-color: var(--color-light-neutral-translucent-500);
12
- } .tabs__component_2n158 {
12
+ } .tabs__component_1mor2 {
13
13
  position: relative;
14
14
  display: flex;
15
15
  flex-shrink: 0;
16
- } .tabs__primary_2n158 {
16
+ } .tabs__primary_1mor2 {
17
17
  align-items: flex-start;
18
18
  justify-content: flex-end;
19
- } .tabs__primary_2n158:after {
19
+ } .tabs__primary_1mor2:after {
20
20
  content: '';
21
21
  display: block;
22
22
  position: absolute;
@@ -24,18 +24,18 @@
24
24
  height: 1px;
25
25
  width: 100%;
26
26
  background-color: var(--primary-tablist-bottom-border-color);
27
- } .tabs__primary_2n158 {
27
+ } .tabs__primary_1mor2 {
28
28
 
29
- .tabs__button_2n158:first-child {
29
+ .tabs__button_1mor2:first-child {
30
30
  padding-left: var(--gap-8);
31
31
  margin-right: var(--gap-8);
32
32
  }
33
- } .tabs__primary_2n158.tabs__xl_2n158 .tabs__button_2n158:first-child {
33
+ } .tabs__primary_1mor2.tabs__xl_1mor2 .tabs__button_1mor2:first-child {
34
34
  margin-right: var(--gap-4);
35
- } .tabs__secondary_2n158 {
35
+ } .tabs__secondary_1mor2 {
36
36
  align-items: center;
37
37
  justify-content: center;
38
- } .tabs__secondary_2n158:before {
38
+ } .tabs__secondary_1mor2:before {
39
39
  content: '';
40
40
  display: block;
41
41
  position: absolute;
@@ -45,12 +45,12 @@
45
45
  background-color: transparent;
46
46
  transition: background-color 0.3s ease;
47
47
  bottom: var(--gap-0);
48
- } .tabs__secondary_2n158.tabs__xs_2n158 {
48
+ } .tabs__secondary_1mor2.tabs__xs_1mor2 {
49
49
  width: 76px;
50
50
 
51
- .tabs__button_2n158:first-child {
51
+ .tabs__button_1mor2:first-child {
52
52
  margin-right: var(--gap-4);
53
53
  }
54
- } .tabs__borderVisible_2n158:before {
54
+ } .tabs__borderVisible_1mor2:before {
55
55
  background-color: var(--color-light-neutral-translucent-300);
56
56
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"tabs__component_2n158","primary":"tabs__primary_2n158","button":"tabs__button_2n158","xl":"tabs__xl_2n158","secondary":"tabs__secondary_2n158","xs":"tabs__xs_2n158","borderVisible":"tabs__borderVisible_2n158"};
5
+ var styles = {"component":"tabs__component_1mor2","primary":"tabs__primary_1mor2","button":"tabs__button_1mor2","xl":"tabs__xl_1mor2","secondary":"tabs__secondary_1mor2","xs":"tabs__xs_1mor2","borderVisible":"tabs__borderVisible_1mor2"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -6,9 +6,9 @@
6
6
  --gap-4: var(--gap-2xs);
7
7
  --gap-4-neg: var(--gap-2xs-neg);
8
8
  --gap-16-neg: var(--gap-m-neg);
9
- } .tabs__scrollableContainerWrapper_hyk2r {
9
+ } .tabs__scrollableContainerWrapper_1e04w {
10
10
  display: flex;
11
- } .tabs__container_hyk2r {
11
+ } .tabs__container_1e04w {
12
12
  position: relative;
13
13
  overflow-x: auto;
14
14
  overflow-y: hidden;
@@ -17,11 +17,11 @@
17
17
  flex: 1;
18
18
  margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);
19
19
  padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);
20
- } .tabs__container_hyk2r::-webkit-scrollbar {
20
+ } .tabs__container_1e04w::-webkit-scrollbar {
21
21
  display: none;
22
- } .tabs__container_hyk2r > * {
22
+ } .tabs__container_1e04w > * {
23
23
  flex-shrink: 0;
24
- } .tabs__fullWidthScroll_hyk2r {
24
+ } .tabs__fullWidthScroll_1e04w {
25
25
  padding-left: var(--gap-0);
26
26
  margin: var(--gap-4-neg) var(--gap-16-neg);
27
27
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"scrollableContainerWrapper":"tabs__scrollableContainerWrapper_hyk2r","container":"tabs__container_hyk2r","fullWidthScroll":"tabs__fullWidthScroll_hyk2r"};
5
+ var styles = {"scrollableContainerWrapper":"tabs__scrollableContainerWrapper_1e04w","container":"tabs__container_1e04w","fullWidthScroll":"tabs__fullWidthScroll_1e04w"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -18,37 +18,37 @@
18
18
  --secondary-tablist-l-gaps: var(--gap-16);
19
19
  --secondary-tablist-xl-gaps: var(--gap-16);
20
20
  --secondary-tablist-transparent-gaps: var(--gap-0);
21
- } .tabs__component_ej7xp {
21
+ } .tabs__component_vfc4i {
22
22
  position: relative;
23
23
  display: inline-flex;
24
- } .tabs__fullWidthScroll_ej7xp {
24
+ } .tabs__fullWidthScroll_vfc4i {
25
25
  margin: var(--gap-0) var(--gap-16);
26
- } .tabs__container_ej7xp {
26
+ } .tabs__container_vfc4i {
27
27
  overflow: hidden;
28
28
  margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);
29
29
  padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);
30
- } .tabs__title_ej7xp {
30
+ } .tabs__title_vfc4i {
31
31
  white-space: nowrap;
32
- } .tabs__desktop_ej7xp.tabs__desktop_ej7xp.tabs__transparentView_ej7xp.tabs__transparentView_ej7xp {
33
- .tabs__title_ej7xp.tabs__title_ej7xp {
32
+ } .tabs__desktop_vfc4i.tabs__desktop_vfc4i.tabs__transparentView_vfc4i.tabs__transparentView_vfc4i {
33
+ .tabs__title_vfc4i.tabs__title_vfc4i {
34
34
  margin-left: var(--secondary-tablist-transparent-gaps);
35
35
  }
36
- } .tabs__xxs_ej7xp .tabs__title_ej7xp + .tabs__title_ej7xp,
37
- .tabs__xxs_ej7xp .tabs__skeleton_ej7xp + .tabs__skeleton_ej7xp {
36
+ } .tabs__xxs_vfc4i .tabs__title_vfc4i + .tabs__title_vfc4i,
37
+ .tabs__xxs_vfc4i .tabs__skeleton_vfc4i + .tabs__skeleton_vfc4i {
38
38
  margin-left: var(--secondary-tablist-xxs-gaps);
39
- } .tabs__xs_ej7xp .tabs__title_ej7xp + .tabs__title_ej7xp,
40
- .tabs__xs_ej7xp .tabs__skeleton_ej7xp + .tabs__skeleton_ej7xp {
39
+ } .tabs__xs_vfc4i .tabs__title_vfc4i + .tabs__title_vfc4i,
40
+ .tabs__xs_vfc4i .tabs__skeleton_vfc4i + .tabs__skeleton_vfc4i {
41
41
  margin-left: var(--secondary-tablist-xs-gaps);
42
- } .tabs__s_ej7xp .tabs__title_ej7xp + .tabs__title_ej7xp,
43
- .tabs__s_ej7xp .tabs__skeleton_ej7xp + .tabs__skeleton_ej7xp {
42
+ } .tabs__s_vfc4i .tabs__title_vfc4i + .tabs__title_vfc4i,
43
+ .tabs__s_vfc4i .tabs__skeleton_vfc4i + .tabs__skeleton_vfc4i {
44
44
  margin-left: var(--secondary-tablist-s-gaps);
45
- } .tabs__m_ej7xp .tabs__title_ej7xp + .tabs__title_ej7xp,
46
- .tabs__m_ej7xp .tabs__skeleton_ej7xp + .tabs__skeleton_ej7xp {
45
+ } .tabs__m_vfc4i .tabs__title_vfc4i + .tabs__title_vfc4i,
46
+ .tabs__m_vfc4i .tabs__skeleton_vfc4i + .tabs__skeleton_vfc4i {
47
47
  margin-left: var(--secondary-tablist-m-gaps);
48
- } .tabs__l_ej7xp .tabs__title_ej7xp + .tabs__title_ej7xp,
49
- .tabs__l_ej7xp .tabs__skeleton_ej7xp + .tabs__skeleton_ej7xp {
48
+ } .tabs__l_vfc4i .tabs__title_vfc4i + .tabs__title_vfc4i,
49
+ .tabs__l_vfc4i .tabs__skeleton_vfc4i + .tabs__skeleton_vfc4i {
50
50
  margin-left: var(--secondary-tablist-l-gaps);
51
- } .tabs__xl_ej7xp .tabs__title_ej7xp + .tabs__title_ej7xp,
52
- .tabs__xl_ej7xp .tabs__skeleton_ej7xp + .tabs__skeleton_ej7xp {
51
+ } .tabs__xl_vfc4i .tabs__title_vfc4i + .tabs__title_vfc4i,
52
+ .tabs__xl_vfc4i .tabs__skeleton_vfc4i + .tabs__skeleton_vfc4i {
53
53
  margin-left: var(--secondary-tablist-xl-gaps);
54
54
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var commonStyles = {"component":"tabs__component_ej7xp","fullWidthScroll":"tabs__fullWidthScroll_ej7xp","container":"tabs__container_ej7xp","title":"tabs__title_ej7xp","desktop":"tabs__desktop_ej7xp","transparentView":"tabs__transparentView_ej7xp","xxs":"tabs__xxs_ej7xp","skeleton":"tabs__skeleton_ej7xp","xs":"tabs__xs_ej7xp","s":"tabs__s_ej7xp","m":"tabs__m_ej7xp","l":"tabs__l_ej7xp","xl":"tabs__xl_ej7xp"};
5
+ var commonStyles = {"component":"tabs__component_vfc4i","fullWidthScroll":"tabs__fullWidthScroll_vfc4i","container":"tabs__container_vfc4i","title":"tabs__title_vfc4i","desktop":"tabs__desktop_vfc4i","transparentView":"tabs__transparentView_vfc4i","xxs":"tabs__xxs_vfc4i","skeleton":"tabs__skeleton_vfc4i","xs":"tabs__xs_vfc4i","s":"tabs__s_vfc4i","m":"tabs__m_vfc4i","l":"tabs__l_vfc4i","xl":"tabs__xl_vfc4i"};
6
6
 
7
7
  module.exports = commonStyles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -19,38 +19,38 @@
19
19
  --secondary-tablist-l-gaps: var(--gap-16);
20
20
  --secondary-tablist-xl-gaps: var(--gap-16);
21
21
  --secondary-tablist-transparent-gaps: var(--gap-0);
22
- }.tabs__component_ej7xp {
22
+ }.tabs__component_vfc4i {
23
23
  position: relative;
24
24
  display: inline-flex;
25
- }.tabs__fullWidthScroll_ej7xp {
25
+ }.tabs__fullWidthScroll_vfc4i {
26
26
  margin: var(--gap-0) var(--gap-16);
27
- }.tabs__container_ej7xp {
27
+ }.tabs__container_vfc4i {
28
28
  overflow: hidden;
29
29
  margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);
30
30
  padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);
31
- }.tabs__title_ej7xp {
31
+ }.tabs__title_vfc4i {
32
32
  white-space: nowrap;
33
- }.tabs__desktop_ej7xp.tabs__desktop_ej7xp.tabs__transparentView_ej7xp.tabs__transparentView_ej7xp {
34
- .tabs__title_ej7xp.tabs__title_ej7xp {
33
+ }.tabs__desktop_vfc4i.tabs__desktop_vfc4i.tabs__transparentView_vfc4i.tabs__transparentView_vfc4i {
34
+ .tabs__title_vfc4i.tabs__title_vfc4i {
35
35
  margin-left: var(--secondary-tablist-transparent-gaps);
36
36
  }
37
- }.tabs__xxs_ej7xp .tabs__title_ej7xp + .tabs__title_ej7xp,
38
- .tabs__xxs_ej7xp .tabs__skeleton_ej7xp + .tabs__skeleton_ej7xp {
37
+ }.tabs__xxs_vfc4i .tabs__title_vfc4i + .tabs__title_vfc4i,
38
+ .tabs__xxs_vfc4i .tabs__skeleton_vfc4i + .tabs__skeleton_vfc4i {
39
39
  margin-left: var(--secondary-tablist-xxs-gaps);
40
- }.tabs__xs_ej7xp .tabs__title_ej7xp + .tabs__title_ej7xp,
41
- .tabs__xs_ej7xp .tabs__skeleton_ej7xp + .tabs__skeleton_ej7xp {
40
+ }.tabs__xs_vfc4i .tabs__title_vfc4i + .tabs__title_vfc4i,
41
+ .tabs__xs_vfc4i .tabs__skeleton_vfc4i + .tabs__skeleton_vfc4i {
42
42
  margin-left: var(--secondary-tablist-xs-gaps);
43
- }.tabs__s_ej7xp .tabs__title_ej7xp + .tabs__title_ej7xp,
44
- .tabs__s_ej7xp .tabs__skeleton_ej7xp + .tabs__skeleton_ej7xp {
43
+ }.tabs__s_vfc4i .tabs__title_vfc4i + .tabs__title_vfc4i,
44
+ .tabs__s_vfc4i .tabs__skeleton_vfc4i + .tabs__skeleton_vfc4i {
45
45
  margin-left: var(--secondary-tablist-s-gaps);
46
- }.tabs__m_ej7xp .tabs__title_ej7xp + .tabs__title_ej7xp,
47
- .tabs__m_ej7xp .tabs__skeleton_ej7xp + .tabs__skeleton_ej7xp {
46
+ }.tabs__m_vfc4i .tabs__title_vfc4i + .tabs__title_vfc4i,
47
+ .tabs__m_vfc4i .tabs__skeleton_vfc4i + .tabs__skeleton_vfc4i {
48
48
  margin-left: var(--secondary-tablist-m-gaps);
49
- }.tabs__l_ej7xp .tabs__title_ej7xp + .tabs__title_ej7xp,
50
- .tabs__l_ej7xp .tabs__skeleton_ej7xp + .tabs__skeleton_ej7xp {
49
+ }.tabs__l_vfc4i .tabs__title_vfc4i + .tabs__title_vfc4i,
50
+ .tabs__l_vfc4i .tabs__skeleton_vfc4i + .tabs__skeleton_vfc4i {
51
51
  margin-left: var(--secondary-tablist-l-gaps);
52
- }.tabs__xl_ej7xp .tabs__title_ej7xp + .tabs__title_ej7xp,
53
- .tabs__xl_ej7xp .tabs__skeleton_ej7xp + .tabs__skeleton_ej7xp {
52
+ }.tabs__xl_vfc4i .tabs__title_vfc4i + .tabs__title_vfc4i,
53
+ .tabs__xl_vfc4i .tabs__skeleton_vfc4i + .tabs__skeleton_vfc4i {
54
54
  margin-left: var(--secondary-tablist-xl-gaps);
55
55
  } :root {
56
56
  --gap-2xs: 4px;
@@ -73,10 +73,10 @@
73
73
  --secondary-tablist-l-gaps: var(--gap-16);
74
74
  --secondary-tablist-xl-gaps: var(--gap-16);
75
75
  --secondary-tablist-transparent-gaps: var(--gap-0);
76
- } .tabs__title_vxj71 {
77
- } .tabs__mobile_vxj71 .tabs__title_vxj71 + .tabs__title_vxj71,
78
- .tabs__mobile_vxj71 .tabs__skeleton_vxj71 + .tabs__skeleton_vxj71 {
76
+ } .tabs__title_131k3 {
77
+ } .tabs__mobile_131k3 .tabs__title_131k3 + .tabs__title_131k3,
78
+ .tabs__mobile_131k3 .tabs__skeleton_131k3 + .tabs__skeleton_131k3 {
79
79
  margin-left: var(--secondary-tablist-mobile-gaps);
80
- } .tabs__mobile_vxj71.tabs__transparentView_vxj71.tabs__transparentView_vxj71 .tabs__title_vxj71 {
80
+ } .tabs__mobile_131k3.tabs__transparentView_131k3.tabs__transparentView_131k3 .tabs__title_131k3 {
81
81
  margin-left: var(--secondary-tablist-transparent-gaps);
82
82
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./mobile.css');
4
4
 
5
- var mobileStyles = {"title":"tabs__title_vxj71 tabs__title_ej7xp","mobile":"tabs__mobile_vxj71","skeleton":"tabs__skeleton_vxj71","transparentView":"tabs__transparentView_vxj71"};
5
+ var mobileStyles = {"title":"tabs__title_131k3 tabs__title_vfc4i","mobile":"tabs__mobile_131k3","skeleton":"tabs__skeleton_131k3","transparentView":"tabs__transparentView_131k3"};
6
6
 
7
7
  module.exports = mobileStyles;
8
8
  //# sourceMappingURL=mobile.module.css.js.map
@@ -1,7 +1,7 @@
1
- .tabs__component_1hpsn {
1
+ .tabs__component_htrt0 {
2
2
  outline: none;
3
3
  }
4
4
 
5
- .tabs__hidden_1hpsn {
5
+ .tabs__hidden_htrt0 {
6
6
  display: none;
7
7
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"tabs__component_1hpsn","hidden":"tabs__hidden_1hpsn"};
5
+ var styles = {"component":"tabs__component_htrt0","hidden":"tabs__hidden_htrt0"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import { type TabsProps } from '../../typings';
3
- export declare const Tabs: ({ TabList, className, containerClassName, size, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, client, defaultMatchMediaValue, tagShape, tagView, showSkeleton, skeletonProps, textStyle, style, ...restProps }: Omit<TabsProps, 'view'>) => React.JSX.Element;
3
+ export declare const Tabs: ({ TabList, className, containerClassName, size, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, client, defaultMatchMediaValue, tagShape, tagView, showSkeleton, skeletonProps, textStyle, style, titleProps, ...restProps }: Omit<TabsProps, 'view'>) => React.JSX.Element;
@@ -10,20 +10,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
10
10
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
11
11
 
12
12
  var Tabs = function (_a) {
13
- var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, breakpoint = _a.breakpoint, client = _a.client, defaultMatchMediaValue = _a.defaultMatchMediaValue, tagShape = _a.tagShape, tagView = _a.tagView, _d = _a.showSkeleton, showSkeleton = _d === void 0 ? false : _d, skeletonProps = _a.skeletonProps, textStyle = _a.textStyle, style = _a.style, restProps = tslib.__rest(_a, ["TabList", "className", "containerClassName", "size", "children", "selectedId", "scrollable", "collapsedTabsIds", "fullWidthScroll", "keepMounted", "dataTestId", "onChange", "breakpoint", "client", "defaultMatchMediaValue", "tagShape", "tagView", "showSkeleton", "skeletonProps", "textStyle", "style"]);
13
+ var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, breakpoint = _a.breakpoint, client = _a.client, defaultMatchMediaValue = _a.defaultMatchMediaValue, tagShape = _a.tagShape, tagView = _a.tagView, _d = _a.showSkeleton, showSkeleton = _d === void 0 ? false : _d, skeletonProps = _a.skeletonProps, textStyle = _a.textStyle, style = _a.style, titleProps = _a.titleProps, restProps = tslib.__rest(_a, ["TabList", "className", "containerClassName", "size", "children", "selectedId", "scrollable", "collapsedTabsIds", "fullWidthScroll", "keepMounted", "dataTestId", "onChange", "breakpoint", "client", "defaultMatchMediaValue", "tagShape", "tagView", "showSkeleton", "skeletonProps", "textStyle", "style", "titleProps"]);
14
14
  var tabsArray = React__default.default.Children.toArray(children);
15
15
  var titles = tabsArray.map(function (_a) {
16
16
  var _b = _a.props, title = _b.title, id = _b.id, rightAddons = _b.rightAddons, disabled = _b.disabled, hidden = _b.hidden, toggleClassName = _b.toggleClassName, toggleTestId = _b.dataTestId, toggleRef = _b.toggleRef;
17
- return ({
18
- title: title,
19
- id: id,
20
- disabled: disabled,
21
- rightAddons: rightAddons,
22
- hidden: hidden,
23
- toggleClassName: toggleClassName,
24
- dataTestId: toggleTestId,
25
- toggleRef: toggleRef,
26
- });
17
+ return (tslib.__assign({ title: title, id: id, disabled: disabled, rightAddons: rightAddons, hidden: hidden, toggleClassName: toggleClassName, dataTestId: toggleTestId, toggleRef: toggleRef }, titleProps));
27
18
  });
28
19
  var tabs = tabsArray.filter(function (tab) { return tab.props.id === selectedId || tab.props.keepMounted || keepMounted; });
29
20
  return (React__default.default.createElement("div", tslib.__assign({ className: className }, restProps),
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../../src/components/tabs/Component.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\n\nimport { type TabsProps } from '../../typings';\n\nexport const Tabs = ({\n TabList,\n className,\n containerClassName,\n size,\n children,\n selectedId,\n scrollable,\n collapsedTabsIds,\n fullWidthScroll = false,\n keepMounted = false,\n dataTestId,\n onChange,\n breakpoint,\n client,\n defaultMatchMediaValue,\n tagShape,\n tagView,\n showSkeleton = false,\n skeletonProps,\n textStyle,\n style,\n ...restProps\n}: Omit<TabsProps, 'view'>) => {\n const tabsArray = React.Children.toArray(children) as TabsProps['children'];\n const titles = tabsArray.map(\n ({\n props: {\n title,\n id,\n rightAddons,\n disabled,\n hidden,\n toggleClassName,\n dataTestId: toggleTestId,\n toggleRef,\n },\n }) => ({\n title,\n id,\n disabled,\n rightAddons,\n hidden,\n toggleClassName,\n dataTestId: toggleTestId,\n toggleRef,\n }),\n );\n\n const tabs = tabsArray.filter(\n (tab) => tab.props.id === selectedId || tab.props.keepMounted || keepMounted,\n );\n\n return (\n <div className={className} {...restProps}>\n <TabList\n containerClassName={containerClassName}\n size={size}\n titles={titles}\n selectedId={selectedId}\n scrollable={scrollable}\n collapsedTabsIds={collapsedTabsIds}\n onChange={onChange}\n dataTestId={dataTestId}\n defaultMatchMediaValue={defaultMatchMediaValue}\n breakpoint={breakpoint}\n client={client}\n fullWidthScroll={fullWidthScroll}\n tagShape={tagShape}\n tagView={tagView}\n textStyle={textStyle}\n inlineStyle={style}\n showSkeleton={showSkeleton}\n skeletonProps={skeletonProps}\n />\n\n {tabs.map((tab) => cloneElement(tab, { hidden: tab.props.id !== selectedId }))}\n </div>\n );\n};\n"],"names":["__rest","React","__assign","cloneElement"],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../../src/components/tabs/Component.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\n\nimport { type TabsProps } from '../../typings';\n\nexport const Tabs = ({\n TabList,\n className,\n containerClassName,\n size,\n children,\n selectedId,\n scrollable,\n collapsedTabsIds,\n fullWidthScroll = false,\n keepMounted = false,\n dataTestId,\n onChange,\n breakpoint,\n client,\n defaultMatchMediaValue,\n tagShape,\n tagView,\n showSkeleton = false,\n skeletonProps,\n textStyle,\n style,\n titleProps,\n ...restProps\n}: Omit<TabsProps, 'view'>) => {\n const tabsArray = React.Children.toArray(children) as TabsProps['children'];\n\n const titles = tabsArray.map(\n ({\n props: {\n title,\n id,\n rightAddons,\n disabled,\n hidden,\n toggleClassName,\n dataTestId: toggleTestId,\n toggleRef,\n },\n }) => ({\n title,\n id,\n disabled,\n rightAddons,\n hidden,\n toggleClassName,\n dataTestId: toggleTestId,\n toggleRef,\n ...titleProps,\n }),\n );\n\n const tabs = tabsArray.filter(\n (tab) => tab.props.id === selectedId || tab.props.keepMounted || keepMounted,\n );\n\n return (\n <div className={className} {...restProps}>\n <TabList\n containerClassName={containerClassName}\n size={size}\n titles={titles}\n selectedId={selectedId}\n scrollable={scrollable}\n collapsedTabsIds={collapsedTabsIds}\n onChange={onChange}\n dataTestId={dataTestId}\n defaultMatchMediaValue={defaultMatchMediaValue}\n breakpoint={breakpoint}\n client={client}\n fullWidthScroll={fullWidthScroll}\n tagShape={tagShape}\n tagView={tagView}\n textStyle={textStyle}\n inlineStyle={style}\n showSkeleton={showSkeleton}\n skeletonProps={skeletonProps}\n />\n\n {tabs.map((tab) => cloneElement(tab, { hidden: tab.props.id !== selectedId }))}\n </div>\n );\n};\n"],"names":["__rest","React","__assign","cloneElement"],"mappings":"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"}
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import { type TabsProps } from '../../typings';
3
- export declare const Tabs: ({ TabList, className, containerClassName, size, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, client, defaultMatchMediaValue, tagShape, tagView, showSkeleton, skeletonProps, textStyle, style, ...restProps }: Omit<TabsProps, 'view'>) => React.JSX.Element;
3
+ export declare const Tabs: ({ TabList, className, containerClassName, size, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, client, defaultMatchMediaValue, tagShape, tagView, showSkeleton, skeletonProps, textStyle, style, titleProps, ...restProps }: Omit<TabsProps, 'view'>) => React.JSX.Element;
@@ -10,20 +10,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
10
10
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
11
11
 
12
12
  var Tabs = function (_a) {
13
- var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, breakpoint = _a.breakpoint, client = _a.client, defaultMatchMediaValue = _a.defaultMatchMediaValue, tagShape = _a.tagShape, tagView = _a.tagView, _d = _a.showSkeleton, showSkeleton = _d === void 0 ? false : _d, skeletonProps = _a.skeletonProps, textStyle = _a.textStyle, style = _a.style, restProps = tslib.__rest(_a, ["TabList", "className", "containerClassName", "size", "children", "selectedId", "scrollable", "collapsedTabsIds", "fullWidthScroll", "keepMounted", "dataTestId", "onChange", "breakpoint", "client", "defaultMatchMediaValue", "tagShape", "tagView", "showSkeleton", "skeletonProps", "textStyle", "style"]);
13
+ var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, breakpoint = _a.breakpoint, client = _a.client, defaultMatchMediaValue = _a.defaultMatchMediaValue, tagShape = _a.tagShape, tagView = _a.tagView, _d = _a.showSkeleton, showSkeleton = _d === void 0 ? false : _d, skeletonProps = _a.skeletonProps, textStyle = _a.textStyle, style = _a.style, titleProps = _a.titleProps, restProps = tslib.__rest(_a, ["TabList", "className", "containerClassName", "size", "children", "selectedId", "scrollable", "collapsedTabsIds", "fullWidthScroll", "keepMounted", "dataTestId", "onChange", "breakpoint", "client", "defaultMatchMediaValue", "tagShape", "tagView", "showSkeleton", "skeletonProps", "textStyle", "style", "titleProps"]);
14
14
  var tabsArray = React__default.default.Children.toArray(children);
15
15
  var titles = tabsArray.map(function (_a) {
16
16
  var _b = _a.props, title = _b.title, id = _b.id, rightAddons = _b.rightAddons, disabled = _b.disabled, hidden = _b.hidden, toggleClassName = _b.toggleClassName, toggleTestId = _b.dataTestId, toggleRef = _b.toggleRef;
17
- return ({
18
- title: title,
19
- id: id,
20
- disabled: disabled,
21
- rightAddons: rightAddons,
22
- hidden: hidden,
23
- toggleClassName: toggleClassName,
24
- dataTestId: toggleTestId,
25
- toggleRef: toggleRef,
26
- });
17
+ return (tslib.__assign({ title: title, id: id, disabled: disabled, rightAddons: rightAddons, hidden: hidden, toggleClassName: toggleClassName, dataTestId: toggleTestId, toggleRef: toggleRef }, titleProps));
27
18
  });
28
19
  var tabs = tabsArray.filter(function (tab) { return tab.props.id === selectedId || tab.props.keepMounted || keepMounted; });
29
20
  return (React__default.default.createElement("div", tslib.__assign({ className: className }, restProps),
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../../../src/components/tabs/Component.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\n\nimport { type TabsProps } from '../../typings';\n\nexport const Tabs = ({\n TabList,\n className,\n containerClassName,\n size,\n children,\n selectedId,\n scrollable,\n collapsedTabsIds,\n fullWidthScroll = false,\n keepMounted = false,\n dataTestId,\n onChange,\n breakpoint,\n client,\n defaultMatchMediaValue,\n tagShape,\n tagView,\n showSkeleton = false,\n skeletonProps,\n textStyle,\n style,\n ...restProps\n}: Omit<TabsProps, 'view'>) => {\n const tabsArray = React.Children.toArray(children) as TabsProps['children'];\n const titles = tabsArray.map(\n ({\n props: {\n title,\n id,\n rightAddons,\n disabled,\n hidden,\n toggleClassName,\n dataTestId: toggleTestId,\n toggleRef,\n },\n }) => ({\n title,\n id,\n disabled,\n rightAddons,\n hidden,\n toggleClassName,\n dataTestId: toggleTestId,\n toggleRef,\n }),\n );\n\n const tabs = tabsArray.filter(\n (tab) => tab.props.id === selectedId || tab.props.keepMounted || keepMounted,\n );\n\n return (\n <div className={className} {...restProps}>\n <TabList\n containerClassName={containerClassName}\n size={size}\n titles={titles}\n selectedId={selectedId}\n scrollable={scrollable}\n collapsedTabsIds={collapsedTabsIds}\n onChange={onChange}\n dataTestId={dataTestId}\n defaultMatchMediaValue={defaultMatchMediaValue}\n breakpoint={breakpoint}\n client={client}\n fullWidthScroll={fullWidthScroll}\n tagShape={tagShape}\n tagView={tagView}\n textStyle={textStyle}\n inlineStyle={style}\n showSkeleton={showSkeleton}\n skeletonProps={skeletonProps}\n />\n\n {tabs.map((tab) => cloneElement(tab, { hidden: tab.props.id !== selectedId }))}\n </div>\n );\n};\n"],"names":["__rest","React","__assign","cloneElement"],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../../../src/components/tabs/Component.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\n\nimport { type TabsProps } from '../../typings';\n\nexport const Tabs = ({\n TabList,\n className,\n containerClassName,\n size,\n children,\n selectedId,\n scrollable,\n collapsedTabsIds,\n fullWidthScroll = false,\n keepMounted = false,\n dataTestId,\n onChange,\n breakpoint,\n client,\n defaultMatchMediaValue,\n tagShape,\n tagView,\n showSkeleton = false,\n skeletonProps,\n textStyle,\n style,\n titleProps,\n ...restProps\n}: Omit<TabsProps, 'view'>) => {\n const tabsArray = React.Children.toArray(children) as TabsProps['children'];\n\n const titles = tabsArray.map(\n ({\n props: {\n title,\n id,\n rightAddons,\n disabled,\n hidden,\n toggleClassName,\n dataTestId: toggleTestId,\n toggleRef,\n },\n }) => ({\n title,\n id,\n disabled,\n rightAddons,\n hidden,\n toggleClassName,\n dataTestId: toggleTestId,\n toggleRef,\n ...titleProps,\n }),\n );\n\n const tabs = tabsArray.filter(\n (tab) => tab.props.id === selectedId || tab.props.keepMounted || keepMounted,\n );\n\n return (\n <div className={className} {...restProps}>\n <TabList\n containerClassName={containerClassName}\n size={size}\n titles={titles}\n selectedId={selectedId}\n scrollable={scrollable}\n collapsedTabsIds={collapsedTabsIds}\n onChange={onChange}\n dataTestId={dataTestId}\n defaultMatchMediaValue={defaultMatchMediaValue}\n breakpoint={breakpoint}\n client={client}\n fullWidthScroll={fullWidthScroll}\n tagShape={tagShape}\n tagView={tagView}\n textStyle={textStyle}\n inlineStyle={style}\n showSkeleton={showSkeleton}\n skeletonProps={skeletonProps}\n />\n\n {tabs.map((tab) => cloneElement(tab, { hidden: tab.props.id !== selectedId }))}\n </div>\n );\n};\n"],"names":["__rest","React","__assign","cloneElement"],"mappings":"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"}
@@ -14,6 +14,55 @@ export declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds,
14
14
  toggleClassName?: string | undefined;
15
15
  dataTestId?: string | undefined;
16
16
  toggleRef?: import("react").Ref<HTMLDivElement> | undefined;
17
+ titleProps?: import("../typings").TitleProps | undefined;
18
+ 'aria-activedescendant'?: string | undefined;
19
+ 'aria-atomic'?: (boolean | "true" | "false") | undefined;
20
+ 'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
21
+ 'aria-busy'?: (boolean | "true" | "false") | undefined;
22
+ 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
23
+ 'aria-colcount'?: number | undefined;
24
+ 'aria-colindex'?: number | undefined;
25
+ 'aria-colspan'?: number | undefined;
26
+ 'aria-controls'?: string | undefined;
27
+ 'aria-current'?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
28
+ 'aria-describedby'?: string | undefined;
29
+ 'aria-details'?: string | undefined;
30
+ 'aria-disabled'?: (boolean | "true" | "false") | undefined;
31
+ 'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
32
+ 'aria-errormessage'?: string | undefined;
33
+ 'aria-expanded'?: (boolean | "true" | "false") | undefined;
34
+ 'aria-flowto'?: string | undefined;
35
+ 'aria-grabbed'?: (boolean | "true" | "false") | undefined;
36
+ 'aria-haspopup'?: boolean | "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
37
+ 'aria-hidden'?: (boolean | "true" | "false") | undefined;
38
+ 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
39
+ 'aria-keyshortcuts'?: string | undefined;
40
+ 'aria-label'?: string | undefined;
41
+ 'aria-labelledby'?: string | undefined;
42
+ 'aria-level'?: number | undefined;
43
+ 'aria-live'?: "off" | "assertive" | "polite" | undefined;
44
+ 'aria-modal'?: (boolean | "true" | "false") | undefined;
45
+ 'aria-multiline'?: (boolean | "true" | "false") | undefined;
46
+ 'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
47
+ 'aria-orientation'?: "horizontal" | "vertical" | undefined;
48
+ 'aria-owns'?: string | undefined;
49
+ 'aria-placeholder'?: string | undefined;
50
+ 'aria-posinset'?: number | undefined;
51
+ 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
52
+ 'aria-readonly'?: (boolean | "true" | "false") | undefined;
53
+ 'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
54
+ 'aria-required'?: (boolean | "true" | "false") | undefined;
55
+ 'aria-roledescription'?: string | undefined;
56
+ 'aria-rowcount'?: number | undefined;
57
+ 'aria-rowindex'?: number | undefined;
58
+ 'aria-rowspan'?: number | undefined;
59
+ 'aria-selected'?: (boolean | "true" | "false") | undefined;
60
+ 'aria-setsize'?: number | undefined;
61
+ 'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
62
+ 'aria-valuemax'?: number | undefined;
63
+ 'aria-valuemin'?: number | undefined;
64
+ 'aria-valuenow'?: number | undefined;
65
+ 'aria-valuetext'?: string | undefined;
17
66
  }[];
18
67
  selectedTab: HTMLButtonElement | null;
19
68
  focusedTab: HTMLButtonElement | null;
package/cssm/typings.d.ts CHANGED
@@ -2,6 +2,7 @@ import { type AriaAttributes, type FC, type HTMLAttributes, type MouseEvent, typ
2
2
  import { type SkeletonProps } from '@alfalab/core-components-skeleton/cssm';
3
3
  import { type TagProps } from '@alfalab/core-components-tag/cssm';
4
4
  export declare type SelectedId = string | number;
5
+ export declare type TitleProps = Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown' | 'className' | 'disabled' | 'id' | 'role' | 'tabIndex' | 'aria-selected'> & AriaAttributes;
5
6
  export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children' | 'className'>, AriaAttributes {
6
7
  /**
7
8
  * Дополнительный класс
@@ -99,6 +100,10 @@ export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChang
99
100
  * Доп. пропсы для скелетона
100
101
  */
101
102
  skeletonProps?: Omit<SkeletonProps, 'visible'>;
103
+ /**
104
+ * Доп. пропсы для заголовка таба
105
+ */
106
+ titleProps?: TitleProps;
102
107
  }
103
108
  export interface TabProps extends AriaAttributes {
104
109
  /**
@@ -145,8 +150,12 @@ export interface TabProps extends AriaAttributes {
145
150
  * Реф для кнопки переключения таба
146
151
  */
147
152
  toggleRef?: Ref<HTMLDivElement>;
153
+ /**
154
+ * Доп. пропсы для заголовка таба
155
+ */
156
+ titleProps?: TitleProps;
148
157
  }
149
- export interface TabListTitle {
158
+ export interface TabListTitle extends AriaAttributes {
150
159
  title: NonNullable<ReactNode>;
151
160
  id: SelectedId;
152
161
  disabled?: boolean;
@@ -157,6 +166,7 @@ export interface TabListTitle {
157
166
  collapsed?: boolean;
158
167
  dataTestId?: string;
159
168
  toggleRef?: Ref<HTMLDivElement>;
169
+ titleProps?: TitleProps;
160
170
  }
161
171
  export interface TabListProps extends Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView' | 'textStyle' | 'showSkeleton' | 'skeletonProps'> {
162
172
  /**