@alfalab/core-components-select 17.3.0 → 17.3.2

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 (164) hide show
  1. package/Component.responsive.d.ts +3 -1
  2. package/Component.responsive.js +5 -1
  3. package/components/arrow/Component.js +1 -1
  4. package/components/arrow/index.css +3 -3
  5. package/components/base-checkmark/Component.js +1 -1
  6. package/components/base-checkmark/index.css +4 -4
  7. package/components/base-option/Component.js +1 -1
  8. package/components/base-option/index.css +13 -13
  9. package/components/base-select/Component.js +2 -2
  10. package/components/base-select/index.css +11 -11
  11. package/components/base-select/mobile.css +12 -12
  12. package/components/checkmark/Component.js +1 -1
  13. package/components/checkmark/index.css +10 -10
  14. package/components/checkmark-mobile/Component.js +1 -1
  15. package/components/checkmark-mobile/index.css +6 -6
  16. package/components/field/Component.js +1 -1
  17. package/components/field/index.css +12 -12
  18. package/components/footer/Component.js +1 -1
  19. package/components/footer/index.css +5 -5
  20. package/components/optgroup/Component.js +1 -1
  21. package/components/optgroup/index.css +6 -6
  22. package/components/option/Component.js +1 -1
  23. package/components/option/index.css +19 -19
  24. package/components/options-list/Component.js +1 -1
  25. package/components/options-list/index.css +9 -9
  26. package/components/search/Component.js +1 -1
  27. package/components/search/index.css +2 -2
  28. package/components/virtual-options-list/Component.js +3 -3
  29. package/components/virtual-options-list/index.css +15 -15
  30. package/cssm/Component.responsive.d.ts +3 -1
  31. package/cssm/Component.responsive.js +5 -1
  32. package/cssm/components/base-option/index.module.css +2 -2
  33. package/cssm/components/base-select/mobile.module.css +2 -2
  34. package/cssm/components/virtual-options-list/Component.js +2 -2
  35. package/cssm/{hook-4aad7127.js → hook-aae7b381.js} +13 -0
  36. package/{hook-ad89c253.d.ts → cssm/hook-d4f77aed.d.ts} +18 -0
  37. package/cssm/mobile/Component.mobile.js +1 -1
  38. package/cssm/presets/index.d.ts +1 -1
  39. package/cssm/presets/index.js +1 -1
  40. package/cssm/presets/useSelectWithApply/hook.js +1 -1
  41. package/cssm/presets/useSelectWithApply/options-list-with-apply/Component.js +1 -1
  42. package/cssm/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
  43. package/cssm/presets/useSelectWithApply/options-list-with-apply/index.js +1 -1
  44. package/cssm/shared/index.js +1 -1
  45. package/cssm/typings.d.ts +1 -1
  46. package/esm/Component.responsive.d.ts +3 -1
  47. package/esm/Component.responsive.js +5 -1
  48. package/esm/components/arrow/Component.js +1 -1
  49. package/esm/components/arrow/index.css +3 -3
  50. package/esm/components/base-checkmark/Component.js +1 -1
  51. package/esm/components/base-checkmark/index.css +4 -4
  52. package/esm/components/base-option/Component.js +1 -1
  53. package/esm/components/base-option/index.css +13 -13
  54. package/esm/components/base-select/Component.js +2 -2
  55. package/esm/components/base-select/index.css +11 -11
  56. package/esm/components/base-select/mobile.css +12 -12
  57. package/esm/components/checkmark/Component.js +1 -1
  58. package/esm/components/checkmark/index.css +10 -10
  59. package/esm/components/checkmark-mobile/Component.js +1 -1
  60. package/esm/components/checkmark-mobile/index.css +6 -6
  61. package/esm/components/field/Component.js +1 -1
  62. package/esm/components/field/index.css +12 -12
  63. package/esm/components/footer/Component.js +1 -1
  64. package/esm/components/footer/index.css +5 -5
  65. package/esm/components/optgroup/Component.js +1 -1
  66. package/esm/components/optgroup/index.css +6 -6
  67. package/esm/components/option/Component.js +1 -1
  68. package/esm/components/option/index.css +19 -19
  69. package/esm/components/options-list/Component.js +1 -1
  70. package/esm/components/options-list/index.css +9 -9
  71. package/esm/components/search/Component.js +1 -1
  72. package/esm/components/search/index.css +2 -2
  73. package/esm/components/virtual-options-list/Component.js +3 -3
  74. package/esm/components/virtual-options-list/index.css +15 -15
  75. package/esm/{hook-e8eb700a.js → hook-6d3e9b7b.js} +13 -0
  76. package/{modern/hook-ad89c253.d.ts → esm/hook-d4f77aed.d.ts} +18 -0
  77. package/esm/mobile/Component.mobile.js +1 -1
  78. package/esm/presets/index.d.ts +1 -1
  79. package/esm/presets/index.js +1 -1
  80. package/esm/presets/useSelectWithApply/hook.js +1 -1
  81. package/esm/presets/useSelectWithApply/options-list-with-apply/Component.js +1 -1
  82. package/esm/presets/useSelectWithApply/options-list-with-apply/footer/Component.js +1 -1
  83. package/esm/presets/useSelectWithApply/options-list-with-apply/footer/index.css +3 -3
  84. package/esm/presets/useSelectWithApply/options-list-with-apply/header/Component.js +1 -1
  85. package/esm/presets/useSelectWithApply/options-list-with-apply/header/index.css +3 -3
  86. package/esm/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
  87. package/esm/presets/useSelectWithApply/options-list-with-apply/index.js +1 -1
  88. package/esm/presets/useSelectWithLoading/hook.js +1 -1
  89. package/esm/presets/useSelectWithLoading/index.css +2 -2
  90. package/esm/shared/index.js +1 -1
  91. package/esm/typings.d.ts +1 -1
  92. package/{hook-6aa923ff.js → hook-0c5002d4.js} +13 -0
  93. package/{cssm/hook-ad89c253.d.ts → hook-d4f77aed.d.ts} +18 -0
  94. package/mobile/Component.mobile.js +1 -1
  95. package/modern/Component.responsive.d.ts +3 -1
  96. package/modern/Component.responsive.js +9 -1
  97. package/modern/components/arrow/Component.js +1 -1
  98. package/modern/components/arrow/index.css +3 -3
  99. package/modern/components/base-checkmark/Component.js +1 -1
  100. package/modern/components/base-checkmark/index.css +4 -4
  101. package/modern/components/base-option/Component.js +1 -1
  102. package/modern/components/base-option/index.css +13 -13
  103. package/modern/components/base-select/Component.js +2 -2
  104. package/modern/components/base-select/index.css +11 -11
  105. package/modern/components/base-select/mobile.css +12 -12
  106. package/modern/components/checkmark/Component.js +1 -1
  107. package/modern/components/checkmark/index.css +10 -10
  108. package/modern/components/checkmark-mobile/Component.js +1 -1
  109. package/modern/components/checkmark-mobile/index.css +6 -6
  110. package/modern/components/field/Component.js +1 -1
  111. package/modern/components/field/index.css +12 -12
  112. package/modern/components/footer/Component.js +1 -1
  113. package/modern/components/footer/index.css +5 -5
  114. package/modern/components/optgroup/Component.js +1 -1
  115. package/modern/components/optgroup/index.css +6 -6
  116. package/modern/components/option/Component.js +1 -1
  117. package/modern/components/option/index.css +19 -19
  118. package/modern/components/options-list/Component.js +1 -1
  119. package/modern/components/options-list/index.css +9 -9
  120. package/modern/components/search/Component.js +1 -1
  121. package/modern/components/search/index.css +2 -2
  122. package/modern/components/virtual-options-list/Component.js +3 -3
  123. package/modern/components/virtual-options-list/index.css +15 -15
  124. package/modern/{hook-a738ac9d.js → hook-88ffebd1.js} +13 -0
  125. package/{esm/hook-ad89c253.d.ts → modern/hook-d4f77aed.d.ts} +18 -0
  126. package/modern/mobile/Component.mobile.js +1 -1
  127. package/modern/presets/index.d.ts +1 -1
  128. package/modern/presets/index.js +1 -1
  129. package/modern/presets/useSelectWithApply/hook.js +1 -1
  130. package/modern/presets/useSelectWithApply/options-list-with-apply/Component.js +1 -1
  131. package/modern/presets/useSelectWithApply/options-list-with-apply/footer/Component.js +1 -1
  132. package/modern/presets/useSelectWithApply/options-list-with-apply/footer/index.css +3 -3
  133. package/modern/presets/useSelectWithApply/options-list-with-apply/header/Component.js +1 -1
  134. package/modern/presets/useSelectWithApply/options-list-with-apply/header/index.css +3 -3
  135. package/modern/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
  136. package/modern/presets/useSelectWithApply/options-list-with-apply/index.js +1 -1
  137. package/modern/presets/useSelectWithLoading/hook.js +1 -1
  138. package/modern/presets/useSelectWithLoading/index.css +2 -2
  139. package/modern/shared/index.js +1 -1
  140. package/modern/typings.d.ts +1 -1
  141. package/package.json +1 -1
  142. package/presets/index.d.ts +1 -1
  143. package/presets/index.js +1 -1
  144. package/presets/useSelectWithApply/hook.js +1 -1
  145. package/presets/useSelectWithApply/options-list-with-apply/Component.js +1 -1
  146. package/presets/useSelectWithApply/options-list-with-apply/footer/Component.js +1 -1
  147. package/presets/useSelectWithApply/options-list-with-apply/footer/index.css +3 -3
  148. package/presets/useSelectWithApply/options-list-with-apply/header/Component.js +1 -1
  149. package/presets/useSelectWithApply/options-list-with-apply/header/index.css +3 -3
  150. package/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
  151. package/presets/useSelectWithApply/options-list-with-apply/index.js +1 -1
  152. package/presets/useSelectWithLoading/hook.js +1 -1
  153. package/presets/useSelectWithLoading/index.css +2 -2
  154. package/shared/index.js +1 -1
  155. package/src/Component.responsive.tsx +17 -8
  156. package/src/components/base-option/index.module.css +1 -1
  157. package/src/components/base-select/mobile.module.css +1 -1
  158. package/src/components/virtual-options-list/Component.tsx +8 -1
  159. package/src/presets/useSelectWithApply/hook.tsx +13 -0
  160. package/typings.d.ts +1 -1
  161. /package/cssm/{hook-4aad7127.d.ts → hook-aae7b381.d.ts} +0 -0
  162. /package/esm/{hook-e8eb700a.d.ts → hook-6d3e9b7b.d.ts} +0 -0
  163. /package/{hook-6aa923ff.d.ts → hook-0c5002d4.d.ts} +0 -0
  164. /package/modern/{hook-a738ac9d.d.ts → hook-88ffebd1.d.ts} +0 -0
@@ -1,4 +1,4 @@
1
- /* hash: 2mxw1 */
1
+ /* hash: jstnm */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-primary: #d5d6dc;
@@ -35,34 +35,34 @@
35
35
  /* checkmark */
36
36
 
37
37
  /* optgroup */
38
- } .select__virtualOptionsList_iew8b {
38
+ } .select__virtualOptionsList_1b9jb {
39
39
  width: 100%;
40
40
  outline: none;
41
41
  box-sizing: border-box;
42
42
  position: sticky;
43
- } .select__virtualOptionsListHeader_iew8b {
43
+ } .select__virtualOptionsListHeader_1b9jb {
44
44
  box-sizing: border-box;
45
45
  border-bottom: 1px solid var(--color-light-neutral-300);
46
- } .select__virtualOptionsListFooter_iew8b {
46
+ } .select__virtualOptionsListFooter_1b9jb {
47
47
  position: sticky;
48
48
  bottom: 0;
49
49
  box-sizing: border-box;
50
50
  border-top: 1px solid transparent
51
- } .select__virtualOptionsListFooter_iew8b.select__withBorder_iew8b {
51
+ } .select__virtualOptionsListFooter_1b9jb.select__withBorder_1b9jb {
52
52
  border-top: 1px solid var(--color-light-neutral-300);
53
- } .select__scrollable_iew8b {
53
+ } .select__scrollable_1b9jb {
54
54
  position: relative;
55
55
  overflow: auto;
56
56
  width: 100%;
57
- } .select__inner_iew8b {
57
+ } .select__inner_1b9jb {
58
58
  position: relative;
59
59
  width: 100%;
60
- } .select__virtualRow_iew8b {
60
+ } .select__virtualRow_1b9jb {
61
61
  position: absolute;
62
62
  top: 0;
63
63
  left: 0;
64
64
  width: 100%
65
- } .select__virtualRow_iew8b:before {
65
+ } .select__virtualRow_1b9jb:before {
66
66
  content: '';
67
67
  position: absolute;
68
68
  z-index: 1;
@@ -72,15 +72,15 @@
72
72
  height: 1px;
73
73
  background: var(--select-option-divider-background);
74
74
  display: var(--select-option-divider-display);
75
- } .select__virtualRow_iew8b:first-child:before {
75
+ } .select__virtualRow_1b9jb:first-child:before {
76
76
  display: none;
77
- } .select__highlighted_iew8b:before,
78
- .select__highlighted_iew8b + .select__virtualRow_iew8b:before {
77
+ } .select__highlighted_1b9jb:before,
78
+ .select__highlighted_1b9jb + .select__virtualRow_1b9jb:before {
79
79
  display: none;
80
- } .select__emptyPlaceholder_iew8b {
80
+ } .select__emptyPlaceholder_1b9jb {
81
81
  padding: var(--gap-m) var(--gap-s);
82
82
  color: var(--select-options-list-empty-placeholder-color);
83
- } .select__size-64_iew8b .select__emptyPlaceholder_iew8b,
84
- .select__size-72_iew8b .select__emptyPlaceholder_iew8b {
83
+ } .select__size-64_1b9jb .select__emptyPlaceholder_1b9jb,
84
+ .select__size-72_1b9jb .select__emptyPlaceholder_1b9jb {
85
85
  padding: var(--gap-xl) var(--gap-m);
86
86
  }
@@ -129,6 +129,19 @@ function useSelectWithApply({ options, selected, onChange = () => null, OptionsL
129
129
  onChange: setSearch,
130
130
  }
131
131
  : undefined,
132
+ /* Костыль для респонсив селекта. В мобильную версию хук уже зашит, и это единственный передать в мобилку оригинальные пропсы */
133
+ originalProps: {
134
+ options,
135
+ selected,
136
+ onChange,
137
+ OptionsList,
138
+ optionsListProps,
139
+ showClear,
140
+ showSelectAll,
141
+ showHeaderWithSelectAll,
142
+ showSearch,
143
+ searchProps,
144
+ },
132
145
  };
133
146
  }
134
147
 
@@ -86,5 +86,23 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
86
86
  accessor?: ((option: OptionShape) => string) | undefined;
87
87
  filterFn?: ((optionText: string, search: string) => boolean) | undefined;
88
88
  } | undefined;
89
+ originalProps: {
90
+ options: (OptionShape | import("./typings").GroupShape)[];
91
+ selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
92
+ onChange: (payload: import("./typings").BaseSelectChangePayload) => void;
93
+ OptionsList: import("react").FC<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
94
+ optionsListProps: unknown;
95
+ showClear: boolean;
96
+ showSelectAll: boolean;
97
+ showHeaderWithSelectAll: boolean;
98
+ showSearch: boolean | undefined;
99
+ searchProps: {
100
+ componentProps?: import("./typings").SearchProps | undefined;
101
+ accessor?: ((option: OptionShape) => string) | undefined;
102
+ filterFn?: ((optionText: string, search: string) => boolean) | undefined;
103
+ value?: string | undefined;
104
+ onChange?: ((value: string) => void) | undefined;
105
+ };
106
+ };
89
107
  };
90
108
  export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };
@@ -11,7 +11,7 @@ import { Option } from '../components/option/Component.js';
11
11
  import { OptionsList } from '../components/options-list/Component.js';
12
12
  import { Search } from '../components/search/Component.js';
13
13
  import { VirtualOptionsList } from '../components/virtual-options-list/Component.js';
14
- import { u as useSelectWithApply } from '../hook-a738ac9d.js';
14
+ import { u as useSelectWithApply } from '../hook-88ffebd1.js';
15
15
  import { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';
16
16
 
17
17
  const VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
@@ -1,3 +1,3 @@
1
1
  export * from "./useSelectWithLoading/hook";
2
2
  export * from "./useLazyLoading/hook";
3
- export * from "../hook-ad89c253";
3
+ export * from "../hook-d4f77aed";
@@ -1,3 +1,3 @@
1
1
  export { useSelectWithLoading } from './useSelectWithLoading/hook.js';
2
2
  export { useLazyLoading } from './useLazyLoading/hook.js';
3
- export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-a738ac9d.js';
3
+ export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-88ffebd1.js';
@@ -1,3 +1,3 @@
1
1
  import 'react';
2
2
  import '../../utils.js';
3
- export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-a738ac9d.js';
3
+ export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-88ffebd1.js';
@@ -1,6 +1,6 @@
1
1
  import 'react';
2
2
  import '../../../components/options-list/Component.js';
3
3
  import '../../../consts.js';
4
- export { O as OptionsListWithApply } from '../../../hook-a738ac9d.js';
4
+ export { O as OptionsListWithApply } from '../../../hook-88ffebd1.js';
5
5
  import './footer/Component.js';
6
6
  import './header/Component.js';
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { ButtonDesktop } from '@alfalab/core-components-button/modern/desktop';
3
3
  import { getDataTestId } from '@alfalab/core-components-shared/modern';
4
4
 
5
- const styles = {"footer":"select__footer_1bjm6"};
5
+ const styles = {"footer":"select__footer_5d57v"};
6
6
  require('./index.css')
7
7
 
8
8
  const Footer = ({ handleApply, handleClear, showClear, selectedDraft = [], dataTestId, }) => (React.createElement("div", {
@@ -1,4 +1,4 @@
1
- /* hash: vrnud */
1
+ /* hash: 1cxjl */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -17,10 +17,10 @@
17
17
  --gap-s: 12px;
18
18
  } :root {
19
19
  } :root {
20
- } .select__footer_1bjm6 {
20
+ } .select__footer_5d57v {
21
21
  background-color: var(--color-light-bg-primary);
22
22
  padding: var(--gap-s);
23
23
  outline: none
24
- } .select__footer_1bjm6 > * + * {
24
+ } .select__footer_5d57v > * + * {
25
25
  margin-left: var(--gap-xs);
26
26
  }
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Checkbox } from '@alfalab/core-components-checkbox/modern';
4
4
 
5
- const styles = {"desktop":"select__desktop_1g9s3","mobile":"select__mobile_1g9s3"};
5
+ const styles = {"desktop":"select__desktop_ul29c","mobile":"select__mobile_ul29c"};
6
6
  require('./index.css')
7
7
 
8
8
  const Header = ({ onChange, checked, indeterminate, mobile }) => (React.createElement("div", { className: cn({ [styles.desktop]: !mobile, [styles.mobile]: mobile }) },
@@ -1,4 +1,4 @@
1
- /* hash: 1m5co */
1
+ /* hash: z9ofq */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,8 +16,8 @@
16
16
  --gap-s: 12px;
17
17
  } :root {
18
18
  } :root {
19
- } .select__desktop_1g9s3 {
19
+ } .select__desktop_ul29c {
20
20
  padding: var(--gap-s);
21
- } .select__mobile_1g9s3 {
21
+ } .select__mobile_ul29c {
22
22
  padding: var(--gap-s) var(--gap-xs);
23
23
  }
@@ -1 +1 @@
1
- export * from "../../../hook-a738ac9d";
1
+ export * from "../../../hook-88ffebd1";
@@ -1 +1 @@
1
- export { O as OptionsListWithApply } from '../../../hook-a738ac9d.js';
1
+ export { O as OptionsListWithApply } from '../../../hook-88ffebd1.js';
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { Skeleton } from '@alfalab/core-components-skeleton/modern';
3
3
  import { Option } from '../../components/option/Component.js';
4
4
 
5
- const styles = {"skeleton":"select__skeleton_y8y4e"};
5
+ const styles = {"skeleton":"select__skeleton_iyfac"};
6
6
  require('./index.css')
7
7
 
8
8
  function useSelectWithLoading({ loading = false, visibleOptions = 6, Option: Option$1 = Option, }) {
@@ -1,5 +1,5 @@
1
- /* hash: 6xg3z */
2
- .select__skeleton_y8y4e {
1
+ /* hash: 17tfe */
2
+ .select__skeleton_iyfac {
3
3
  position: absolute;
4
4
  top: 50%;
5
5
  transform: translateY(-50%);
@@ -1,6 +1,6 @@
1
1
  export { useSelectWithLoading } from '../presets/useSelectWithLoading/hook.js';
2
2
  export { useLazyLoading } from '../presets/useLazyLoading/hook.js';
3
- export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-a738ac9d.js';
3
+ export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-88ffebd1.js';
4
4
  export { defaultAccessor, defaultFilterFn, getSelectTestIds, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions } from '../utils.js';
5
5
  export { Option } from '../components/option/Component.js';
6
6
  export { BaseOption } from '../components/base-option/Component.js';
@@ -5,7 +5,7 @@ import { InputProps } from "@alfalab/core-components-input";
5
5
  import { ModalProps } from "@alfalab/core-components-modal";
6
6
  import { ModalFooterProps, ModalHeaderProps } from "@alfalab/core-components-modal/shared";
7
7
  import { PopoverProps } from "@alfalab/core-components-popover";
8
- import { UseSelectWithApplyProps } from "./hook-ad89c253";
8
+ import { UseSelectWithApplyProps } from "./hook-d4f77aed";
9
9
  type AnyObject = Record<string, any>;
10
10
  type OptionShape = {
11
11
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-select",
3
- "version": "17.3.0",
3
+ "version": "17.3.2",
4
4
  "description": "Select component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -1,3 +1,3 @@
1
1
  export * from "./useSelectWithLoading/hook";
2
2
  export * from "./useLazyLoading/hook";
3
- export * from "../hook-ad89c253";
3
+ export * from "../hook-d4f77aed";
package/presets/index.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var presets_useSelectWithLoading_hook = require('./useSelectWithLoading/hook.js');
6
6
  var presets_useLazyLoading_hook = require('./useLazyLoading/hook.js');
7
- var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-6aa923ff.js');
7
+ var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-0c5002d4.js');
8
8
 
9
9
 
10
10
 
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  require('tslib');
6
6
  require('react');
7
7
  require('../../utils.js');
8
- var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-6aa923ff.js');
8
+ var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-0c5002d4.js');
9
9
 
10
10
 
11
11
 
@@ -6,7 +6,7 @@ require('tslib');
6
6
  require('react');
7
7
  require('../../../components/options-list/Component.js');
8
8
  require('../../../consts.js');
9
- var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-6aa923ff.js');
9
+ var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-0c5002d4.js');
10
10
  require('./footer/Component.js');
11
11
  require('./header/Component.js');
12
12
 
@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
10
10
 
11
11
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
12
 
13
- var styles = {"footer":"select__footer_1bjm6"};
13
+ var styles = {"footer":"select__footer_5d57v"};
14
14
  require('./index.css')
15
15
 
16
16
  var Footer = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: vrnud */
1
+ /* hash: 1cxjl */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -17,10 +17,10 @@
17
17
  --gap-s: 12px;
18
18
  } :root {
19
19
  } :root {
20
- } .select__footer_1bjm6 {
20
+ } .select__footer_5d57v {
21
21
  background-color: var(--color-light-bg-primary);
22
22
  padding: var(--gap-s);
23
23
  outline: none
24
- } .select__footer_1bjm6 > * + * {
24
+ } .select__footer_5d57v > * + * {
25
25
  margin-left: var(--gap-xs);
26
26
  }
@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
12
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
13
13
 
14
- var styles = {"desktop":"select__desktop_1g9s3","mobile":"select__mobile_1g9s3"};
14
+ var styles = {"desktop":"select__desktop_ul29c","mobile":"select__mobile_ul29c"};
15
15
  require('./index.css')
16
16
 
17
17
  var Header = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: 1m5co */
1
+ /* hash: z9ofq */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,8 +16,8 @@
16
16
  --gap-s: 12px;
17
17
  } :root {
18
18
  } :root {
19
- } .select__desktop_1g9s3 {
19
+ } .select__desktop_ul29c {
20
20
  padding: var(--gap-s);
21
- } .select__mobile_1g9s3 {
21
+ } .select__mobile_ul29c {
22
22
  padding: var(--gap-s) var(--gap-xs);
23
23
  }
@@ -1 +1 @@
1
- export * from "../../../hook-6aa923ff";
1
+ export * from "../../../hook-0c5002d4";
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-6aa923ff.js');
5
+ var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-0c5002d4.js');
6
6
 
7
7
 
8
8
 
@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
11
11
 
12
12
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
13
13
 
14
- var styles = {"skeleton":"select__skeleton_y8y4e"};
14
+ var styles = {"skeleton":"select__skeleton_iyfac"};
15
15
  require('./index.css')
16
16
 
17
17
  function useSelectWithLoading(_a) {
@@ -1,5 +1,5 @@
1
- /* hash: 6xg3z */
2
- .select__skeleton_y8y4e {
1
+ /* hash: 17tfe */
2
+ .select__skeleton_iyfac {
3
3
  position: absolute;
4
4
  top: 50%;
5
5
  transform: translateY(-50%);
package/shared/index.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var presets_useSelectWithLoading_hook = require('../presets/useSelectWithLoading/hook.js');
6
6
  var presets_useLazyLoading_hook = require('../presets/useLazyLoading/hook.js');
7
- var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-6aa923ff.js');
7
+ var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-0c5002d4.js');
8
8
  var utils = require('../utils.js');
9
9
  var components_option_Component = require('../components/option/Component.js');
10
10
  var components_baseOption_Component = require('../components/base-option/Component.js');
@@ -6,19 +6,28 @@ import { SelectDesktop } from './desktop';
6
6
  import { SelectMobile } from './mobile';
7
7
  import type { SelectFieldProps, SelectProps } from './typings';
8
8
 
9
- export const SelectResponsive = forwardRef<HTMLDivElement, SelectProps>(
10
- ({ onScroll, fieldProps, breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
11
- const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
9
+ export const SelectResponsive = forwardRef<
10
+ HTMLDivElement,
11
+ SelectProps & { originalProps?: SelectProps }
12
+ >(({ onScroll, fieldProps, breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
13
+ const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
12
14
 
13
- return isDesktop ? (
15
+ if (isDesktop) {
16
+ return (
14
17
  <SelectDesktop
15
18
  onScroll={onScroll}
16
19
  {...restProps}
17
20
  ref={ref}
18
21
  fieldProps={fieldProps as SelectFieldProps}
19
22
  />
20
- ) : (
21
- <SelectMobile fieldProps={fieldProps} {...restProps} ref={ref} />
22
23
  );
23
- },
24
- );
24
+ }
25
+
26
+ const mobileProps = {
27
+ ...restProps,
28
+ /* В мобильную версию хук уже зашит, и это единственный передать в мобилку оригинальные пропсы */
29
+ ...restProps.originalProps,
30
+ };
31
+
32
+ return <SelectMobile fieldProps={fieldProps} {...mobileProps} ref={ref} />;
33
+ });
@@ -28,7 +28,7 @@
28
28
  }
29
29
  }
30
30
 
31
- &.checkmarkAfter {
31
+ &.checkmarkAfter.checkmarkAfter {
32
32
  padding: 0 var(--gap-s) 0 0;
33
33
 
34
34
  &.mobile {
@@ -37,7 +37,7 @@
37
37
  padding: var(--gap-xs);
38
38
  }
39
39
 
40
- .option {
40
+ .option.option {
41
41
  padding: var(--gap-2xs) var(--gap-l) var(--gap-2xs) var(--gap-m);
42
42
 
43
43
  &:before {
@@ -20,6 +20,7 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
20
20
  size = 48,
21
21
  flatOptions = [],
22
22
  highlightedIndex = -1,
23
+ optionGroupClassName,
23
24
  className,
24
25
  getOptionProps,
25
26
  Option,
@@ -151,7 +152,13 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
151
152
  transform: `translateY(${virtualRow.start}px)`,
152
153
  }}
153
154
  >
154
- {group && <Optgroup label={group.label} />}
155
+ {group && (
156
+ <Optgroup
157
+ label={group.label}
158
+ size={size}
159
+ className={optionGroupClassName}
160
+ />
161
+ )}
155
162
  {!isGroup(option) && (
156
163
  <Option {...getOptionProps(option, virtualRow.index)} />
157
164
  )}
@@ -185,5 +185,18 @@ export function useSelectWithApply({
185
185
  onChange: setSearch,
186
186
  }
187
187
  : undefined,
188
+ /* Костыль для респонсив селекта. В мобильную версию хук уже зашит, и это единственный передать в мобилку оригинальные пропсы */
189
+ originalProps: {
190
+ options,
191
+ selected,
192
+ onChange,
193
+ OptionsList,
194
+ optionsListProps,
195
+ showClear,
196
+ showSelectAll,
197
+ showHeaderWithSelectAll,
198
+ showSearch,
199
+ searchProps,
200
+ },
188
201
  };
189
202
  }
package/typings.d.ts CHANGED
@@ -5,7 +5,7 @@ import { InputProps } from "@alfalab/core-components-input";
5
5
  import { ModalProps } from "@alfalab/core-components-modal";
6
6
  import { ModalFooterProps, ModalHeaderProps } from "@alfalab/core-components-modal/shared";
7
7
  import { PopoverProps } from "@alfalab/core-components-popover";
8
- import { UseSelectWithApplyProps } from "./hook-ad89c253";
8
+ import { UseSelectWithApplyProps } from "./hook-d4f77aed";
9
9
  type AnyObject = Record<string, any>;
10
10
  type OptionShape = {
11
11
  /**
File without changes
File without changes
File without changes