@alfalab/core-components-select 18.2.5 → 18.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (206) hide show
  1. package/components/arrow/index.css +4 -4
  2. package/components/arrow/index.module.css.js +1 -1
  3. package/components/base-checkmark/index.css +5 -5
  4. package/components/base-checkmark/index.module.css.js +1 -1
  5. package/components/base-option/index.css +16 -16
  6. package/components/base-option/index.module.css.js +1 -1
  7. package/components/base-select/Component.d.ts +1 -1
  8. package/components/base-select/Component.js +2 -2
  9. package/components/base-select/Component.js.map +1 -1
  10. package/components/base-select/index.css +11 -11
  11. package/components/base-select/index.module.css.js +1 -1
  12. package/components/base-select/mobile.css +11 -11
  13. package/components/base-select/mobile.module.css.js +1 -1
  14. package/components/checkmark/index.css +9 -9
  15. package/components/checkmark/index.module.css.js +1 -1
  16. package/components/checkmark-mobile/index.css +5 -5
  17. package/components/checkmark-mobile/index.module.css.js +1 -1
  18. package/components/clear-button/index.css +4 -4
  19. package/components/clear-button/index.module.css.js +1 -1
  20. package/components/field/index.css +13 -13
  21. package/components/field/index.module.css.js +1 -1
  22. package/components/footer/index.css +4 -4
  23. package/components/footer/index.module.css.js +1 -1
  24. package/components/optgroup/index.css +4 -4
  25. package/components/optgroup/index.module.css.js +1 -1
  26. package/components/option/desktop/index.css +19 -19
  27. package/components/option/desktop/index.module.css.js +1 -1
  28. package/components/option/mobile/index.css +16 -16
  29. package/components/option/mobile/index.module.css.js +1 -1
  30. package/components/options-list/Component.d.ts +35 -2
  31. package/components/options-list/Component.js +6 -8
  32. package/components/options-list/Component.js.map +1 -1
  33. package/components/options-list/index.css +9 -9
  34. package/components/options-list/index.module.css.js +1 -1
  35. package/components/search/Component.js +15 -1
  36. package/components/search/Component.js.map +1 -1
  37. package/components/search/index.css +1 -1
  38. package/components/search/index.module.css.js +1 -1
  39. package/components/virtual-options-list/Component.d.ts +35 -2
  40. package/components/virtual-options-list/Component.js +6 -9
  41. package/components/virtual-options-list/Component.js.map +1 -1
  42. package/components/virtual-options-list/index.css +13 -13
  43. package/components/virtual-options-list/index.module.css.js +1 -1
  44. package/cssm/components/base-select/Component.d.ts +1 -1
  45. package/cssm/components/base-select/Component.js +2 -2
  46. package/cssm/components/base-select/Component.js.map +1 -1
  47. package/cssm/components/options-list/Component.d.ts +35 -2
  48. package/cssm/components/options-list/Component.js +8 -10
  49. package/cssm/components/options-list/Component.js.map +1 -1
  50. package/cssm/components/search/Component.js +15 -1
  51. package/cssm/components/search/Component.js.map +1 -1
  52. package/cssm/components/virtual-options-list/Component.d.ts +35 -2
  53. package/cssm/components/virtual-options-list/Component.js +8 -11
  54. package/cssm/components/virtual-options-list/Component.js.map +1 -1
  55. package/cssm/hooks/use-native-scrollbar.d.ts +4 -0
  56. package/cssm/hooks/use-native-scrollbar.js +33 -0
  57. package/cssm/hooks/use-native-scrollbar.js.map +1 -0
  58. package/cssm/presets/useSelectWithApply/hook.d.ts +137 -5
  59. package/cssm/presets/useSelectWithApply/options-list-with-apply/Component.d.ts +69 -3
  60. package/cssm/typings.d.ts +1 -1
  61. package/esm/components/arrow/index.css +4 -4
  62. package/esm/components/arrow/index.module.css.js +1 -1
  63. package/esm/components/base-checkmark/index.css +5 -5
  64. package/esm/components/base-checkmark/index.module.css.js +1 -1
  65. package/esm/components/base-option/index.css +16 -16
  66. package/esm/components/base-option/index.module.css.js +1 -1
  67. package/esm/components/base-select/Component.d.ts +1 -1
  68. package/esm/components/base-select/Component.js +2 -2
  69. package/esm/components/base-select/Component.js.map +1 -1
  70. package/esm/components/base-select/index.css +11 -11
  71. package/esm/components/base-select/index.module.css.js +1 -1
  72. package/esm/components/base-select/mobile.css +11 -11
  73. package/esm/components/base-select/mobile.module.css.js +1 -1
  74. package/esm/components/checkmark/index.css +9 -9
  75. package/esm/components/checkmark/index.module.css.js +1 -1
  76. package/esm/components/checkmark-mobile/index.css +5 -5
  77. package/esm/components/checkmark-mobile/index.module.css.js +1 -1
  78. package/esm/components/clear-button/index.css +4 -4
  79. package/esm/components/clear-button/index.module.css.js +1 -1
  80. package/esm/components/field/index.css +13 -13
  81. package/esm/components/field/index.module.css.js +1 -1
  82. package/esm/components/footer/index.css +4 -4
  83. package/esm/components/footer/index.module.css.js +1 -1
  84. package/esm/components/optgroup/index.css +4 -4
  85. package/esm/components/optgroup/index.module.css.js +1 -1
  86. package/esm/components/option/desktop/index.css +19 -19
  87. package/esm/components/option/desktop/index.module.css.js +1 -1
  88. package/esm/components/option/mobile/index.css +16 -16
  89. package/esm/components/option/mobile/index.module.css.js +1 -1
  90. package/esm/components/options-list/Component.d.ts +35 -2
  91. package/esm/components/options-list/Component.js +6 -8
  92. package/esm/components/options-list/Component.js.map +1 -1
  93. package/esm/components/options-list/index.css +9 -9
  94. package/esm/components/options-list/index.module.css.js +1 -1
  95. package/esm/components/search/Component.js +15 -1
  96. package/esm/components/search/Component.js.map +1 -1
  97. package/esm/components/search/index.css +1 -1
  98. package/esm/components/search/index.module.css.js +1 -1
  99. package/esm/components/virtual-options-list/Component.d.ts +35 -2
  100. package/esm/components/virtual-options-list/Component.js +6 -9
  101. package/esm/components/virtual-options-list/Component.js.map +1 -1
  102. package/esm/components/virtual-options-list/index.css +13 -13
  103. package/esm/components/virtual-options-list/index.module.css.js +1 -1
  104. package/esm/hooks/use-native-scrollbar.d.ts +4 -0
  105. package/esm/hooks/use-native-scrollbar.js +29 -0
  106. package/esm/hooks/use-native-scrollbar.js.map +1 -0
  107. package/esm/presets/useSelectWithApply/hook.d.ts +137 -5
  108. package/esm/presets/useSelectWithApply/options-list-with-apply/Component.d.ts +69 -3
  109. package/esm/presets/useSelectWithApply/options-list-with-apply/footer/index.css +3 -3
  110. package/esm/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js +1 -1
  111. package/esm/presets/useSelectWithApply/options-list-with-apply/header/index.css +3 -3
  112. package/esm/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js +1 -1
  113. package/esm/presets/useSelectWithLoading/index.css +1 -1
  114. package/esm/presets/useSelectWithLoading/index.module.css.js +1 -1
  115. package/esm/typings.d.ts +1 -1
  116. package/hooks/use-native-scrollbar.d.ts +4 -0
  117. package/hooks/use-native-scrollbar.js +33 -0
  118. package/hooks/use-native-scrollbar.js.map +1 -0
  119. package/modern/components/arrow/index.css +4 -4
  120. package/modern/components/arrow/index.module.css.js +1 -1
  121. package/modern/components/base-checkmark/index.css +5 -5
  122. package/modern/components/base-checkmark/index.module.css.js +1 -1
  123. package/modern/components/base-option/index.css +16 -16
  124. package/modern/components/base-option/index.module.css.js +1 -1
  125. package/modern/components/base-select/Component.d.ts +1 -1
  126. package/modern/components/base-select/Component.js +2 -2
  127. package/modern/components/base-select/Component.js.map +1 -1
  128. package/modern/components/base-select/index.css +11 -11
  129. package/modern/components/base-select/index.module.css.js +1 -1
  130. package/modern/components/base-select/mobile.css +11 -11
  131. package/modern/components/base-select/mobile.module.css.js +1 -1
  132. package/modern/components/checkmark/index.css +9 -9
  133. package/modern/components/checkmark/index.module.css.js +1 -1
  134. package/modern/components/checkmark-mobile/index.css +5 -5
  135. package/modern/components/checkmark-mobile/index.module.css.js +1 -1
  136. package/modern/components/clear-button/index.css +4 -4
  137. package/modern/components/clear-button/index.module.css.js +1 -1
  138. package/modern/components/field/index.css +13 -13
  139. package/modern/components/field/index.module.css.js +1 -1
  140. package/modern/components/footer/index.css +4 -4
  141. package/modern/components/footer/index.module.css.js +1 -1
  142. package/modern/components/optgroup/index.css +4 -4
  143. package/modern/components/optgroup/index.module.css.js +1 -1
  144. package/modern/components/option/desktop/index.css +19 -19
  145. package/modern/components/option/desktop/index.module.css.js +1 -1
  146. package/modern/components/option/mobile/index.css +16 -16
  147. package/modern/components/option/mobile/index.module.css.js +1 -1
  148. package/modern/components/options-list/Component.d.ts +35 -2
  149. package/modern/components/options-list/Component.js +6 -6
  150. package/modern/components/options-list/Component.js.map +1 -1
  151. package/modern/components/options-list/index.css +9 -9
  152. package/modern/components/options-list/index.module.css.js +1 -1
  153. package/modern/components/search/Component.js +17 -1
  154. package/modern/components/search/Component.js.map +1 -1
  155. package/modern/components/search/index.css +1 -1
  156. package/modern/components/search/index.module.css.js +1 -1
  157. package/modern/components/virtual-options-list/Component.d.ts +35 -2
  158. package/modern/components/virtual-options-list/Component.js +6 -7
  159. package/modern/components/virtual-options-list/Component.js.map +1 -1
  160. package/modern/components/virtual-options-list/index.css +13 -13
  161. package/modern/components/virtual-options-list/index.module.css.js +1 -1
  162. package/modern/hooks/use-native-scrollbar.d.ts +4 -0
  163. package/modern/hooks/use-native-scrollbar.js +27 -0
  164. package/modern/hooks/use-native-scrollbar.js.map +1 -0
  165. package/modern/presets/useSelectWithApply/hook.d.ts +137 -5
  166. package/modern/presets/useSelectWithApply/options-list-with-apply/Component.d.ts +69 -3
  167. package/modern/presets/useSelectWithApply/options-list-with-apply/footer/index.css +3 -3
  168. package/modern/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js +1 -1
  169. package/modern/presets/useSelectWithApply/options-list-with-apply/header/index.css +3 -3
  170. package/modern/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js +1 -1
  171. package/modern/presets/useSelectWithLoading/index.css +1 -1
  172. package/modern/presets/useSelectWithLoading/index.module.css.js +1 -1
  173. package/modern/typings.d.ts +1 -1
  174. package/moderncssm/components/base-select/Component.d.ts +1 -1
  175. package/moderncssm/components/base-select/Component.js +2 -2
  176. package/moderncssm/components/base-select/Component.js.map +1 -1
  177. package/moderncssm/components/options-list/Component.d.ts +35 -2
  178. package/moderncssm/components/options-list/Component.js +6 -6
  179. package/moderncssm/components/options-list/Component.js.map +1 -1
  180. package/moderncssm/components/search/Component.js +17 -1
  181. package/moderncssm/components/search/Component.js.map +1 -1
  182. package/moderncssm/components/virtual-options-list/Component.d.ts +35 -2
  183. package/moderncssm/components/virtual-options-list/Component.js +6 -7
  184. package/moderncssm/components/virtual-options-list/Component.js.map +1 -1
  185. package/moderncssm/hooks/use-native-scrollbar.d.ts +4 -0
  186. package/moderncssm/hooks/use-native-scrollbar.js +27 -0
  187. package/moderncssm/hooks/use-native-scrollbar.js.map +1 -0
  188. package/moderncssm/presets/useSelectWithApply/hook.d.ts +137 -5
  189. package/moderncssm/presets/useSelectWithApply/options-list-with-apply/Component.d.ts +69 -3
  190. package/moderncssm/typings.d.ts +1 -1
  191. package/package.json +4 -4
  192. package/presets/useSelectWithApply/hook.d.ts +137 -5
  193. package/presets/useSelectWithApply/options-list-with-apply/Component.d.ts +69 -3
  194. package/presets/useSelectWithApply/options-list-with-apply/footer/index.css +3 -3
  195. package/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js +1 -1
  196. package/presets/useSelectWithApply/options-list-with-apply/header/index.css +3 -3
  197. package/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js +1 -1
  198. package/presets/useSelectWithLoading/index.css +1 -1
  199. package/presets/useSelectWithLoading/index.module.css.js +1 -1
  200. package/src/components/base-select/Component.tsx +2 -0
  201. package/src/components/options-list/Component.tsx +6 -8
  202. package/src/components/search/Component.tsx +29 -10
  203. package/src/components/virtual-options-list/Component.tsx +6 -9
  204. package/src/hooks/use-native-scrollbar.ts +36 -0
  205. package/src/typings.ts +1 -1
  206. package/typings.d.ts +1 -1
@@ -4,17 +4,17 @@
4
4
  } :root {
5
5
  --gap-m: 16px;
6
6
  --gap-16: var(--gap-m);
7
- } .select__footer_1d3i3 {
7
+ } .select__footer_16eho {
8
8
  display: flex;
9
9
  box-sizing: border-box;
10
10
  width: 100%;
11
11
  padding: var(--gap-16) var(--gap-16);
12
12
  background-color: var(--color-light-modal-bg-primary);
13
- } .select__footer_1d3i3 .select__button_1d3i3:first-of-type {
13
+ } .select__footer_16eho .select__button_16eho:first-of-type {
14
14
  margin-right: var(--gap-16);
15
- } .select__button_1d3i3 {
15
+ } .select__button_16eho {
16
16
  width: 50%;
17
- } .select__highlighted_1d3i3 {
17
+ } .select__highlighted_16eho {
18
18
  border-top: 1px solid var(--color-light-neutral-300);
19
19
  background-color: var(--color-light-modal-bg-primary);
20
20
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"footer":"select__footer_1d3i3","button":"select__button_1d3i3","highlighted":"select__highlighted_1d3i3"};
3
+ var styles = {"footer":"select__footer_16eho","button":"select__button_16eho","highlighted":"select__highlighted_16eho"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -16,7 +16,7 @@
16
16
  --select-optgroup-right-padding: var(--gap-12);
17
17
  --select-optgroup-l-left-padding: var(--gap-16);
18
18
  --select-optgroup-l-right-padding: var(--gap-16);
19
- } .select__optgroup_5im0r {
19
+ } .select__optgroup_7v3if {
20
20
  position: relative;
21
21
  display: flex;
22
22
  align-items: center;
@@ -25,9 +25,9 @@
25
25
  box-sizing: border-box;
26
26
  background: var(--select-optgroup-background);
27
27
  min-height: 40px;
28
- } .select__optgroup_5im0r + *[role='option']:before {
28
+ } .select__optgroup_7v3if + *[role='option']:before {
29
29
  display: none;
30
- } .select__label_5im0r {
30
+ } .select__label_7v3if {
31
31
  font-size: 12px;
32
32
  line-height: 16px;
33
33
  font-weight: 500;
@@ -36,7 +36,7 @@
36
36
 
37
37
  display: block;
38
38
  color: var(--select-optgroup-color);
39
- } .select__size-72_5im0r {
39
+ } .select__size-72_7v3if {
40
40
  padding-left: var(--select-optgroup-l-left-padding);
41
41
  padding-right: var(--select-optgroup-l-right-padding);
42
42
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"optgroup":"select__optgroup_5im0r","label":"select__label_5im0r","size-72":"select__size-72_5im0r"};
3
+ var styles = {"optgroup":"select__optgroup_7v3if","label":"select__label_7v3if","size-72":"select__size-72_7v3if"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -35,7 +35,7 @@
35
35
  --select-option-hover-color: var(--color-light-text-primary);
36
36
  --select-option-active-color: var(--color-light-text-primary);
37
37
  --select-option-disabled-color: var(--color-light-text-secondary);
38
- } .select__option_bhdb6 {
38
+ } .select__option_1hxpg {
39
39
  font-size: 16px;
40
40
  line-height: 20px;
41
41
  font-weight: 400;
@@ -50,10 +50,10 @@
50
50
  box-sizing: border-box;
51
51
  position: relative;
52
52
  cursor: pointer;
53
- } .select__option_bhdb6:not(.select__disabled_bhdb6):active {
53
+ } .select__option_1hxpg:not(.select__disabled_1hxpg):active {
54
54
  background: var(--select-option-active-background);
55
55
  color: var(--select-option-active-color);
56
- } .select__option_bhdb6:before {
56
+ } .select__option_1hxpg:before {
57
57
  content: '';
58
58
  position: absolute;
59
59
  left: var(--select-option-left-padding);
@@ -63,46 +63,46 @@
63
63
  background: var(--select-option-divider-background);
64
64
  display: var(--select-option-divider-display);
65
65
  transition: opacity 0.2s ease;
66
- } .select__option_bhdb6:first-child:before {
66
+ } .select__option_1hxpg:first-child:before {
67
67
  display: none;
68
- } .select__size-48_bhdb6 {
68
+ } .select__size-48_1hxpg {
69
69
  min-height: var(--size-s-height);
70
- } .select__size-56_bhdb6 {
70
+ } .select__size-56_1hxpg {
71
71
  min-height: var(--size-m-height);
72
- } .select__size-64_bhdb6 {
72
+ } .select__size-64_1hxpg {
73
73
  min-height: var(--size-l-height);
74
- } .select__size-72_bhdb6 {
74
+ } .select__size-72_1hxpg {
75
75
  min-height: var(--size-xl-height);
76
76
  padding-left: var(--select-option-l-left-padding);
77
77
  padding-right: var(--select-option-l-right-padding);
78
- } .select__size-72_bhdb6:before {
78
+ } .select__size-72_1hxpg:before {
79
79
  left: var(--select-option-l-left-padding);
80
80
  right: var(--select-option-l-right-padding);
81
- } .select__selected_bhdb6 {
81
+ } .select__selected_1hxpg {
82
82
  background: var(--select-option-selected-background);
83
83
  color: var(--select-option-selected-color);
84
84
  cursor: default;
85
- } .select__highlighted_bhdb6 {
85
+ } .select__highlighted_1hxpg {
86
86
  background: var(--select-option-hover-background);
87
87
  color: var(--select-option-hover-color);
88
- } .select__highlighted_bhdb6:before,
89
- .select__highlighted_bhdb6 + .select__option_bhdb6:before {
88
+ } .select__highlighted_1hxpg:before,
89
+ .select__highlighted_1hxpg + .select__option_1hxpg:before {
90
90
  opacity: 0;
91
- } .select__disabled_bhdb6 {
91
+ } .select__disabled_1hxpg {
92
92
  cursor: var(--disabled-cursor);
93
93
  background: var(--select-option-disabled-background);
94
94
  color: var(--select-option-disabled-color);
95
- } .select__content_bhdb6 {
95
+ } .select__content_1hxpg {
96
96
  overflow: hidden;
97
97
  flex: 1;
98
98
  text-overflow: ellipsis;
99
- } .select__textContent_bhdb6 {
99
+ } .select__textContent_1hxpg {
100
100
  padding-top: var(--gap-12);
101
101
  padding-bottom: var(--gap-12);
102
- } .select__highlighted_bhdb6 {
102
+ } .select__highlighted_1hxpg {
103
103
  background: var(--select-option-hover-background);
104
104
  color: var(--select-option-hover-color);
105
- } .select__highlighted_bhdb6:before,
106
- .select__highlighted_bhdb6 + .select__option_bhdb6:before {
105
+ } .select__highlighted_1hxpg:before,
106
+ .select__highlighted_1hxpg + .select__option_1hxpg:before {
107
107
  opacity: 0;
108
108
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"option":"select__option_bhdb6","disabled":"select__disabled_bhdb6","size-48":"select__size-48_bhdb6","size-56":"select__size-56_bhdb6","size-64":"select__size-64_bhdb6","size-72":"select__size-72_bhdb6","selected":"select__selected_bhdb6","highlighted":"select__highlighted_bhdb6","content":"select__content_bhdb6","textContent":"select__textContent_bhdb6"};
3
+ var styles = {"option":"select__option_1hxpg","disabled":"select__disabled_1hxpg","size-48":"select__size-48_1hxpg","size-56":"select__size-56_1hxpg","size-64":"select__size-64_1hxpg","size-72":"select__size-72_1hxpg","selected":"select__selected_1hxpg","highlighted":"select__highlighted_1hxpg","content":"select__content_1hxpg","textContent":"select__textContent_1hxpg"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -35,7 +35,7 @@
35
35
  --select-option-hover-color: var(--color-light-text-primary);
36
36
  --select-option-active-color: var(--color-light-text-primary);
37
37
  --select-option-disabled-color: var(--color-light-text-secondary);
38
- } .select__option_urs46 {
38
+ } .select__option_1ipxd {
39
39
  font-size: 16px;
40
40
  line-height: 20px;
41
41
  font-weight: 400;
@@ -50,10 +50,10 @@
50
50
  box-sizing: border-box;
51
51
  position: relative;
52
52
  cursor: pointer;
53
- } .select__option_urs46:not(.select__disabled_urs46):active {
53
+ } .select__option_1ipxd:not(.select__disabled_1ipxd):active {
54
54
  background: var(--select-option-active-background);
55
55
  color: var(--select-option-active-color);
56
- } .select__option_urs46:before {
56
+ } .select__option_1ipxd:before {
57
57
  content: '';
58
58
  position: absolute;
59
59
  left: var(--select-option-left-padding);
@@ -63,40 +63,40 @@
63
63
  background: var(--select-option-divider-background);
64
64
  display: var(--select-option-divider-display);
65
65
  transition: opacity 0.2s ease;
66
- } .select__option_urs46:first-child:before {
66
+ } .select__option_1ipxd:first-child:before {
67
67
  display: none;
68
- } .select__size-48_urs46 {
68
+ } .select__size-48_1ipxd {
69
69
  min-height: var(--size-s-height);
70
- } .select__size-56_urs46 {
70
+ } .select__size-56_1ipxd {
71
71
  min-height: var(--size-m-height);
72
- } .select__size-64_urs46 {
72
+ } .select__size-64_1ipxd {
73
73
  min-height: var(--size-l-height);
74
- } .select__size-72_urs46 {
74
+ } .select__size-72_1ipxd {
75
75
  min-height: var(--size-xl-height);
76
76
  padding-left: var(--select-option-l-left-padding);
77
77
  padding-right: var(--select-option-l-right-padding);
78
- } .select__size-72_urs46:before {
78
+ } .select__size-72_1ipxd:before {
79
79
  left: var(--select-option-l-left-padding);
80
80
  right: var(--select-option-l-right-padding);
81
- } .select__selected_urs46 {
81
+ } .select__selected_1ipxd {
82
82
  background: var(--select-option-selected-background);
83
83
  color: var(--select-option-selected-color);
84
84
  cursor: default;
85
- } .select__highlighted_urs46 {
85
+ } .select__highlighted_1ipxd {
86
86
  background: var(--select-option-hover-background);
87
87
  color: var(--select-option-hover-color);
88
- } .select__highlighted_urs46:before,
89
- .select__highlighted_urs46 + .select__option_urs46:before {
88
+ } .select__highlighted_1ipxd:before,
89
+ .select__highlighted_1ipxd + .select__option_1ipxd:before {
90
90
  opacity: 0;
91
- } .select__disabled_urs46 {
91
+ } .select__disabled_1ipxd {
92
92
  cursor: var(--disabled-cursor);
93
93
  background: var(--select-option-disabled-background);
94
94
  color: var(--select-option-disabled-color);
95
- } .select__content_urs46 {
95
+ } .select__content_1ipxd {
96
96
  overflow: hidden;
97
97
  flex: 1;
98
98
  text-overflow: ellipsis;
99
- } .select__textContent_urs46 {
99
+ } .select__textContent_1ipxd {
100
100
  padding-top: var(--gap-12);
101
101
  padding-bottom: var(--gap-12);
102
102
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"option":"select__option_urs46","disabled":"select__disabled_urs46","size-48":"select__size-48_urs46","size-56":"select__size-56_urs46","size-64":"select__size-64_urs46","size-72":"select__size-72_urs46","selected":"select__selected_urs46","highlighted":"select__highlighted_urs46","content":"select__content_urs46","textContent":"select__textContent_urs46"};
3
+ var styles = {"option":"select__option_1ipxd","disabled":"select__disabled_1ipxd","size-48":"select__size-48_1ipxd","size-56":"select__size-56_1ipxd","size-64":"select__size-64_1ipxd","size-72":"select__size-72_1ipxd","selected":"select__selected_1ipxd","highlighted":"select__highlighted_1ipxd","content":"select__content_1ipxd","textContent":"select__textContent_1ipxd"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1,3 +1,36 @@
1
1
  import React from 'react';
2
- import { type OptionsListProps } from '../../typings';
3
- export declare const OptionsList: React.ForwardRefExoticComponent<OptionsListProps & React.RefAttributes<HTMLDivElement>>;
2
+ import { type GroupShape, type OptionShape } from '../../typings';
3
+ export declare const OptionsList: React.ForwardRefExoticComponent<Pick<import("../../typings").SelectProps, "client"> & {
4
+ className?: string | undefined;
5
+ optionGroupClassName?: string | undefined;
6
+ scrollbarClassName?: string | undefined;
7
+ footerClassName?: string | undefined;
8
+ size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
9
+ Option: React.ComponentType<import("../../typings").OptionProps>;
10
+ getOptionProps: (option: OptionShape, index: number) => import("../../typings").OptionProps;
11
+ groupOptionProps?: import("../../typings").AnyObject | undefined;
12
+ selectedItems?: OptionShape[] | undefined;
13
+ setSelectedItems: (selected: OptionShape[]) => void;
14
+ toggleMenu: () => void;
15
+ header?: React.ReactNode;
16
+ footer?: React.ReactNode;
17
+ options?: (OptionShape | GroupShape)[] | undefined;
18
+ flatOptions?: OptionShape[] | undefined;
19
+ highlightedIndex?: number | undefined;
20
+ open?: boolean | undefined;
21
+ Optgroup?: React.ComponentType<import("../../typings").OptgroupProps> | undefined;
22
+ emptyPlaceholder?: React.ReactNode;
23
+ visibleOptions?: number | undefined;
24
+ onScroll?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
25
+ dataTestId?: string | undefined;
26
+ inputProps?: import("@alfalab/core-components-input").InputProps | undefined;
27
+ showFooter?: boolean | undefined;
28
+ nativeScrollbar?: boolean | undefined;
29
+ optionsListWidth?: "field" | "content" | undefined;
30
+ onApply?: (() => void) | undefined;
31
+ onClear?: (() => void) | undefined;
32
+ setHighlightedIndex?: ((index: number) => void) | undefined;
33
+ search?: string | undefined;
34
+ multiple?: boolean | undefined;
35
+ limitDynamicOptionGroupSize?: boolean | undefined;
36
+ } & React.RefAttributes<HTMLDivElement>>;
@@ -2,10 +2,9 @@ import { __assign } from 'tslib';
2
2
  import React, { forwardRef, useState, useCallback, useRef } from 'react';
3
3
  import mergeRefs from 'react-merge-refs';
4
4
  import cn from 'classnames';
5
- import { useMatchMedia } from '@alfalab/core-components-mq/esm';
6
5
  import { Scrollbar } from '@alfalab/core-components-scrollbar/esm';
7
- import { isClient } from '@alfalab/core-components-shared/esm';
8
6
  import { SIZE_TO_CLASSNAME_MAP, DEFAULT_VISIBLE_OPTIONS } from '../../consts.js';
7
+ import { useNativeScrollbar } from '../../hooks/use-native-scrollbar.js';
9
8
  import { useVisibleOptions, isGroup } from '../../utils.js';
10
9
  import { Optgroup } from '../optgroup/Component.js';
11
10
  import styles from './index.module.css.js';
@@ -17,14 +16,13 @@ var createCounter = function () {
17
16
  };
18
17
  var OptionsList = forwardRef(function (_a, ref) {
19
18
  var _b, _c;
20
- var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, footerClassName = _a.footerClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.groupOptionProps, groupOptionProps = _e === void 0 ? {} : _e, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.Optgroup, Optgroup$1 = _g === void 0 ? Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? DEFAULT_VISIBLE_OPTIONS : _h, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _j = _a.showFooter, showFooter = _j === void 0 ? true : _j, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _k = _a.flatOptions, flatOptions = _k === void 0 ? [] : _k, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, search = _a.search, setSelectedItems = _a.setSelectedItems, multiple = _a.multiple, _l = _a.limitDynamicOptionGroupSize, limitDynamicOptionGroupSize = _l === void 0 ? false : _l;
19
+ var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, footerClassName = _a.footerClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.groupOptionProps, groupOptionProps = _e === void 0 ? {} : _e, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.Optgroup, Optgroup$1 = _g === void 0 ? Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? DEFAULT_VISIBLE_OPTIONS : _h, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _j = _a.showFooter, showFooter = _j === void 0 ? true : _j, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _k = _a.flatOptions, flatOptions = _k === void 0 ? [] : _k, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, search = _a.search, setSelectedItems = _a.setSelectedItems, multiple = _a.multiple, _l = _a.limitDynamicOptionGroupSize, limitDynamicOptionGroupSize = _l === void 0 ? false : _l, client = _a.client;
21
20
  var _m = useState(true), scrollTop = _m[0], setScrollTop = _m[1];
22
21
  var _o = useState(false), scrollBottom = _o[0], setScrollBottom = _o[1];
23
- var query = '(max-width: 1023px)';
24
- var nativeScrollbar = useMatchMedia(query, function () {
25
- return isClient() ? window.matchMedia(query).matches : true;
26
- })[0];
27
- nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
22
+ var nativeScrollbar = useNativeScrollbar({
23
+ nativeScrollbar: nativeScrollbarProp,
24
+ client: client,
25
+ });
28
26
  var handleScroll = useCallback(function (event) {
29
27
  var scrolledToHeader = event.currentTarget.scrollTop <= 0;
30
28
  var scrolledToFooter = event.currentTarget.scrollHeight - event.currentTarget.offsetHeight <=
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../../../src/components/options-list/Component.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { useMatchMedia } from '@alfalab/core-components-mq';\nimport { Scrollbar } from '@alfalab/core-components-scrollbar';\nimport { isClient } from '@alfalab/core-components-shared';\n\nimport { DEFAULT_VISIBLE_OPTIONS, SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type GroupShape, type OptionShape, type OptionsListProps } from '../../typings';\nimport { isGroup, useVisibleOptions } from '../../utils';\nimport { Optgroup as DefaultOptgroup } from '../optgroup';\n\nimport styles from './index.module.css';\n\nconst createCounter = () => {\n let count = 0;\n\n // eslint-disable-next-line no-plusplus\n return () => count++;\n};\n\nexport const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(\n (\n {\n size = 48,\n className,\n optionGroupClassName,\n footerClassName,\n scrollbarClassName,\n Option,\n getOptionProps,\n groupOptionProps = {},\n options = [],\n Optgroup = DefaultOptgroup,\n dataTestId,\n emptyPlaceholder,\n visibleOptions = DEFAULT_VISIBLE_OPTIONS,\n onScroll,\n open,\n header,\n footer,\n showFooter = true,\n optionsListWidth,\n nativeScrollbar: nativeScrollbarProp,\n flatOptions = [],\n setHighlightedIndex,\n selectedItems,\n search,\n setSelectedItems,\n multiple,\n limitDynamicOptionGroupSize = false,\n },\n ref,\n ) => {\n const [scrollTop, setScrollTop] = useState(true);\n const [scrollBottom, setScrollBottom] = useState(false);\n\n const query = '(max-width: 1023px)';\n let [nativeScrollbar] = useMatchMedia(query, () =>\n isClient() ? window.matchMedia(query).matches : true,\n );\n\n nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);\n\n const handleScroll = useCallback(\n (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n const scrolledToHeader = event.currentTarget.scrollTop <= 0;\n const scrolledToFooter =\n event.currentTarget.scrollHeight - event.currentTarget.offsetHeight <=\n event.currentTarget.scrollTop;\n\n setScrollTop(scrolledToHeader);\n setScrollBottom(scrolledToFooter);\n\n onScroll?.(event);\n },\n [onScroll],\n );\n\n const renderOption = (option: OptionShape, index: number) => (\n <Option key={option.key} {...getOptionProps(option, index)} />\n );\n\n const listRef = useRef<HTMLDivElement>(null);\n const scrollbarRef = useRef<HTMLDivElement>(null);\n const counter = createCounter();\n const renderGroup = (group: GroupShape) => {\n const groupSelectedItems = selectedItems?.filter(({ key: selectedItemKey }) =>\n group.options.some((option) => option.key === selectedItemKey),\n );\n const handleSelectedItems = (items: OptionShape[]) => {\n setSelectedItems(\n (\n selectedItems?.filter(\n ({ key: selectedItemKey }) =>\n !group.options.some((option) => option.key === selectedItemKey),\n ) ?? []\n ).concat(items),\n );\n };\n\n return (\n <Optgroup\n className={optionGroupClassName}\n label={group.label}\n key={group.label}\n size={size}\n options={group.options}\n selectedItems={groupSelectedItems}\n setSelectedItems={handleSelectedItems}\n search={search}\n multiple={multiple}\n {...groupOptionProps}\n >\n {group.options.map((option) => renderOption(option, counter()))}\n </Optgroup>\n );\n };\n\n const actualOptionsCount = limitDynamicOptionGroupSize && options.length > 0;\n\n const [measured, height] = useVisibleOptions({\n visibleOptions,\n listRef,\n open,\n options,\n actualOptionsCount,\n size: actualOptionsCount\n ? (() => {\n switch (typeof size) {\n case 'string':\n throw new Error(\n 'OptionsList with `limitDynamicOptionGroupSize` enabled needs a `size` with number type',\n );\n default:\n return size;\n }\n })()\n : undefined,\n });\n\n if (options.length === 0 && !emptyPlaceholder && !header && !footer) {\n return null;\n }\n\n const renderListItems = () => (\n <React.Fragment>\n {options.map((option) =>\n isGroup(option) ? renderGroup(option) : renderOption(option, counter()),\n )}\n\n {emptyPlaceholder && options.length === 0 && (\n <div className={styles.emptyPlaceholder}>{emptyPlaceholder}</div>\n )}\n </React.Fragment>\n );\n\n const renderWithCustomScrollbar = () => {\n const scrollableNodeProps = {\n onScroll: handleScroll,\n 'data-test-id': dataTestId,\n ref: ref as React.RefObject<HTMLDivElement>,\n };\n\n return (\n <Scrollbar\n className={cn(styles.scrollable, scrollbarClassName)}\n ref={scrollbarRef}\n style={{ height }}\n horizontalAutoStretch={optionsListWidth === 'content'}\n scrollableNodeProps={scrollableNodeProps}\n contentNodeProps={{ ref: listRef }}\n maskProps={{\n /*\n * Для корректного подсчета высоты опций(иначе для optionsListWidth: 'field'\n * высота опции всегда будет равна высоте одной строчки)\n */\n className: cn({\n [styles.mask]: optionsListWidth === 'content' && !measured,\n }),\n }}\n >\n {renderListItems()}\n </Scrollbar>\n );\n };\n\n const renderWithNativeScrollbar = () => (\n <div\n className={cn(styles.scrollable, scrollbarClassName)}\n ref={mergeRefs([listRef, ref])}\n onScroll={handleScroll}\n style={{ height }}\n >\n {renderListItems()}\n </div>\n );\n\n const resetHighlightedIndex = () => setHighlightedIndex?.(-1);\n\n return (\n <div\n {...(nativeScrollbar && { 'data-test-id': dataTestId })}\n className={cn(styles.optionsList, styles[SIZE_TO_CLASSNAME_MAP[size]], className)}\n >\n {header && (\n <div\n className={cn(styles.optionsListHeader, {\n [styles.headerHighlighted]: !scrollTop,\n })}\n onMouseEnter={resetHighlightedIndex}\n >\n {header}\n </div>\n )}\n\n {nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()}\n\n {showFooter && footer && (\n <div\n onMouseEnter={resetHighlightedIndex}\n className={cn(styles.optionsListFooter, footerClassName, {\n [styles.withBorder]:\n visibleOptions &&\n flatOptions.length > visibleOptions &&\n !scrollBottom,\n })}\n >\n {footer}\n </div>\n )}\n </div>\n );\n },\n);\n"],"names":["Optgroup","DefaultOptgroup"],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../../../src/components/options-list/Component.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { Scrollbar } from '@alfalab/core-components-scrollbar';\n\nimport { DEFAULT_VISIBLE_OPTIONS, SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { useNativeScrollbar } from '../../hooks/use-native-scrollbar';\nimport { type GroupShape, type OptionShape, type OptionsListProps } from '../../typings';\nimport { isGroup, useVisibleOptions } from '../../utils';\nimport { Optgroup as DefaultOptgroup } from '../optgroup';\n\nimport styles from './index.module.css';\n\nconst createCounter = () => {\n let count = 0;\n\n // eslint-disable-next-line no-plusplus\n return () => count++;\n};\n\nexport const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(\n (\n {\n size = 48,\n className,\n optionGroupClassName,\n footerClassName,\n scrollbarClassName,\n Option,\n getOptionProps,\n groupOptionProps = {},\n options = [],\n Optgroup = DefaultOptgroup,\n dataTestId,\n emptyPlaceholder,\n visibleOptions = DEFAULT_VISIBLE_OPTIONS,\n onScroll,\n open,\n header,\n footer,\n showFooter = true,\n optionsListWidth,\n nativeScrollbar: nativeScrollbarProp,\n flatOptions = [],\n setHighlightedIndex,\n selectedItems,\n search,\n setSelectedItems,\n multiple,\n limitDynamicOptionGroupSize = false,\n client,\n },\n ref,\n ) => {\n const [scrollTop, setScrollTop] = useState(true);\n const [scrollBottom, setScrollBottom] = useState(false);\n\n const nativeScrollbar = useNativeScrollbar({\n nativeScrollbar: nativeScrollbarProp,\n client,\n });\n\n const handleScroll = useCallback(\n (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n const scrolledToHeader = event.currentTarget.scrollTop <= 0;\n const scrolledToFooter =\n event.currentTarget.scrollHeight - event.currentTarget.offsetHeight <=\n event.currentTarget.scrollTop;\n\n setScrollTop(scrolledToHeader);\n setScrollBottom(scrolledToFooter);\n\n onScroll?.(event);\n },\n [onScroll],\n );\n\n const renderOption = (option: OptionShape, index: number) => (\n <Option key={option.key} {...getOptionProps(option, index)} />\n );\n\n const listRef = useRef<HTMLDivElement>(null);\n const scrollbarRef = useRef<HTMLDivElement>(null);\n const counter = createCounter();\n const renderGroup = (group: GroupShape) => {\n const groupSelectedItems = selectedItems?.filter(({ key: selectedItemKey }) =>\n group.options.some((option) => option.key === selectedItemKey),\n );\n const handleSelectedItems = (items: OptionShape[]) => {\n setSelectedItems(\n (\n selectedItems?.filter(\n ({ key: selectedItemKey }) =>\n !group.options.some((option) => option.key === selectedItemKey),\n ) ?? []\n ).concat(items),\n );\n };\n\n return (\n <Optgroup\n className={optionGroupClassName}\n label={group.label}\n key={group.label}\n size={size}\n options={group.options}\n selectedItems={groupSelectedItems}\n setSelectedItems={handleSelectedItems}\n search={search}\n multiple={multiple}\n {...groupOptionProps}\n >\n {group.options.map((option) => renderOption(option, counter()))}\n </Optgroup>\n );\n };\n\n const actualOptionsCount = limitDynamicOptionGroupSize && options.length > 0;\n\n const [measured, height] = useVisibleOptions({\n visibleOptions,\n listRef,\n open,\n options,\n actualOptionsCount,\n size: actualOptionsCount\n ? (() => {\n switch (typeof size) {\n case 'string':\n throw new Error(\n 'OptionsList with `limitDynamicOptionGroupSize` enabled needs a `size` with number type',\n );\n default:\n return size;\n }\n })()\n : undefined,\n });\n\n if (options.length === 0 && !emptyPlaceholder && !header && !footer) {\n return null;\n }\n\n const renderListItems = () => (\n <React.Fragment>\n {options.map((option) =>\n isGroup(option) ? renderGroup(option) : renderOption(option, counter()),\n )}\n\n {emptyPlaceholder && options.length === 0 && (\n <div className={styles.emptyPlaceholder}>{emptyPlaceholder}</div>\n )}\n </React.Fragment>\n );\n\n const renderWithCustomScrollbar = () => {\n const scrollableNodeProps = {\n onScroll: handleScroll,\n 'data-test-id': dataTestId,\n ref: ref as React.RefObject<HTMLDivElement>,\n };\n\n return (\n <Scrollbar\n className={cn(styles.scrollable, scrollbarClassName)}\n ref={scrollbarRef}\n style={{ height }}\n horizontalAutoStretch={optionsListWidth === 'content'}\n scrollableNodeProps={scrollableNodeProps}\n contentNodeProps={{ ref: listRef }}\n maskProps={{\n /*\n * Для корректного подсчета высоты опций(иначе для optionsListWidth: 'field'\n * высота опции всегда будет равна высоте одной строчки)\n */\n className: cn({\n [styles.mask]: optionsListWidth === 'content' && !measured,\n }),\n }}\n >\n {renderListItems()}\n </Scrollbar>\n );\n };\n\n const renderWithNativeScrollbar = () => (\n <div\n className={cn(styles.scrollable, scrollbarClassName)}\n ref={mergeRefs([listRef, ref])}\n onScroll={handleScroll}\n style={{ height }}\n >\n {renderListItems()}\n </div>\n );\n\n const resetHighlightedIndex = () => setHighlightedIndex?.(-1);\n\n return (\n <div\n {...(nativeScrollbar && { 'data-test-id': dataTestId })}\n className={cn(styles.optionsList, styles[SIZE_TO_CLASSNAME_MAP[size]], className)}\n >\n {header && (\n <div\n className={cn(styles.optionsListHeader, {\n [styles.headerHighlighted]: !scrollTop,\n })}\n onMouseEnter={resetHighlightedIndex}\n >\n {header}\n </div>\n )}\n\n {nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()}\n\n {showFooter && footer && (\n <div\n onMouseEnter={resetHighlightedIndex}\n className={cn(styles.optionsListFooter, footerClassName, {\n [styles.withBorder]:\n visibleOptions &&\n flatOptions.length > visibleOptions &&\n !scrollBottom,\n })}\n >\n {footer}\n </div>\n )}\n </div>\n );\n },\n);\n"],"names":["Optgroup","DefaultOptgroup"],"mappings":"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"}
@@ -11,33 +11,33 @@
11
11
  --gap-24: var(--gap-xl);
12
12
  } :root {
13
13
  --select-options-list-empty-placeholder-color: var(--color-light-text-secondary);
14
- } .select__optionsList_soul5 {
14
+ } .select__optionsList_qcd3h {
15
15
  width: 100%;
16
16
  outline: none;
17
17
  box-sizing: border-box;
18
18
  position: relative;
19
- } .select__optionsListHeader_soul5 {
19
+ } .select__optionsListHeader_qcd3h {
20
20
  box-sizing: border-box;
21
21
  border-bottom: 1px solid transparent;
22
22
  transition: border-color 0.2s ease;
23
- } .select__optionsListHeader_soul5.select__headerHighlighted_soul5 {
23
+ } .select__optionsListHeader_qcd3h.select__headerHighlighted_qcd3h {
24
24
  border-bottom-color: var(--color-light-neutral-300);
25
- } .select__optionsListFooter_soul5 {
25
+ } .select__optionsListFooter_qcd3h {
26
26
  position: sticky;
27
27
  bottom: var(--gap-0);
28
28
  box-sizing: border-box;
29
29
  border-top: 1px solid transparent;
30
30
  transition: border-color 0.2s ease;
31
- } .select__optionsListFooter_soul5.select__withBorder_soul5 {
31
+ } .select__optionsListFooter_qcd3h.select__withBorder_qcd3h {
32
32
  border-top-color: var(--color-light-neutral-300);
33
- } .select__scrollable_soul5 {
33
+ } .select__scrollable_qcd3h {
34
34
  overflow: auto;
35
35
  width: 100%;
36
- } .select__mask_soul5 {
36
+ } .select__mask_qcd3h {
37
37
  min-width: 4000px;
38
- } .select__emptyPlaceholder_soul5 {
38
+ } .select__emptyPlaceholder_qcd3h {
39
39
  padding: var(--gap-16) var(--gap-12);
40
40
  color: var(--select-options-list-empty-placeholder-color);
41
- } .select__size-72_soul5 .select__emptyPlaceholder_soul5 {
41
+ } .select__size-72_qcd3h .select__emptyPlaceholder_qcd3h {
42
42
  padding: var(--gap-24) var(--gap-16);
43
43
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"optionsList":"select__optionsList_soul5","optionsListHeader":"select__optionsListHeader_soul5","headerHighlighted":"select__headerHighlighted_soul5","optionsListFooter":"select__optionsListFooter_soul5","withBorder":"select__withBorder_soul5","scrollable":"select__scrollable_soul5","mask":"select__mask_soul5","emptyPlaceholder":"select__emptyPlaceholder_soul5","size-72":"select__size-72_soul5"};
3
+ var styles = {"optionsList":"select__optionsList_qcd3h","optionsListHeader":"select__optionsListHeader_qcd3h","headerHighlighted":"select__headerHighlighted_qcd3h","optionsListFooter":"select__optionsListFooter_qcd3h","withBorder":"select__withBorder_qcd3h","scrollable":"select__scrollable_qcd3h","mask":"select__mask_qcd3h","emptyPlaceholder":"select__emptyPlaceholder_qcd3h","size-72":"select__size-72_qcd3h"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -2,12 +2,26 @@ import { __rest, __assign } from 'tslib';
2
2
  import React, { forwardRef } from 'react';
3
3
  import cn from 'classnames';
4
4
  import { Input } from '@alfalab/core-components-input/esm';
5
+ import { InputDesktop } from '@alfalab/core-components-input/esm/desktop';
6
+ import { InputMobile } from '@alfalab/core-components-input/esm/mobile';
5
7
  import { MagnifierMIcon } from '@alfalab/icons-glyph/MagnifierMIcon';
6
8
  import styles from './index.module.css.js';
7
9
 
10
+ var getComponent = function (client) {
11
+ switch (client) {
12
+ case 'desktop':
13
+ return InputDesktop;
14
+ case 'mobile':
15
+ return InputMobile;
16
+ default:
17
+ return Input;
18
+ }
19
+ };
8
20
  var Search = forwardRef(function (_a, ref) {
9
21
  var _b = _a.clear, clear = _b === void 0 ? true : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Поиск' : _c, className = _a.className, _d = _a.leftAddons, leftAddons = _d === void 0 ? React.createElement(MagnifierMIcon, { color: '#86868A' }) : _d, restProps = __rest(_a, ["clear", "placeholder", "className", "leftAddons"]);
10
- return (React.createElement(Input, __assign({ ref: ref, className: cn(styles.component, className), placeholder: placeholder, leftAddons: leftAddons, clear: clear }, restProps)));
22
+ var client = restProps.client;
23
+ var Component = getComponent(client);
24
+ return (React.createElement(Component, __assign({ ref: ref, className: cn(styles.component, className), placeholder: placeholder, leftAddons: leftAddons, clear: clear }, restProps)));
11
25
  });
12
26
 
13
27
  export { Search };
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../../../src/components/search/Component.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { Input } from '@alfalab/core-components-input';\nimport { MagnifierMIcon } from '@alfalab/icons-glyph/MagnifierMIcon';\n\nimport { type SearchProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Search = forwardRef<HTMLInputElement, SearchProps>(\n (\n {\n clear = true,\n placeholder = 'Поиск',\n className,\n leftAddons = <MagnifierMIcon color='#86868A' />,\n ...restProps\n },\n ref,\n ) => (\n <Input\n ref={ref}\n className={cn(styles.component, className)}\n placeholder={placeholder}\n leftAddons={leftAddons}\n clear={clear}\n {...restProps}\n />\n ),\n);\n"],"names":[],"mappings":";;;;;;;IAUa,MAAM,GAAG,UAAU,CAC5B,UACI,EAMC,EACD,GAAG,EAAA;AANC,IAAA,IAAA,EAAY,GAAA,EAAA,CAAA,KAAA,EAAZ,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACZ,EAAqB,GAAA,EAAA,CAAA,WAAA,EAArB,WAAW,GAAA,EAAA,KAAA,MAAA,GAAG,OAAO,GAAA,EAAA,EACrB,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,EAAA,GAAA,EAAA,CAAA,UAA+C,EAA/C,UAAU,GAAG,EAAA,KAAA,MAAA,GAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAC,EAAA,KAAK,EAAC,SAAS,GAAG,GAAA,EAAA,EAC5C,SAAS,GAAA,MAAA,CAAA,EAAA,EALhB,mDAMC,CADe;AAGf,IAAA,QACD,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,QAAA,CAAA,EACF,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EAAA,EACR,SAAS,CAAA,CACf;AACL,CAAA;;;;"}
1
+ {"version":3,"file":"Component.js","sources":["../../../src/components/search/Component.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { Input } from '@alfalab/core-components-input';\nimport { InputDesktop } from '@alfalab/core-components-input/desktop';\nimport { InputMobile } from '@alfalab/core-components-input/mobile';\nimport { MagnifierMIcon } from '@alfalab/icons-glyph/MagnifierMIcon';\n\nimport { type SearchProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nconst getComponent = (client: SearchProps['client']) => {\n switch (client) {\n case 'desktop':\n return InputDesktop;\n case 'mobile':\n return InputMobile;\n default:\n return Input;\n }\n};\n\nexport const Search = forwardRef<HTMLInputElement, SearchProps>(\n (\n {\n clear = true,\n placeholder = 'Поиск',\n className,\n leftAddons = <MagnifierMIcon color='#86868A' />,\n ...restProps\n },\n ref,\n ) => {\n const { client } = restProps;\n\n const Component = getComponent(client);\n\n return (\n <Component\n ref={ref}\n className={cn(styles.component, className)}\n placeholder={placeholder}\n leftAddons={leftAddons}\n clear={clear}\n {...restProps}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;AAYA,IAAM,YAAY,GAAG,UAAC,MAA6B,EAAA;AAC/C,IAAA,QAAQ,MAAM;AACV,QAAA,KAAK,SAAS;AACV,YAAA,OAAO,YAAY;AACvB,QAAA,KAAK,QAAQ;AACT,YAAA,OAAO,WAAW;AACtB,QAAA;AACI,YAAA,OAAO,KAAK;AACnB;AACL,CAAC;IAEY,MAAM,GAAG,UAAU,CAC5B,UACI,EAMC,EACD,GAAG,EAAA;AANC,IAAA,IAAA,EAAY,GAAA,EAAA,CAAA,KAAA,EAAZ,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACZ,EAAqB,GAAA,EAAA,CAAA,WAAA,EAArB,WAAW,GAAA,EAAA,KAAA,MAAA,GAAG,OAAO,GAAA,EAAA,EACrB,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,EAAA,GAAA,EAAA,CAAA,UAA+C,EAA/C,UAAU,GAAG,EAAA,KAAA,MAAA,GAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAC,EAAA,KAAK,EAAC,SAAS,GAAG,GAAA,EAAA,EAC5C,SAAS,GAAA,MAAA,CAAA,EAAA,EALhB,mDAMC,CADe;AAIR,IAAA,IAAA,MAAM,GAAK,SAAS,CAAA,MAAd;AAEd,IAAA,IAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC;AAEtC,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,QAAA,CAAA,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EAAA,EACR,SAAS,CAAA,CACf;AAEV,CAAC;;;;"}
@@ -1,3 +1,3 @@
1
- .select__component_1s09e.select__component_1s09e {
1
+ .select__component_1h1u7.select__component_1h1u7 {
2
2
  width: auto;
3
3
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"select__component_1s09e"};
3
+ var styles = {"component":"select__component_1h1u7"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1,3 +1,36 @@
1
1
  import React from 'react';
2
- import { type OptionsListProps } from '../../typings';
3
- export declare const VirtualOptionsList: React.ForwardRefExoticComponent<OptionsListProps & React.RefAttributes<HTMLDivElement>>;
2
+ import { type GroupShape, type OptionShape } from '../../typings';
3
+ export declare const VirtualOptionsList: React.ForwardRefExoticComponent<Pick<import("../../typings").SelectProps, "client"> & {
4
+ className?: string | undefined;
5
+ optionGroupClassName?: string | undefined;
6
+ scrollbarClassName?: string | undefined;
7
+ footerClassName?: string | undefined;
8
+ size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
9
+ Option: React.ComponentType<import("../../typings").OptionProps>;
10
+ getOptionProps: (option: OptionShape, index: number) => import("../../typings").OptionProps;
11
+ groupOptionProps?: import("../../typings").AnyObject | undefined;
12
+ selectedItems?: OptionShape[] | undefined;
13
+ setSelectedItems: (selected: OptionShape[]) => void;
14
+ toggleMenu: () => void;
15
+ header?: React.ReactNode;
16
+ footer?: React.ReactNode;
17
+ options?: (OptionShape | GroupShape)[] | undefined;
18
+ flatOptions?: OptionShape[] | undefined;
19
+ highlightedIndex?: number | undefined;
20
+ open?: boolean | undefined;
21
+ Optgroup?: React.ComponentType<import("../../typings").OptgroupProps> | undefined;
22
+ emptyPlaceholder?: React.ReactNode;
23
+ visibleOptions?: number | undefined;
24
+ onScroll?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
25
+ dataTestId?: string | undefined;
26
+ inputProps?: import("@alfalab/core-components-input").InputProps | undefined;
27
+ showFooter?: boolean | undefined;
28
+ nativeScrollbar?: boolean | undefined;
29
+ optionsListWidth?: "field" | "content" | undefined;
30
+ onApply?: (() => void) | undefined;
31
+ onClear?: (() => void) | undefined;
32
+ setHighlightedIndex?: ((index: number) => void) | undefined;
33
+ search?: string | undefined;
34
+ multiple?: boolean | undefined;
35
+ limitDynamicOptionGroupSize?: boolean | undefined;
36
+ } & React.RefAttributes<HTMLDivElement>>;
@@ -3,33 +3,30 @@ import React, { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
3
3
  import mergeRefs from 'react-merge-refs';
4
4
  import { useVirtual } from 'react-virtual';
5
5
  import cn from 'classnames';
6
- import { useMatchMedia } from '@alfalab/core-components-mq/esm';
7
6
  import { Scrollbar } from '@alfalab/core-components-scrollbar/esm';
8
- import { isClient } from '@alfalab/core-components-shared/esm';
9
7
  import { SIZE_TO_CLASSNAME_MAP, DEFAULT_VISIBLE_OPTIONS } from '../../consts.js';
8
+ import { useNativeScrollbar } from '../../hooks/use-native-scrollbar.js';
10
9
  import { usePrevious, lastIndexOf, useVirtualVisibleOptions, isGroup } from '../../utils.js';
11
10
  import { Optgroup } from '../optgroup/Component.js';
12
11
  import styles from './index.module.css.js';
13
12
 
14
13
  var VirtualOptionsList = forwardRef(function (_a, ref) {
15
14
  var _b;
16
- var _c = _a.size, size = _c === void 0 ? 48 : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.highlightedIndex, highlightedIndex = _e === void 0 ? -1 : _e, optionGroupClassName = _a.optionGroupClassName, className = _a.className, getOptionProps = _a.getOptionProps, _f = _a.groupOptionProps, groupOptionProps = _f === void 0 ? {} : _f, Option = _a.Option, open = _a.open, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.Optgroup, Optgroup$1 = _h === void 0 ? Optgroup : _h, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _j = _a.visibleOptions, visibleOptions = _j === void 0 ? DEFAULT_VISIBLE_OPTIONS : _j, header = _a.header, footer = _a.footer, _k = _a.showFooter, showFooter = _k === void 0 ? true : _k, optionsListWidth = _a.optionsListWidth, onScroll = _a.onScroll, nativeScrollbarProp = _a.nativeScrollbar, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, setSelectedItems = _a.setSelectedItems, search = _a.search, multiple = _a.multiple, scrollbarClassName = _a.scrollbarClassName;
15
+ var _c = _a.size, size = _c === void 0 ? 48 : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.highlightedIndex, highlightedIndex = _e === void 0 ? -1 : _e, optionGroupClassName = _a.optionGroupClassName, className = _a.className, getOptionProps = _a.getOptionProps, _f = _a.groupOptionProps, groupOptionProps = _f === void 0 ? {} : _f, Option = _a.Option, open = _a.open, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.Optgroup, Optgroup$1 = _h === void 0 ? Optgroup : _h, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _j = _a.visibleOptions, visibleOptions = _j === void 0 ? DEFAULT_VISIBLE_OPTIONS : _j, header = _a.header, footer = _a.footer, _k = _a.showFooter, showFooter = _k === void 0 ? true : _k, optionsListWidth = _a.optionsListWidth, onScroll = _a.onScroll, nativeScrollbarProp = _a.nativeScrollbar, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, setSelectedItems = _a.setSelectedItems, search = _a.search, multiple = _a.multiple, scrollbarClassName = _a.scrollbarClassName, client = _a.client;
17
16
  var listRef = useRef(null);
18
17
  var parentRef = useRef(null);
19
18
  var scrollbarRef = useRef(null);
20
19
  var _l = useState(''), visibleOptionsInvalidateKey = _l[0], setVisibleOptionsInvalidateKey = _l[1];
21
20
  var prevHighlightedIndex = usePrevious(highlightedIndex) || -1;
22
- var query = '(max-width: 1023px)';
23
- var nativeScrollbar = useMatchMedia(query, function () {
24
- return isClient() ? window.matchMedia(query).matches : true;
25
- })[0];
26
21
  var rowVirtualizer = useVirtual({
27
22
  size: flatOptions.length,
28
23
  parentRef: (ref || parentRef),
29
24
  overscan: 15,
30
25
  });
31
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
32
- nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
26
+ var nativeScrollbar = useNativeScrollbar({
27
+ nativeScrollbar: nativeScrollbarProp,
28
+ client: client,
29
+ });
33
30
  // Сколл к выбранному пункту при открытии меню
34
31
  useEffect(function () {
35
32
  if (open) {