@vkontakte/vkui 6.5.0 → 6.5.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 (334) hide show
  1. package/dist/cjs/components/Button/Button.js +1 -1
  2. package/dist/cjs/components/Button/Button.js.map +1 -1
  3. package/dist/cjs/components/Cell/Cell.d.ts.map +1 -1
  4. package/dist/cjs/components/Cell/Cell.js +10 -14
  5. package/dist/cjs/components/Cell/Cell.js.map +1 -1
  6. package/dist/cjs/components/ChipsInputBase/Chip/Chip.js +2 -2
  7. package/dist/cjs/components/ChipsInputBase/Chip/Chip.js.map +1 -1
  8. package/dist/cjs/components/ChipsSelect/ChipsSelect.js +9 -9
  9. package/dist/cjs/components/ChipsSelect/ChipsSelect.js.map +1 -1
  10. package/dist/cjs/components/Clickable/Clickable.d.ts.map +1 -1
  11. package/dist/cjs/components/Clickable/Clickable.js +1 -1
  12. package/dist/cjs/components/Clickable/Clickable.js.map +1 -1
  13. package/dist/cjs/components/CustomSelect/CustomSelect.d.ts +3 -13
  14. package/dist/cjs/components/CustomSelect/CustomSelect.d.ts.map +1 -1
  15. package/dist/cjs/components/CustomSelect/CustomSelect.js +45 -70
  16. package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
  17. package/dist/cjs/components/CustomSelect/CustomSelectInput.d.ts +4 -2
  18. package/dist/cjs/components/CustomSelect/CustomSelectInput.d.ts.map +1 -1
  19. package/dist/cjs/components/CustomSelect/CustomSelectInput.js +19 -24
  20. package/dist/cjs/components/CustomSelect/CustomSelectInput.js.map +1 -1
  21. package/dist/cjs/components/CustomSelect/helpers.d.ts +8 -0
  22. package/dist/cjs/components/CustomSelect/helpers.d.ts.map +1 -0
  23. package/dist/cjs/components/CustomSelect/helpers.js +76 -0
  24. package/dist/cjs/components/CustomSelect/helpers.js.map +1 -0
  25. package/dist/cjs/components/CustomSelect/types.d.ts +12 -0
  26. package/dist/cjs/components/CustomSelect/types.d.ts.map +1 -0
  27. package/dist/cjs/components/CustomSelect/types.js +6 -0
  28. package/dist/cjs/components/CustomSelect/types.js.map +1 -0
  29. package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +1 -1
  30. package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.d.ts.map +1 -1
  31. package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.js +2 -14
  32. package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
  33. package/dist/cjs/components/DateInput/DateInput.d.ts +1 -1
  34. package/dist/cjs/components/DateInput/DateInput.d.ts.map +1 -1
  35. package/dist/cjs/components/DateInput/DateInput.js.map +1 -1
  36. package/dist/cjs/components/DateRangeInput/DateRangeInput.d.ts +1 -1
  37. package/dist/cjs/components/DateRangeInput/DateRangeInput.d.ts.map +1 -1
  38. package/dist/cjs/components/DateRangeInput/DateRangeInput.js.map +1 -1
  39. package/dist/cjs/components/Flex/FlexItem/FlexItem.d.ts +6 -4
  40. package/dist/cjs/components/Flex/FlexItem/FlexItem.d.ts.map +1 -1
  41. package/dist/cjs/components/Flex/FlexItem/FlexItem.js.map +1 -1
  42. package/dist/cjs/components/Footer/Footer.d.ts +1 -1
  43. package/dist/cjs/components/Footer/Footer.d.ts.map +1 -1
  44. package/dist/cjs/components/Footer/Footer.js +7 -3
  45. package/dist/cjs/components/Footer/Footer.js.map +1 -1
  46. package/dist/cjs/components/FormItem/FormItem.js +2 -2
  47. package/dist/cjs/components/FormItem/FormItem.js.map +1 -1
  48. package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.d.ts.map +1 -1
  49. package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js +3 -3
  50. package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
  51. package/dist/cjs/components/Group/Group.d.ts.map +1 -1
  52. package/dist/cjs/components/Group/Group.js +3 -2
  53. package/dist/cjs/components/Group/Group.js.map +1 -1
  54. package/dist/cjs/components/Link/Link.d.ts +1 -1
  55. package/dist/cjs/components/Link/Link.d.ts.map +1 -1
  56. package/dist/cjs/components/Link/Link.js +3 -5
  57. package/dist/cjs/components/Link/Link.js.map +1 -1
  58. package/dist/cjs/components/Removable/Removable.d.ts +5 -1
  59. package/dist/cjs/components/Removable/Removable.d.ts.map +1 -1
  60. package/dist/cjs/components/Removable/Removable.js +8 -5
  61. package/dist/cjs/components/Removable/Removable.js.map +1 -1
  62. package/dist/cjs/components/RootComponent/RootComponent.d.ts +1 -1
  63. package/dist/cjs/components/RootComponent/RootComponent.d.ts.map +1 -1
  64. package/dist/cjs/components/RootComponent/RootComponent.js +1 -1
  65. package/dist/cjs/components/RootComponent/RootComponent.js.map +1 -1
  66. package/dist/cjs/components/Search/Search.d.ts.map +1 -1
  67. package/dist/cjs/components/Search/Search.js +3 -2
  68. package/dist/cjs/components/Search/Search.js.map +1 -1
  69. package/dist/cjs/components/Select/Select.d.ts.map +1 -1
  70. package/dist/cjs/components/Select/Select.js +1 -2
  71. package/dist/cjs/components/Select/Select.js.map +1 -1
  72. package/dist/cjs/components/SelectTypography/SelectTypography.d.ts +2 -2
  73. package/dist/cjs/components/SelectTypography/SelectTypography.d.ts.map +1 -1
  74. package/dist/cjs/components/SelectTypography/SelectTypography.js.map +1 -1
  75. package/dist/cjs/components/SimpleCell/SimpleCell.d.ts +1 -1
  76. package/dist/cjs/components/SimpleCell/SimpleCell.d.ts.map +1 -1
  77. package/dist/cjs/components/SimpleCell/SimpleCell.js +1 -1
  78. package/dist/cjs/components/SimpleCell/SimpleCell.js.map +1 -1
  79. package/dist/cjs/components/Snackbar/Snackbar.js +2 -2
  80. package/dist/cjs/components/Snackbar/Snackbar.js.map +1 -1
  81. package/dist/cjs/components/ToolButton/ToolButton.d.ts +1 -1
  82. package/dist/cjs/components/ToolButton/ToolButton.d.ts.map +1 -1
  83. package/dist/cjs/components/ToolButton/ToolButton.js +1 -3
  84. package/dist/cjs/components/ToolButton/ToolButton.js.map +1 -1
  85. package/dist/cjs/components/View/View.d.ts.map +1 -1
  86. package/dist/cjs/components/View/View.js +16 -32
  87. package/dist/cjs/components/View/View.js.map +1 -1
  88. package/dist/cjs/hooks/useEnsuredControl.d.ts.map +1 -1
  89. package/dist/cjs/hooks/useEnsuredControl.js +27 -3
  90. package/dist/cjs/hooks/useEnsuredControl.js.map +1 -1
  91. package/dist/cjs/hooks/useIsClient.d.ts +1 -1
  92. package/dist/cjs/hooks/useIsClient.js.map +1 -1
  93. package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  94. package/dist/components/Button/Button.js +2 -2
  95. package/dist/components/Button/Button.js.map +1 -1
  96. package/dist/components/Cell/Cell.d.ts.map +1 -1
  97. package/dist/components/Cell/Cell.js +11 -15
  98. package/dist/components/Cell/Cell.js.map +1 -1
  99. package/dist/components/ChipsInputBase/Chip/Chip.js +3 -3
  100. package/dist/components/ChipsInputBase/Chip/Chip.js.map +1 -1
  101. package/dist/components/ChipsSelect/ChipsSelect.js +9 -9
  102. package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
  103. package/dist/components/Clickable/Clickable.d.ts.map +1 -1
  104. package/dist/components/Clickable/Clickable.js +1 -1
  105. package/dist/components/Clickable/Clickable.js.map +1 -1
  106. package/dist/components/CustomSelect/CustomSelect.d.ts +3 -13
  107. package/dist/components/CustomSelect/CustomSelect.d.ts.map +1 -1
  108. package/dist/components/CustomSelect/CustomSelect.js +37 -62
  109. package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
  110. package/dist/components/CustomSelect/CustomSelectInput.d.ts +4 -2
  111. package/dist/components/CustomSelect/CustomSelectInput.d.ts.map +1 -1
  112. package/dist/components/CustomSelect/CustomSelectInput.js +19 -24
  113. package/dist/components/CustomSelect/CustomSelectInput.js.map +1 -1
  114. package/dist/components/CustomSelect/helpers.d.ts +8 -0
  115. package/dist/components/CustomSelect/helpers.d.ts.map +1 -0
  116. package/dist/components/CustomSelect/helpers.js +48 -0
  117. package/dist/components/CustomSelect/helpers.js.map +1 -0
  118. package/dist/components/CustomSelect/types.d.ts +12 -0
  119. package/dist/components/CustomSelect/types.d.ts.map +1 -0
  120. package/dist/components/CustomSelect/types.js +3 -0
  121. package/dist/components/CustomSelect/types.js.map +1 -0
  122. package/dist/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +1 -1
  123. package/dist/components/CustomSelectDropdown/CustomSelectDropdown.d.ts.map +1 -1
  124. package/dist/components/CustomSelectDropdown/CustomSelectDropdown.js +2 -14
  125. package/dist/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
  126. package/dist/components/DateInput/DateInput.d.ts +1 -1
  127. package/dist/components/DateInput/DateInput.d.ts.map +1 -1
  128. package/dist/components/DateInput/DateInput.js.map +1 -1
  129. package/dist/components/DateRangeInput/DateRangeInput.d.ts +1 -1
  130. package/dist/components/DateRangeInput/DateRangeInput.d.ts.map +1 -1
  131. package/dist/components/DateRangeInput/DateRangeInput.js.map +1 -1
  132. package/dist/components/Flex/FlexItem/FlexItem.d.ts +6 -4
  133. package/dist/components/Flex/FlexItem/FlexItem.d.ts.map +1 -1
  134. package/dist/components/Flex/FlexItem/FlexItem.js.map +1 -1
  135. package/dist/components/Footer/Footer.d.ts +1 -1
  136. package/dist/components/Footer/Footer.d.ts.map +1 -1
  137. package/dist/components/Footer/Footer.js +7 -3
  138. package/dist/components/Footer/Footer.js.map +1 -1
  139. package/dist/components/FormItem/FormItem.js +3 -3
  140. package/dist/components/FormItem/FormItem.js.map +1 -1
  141. package/dist/components/FormLayoutGroup/FormLayoutGroup.d.ts.map +1 -1
  142. package/dist/components/FormLayoutGroup/FormLayoutGroup.js +4 -4
  143. package/dist/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
  144. package/dist/components/Group/Group.d.ts.map +1 -1
  145. package/dist/components/Group/Group.js +3 -2
  146. package/dist/components/Group/Group.js.map +1 -1
  147. package/dist/components/Link/Link.d.ts +1 -1
  148. package/dist/components/Link/Link.d.ts.map +1 -1
  149. package/dist/components/Link/Link.js +4 -6
  150. package/dist/components/Link/Link.js.map +1 -1
  151. package/dist/components/Removable/Removable.d.ts +5 -1
  152. package/dist/components/Removable/Removable.d.ts.map +1 -1
  153. package/dist/components/Removable/Removable.js +9 -6
  154. package/dist/components/Removable/Removable.js.map +1 -1
  155. package/dist/components/RootComponent/RootComponent.d.ts +1 -1
  156. package/dist/components/RootComponent/RootComponent.d.ts.map +1 -1
  157. package/dist/components/RootComponent/RootComponent.js +1 -1
  158. package/dist/components/RootComponent/RootComponent.js.map +1 -1
  159. package/dist/components/Search/Search.d.ts.map +1 -1
  160. package/dist/components/Search/Search.js +3 -2
  161. package/dist/components/Search/Search.js.map +1 -1
  162. package/dist/components/Select/Select.d.ts.map +1 -1
  163. package/dist/components/Select/Select.js +1 -2
  164. package/dist/components/Select/Select.js.map +1 -1
  165. package/dist/components/SelectTypography/SelectTypography.d.ts +2 -2
  166. package/dist/components/SelectTypography/SelectTypography.d.ts.map +1 -1
  167. package/dist/components/SelectTypography/SelectTypography.js.map +1 -1
  168. package/dist/components/SimpleCell/SimpleCell.d.ts +1 -1
  169. package/dist/components/SimpleCell/SimpleCell.d.ts.map +1 -1
  170. package/dist/components/SimpleCell/SimpleCell.js +1 -1
  171. package/dist/components/SimpleCell/SimpleCell.js.map +1 -1
  172. package/dist/components/Snackbar/Snackbar.js +3 -3
  173. package/dist/components/Snackbar/Snackbar.js.map +1 -1
  174. package/dist/components/ToolButton/ToolButton.d.ts +1 -1
  175. package/dist/components/ToolButton/ToolButton.d.ts.map +1 -1
  176. package/dist/components/ToolButton/ToolButton.js +2 -4
  177. package/dist/components/ToolButton/ToolButton.js.map +1 -1
  178. package/dist/components/View/View.d.ts.map +1 -1
  179. package/dist/components/View/View.js +17 -33
  180. package/dist/components/View/View.js.map +1 -1
  181. package/dist/components.css +3 -3
  182. package/dist/components.css.map +1 -1
  183. package/dist/components.js.tmp +260 -263
  184. package/dist/cssm/components/Button/Button.js +2 -2
  185. package/dist/cssm/components/Button/Button.js.map +1 -1
  186. package/dist/cssm/components/Cell/Cell.d.ts.map +1 -1
  187. package/dist/cssm/components/Cell/Cell.js +11 -14
  188. package/dist/cssm/components/Cell/Cell.js.map +1 -1
  189. package/dist/cssm/components/Cell/Cell.module.css +0 -4
  190. package/dist/cssm/components/ChipsInputBase/Chip/Chip.js +3 -3
  191. package/dist/cssm/components/ChipsInputBase/Chip/Chip.js.map +1 -1
  192. package/dist/cssm/components/ChipsSelect/ChipsSelect.js +9 -9
  193. package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
  194. package/dist/cssm/components/Clickable/Clickable.d.ts.map +1 -1
  195. package/dist/cssm/components/Clickable/Clickable.js +1 -1
  196. package/dist/cssm/components/Clickable/Clickable.js.map +1 -1
  197. package/dist/cssm/components/CustomSelect/CustomSelect.d.ts +3 -13
  198. package/dist/cssm/components/CustomSelect/CustomSelect.d.ts.map +1 -1
  199. package/dist/cssm/components/CustomSelect/CustomSelect.js +36 -59
  200. package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
  201. package/dist/cssm/components/CustomSelect/CustomSelectInput.d.ts +4 -2
  202. package/dist/cssm/components/CustomSelect/CustomSelectInput.d.ts.map +1 -1
  203. package/dist/cssm/components/CustomSelect/CustomSelectInput.js +16 -21
  204. package/dist/cssm/components/CustomSelect/CustomSelectInput.js.map +1 -1
  205. package/dist/cssm/components/CustomSelect/CustomSelectInput.module.css +74 -40
  206. package/dist/cssm/components/CustomSelect/helpers.d.ts +8 -0
  207. package/dist/cssm/components/CustomSelect/helpers.d.ts.map +1 -0
  208. package/dist/cssm/components/CustomSelect/helpers.js +44 -0
  209. package/dist/cssm/components/CustomSelect/helpers.js.map +1 -0
  210. package/dist/cssm/components/CustomSelect/types.d.ts +12 -0
  211. package/dist/cssm/components/CustomSelect/types.d.ts.map +1 -0
  212. package/dist/cssm/components/CustomSelect/types.js +3 -0
  213. package/dist/cssm/components/CustomSelect/types.js.map +1 -0
  214. package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +1 -1
  215. package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.d.ts.map +1 -1
  216. package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js +2 -13
  217. package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
  218. package/dist/cssm/components/DateInput/DateInput.d.ts +1 -1
  219. package/dist/cssm/components/DateInput/DateInput.d.ts.map +1 -1
  220. package/dist/cssm/components/DateInput/DateInput.js.map +1 -1
  221. package/dist/cssm/components/DateRangeInput/DateRangeInput.d.ts +1 -1
  222. package/dist/cssm/components/DateRangeInput/DateRangeInput.d.ts.map +1 -1
  223. package/dist/cssm/components/DateRangeInput/DateRangeInput.js.map +1 -1
  224. package/dist/cssm/components/Flex/FlexItem/FlexItem.d.ts +6 -4
  225. package/dist/cssm/components/Flex/FlexItem/FlexItem.d.ts.map +1 -1
  226. package/dist/cssm/components/Flex/FlexItem/FlexItem.js.map +1 -1
  227. package/dist/cssm/components/Footer/Footer.d.ts +1 -1
  228. package/dist/cssm/components/Footer/Footer.d.ts.map +1 -1
  229. package/dist/cssm/components/Footer/Footer.js +4 -2
  230. package/dist/cssm/components/Footer/Footer.js.map +1 -1
  231. package/dist/cssm/components/FormField/FormField.module.css +36 -23
  232. package/dist/cssm/components/FormItem/FormItem.js +3 -3
  233. package/dist/cssm/components/FormItem/FormItem.js.map +1 -1
  234. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.d.ts.map +1 -1
  235. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js +4 -4
  236. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
  237. package/dist/cssm/components/Group/Group.d.ts.map +1 -1
  238. package/dist/cssm/components/Group/Group.js +3 -2
  239. package/dist/cssm/components/Group/Group.js.map +1 -1
  240. package/dist/cssm/components/ImageBase/ImageBase.module.css +0 -4
  241. package/dist/cssm/components/Link/Link.d.ts +1 -1
  242. package/dist/cssm/components/Link/Link.d.ts.map +1 -1
  243. package/dist/cssm/components/Link/Link.js +2 -3
  244. package/dist/cssm/components/Link/Link.js.map +1 -1
  245. package/dist/cssm/components/Removable/Removable.d.ts +5 -1
  246. package/dist/cssm/components/Removable/Removable.d.ts.map +1 -1
  247. package/dist/cssm/components/Removable/Removable.js +7 -5
  248. package/dist/cssm/components/Removable/Removable.js.map +1 -1
  249. package/dist/cssm/components/Removable/Removable.module.css +4 -0
  250. package/dist/cssm/components/RootComponent/RootComponent.d.ts +1 -1
  251. package/dist/cssm/components/RootComponent/RootComponent.d.ts.map +1 -1
  252. package/dist/cssm/components/RootComponent/RootComponent.js +2 -1
  253. package/dist/cssm/components/RootComponent/RootComponent.js.map +1 -1
  254. package/dist/cssm/components/RootComponent/RootComponent.module.css +10 -0
  255. package/dist/cssm/components/Search/Search.d.ts.map +1 -1
  256. package/dist/cssm/components/Search/Search.js +3 -2
  257. package/dist/cssm/components/Search/Search.js.map +1 -1
  258. package/dist/cssm/components/Select/Select.d.ts.map +1 -1
  259. package/dist/cssm/components/Select/Select.js +1 -1
  260. package/dist/cssm/components/Select/Select.js.map +1 -1
  261. package/dist/cssm/components/SelectTypography/SelectTypography.d.ts +2 -2
  262. package/dist/cssm/components/SelectTypography/SelectTypography.d.ts.map +1 -1
  263. package/dist/cssm/components/SelectTypography/SelectTypography.js.map +1 -1
  264. package/dist/cssm/components/SimpleCell/SimpleCell.d.ts +1 -1
  265. package/dist/cssm/components/SimpleCell/SimpleCell.d.ts.map +1 -1
  266. package/dist/cssm/components/SimpleCell/SimpleCell.js +1 -1
  267. package/dist/cssm/components/SimpleCell/SimpleCell.js.map +1 -1
  268. package/dist/cssm/components/SimpleCell/SimpleCell.module.css +4 -0
  269. package/dist/cssm/components/Snackbar/Snackbar.js +3 -3
  270. package/dist/cssm/components/Snackbar/Snackbar.js.map +1 -1
  271. package/dist/cssm/components/ToolButton/ToolButton.d.ts +1 -1
  272. package/dist/cssm/components/ToolButton/ToolButton.d.ts.map +1 -1
  273. package/dist/cssm/components/ToolButton/ToolButton.js +2 -3
  274. package/dist/cssm/components/ToolButton/ToolButton.js.map +1 -1
  275. package/dist/cssm/components/View/View.d.ts.map +1 -1
  276. package/dist/cssm/components/View/View.js +17 -33
  277. package/dist/cssm/components/View/View.js.map +1 -1
  278. package/dist/cssm/hooks/useEnsuredControl.d.ts.map +1 -1
  279. package/dist/cssm/hooks/useEnsuredControl.js +27 -3
  280. package/dist/cssm/hooks/useEnsuredControl.js.map +1 -1
  281. package/dist/cssm/hooks/useIsClient.d.ts +1 -1
  282. package/dist/cssm/hooks/useIsClient.js +1 -1
  283. package/dist/cssm/hooks/useIsClient.js.map +1 -1
  284. package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  285. package/dist/cssm/styles/constants.css +2 -3
  286. package/dist/hooks/useEnsuredControl.d.ts.map +1 -1
  287. package/dist/hooks/useEnsuredControl.js +27 -3
  288. package/dist/hooks/useEnsuredControl.js.map +1 -1
  289. package/dist/hooks/useIsClient.d.ts +1 -1
  290. package/dist/hooks/useIsClient.js +1 -1
  291. package/dist/hooks/useIsClient.js.map +1 -1
  292. package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  293. package/dist/vkui.css +3 -3
  294. package/dist/vkui.css.map +1 -1
  295. package/dist/vkui.js.tmp +260 -263
  296. package/package.json +1 -1
  297. package/src/components/Button/Button.tsx +2 -2
  298. package/src/components/Cell/Cell.module.css +0 -4
  299. package/src/components/Cell/Cell.tsx +9 -16
  300. package/src/components/ChipsInputBase/Chip/Chip.tsx +3 -3
  301. package/src/components/ChipsSelect/ChipsSelect.tsx +12 -12
  302. package/src/components/Clickable/Clickable.tsx +4 -1
  303. package/src/components/CustomSelect/CustomSelect.tsx +52 -104
  304. package/src/components/CustomSelect/CustomSelectInput.module.css +55 -35
  305. package/src/components/CustomSelect/CustomSelectInput.tsx +25 -36
  306. package/src/components/CustomSelect/helpers.tsx +61 -0
  307. package/src/components/CustomSelect/types.ts +15 -0
  308. package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx +3 -17
  309. package/src/components/DateInput/DateInput.tsx +1 -1
  310. package/src/components/DateRangeInput/DateRangeInput.tsx +1 -1
  311. package/src/components/Flex/FlexItem/FlexItem.tsx +6 -4
  312. package/src/components/Footer/Footer.tsx +14 -2
  313. package/src/components/FormField/FormField.module.css +32 -21
  314. package/src/components/FormItem/FormItem.tsx +3 -3
  315. package/src/components/FormLayoutGroup/FormLayoutGroup.tsx +4 -8
  316. package/src/components/Group/Group.tsx +3 -2
  317. package/src/components/ImageBase/ImageBase.module.css +0 -4
  318. package/src/components/Link/Link.tsx +1 -3
  319. package/src/components/Removable/Removable.module.css +4 -0
  320. package/src/components/Removable/Removable.tsx +12 -4
  321. package/src/components/RootComponent/RootComponent.module.css +10 -0
  322. package/src/components/RootComponent/RootComponent.tsx +12 -2
  323. package/src/components/Search/Search.tsx +3 -2
  324. package/src/components/Select/Select.tsx +0 -1
  325. package/src/components/SelectTypography/SelectTypography.tsx +2 -5
  326. package/src/components/SimpleCell/SimpleCell.module.css +4 -0
  327. package/src/components/SimpleCell/SimpleCell.tsx +2 -1
  328. package/src/components/Snackbar/Snackbar.tsx +3 -3
  329. package/src/components/ToolButton/ToolButton.tsx +1 -3
  330. package/src/components/View/View.tsx +21 -36
  331. package/src/hooks/useEnsuredControl.ts +38 -4
  332. package/src/hooks/useIsClient.ts +1 -1
  333. package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts +1 -1
  334. package/src/styles/constants.css +2 -3
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import * as React from 'react';
3
- import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
3
+ import { classNames, hasReactNode } from '@vkontakte/vkjs';
4
4
  import { useAdaptivity } from '../../hooks/useAdaptivity';
5
5
  import { usePlatform } from '../../hooks/usePlatform';
6
6
  import { Spinner } from '../Spinner/Spinner';
@@ -38,7 +38,7 @@ const sizeYClassNames = {
38
38
  };
39
39
  /**
40
40
  * @see https://vkcom.github.io/VKUI/#/Button
41
- */ export const Button = ({ size = 's', mode = 'primary', appearance = 'accent', stretched = false, align = 'center', children, before, after, getRootRef, loading, onClick = noop, className, disableSpinnerAnimation, rounded, ...restProps })=>{
41
+ */ export const Button = ({ size = 's', mode = 'primary', appearance = 'accent', stretched = false, align = 'center', children, before, after, getRootRef, loading, onClick, className, disableSpinnerAnimation, rounded, ...restProps })=>{
42
42
  const hasIcons = Boolean(before || after);
43
43
  const hasIconOnly = !children && Boolean(after) !== Boolean(before);
44
44
  const { sizeY = 'none' } = useAdaptivity();
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst stylesSize = {\n s: styles['Button--size-s'],\n m: styles['Button--size-m'],\n l: styles['Button--size-l'],\n};\n\nconst stylesMode = {\n primary: styles['Button--mode-primary'],\n secondary: styles['Button--mode-secondary'],\n tertiary: styles['Button--mode-tertiary'],\n outline: styles['Button--mode-outline'],\n link: styles['Button--mode-link'],\n};\n\nconst stylesAppearance = {\n 'accent': styles['Button--appearance-accent'],\n 'positive': styles['Button--appearance-positive'],\n 'negative': styles['Button--appearance-negative'],\n 'neutral': styles['Button--appearance-neutral'],\n 'overlay': styles['Button--appearance-overlay'],\n 'accent-invariable': styles['Button--appearance-accent-invariable'],\n};\n\nconst stylesAlign = {\n left: styles['Button--align-left'],\n center: styles['Button--align-center'],\n right: styles['Button--align-right'],\n};\n\nconst sizeYClassNames = {\n none: styles['Button--sizeY-none'],\n ['regular']: styles['Button--sizeY-regular'],\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n size?: 's' | 'm' | 'l';\n stretched?: boolean;\n before?: React.ReactNode;\n after?: React.ReactNode;\n loading?: boolean;\n disableSpinnerAnimation?: boolean;\n rounded?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n size = 's',\n mode = 'primary',\n appearance = 'accent',\n stretched = false,\n align = 'center',\n children,\n before,\n after,\n getRootRef,\n loading,\n onClick = noop,\n className,\n disableSpinnerAnimation,\n rounded,\n ...restProps\n}: ButtonProps): React.ReactNode => {\n const hasIcons = Boolean(before || after);\n const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n const { sizeY = 'none' } = useAdaptivity();\n const platform = usePlatform();\n\n return (\n <Tappable\n hoverMode={styles['Button--hover']}\n activeMode={styles['Button--active']}\n Component={restProps.href ? 'a' : 'button'}\n focusVisibleMode=\"outside\"\n {...restProps}\n onClick={loading ? undefined : onClick}\n className={classNames(\n className,\n styles.Button,\n stylesSize[size],\n stylesMode[mode],\n stylesAppearance[appearance],\n stylesAlign[align],\n sizeY !== 'compact' && sizeYClassNames[sizeY],\n platform === 'ios' && styles['Button--ios'],\n stretched && styles['Button--stretched'],\n hasIcons && styles['Button--with-icon'],\n hasIconOnly && !stretched && styles['Button--singleIcon'],\n loading && styles['Button--loading'],\n rounded && styles['Button--rounded'],\n )}\n getRootRef={getRootRef}\n >\n {loading && (\n <Spinner\n size=\"small\"\n className={styles.Button__spinner}\n disableAnimation={disableSpinnerAnimation}\n />\n )}\n <span className={styles.Button__in}>\n {hasReactNode(before) && (\n <span\n className={styles.Button__before}\n role=\"presentation\"\n data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n >\n {before}\n </span>\n )}\n {hasReactNode(children) && (\n <span\n className={styles.Button__content}\n data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n >\n {children}\n </span>\n )}\n {hasReactNode(after) && (\n <span\n className={styles.Button__after}\n role=\"presentation\"\n data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n >\n {after}\n </span>\n )}\n </span>\n </Tappable>\n );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","usePlatform","Spinner","Tappable","styles","stylesSize","s","m","l","stylesMode","primary","secondary","tertiary","outline","link","stylesAppearance","stylesAlign","left","center","right","sizeYClassNames","none","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","className","disableSpinnerAnimation","rounded","restProps","hasIcons","Boolean","hasIconOnly","sizeY","platform","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","Button__spinner","disableAnimation","span","Button__in","Button__before","role","data-testid","process","env","NODE_ENV","Button__content","Button__after"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst stylesSize = {\n s: styles['Button--size-s'],\n m: styles['Button--size-m'],\n l: styles['Button--size-l'],\n};\n\nconst stylesMode = {\n primary: styles['Button--mode-primary'],\n secondary: styles['Button--mode-secondary'],\n tertiary: styles['Button--mode-tertiary'],\n outline: styles['Button--mode-outline'],\n link: styles['Button--mode-link'],\n};\n\nconst stylesAppearance = {\n 'accent': styles['Button--appearance-accent'],\n 'positive': styles['Button--appearance-positive'],\n 'negative': styles['Button--appearance-negative'],\n 'neutral': styles['Button--appearance-neutral'],\n 'overlay': styles['Button--appearance-overlay'],\n 'accent-invariable': styles['Button--appearance-accent-invariable'],\n};\n\nconst stylesAlign = {\n left: styles['Button--align-left'],\n center: styles['Button--align-center'],\n right: styles['Button--align-right'],\n};\n\nconst sizeYClassNames = {\n none: styles['Button--sizeY-none'],\n ['regular']: styles['Button--sizeY-regular'],\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n size?: 's' | 'm' | 'l';\n stretched?: boolean;\n before?: React.ReactNode;\n after?: React.ReactNode;\n loading?: boolean;\n disableSpinnerAnimation?: boolean;\n rounded?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n size = 's',\n mode = 'primary',\n appearance = 'accent',\n stretched = false,\n align = 'center',\n children,\n before,\n after,\n getRootRef,\n loading,\n onClick,\n className,\n disableSpinnerAnimation,\n rounded,\n ...restProps\n}: ButtonProps): React.ReactNode => {\n const hasIcons = Boolean(before || after);\n const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n const { sizeY = 'none' } = useAdaptivity();\n const platform = usePlatform();\n\n return (\n <Tappable\n hoverMode={styles['Button--hover']}\n activeMode={styles['Button--active']}\n Component={restProps.href ? 'a' : 'button'}\n focusVisibleMode=\"outside\"\n {...restProps}\n onClick={loading ? undefined : onClick}\n className={classNames(\n className,\n styles.Button,\n stylesSize[size],\n stylesMode[mode],\n stylesAppearance[appearance],\n stylesAlign[align],\n sizeY !== 'compact' && sizeYClassNames[sizeY],\n platform === 'ios' && styles['Button--ios'],\n stretched && styles['Button--stretched'],\n hasIcons && styles['Button--with-icon'],\n hasIconOnly && !stretched && styles['Button--singleIcon'],\n loading && styles['Button--loading'],\n rounded && styles['Button--rounded'],\n )}\n getRootRef={getRootRef}\n >\n {loading && (\n <Spinner\n size=\"small\"\n className={styles.Button__spinner}\n disableAnimation={disableSpinnerAnimation}\n />\n )}\n <span className={styles.Button__in}>\n {hasReactNode(before) && (\n <span\n className={styles.Button__before}\n role=\"presentation\"\n data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n >\n {before}\n </span>\n )}\n {hasReactNode(children) && (\n <span\n className={styles.Button__content}\n data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n >\n {children}\n </span>\n )}\n {hasReactNode(after) && (\n <span\n className={styles.Button__after}\n role=\"presentation\"\n data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n >\n {after}\n </span>\n )}\n </span>\n </Tappable>\n );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Spinner","Tappable","styles","stylesSize","s","m","l","stylesMode","primary","secondary","tertiary","outline","link","stylesAppearance","stylesAlign","left","center","right","sizeYClassNames","none","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","className","disableSpinnerAnimation","rounded","restProps","hasIcons","Boolean","hasIconOnly","sizeY","platform","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","Button__spinner","disableAnimation","span","Button__in","Button__before","role","data-testid","process","env","NODE_ENV","Button__content","Button__after"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../../src/components/Cell/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAc,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAqB,MAAM,6BAA6B,CAAC;AAK9E,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,EACzC,cAAc,EACd,UAAU,CAAC,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG;IACvC,QAAQ,EAAE,OAAO,YAAY,CAAC;CA6I/B,CAAC"}
1
+ {"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../../src/components/Cell/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAc,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAqB,MAAM,6BAA6B,CAAC;AAK9E,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,EACzC,cAAc,EACd,UAAU,CAAC,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG;IACvC,QAAQ,EAAE,OAAO,YAAY,CAAC;CAsI/B,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import * as React from 'react';
3
- import { classNames, noop } from '@vkontakte/vkjs';
3
+ import { classNames } from '@vkontakte/vkjs';
4
4
  import { useExternRef } from '../../hooks/useExternRef';
5
5
  import { usePlatform } from '../../hooks/usePlatform';
6
6
  import { Removable } from '../Removable/Removable';
@@ -11,7 +11,7 @@ import { DEFAULT_DRAGGABLE_LABEL } from './constants';
11
11
  import styles from './Cell.module.css';
12
12
  /**
13
13
  * @see https://vkcom.github.io/VKUI/#/Cell
14
- */ export const Cell = ({ mode, onRemove = noop, removePlaceholder = 'Удалить', onDragFinish, before, after, disabled, draggable, Component: ComponentProps, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel = DEFAULT_DRAGGABLE_LABEL, className, style, toggleButtonTestId, removeButtonTestId, ...restProps })=>{
14
+ */ export const Cell = ({ mode, onRemove, removePlaceholder = 'Удалить', onDragFinish, before, after, disabled, draggable, Component: ComponentProps, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel = DEFAULT_DRAGGABLE_LABEL, className, style, toggleButtonTestId, removeButtonTestId, ...restProps })=>{
15
15
  const [dragging, setDragging] = React.useState(false);
16
16
  const selectable = mode === 'selectable';
17
17
  const removable = mode === 'removable';
@@ -21,7 +21,6 @@ import styles from './Cell.module.css';
21
21
  const dragger = draggable ? /*#__PURE__*/ _jsx(CellDragger, {
22
22
  elRef: rootElRef,
23
23
  className: classNames(styles['Cell__dragger'], !before && !selectable && styles['Cell__control--noBefore']),
24
- disabled: disabled,
25
24
  onDragStateChange: setDragging,
26
25
  onDragFinish: onDragFinish,
27
26
  children: draggerLabel
@@ -41,12 +40,12 @@ import styles from './Cell.module.css';
41
40
  ...checkboxProps
42
41
  });
43
42
  }
44
- const simpleCellDisabled = draggable && !selectable || removable && !restProps.onClick || disabled;
45
- const hasActive = !simpleCellDisabled && !dragging;
46
- const cellClasses = classNames(styles['Cell'], dragging && styles['Cell--dragging'], platform === 'ios' && styles['Cell--ios'], removable && styles['Cell--removable'], Component === 'label' && styles['Cell--selectable'], disabled && styles['Cell--disabled']);
43
+ const hasActive = !disabled && !dragging;
44
+ const cellClasses = classNames(styles['Cell'], dragging && styles['Cell--dragging'], platform === 'ios' && styles['Cell--ios'], removable && styles['Cell--removable'], Component === 'label' && styles['Cell--selectable']);
47
45
  const simpleCellProps = {
48
46
  hasActive: hasActive,
49
47
  hasHover: hasActive && !removable,
48
+ disabled,
50
49
  ...restProps,
51
50
  className: styles['Cell__content'],
52
51
  // чтобы свойство, если не определено, не присутствовало в
@@ -70,24 +69,22 @@ import styles from './Cell.module.css';
70
69
  ]
71
70
  })
72
71
  };
73
- if (restProps.onClick) {
74
- simpleCellProps.disabled = simpleCellDisabled;
75
- }
76
72
  if (removable) {
77
73
  return /*#__PURE__*/ _jsx(Removable, {
78
74
  className: classNames(cellClasses, className),
79
75
  style: style,
80
76
  getRootRef: rootElRef,
81
77
  removePlaceholder: removePlaceholder,
82
- onRemove: (e)=>onRemove(e, rootElRef.current),
78
+ onRemove: (e)=>onRemove?.(e, rootElRef.current),
83
79
  toggleButtonTestId: toggleButtonTestId,
84
80
  removeButtonTestId: removeButtonTestId,
81
+ disabled: disabled,
85
82
  children: platform === 'ios' ? ({ isRemoving })=>{
86
- if (simpleCellProps.onClick) {
87
- simpleCellProps.disabled = isRemoving || !simpleCellProps.disabled;
88
- }
89
83
  return /*#__PURE__*/ _jsx(SimpleCell, {
90
- ...simpleCellProps
84
+ ...simpleCellProps,
85
+ ...isRemoving ? {
86
+ onClick: undefined
87
+ } : {}
91
88
  });
92
89
  } : /*#__PURE__*/ _jsx(SimpleCell, {
93
90
  ...simpleCellProps
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { DEFAULT_DRAGGABLE_LABEL } from './constants';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n extends Omit<SimpleCellProps, 'getRootRef'>,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n mode?: 'removable' | 'selectable';\n /**\n * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n */\n draggable?: boolean;\n /**\n * Имя для input в режиме selectable\n */\n name?: string;\n /**\n * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n */\n checked?: boolean;\n /**\n * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n */\n defaultChecked?: boolean;\n /**\n * Коллбэк срабатывает при завершении перетаскивания.\n * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n */\n onDragFinish?: (swappedItemRange: SwappedItemRange) => void;\n /**\n * Текст для кнопки перетаскивания ячейки\n */\n draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell: React.FC<CellProps> & {\n Checkbox: typeof CellCheckbox;\n} = ({\n mode,\n onRemove = noop,\n removePlaceholder = 'Удалить',\n onDragFinish,\n before,\n after,\n disabled,\n draggable,\n Component: ComponentProps,\n onChange,\n name,\n value,\n checked,\n defaultChecked,\n getRootRef,\n draggerLabel = DEFAULT_DRAGGABLE_LABEL,\n className,\n style,\n toggleButtonTestId,\n removeButtonTestId,\n ...restProps\n}: CellProps) => {\n const [dragging, setDragging] = React.useState(false);\n const selectable = mode === 'selectable';\n const removable = mode === 'removable';\n const Component = selectable ? 'label' : ComponentProps;\n\n const platform = usePlatform();\n\n const rootElRef = useExternRef(getRootRef);\n\n const dragger = draggable ? (\n <CellDragger\n elRef={rootElRef}\n className={classNames(\n styles['Cell__dragger'],\n !before && !selectable && styles['Cell__control--noBefore'],\n )}\n disabled={disabled}\n onDragStateChange={setDragging}\n onDragFinish={onDragFinish}\n >\n {draggerLabel}\n </CellDragger>\n ) : null;\n\n let checkbox;\n if (selectable) {\n const checkboxProps: CellCheckboxProps = {\n name,\n value,\n defaultChecked,\n checked,\n disabled,\n onChange,\n };\n checkbox = (\n <CellCheckbox\n className={classNames(\n styles['Cell__checkbox'],\n !before && styles['Cell__control--noBefore'],\n )}\n {...checkboxProps}\n />\n );\n }\n\n const simpleCellDisabled =\n (draggable && !selectable) || (removable && !restProps.onClick) || disabled;\n const hasActive = !simpleCellDisabled && !dragging;\n\n const cellClasses = classNames(\n styles['Cell'],\n dragging && styles['Cell--dragging'],\n platform === 'ios' && styles['Cell--ios'],\n removable && styles['Cell--removable'],\n Component === 'label' && styles['Cell--selectable'],\n disabled && styles['Cell--disabled'],\n );\n\n const simpleCellProps: SimpleCellProps = {\n hasActive: hasActive,\n hasHover: hasActive && !removable,\n ...restProps,\n className: styles['Cell__content'],\n // чтобы свойство, если не определено, не присутствовало в\n // restProps явно как {'Component': undefined} и ниже не переопределяло\n // возможное значение commonProps.Component = 'a' при слиянии двух объектов, как\n // {...commonProps, ...restProps}\n ...(Component && { Component }),\n before: (\n <React.Fragment>\n {draggable && platform !== 'ios' && dragger}\n {selectable && checkbox}\n {before}\n </React.Fragment>\n ),\n after: (\n <React.Fragment>\n {draggable && platform === 'ios' && dragger}\n {after}\n </React.Fragment>\n ),\n };\n\n if (restProps.onClick) {\n simpleCellProps.disabled = simpleCellDisabled;\n }\n\n if (removable) {\n return (\n <Removable\n className={classNames(cellClasses, className)}\n style={style}\n getRootRef={rootElRef}\n removePlaceholder={removePlaceholder}\n onRemove={(e) => onRemove(e, rootElRef.current)}\n toggleButtonTestId={toggleButtonTestId}\n removeButtonTestId={removeButtonTestId}\n >\n {platform === 'ios' ? (\n ({ isRemoving }) => {\n if (simpleCellProps.onClick) {\n simpleCellProps.disabled = isRemoving || !simpleCellProps.disabled;\n }\n return <SimpleCell {...simpleCellProps} />;\n }\n ) : (\n <SimpleCell {...simpleCellProps} />\n )}\n </Removable>\n );\n }\n\n return (\n <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n <SimpleCell {...simpleCellProps} />\n </div>\n );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["React","classNames","noop","useExternRef","usePlatform","Removable","SimpleCell","CellCheckbox","CellDragger","DEFAULT_DRAGGABLE_LABEL","styles","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","toggleButtonTestId","removeButtonTestId","restProps","dragging","setDragging","useState","selectable","removable","platform","rootElRef","dragger","elRef","onDragStateChange","checkbox","checkboxProps","simpleCellDisabled","onClick","hasActive","cellClasses","simpleCellProps","hasHover","Fragment","e","current","isRemoving","div","ref","Checkbox"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { DEFAULT_DRAGGABLE_LABEL } from './constants';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n extends Omit<SimpleCellProps, 'getRootRef'>,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n mode?: 'removable' | 'selectable';\n /**\n * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n */\n draggable?: boolean;\n /**\n * Имя для input в режиме selectable\n */\n name?: string;\n /**\n * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n */\n checked?: boolean;\n /**\n * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n */\n defaultChecked?: boolean;\n /**\n * Коллбэк срабатывает при завершении перетаскивания.\n * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n */\n onDragFinish?: (swappedItemRange: SwappedItemRange) => void;\n /**\n * Текст для кнопки перетаскивания ячейки\n */\n draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell: React.FC<CellProps> & {\n Checkbox: typeof CellCheckbox;\n} = ({\n mode,\n onRemove,\n removePlaceholder = 'Удалить',\n onDragFinish,\n before,\n after,\n disabled,\n draggable,\n Component: ComponentProps,\n onChange,\n name,\n value,\n checked,\n defaultChecked,\n getRootRef,\n draggerLabel = DEFAULT_DRAGGABLE_LABEL,\n className,\n style,\n toggleButtonTestId,\n removeButtonTestId,\n ...restProps\n}: CellProps) => {\n const [dragging, setDragging] = React.useState(false);\n const selectable = mode === 'selectable';\n const removable = mode === 'removable';\n const Component = selectable ? 'label' : ComponentProps;\n\n const platform = usePlatform();\n\n const rootElRef = useExternRef(getRootRef);\n\n const dragger = draggable ? (\n <CellDragger\n elRef={rootElRef}\n className={classNames(\n styles['Cell__dragger'],\n !before && !selectable && styles['Cell__control--noBefore'],\n )}\n onDragStateChange={setDragging}\n onDragFinish={onDragFinish}\n >\n {draggerLabel}\n </CellDragger>\n ) : null;\n\n let checkbox;\n if (selectable) {\n const checkboxProps: CellCheckboxProps = {\n name,\n value,\n defaultChecked,\n checked,\n disabled,\n onChange,\n };\n checkbox = (\n <CellCheckbox\n className={classNames(\n styles['Cell__checkbox'],\n !before && styles['Cell__control--noBefore'],\n )}\n {...checkboxProps}\n />\n );\n }\n\n const hasActive = !disabled && !dragging;\n\n const cellClasses = classNames(\n styles['Cell'],\n dragging && styles['Cell--dragging'],\n platform === 'ios' && styles['Cell--ios'],\n removable && styles['Cell--removable'],\n Component === 'label' && styles['Cell--selectable'],\n );\n\n const simpleCellProps: SimpleCellProps = {\n hasActive: hasActive,\n hasHover: hasActive && !removable,\n disabled,\n ...restProps,\n className: styles['Cell__content'],\n // чтобы свойство, если не определено, не присутствовало в\n // restProps явно как {'Component': undefined} и ниже не переопределяло\n // возможное значение commonProps.Component = 'a' при слиянии двух объектов, как\n // {...commonProps, ...restProps}\n ...(Component && { Component }),\n before: (\n <React.Fragment>\n {draggable && platform !== 'ios' && dragger}\n {selectable && checkbox}\n {before}\n </React.Fragment>\n ),\n after: (\n <React.Fragment>\n {draggable && platform === 'ios' && dragger}\n {after}\n </React.Fragment>\n ),\n };\n\n if (removable) {\n return (\n <Removable\n className={classNames(cellClasses, className)}\n style={style}\n getRootRef={rootElRef}\n removePlaceholder={removePlaceholder}\n onRemove={(e) => onRemove?.(e, rootElRef.current)}\n toggleButtonTestId={toggleButtonTestId}\n removeButtonTestId={removeButtonTestId}\n disabled={disabled}\n >\n {platform === 'ios' ? (\n ({ isRemoving }) => {\n return (\n <SimpleCell {...simpleCellProps} {...(isRemoving ? { onClick: undefined } : {})} />\n );\n }\n ) : (\n <SimpleCell {...simpleCellProps} />\n )}\n </Removable>\n );\n }\n\n return (\n <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n <SimpleCell {...simpleCellProps} />\n </div>\n );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["React","classNames","useExternRef","usePlatform","Removable","SimpleCell","CellCheckbox","CellDragger","DEFAULT_DRAGGABLE_LABEL","styles","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","toggleButtonTestId","removeButtonTestId","restProps","dragging","setDragging","useState","selectable","removable","platform","rootElRef","dragger","elRef","onDragStateChange","checkbox","checkboxProps","hasActive","cellClasses","simpleCellProps","hasHover","Fragment","e","current","isRemoving","onClick","undefined","div","ref","Checkbox"],"mappings":"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"}
@@ -7,10 +7,6 @@
7
7
  box-shadow: var(--vkui--elevation3);
8
8
  }
9
9
 
10
- .Cell--selectable.Cell--disabled {
11
- opacity: var(--vkui--opacity_disable_accessibility);
12
- }
13
-
14
10
  .Cell__checkbox,
15
11
  .Cell__dragger {
16
12
  position: relative;
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import * as React from 'react';
3
3
  import { Icon16Cancel } from '@vkontakte/icons';
4
- import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
4
+ import { classNames, hasReactNode } from '@vkontakte/vkjs';
5
5
  import { useAdaptivity } from '../../../hooks/useAdaptivity';
6
6
  import { useFocusVisible } from '../../../hooks/useFocusVisible';
7
7
  import { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';
@@ -15,7 +15,7 @@ const sizeYClassNames = {
15
15
  };
16
16
  /**
17
17
  * @see https://vkcom.github.io/VKUI/#/Chip
18
- */ export const Chip = ({ Component = 'span', value = '', removable = true, onRemove = noop, removeLabel = 'Удалить', before, after, disabled, readOnly, children, className, onFocus: onFocusProp, onBlur: onBlurProp, ...restProps })=>{
18
+ */ export const Chip = ({ Component = 'span', value = '', removable = true, onRemove, removeLabel = 'Удалить', before, after, disabled, readOnly, children, className, onFocus: onFocusProp, onBlur: onBlurProp, ...restProps })=>{
19
19
  const { sizeY = 'none' } = useAdaptivity();
20
20
  const { focusVisible, onFocus, onBlur } = useFocusVisible();
21
21
  const focusVisibleClassName = useFocusVisibleClassName({
@@ -34,7 +34,7 @@ const sizeYClassNames = {
34
34
  onBlur(event);
35
35
  };
36
36
  const onRemoveWrapper = React.useCallback((event)=>{
37
- onRemove(event, value);
37
+ onRemove?.(event, value);
38
38
  }, [
39
39
  onRemove,
40
40
  value
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { Footnote } from '../../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport type { ChipProps } from '../types';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n none: styles['Chip--sizeY-none'],\n compact: styles['Chip--sizeY-compact'],\n} as const;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n Component = 'span',\n value = '',\n removable = true,\n onRemove = noop,\n removeLabel = 'Удалить',\n before,\n after,\n disabled,\n readOnly,\n children,\n className,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...restProps\n}: ChipProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n const { focusVisible, onFocus, onBlur } = useFocusVisible();\n const focusVisibleClassName = useFocusVisibleClassName({ focusVisible });\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onFocusProp) {\n onFocusProp(event);\n }\n onFocus(event);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlurProp) {\n onBlurProp(event);\n }\n onBlur(event);\n };\n\n const onRemoveWrapper = React.useCallback(\n (event: React.MouseEvent) => {\n onRemove(event, value);\n },\n [onRemove, value],\n );\n\n return (\n <RootComponent\n {...restProps}\n Component={Component}\n className={classNames(\n styles['Chip'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n focusVisibleClassName,\n className,\n )}\n aria-readonly={readOnly}\n aria-disabled={disabled}\n onFocus={disabled ? undefined : handleFocus}\n onBlur={disabled ? undefined : handleBlur}\n >\n <div className={styles['Chip__in']}>\n {hasReactNode(before) && <div className={styles['Chip__before']}>{before}</div>}\n <Footnote className={styles['Chip__content']}>{children}</Footnote>\n {hasReactNode(after) && <div className={styles['Chip__after']}>{after}</div>}\n </div>\n {!readOnly && removable && (\n <div className={styles['Chip__removable']}>\n <button\n tabIndex={-1} // [reason]: чтобы можно было выставлять состояние фокуса только программно через `*.focus()`\n disabled={disabled}\n className={styles['Chip__remove']}\n onClick={disabled ? undefined : onRemoveWrapper}\n >\n <VisuallyHidden>\n &nbsp; {removeLabel} {children}\n </VisuallyHidden>\n <Icon16Cancel />\n </button>\n </div>\n )}\n </RootComponent>\n );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","noop","useAdaptivity","useFocusVisible","useFocusVisibleClassName","RootComponent","Footnote","VisuallyHidden","styles","sizeYClassNames","none","compact","Chip","Component","value","removable","onRemove","removeLabel","before","after","disabled","readOnly","children","className","onFocus","onFocusProp","onBlur","onBlurProp","restProps","sizeY","focusVisible","focusVisibleClassName","handleFocus","event","handleBlur","onRemoveWrapper","useCallback","aria-readonly","aria-disabled","undefined","div","button","tabIndex","onClick"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,wBAAwB,QAAQ,0CAA0C;AACnF,SAASC,aAAa,QAAQ,oCAAoC;AAClE,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,cAAc,QAAQ,sCAAsC;AAErE,OAAOC,YAAY,oBAAoB;AAEvC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,mBAAmB;IAChCG,SAASH,MAAM,CAAC,sBAAsB;AACxC;AAEA;;CAEC,GACD,OAAO,MAAMI,OAAO,CAAC,EACnBC,YAAY,MAAM,EAClBC,QAAQ,EAAE,EACVC,YAAY,IAAI,EAChBC,WAAWf,IAAI,EACfgB,cAAc,SAAS,EACvBC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAClB,GAAGC,WACO;IACV,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG3B;IAC3B,MAAM,EAAE4B,YAAY,EAAEN,OAAO,EAAEE,MAAM,EAAE,GAAGvB;IAC1C,MAAM4B,wBAAwB3B,yBAAyB;QAAE0B;IAAa;IAEtE,MAAME,cAAc,CAACC;QACnB,IAAIR,aAAa;YACfA,YAAYQ;QACd;QACAT,QAAQS;IACV;IAEA,MAAMC,aAAa,CAACD;QAClB,IAAIN,YAAY;YACdA,WAAWM;QACb;QACAP,OAAOO;IACT;IAEA,MAAME,kBAAkBtC,MAAMuC,WAAW,CACvC,CAACH;QACCjB,SAASiB,OAAOnB;IAClB,GACA;QAACE;QAAUF;KAAM;IAGnB,qBACE,MAACT;QACE,GAAGuB,SAAS;QACbf,WAAWA;QACXU,WAAWxB,WACTS,MAAM,CAAC,OAAO,EACdqB,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CE,uBACAR;QAEFc,iBAAehB;QACfiB,iBAAelB;QACfI,SAASJ,WAAWmB,YAAYP;QAChCN,QAAQN,WAAWmB,YAAYL;;0BAE/B,MAACM;gBAAIjB,WAAWf,MAAM,CAAC,WAAW;;oBAC/BR,aAAakB,yBAAW,KAACsB;wBAAIjB,WAAWf,MAAM,CAAC,eAAe;kCAAGU;;kCAClE,KAACZ;wBAASiB,WAAWf,MAAM,CAAC,gBAAgB;kCAAGc;;oBAC9CtB,aAAamB,wBAAU,KAACqB;wBAAIjB,WAAWf,MAAM,CAAC,cAAc;kCAAGW;;;;YAEjE,CAACE,YAAYN,2BACZ,KAACyB;gBAAIjB,WAAWf,MAAM,CAAC,kBAAkB;0BACvC,cAAA,MAACiC;oBACCC,UAAU,CAAC;oBACXtB,UAAUA;oBACVG,WAAWf,MAAM,CAAC,eAAe;oBACjCmC,SAASvB,WAAWmB,YAAYJ;;sCAEhC,MAAC5B;;gCAAe;gCACNU;gCAAY;gCAAEK;;;sCAExB,KAACxB;;;;;;AAMb,EAAE"}
1
+ {"version":3,"sources":["../../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { Footnote } from '../../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport type { ChipProps } from '../types';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n none: styles['Chip--sizeY-none'],\n compact: styles['Chip--sizeY-compact'],\n} as const;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n Component = 'span',\n value = '',\n removable = true,\n onRemove,\n removeLabel = 'Удалить',\n before,\n after,\n disabled,\n readOnly,\n children,\n className,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...restProps\n}: ChipProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n const { focusVisible, onFocus, onBlur } = useFocusVisible();\n const focusVisibleClassName = useFocusVisibleClassName({ focusVisible });\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onFocusProp) {\n onFocusProp(event);\n }\n onFocus(event);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlurProp) {\n onBlurProp(event);\n }\n onBlur(event);\n };\n\n const onRemoveWrapper = React.useCallback(\n (event: React.MouseEvent) => {\n onRemove?.(event, value);\n },\n [onRemove, value],\n );\n\n return (\n <RootComponent\n {...restProps}\n Component={Component}\n className={classNames(\n styles['Chip'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n focusVisibleClassName,\n className,\n )}\n aria-readonly={readOnly}\n aria-disabled={disabled}\n onFocus={disabled ? undefined : handleFocus}\n onBlur={disabled ? undefined : handleBlur}\n >\n <div className={styles['Chip__in']}>\n {hasReactNode(before) && <div className={styles['Chip__before']}>{before}</div>}\n <Footnote className={styles['Chip__content']}>{children}</Footnote>\n {hasReactNode(after) && <div className={styles['Chip__after']}>{after}</div>}\n </div>\n {!readOnly && removable && (\n <div className={styles['Chip__removable']}>\n <button\n tabIndex={-1} // [reason]: чтобы можно было выставлять состояние фокуса только программно через `*.focus()`\n disabled={disabled}\n className={styles['Chip__remove']}\n onClick={disabled ? undefined : onRemoveWrapper}\n >\n <VisuallyHidden>\n &nbsp; {removeLabel} {children}\n </VisuallyHidden>\n <Icon16Cancel />\n </button>\n </div>\n )}\n </RootComponent>\n );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","useAdaptivity","useFocusVisible","useFocusVisibleClassName","RootComponent","Footnote","VisuallyHidden","styles","sizeYClassNames","none","compact","Chip","Component","value","removable","onRemove","removeLabel","before","after","disabled","readOnly","children","className","onFocus","onFocusProp","onBlur","onBlurProp","restProps","sizeY","focusVisible","focusVisibleClassName","handleFocus","event","handleBlur","onRemoveWrapper","useCallback","aria-readonly","aria-disabled","undefined","div","button","tabIndex","onClick"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,wBAAwB,QAAQ,0CAA0C;AACnF,SAASC,aAAa,QAAQ,oCAAoC;AAClE,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,cAAc,QAAQ,sCAAsC;AAErE,OAAOC,YAAY,oBAAoB;AAEvC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,mBAAmB;IAChCG,SAASH,MAAM,CAAC,sBAAsB;AACxC;AAEA;;CAEC,GACD,OAAO,MAAMI,OAAO,CAAC,EACnBC,YAAY,MAAM,EAClBC,QAAQ,EAAE,EACVC,YAAY,IAAI,EAChBC,QAAQ,EACRC,cAAc,SAAS,EACvBC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAClB,GAAGC,WACO;IACV,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG3B;IAC3B,MAAM,EAAE4B,YAAY,EAAEN,OAAO,EAAEE,MAAM,EAAE,GAAGvB;IAC1C,MAAM4B,wBAAwB3B,yBAAyB;QAAE0B;IAAa;IAEtE,MAAME,cAAc,CAACC;QACnB,IAAIR,aAAa;YACfA,YAAYQ;QACd;QACAT,QAAQS;IACV;IAEA,MAAMC,aAAa,CAACD;QAClB,IAAIN,YAAY;YACdA,WAAWM;QACb;QACAP,OAAOO;IACT;IAEA,MAAME,kBAAkBrC,MAAMsC,WAAW,CACvC,CAACH;QACCjB,WAAWiB,OAAOnB;IACpB,GACA;QAACE;QAAUF;KAAM;IAGnB,qBACE,MAACT;QACE,GAAGuB,SAAS;QACbf,WAAWA;QACXU,WAAWvB,WACTQ,MAAM,CAAC,OAAO,EACdqB,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CE,uBACAR;QAEFc,iBAAehB;QACfiB,iBAAelB;QACfI,SAASJ,WAAWmB,YAAYP;QAChCN,QAAQN,WAAWmB,YAAYL;;0BAE/B,MAACM;gBAAIjB,WAAWf,MAAM,CAAC,WAAW;;oBAC/BP,aAAaiB,yBAAW,KAACsB;wBAAIjB,WAAWf,MAAM,CAAC,eAAe;kCAAGU;;kCAClE,KAACZ;wBAASiB,WAAWf,MAAM,CAAC,gBAAgB;kCAAGc;;oBAC9CrB,aAAakB,wBAAU,KAACqB;wBAAIjB,WAAWf,MAAM,CAAC,cAAc;kCAAGW;;;;YAEjE,CAACE,YAAYN,2BACZ,KAACyB;gBAAIjB,WAAWf,MAAM,CAAC,kBAAkB;0BACvC,cAAA,MAACiC;oBACCC,UAAU,CAAC;oBACXtB,UAAUA;oBACVG,WAAWf,MAAM,CAAC,eAAe;oBACjCmC,SAASvB,WAAWmB,YAAYJ;;sCAEhC,MAAC5B;;gCAAe;gCACNU;gCAAY;gCAAEK;;;sCAExB,KAACvB;;;;;;AAMb,EAAE"}
@@ -72,6 +72,13 @@ getRef, value: valueProp, defaultValue, inputValue: inputValueProp, defaultInput
72
72
  const inputRef = useExternRef(getRef, inputRefHook);
73
73
  // Связано с CustomSelectDropdownProps
74
74
  const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState(placementProp);
75
+ const onDropdownPlacementChange = React.useCallback((placement)=>{
76
+ if (placement.startsWith('top')) {
77
+ setDropdownVerticalPlacement('top');
78
+ } else if (placement.startsWith('bottom')) {
79
+ setDropdownVerticalPlacement('bottom');
80
+ }
81
+ }, []);
75
82
  const dropdownId = React.useId();
76
83
  const dropdownCurrentItemId = focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;
77
84
  const dropdownScrollBoxRef = React.useRef(null);
@@ -199,13 +206,6 @@ getRef, value: valueProp, defaultValue, inputValue: inputValueProp, defaultInput
199
206
  focusedOptionIndex,
200
207
  setFocusedOption
201
208
  ]);
202
- const onDropdownPlacementChange = React.useCallback((placement)=>{
203
- /* istanbul ignore next: */ if (placement.startsWith('top')) {
204
- setDropdownVerticalPlacement('top');
205
- } else if (placement.startsWith('bottom')) {
206
- setDropdownVerticalPlacement('bottom');
207
- }
208
- }, []);
209
209
  const onDropdownMouseLeave = React.useCallback(()=>{
210
210
  setFocusedOptionIndex(null);
211
211
  }, [
@@ -217,7 +217,7 @@ getRef, value: valueProp, defaultValue, inputValue: inputValueProp, defaultInput
217
217
  setOpened
218
218
  ]);
219
219
  useGlobalOnClickOutside(handleClickOutside, opened ? rootRef : null, opened ? dropdownScrollBoxRef : null);
220
- const openedClassNames = React.useMemo(()=>opened && dropdownOffsetDistance === 0 && (dropdownVerticalPlacement?.includes('top') ? styles['ChipsSelect--pop-up'] : styles['ChipsSelect--pop-down']) || undefined, [
220
+ const openedClassNames = React.useMemo(()=>opened && dropdownOffsetDistance === 0 && (dropdownVerticalPlacement.includes('top') ? styles['ChipsSelect--pop-up'] : styles['ChipsSelect--pop-down']) || undefined, [
221
221
  dropdownOffsetDistance,
222
222
  opened,
223
223
  dropdownVerticalPlacement
@@ -264,7 +264,7 @@ getRef, value: valueProp, defaultValue, inputValue: inputValueProp, defaultInput
264
264
  opened && /*#__PURE__*/ _jsx(CustomSelectDropdown, {
265
265
  "data-testid": dropdownTestId,
266
266
  targetRef: rootRef,
267
- placement: placementProp,
267
+ placement: dropdownVerticalPlacement,
268
268
  scrollBoxRef: dropdownScrollBoxRef,
269
269
  onPlacementChange: onDropdownPlacementChange,
270
270
  onMouseLeave: onDropdownMouseLeave,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { Keys } from '../../lib/accessibility';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n renderChipDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport {\n CustomSelectDropdown,\n CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n type CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n DEFAULT_EMPTY_TEXT,\n DEFAULT_SELECTED_BEHAVIOR,\n FOCUS_ACTION_NEXT,\n FOCUS_ACTION_PREV,\n isCreateNewOptionPreset,\n isEmptyOptionPreset,\n isNotServicePreset,\n renderOptionDefault,\n} from './constants';\nimport type { FocusActionType, OptionPreset } from './types';\nimport { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';\nimport styles from './ChipsSelect.module.css';\n\nconst findIndexAfter = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n startIndex = -1,\n) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex(\n (option, i) => i > startIndex && (!isNotServicePreset(option) || !option.disabled),\n );\n};\n\nconst findIndexBefore = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n endIndex: number = options.length,\n) => {\n let result = -1;\n if (endIndex <= 0) {\n return result;\n }\n for (let i = endIndex - 1; i >= 0; i--) {\n let option = options[i];\n\n if (!isNotServicePreset(option) || !option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nexport interface ChipsSelectProps<O extends ChipOption>\n extends ChipsInputBaseProps<O>,\n UseChipsSelectProps<O>,\n Pick<FormFieldProps, 'status' | 'mode' | 'before'>,\n Pick<\n CustomSelectDropdownProps,\n 'overscrollBehavior' | 'autoHideScrollbar' | 'autoHideScrollbarDelay'\n > {\n placement?: 'top' | 'bottom';\n /**\n * Отрисовка Spinner вместо списка опций в выпадающем списке\n */\n fetching?: boolean;\n /**\n * Закрытие выпадающего списка после выбора элемента\n */\n closeAfterSelect?: boolean;\n /**\n * Ширина раскрывающегося списка зависит от контента\n */\n dropdownAutoWidth?: boolean;\n /**\n * Принудительно использовать портал.\n */\n forceDropdownPortal?: boolean;\n /**\n * Передача `data-testid`.\n */\n dropdownTestId?: string;\n /**\n * Иконка раскрывающегося списка\n */\n icon?: React.ReactNode;\n /**\n * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)\n */\n addOnBlur?: boolean;\n /**\n * Отключает максимальную высоту по умолчанию\n */\n noMaxHeight?: boolean;\n\n renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;\n /**\n * Событие срабатывающее перед onChange\n */\n onChangeStart?: (event: React.MouseEvent | React.KeyboardEvent, option: O) => void;\n\n /**\n * Отступ от выпадающего списка\n */\n dropdownOffsetDistance?: number;\n\n /**\n * Если `true`, то справа будет отображаться кнопка для очистки значения\n */\n allowClearButton?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>({\n // FormFieldProps\n id: labelledbyId,\n getRootRef,\n className,\n status = 'default',\n icon: dropdownIconProp,\n onChangeStart,\n\n // CustomSelectDropdownProps\n options: optionsProp,\n placement: placementProp = 'bottom',\n closeAfterSelect = true,\n selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n emptyText = DEFAULT_EMPTY_TEXT,\n creatable = false,\n fetching = false,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight = false,\n filterFn = defaultFilterFn,\n dropdownTestId,\n onClose,\n onOpen,\n overscrollBehavior,\n\n // ChipsInputProps\n getRef,\n value: valueProp,\n defaultValue,\n inputValue: inputValueProp,\n defaultInputValue,\n disabled,\n readOnly,\n getOptionValue = getOptionValueDefault,\n getOptionLabel = getOptionLabelDefault,\n getNewOptionData = getNewOptionDataDefault,\n renderChip = renderChipDefault,\n renderOption = renderOptionDefault,\n onChange,\n onFocus: onFocusProp,\n onInputChange: onInputChangeProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n dropdownOffsetDistance = 0,\n allowClearButton,\n clearButtonTestId,\n ...restProps\n}: ChipsSelectProps<Option>): React.ReactNode => {\n const {\n // Связано с ChipsInputProps\n // option\n value,\n addOptionFromInput,\n addOption,\n removeOption,\n clearOptions,\n // input\n inputRef: inputRefHook,\n inputValue,\n clearInput,\n onInputChange,\n\n // Связано с CustomSelectDropdownProps\n options,\n opened,\n setOpened,\n focusedOption,\n focusedOptionIndex,\n setFocusedOption,\n setFocusedOptionIndex,\n } = useChipsSelect({\n // option\n value: valueProp,\n defaultValue,\n onChange,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue,\n onInputChange: onInputChangeProp,\n\n // dropdown\n options: optionsProp,\n emptyText,\n creatable,\n filterFn,\n selectedBehavior,\n onClose,\n onOpen,\n\n // other\n disabled,\n });\n\n // Связано с ChipsInputProps\n const rootRef = useExternRef(getRootRef);\n const inputRef = useExternRef(getRef, inputRefHook);\n\n // Связано с CustomSelectDropdownProps\n const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<\n Extract<Placement, 'top' | 'bottom'> | undefined\n >(placementProp);\n const dropdownId = React.useId();\n const dropdownCurrentItemId =\n focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;\n const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onFocusProp) {\n onFocusProp(event);\n }\n\n if (!readOnly) {\n setOpened(true);\n setFocusedOptionIndex(null);\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlurProp) {\n onBlurProp(event);\n }\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!readOnly && !event.defaultPrevented && !creatable) {\n event.preventDefault();\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = dropdownScrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (!item || !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n /* istanbul ignore next: нет представления как воспроизвести */\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n };\n\n const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n if (index === oldIndex) {\n /* istanbul ignore next: нет представления как воспроизвести */\n return;\n }\n\n const option = options[index];\n\n if (isNotServicePreset(option) && option.disabled) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === FOCUS_ACTION_PREV) {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (onKeyDownProp) {\n onKeyDownProp(event);\n }\n\n if (event.defaultPrevented || readOnly) {\n return;\n }\n\n switch (event.key) {\n case Keys.ARROW_UP:\n case Keys.ARROW_DOWN:\n event.preventDefault();\n\n if (!opened) {\n setOpened(true);\n focusOption(null, FOCUS_ACTION_NEXT);\n } else {\n focusOption(\n focusedOptionIndex,\n event.key === Keys.ARROW_UP ? FOCUS_ACTION_PREV : FOCUS_ACTION_NEXT,\n );\n }\n break;\n case Keys.ENTER: {\n if (!opened) {\n break;\n }\n if (focusedOptionIndex != null) {\n const foundOption = options[focusedOptionIndex];\n if (foundOption && isNotServicePreset(foundOption)) {\n event.preventDefault();\n\n if (onChangeStart) {\n onChangeStart(event, foundOption);\n }\n\n addOption(foundOption);\n setFocusedOptionIndex(null);\n clearInput();\n if (closeAfterSelect) {\n setOpened(false);\n }\n\n break;\n }\n }\n\n if (!creatable) {\n event.preventDefault();\n }\n break;\n }\n case Keys.ESCAPE:\n case Keys.TAB:\n if (opened) {\n setOpened(false);\n }\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex === null) {\n setFocusedOption(null);\n } else {\n const foundFocusedOptionIndex = options[focusedOptionIndex];\n\n if (foundFocusedOptionIndex && isNotServicePreset(foundFocusedOptionIndex)) {\n setFocusedOption(foundFocusedOptionIndex);\n }\n }\n }, [options, focusedOptionIndex, setFocusedOption]);\n\n const onDropdownPlacementChange = React.useCallback((placement: Placement) => {\n /* istanbul ignore next: */\n if (placement.startsWith('top')) {\n setDropdownVerticalPlacement('top');\n } else if (placement.startsWith('bottom')) {\n setDropdownVerticalPlacement('bottom');\n }\n }, []);\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const handleClickOutside = React.useCallback(() => {\n setOpened(false);\n }, [setOpened]);\n\n useGlobalOnClickOutside(\n handleClickOutside,\n opened ? rootRef : null,\n opened ? dropdownScrollBoxRef : null,\n );\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (dropdownVerticalPlacement?.includes('top')\n ? styles['ChipsSelect--pop-up']\n : styles['ChipsSelect--pop-down'])) ||\n undefined,\n [dropdownOffsetDistance, opened, dropdownVerticalPlacement],\n );\n\n const clearButtonShown = allowClearButton && (!!value.length || !!inputValue.length);\n\n return (\n <>\n <ChipsInputBase\n {...restProps}\n disabled={disabled}\n readOnly={readOnly}\n clearButtonShown={clearButtonShown}\n clearButtonTestId={clearButtonTestId}\n // FormFieldProps\n id={labelledbyId}\n getRootRef={rootRef}\n className={classNames(styles['ChipsSelect'], openedClassNames, className)}\n status={status}\n after={\n dropdownIconProp || (\n <DropdownIcon\n opened={opened}\n className={clearButtonShown ? styles['ChipsSelect__dropdown-icon'] : undefined}\n />\n )\n }\n // option\n value={value}\n onAddChipOption={addOptionFromInput}\n onRemoveChipOption={removeOption}\n renderChip={renderChip}\n onClear={clearOptions}\n // input\n getRef={inputRef}\n inputValue={inputValue}\n onInputChange={onInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n // a11y\n role=\"combobox\"\n aria-expanded={opened}\n aria-autocomplete=\"list\"\n aria-controls={opened ? dropdownId : undefined}\n aria-activedescendant={opened ? dropdownCurrentItemId : undefined}\n aria-haspopup=\"listbox\"\n />\n {opened && (\n <CustomSelectDropdown\n data-testid={dropdownTestId}\n targetRef={rootRef}\n placement={placementProp}\n scrollBoxRef={dropdownScrollBoxRef}\n onPlacementChange={onDropdownPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n autoWidth={dropdownAutoWidth}\n forcePortal={forceDropdownPortal}\n noMaxHeight={noMaxHeight}\n offsetDistance={dropdownOffsetDistance}\n overscrollBehavior={overscrollBehavior}\n // a11y\n id={dropdownId}\n role=\"listbox\"\n aria-labelledby={labelledbyId}\n >\n {options.map((option, index) => {\n const dropdownItemId = `${dropdownId}-${index}`;\n\n if (isEmptyOptionPreset(option)) {\n return (\n <Footnote key=\"empty-text\" className={styles['ChipsSelect__empty']}>\n {option.placeholder}\n </Footnote>\n );\n }\n if (isCreateNewOptionPreset(option)) {\n return (\n <CustomSelectOption\n key=\"create-new-option\"\n id={dropdownItemId}\n hovered={focusedOptionIndex === index}\n onMouseDown={() => addOptionFromInput(inputValue)}\n onMouseEnter={() => setFocusedOptionIndex(index)}\n >\n {option.actionText}\n </CustomSelectOption>\n );\n }\n return (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderOption(\n {\n id: dropdownItemId,\n disabled: option.disabled,\n hovered: focusedOption\n ? getOptionValue(option) === getOptionValue(focusedOption)\n : false,\n children: option.label,\n selected: !!value.find(\n (selectedOption: Option) =>\n getOptionValue(selectedOption) === getOptionValue(option),\n ),\n getRootRef(node) {\n if (node) {\n chipsSelectOptions[index] = node;\n }\n },\n onMouseDown(event: React.MouseEvent<HTMLDivElement>) {\n if (option.disabled) {\n return;\n }\n if (onChangeStart) {\n onChangeStart(event, option);\n }\n\n if (!event.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n clearInput();\n }\n },\n onMouseEnter() {\n setFocusedOptionIndex(index);\n },\n },\n option,\n )}\n </React.Fragment>\n );\n })}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalOnClickOutside","Keys","defaultFilterFn","ChipsInputBase","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","renderChipDefault","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Footnote","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","isCreateNewOptionPreset","isEmptyOptionPreset","isNotServicePreset","renderOptionDefault","useChipsSelect","styles","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","ChipsSelect","id","labelledbyId","getRootRef","className","status","icon","dropdownIconProp","onChangeStart","optionsProp","placement","placementProp","closeAfterSelect","selectedBehavior","emptyText","creatable","fetching","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","filterFn","dropdownTestId","onClose","onOpen","overscrollBehavior","getRef","value","valueProp","defaultValue","inputValue","inputValueProp","defaultInputValue","readOnly","getOptionValue","getOptionLabel","getNewOptionData","renderChip","renderOption","onChange","onFocus","onFocusProp","onInputChange","onInputChangeProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","dropdownOffsetDistance","allowClearButton","clearButtonTestId","restProps","addOptionFromInput","addOption","removeOption","clearOptions","inputRef","inputRefHook","clearInput","opened","setOpened","focusedOption","focusedOptionIndex","setFocusedOption","setFocusedOptionIndex","rootRef","dropdownVerticalPlacement","setDropdownVerticalPlacement","useState","dropdownId","useId","dropdownCurrentItemId","undefined","dropdownScrollBoxRef","useRef","handleFocus","event","handleBlur","defaultPrevented","preventDefault","chipsSelectOptions","current","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","beforeIndex","handleKeyDown","key","ARROW_UP","ARROW_DOWN","ENTER","foundOption","ESCAPE","TAB","useEffect","foundFocusedOptionIndex","onDropdownPlacementChange","useCallback","startsWith","onDropdownMouseLeave","handleClickOutside","openedClassNames","useMemo","includes","clearButtonShown","after","onAddChipOption","onRemoveChipOption","onClear","role","aria-expanded","aria-autocomplete","aria-controls","aria-activedescendant","aria-haspopup","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","offsetDistance","aria-labelledby","map","dropdownItemId","placeholder","hovered","onMouseDown","onMouseEnter","actionText","Fragment","children","label","selected","find","selectedOption","node"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,IAAI,QAAQ,0BAA0B;AAE/C,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,cAAc,QAAQ,mCAAmC;AAClE,SACEC,uBAAuB,EACvBC,qBAAqB,EACrBC,qBAAqB,EACrBC,iBAAiB,QACZ,8BAA8B;AAErC,SACEC,oBAAoB,QAEf,+CAA+C;AACtD,SACEC,kBAAkB,QAEb,2CAA2C;AAClD,SAASC,YAAY,QAAQ,+BAA+B;AAE5D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SACEC,kBAAkB,EAClBC,yBAAyB,EACzBC,iBAAiB,EACjBC,iBAAiB,EACjBC,uBAAuB,EACvBC,mBAAmB,EACnBC,kBAAkB,EAClBC,mBAAmB,QACd,cAAc;AAErB,SAASC,cAAc,QAAkC,mBAAmB;AAC5E,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,iBAAiB,CACrBC,UAAkC,EAAE,EACpCC,aAAa,CAAC,CAAC;IAEf,IAAIA,cAAcD,QAAQE,MAAM,GAAG,GAAG;QACpC,OAAO,CAAC;IACV;IACA,OAAOF,QAAQG,SAAS,CACtB,CAACC,QAAQC,IAAMA,IAAIJ,cAAe,CAAA,CAACN,mBAAmBS,WAAW,CAACA,OAAOE,QAAQ,AAAD;AAEpF;AAEA,MAAMC,kBAAkB,CACtBP,UAAkC,EAAE,EACpCQ,WAAmBR,QAAQE,MAAM;IAEjC,IAAIO,SAAS,CAAC;IACd,IAAID,YAAY,GAAG;QACjB,OAAOC;IACT;IACA,IAAK,IAAIJ,IAAIG,WAAW,GAAGH,KAAK,GAAGA,IAAK;QACtC,IAAID,SAASJ,OAAO,CAACK,EAAE;QAEvB,IAAI,CAACV,mBAAmBS,WAAW,CAACA,OAAOE,QAAQ,EAAE;YACnDG,SAASJ;YACT;QACF;IACF;IACA,OAAOI;AACT;AA6DA;;CAEC,GACD,OAAO,MAAMC,cAAc,CAA4B,EACrD,iBAAiB;AACjBC,IAAIC,YAAY,EAChBC,UAAU,EACVC,SAAS,EACTC,SAAS,SAAS,EAClBC,MAAMC,gBAAgB,EACtBC,aAAa,EAEb,4BAA4B;AAC5BlB,SAASmB,WAAW,EACpBC,WAAWC,gBAAgB,QAAQ,EACnCC,mBAAmB,IAAI,EACvBC,mBAAmBjC,yBAAyB,EAC5CkC,YAAYnC,kBAAkB,EAC9BoC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,iBAAiB,EACjBC,mBAAmB,EACnBC,cAAc,KAAK,EACnBC,WAAWnD,eAAe,EAC1BoD,cAAc,EACdC,OAAO,EACPC,MAAM,EACNC,kBAAkB,EAElB,kBAAkB;AAClBC,MAAM,EACNC,OAAOC,SAAS,EAChBC,YAAY,EACZC,YAAYC,cAAc,EAC1BC,iBAAiB,EACjBnC,QAAQ,EACRoC,QAAQ,EACRC,iBAAiB5D,qBAAqB,EACtC6D,iBAAiB9D,qBAAqB,EACtC+D,mBAAmBhE,uBAAuB,EAC1CiE,aAAa9D,iBAAiB,EAC9B+D,eAAenD,mBAAmB,EAClCoD,QAAQ,EACRC,SAASC,WAAW,EACpBC,eAAeC,iBAAiB,EAChCC,QAAQC,UAAU,EAClBC,WAAWC,aAAa,EACxBC,yBAAyB,CAAC,EAC1BC,gBAAgB,EAChBC,iBAAiB,EACjB,GAAGC,WACsB;IACzB,MAAM,EACJ,4BAA4B;IAC5B,SAAS;IACTxB,KAAK,EACLyB,kBAAkB,EAClBC,SAAS,EACTC,YAAY,EACZC,YAAY,EACZ,QAAQ;IACRC,UAAUC,YAAY,EACtB3B,UAAU,EACV4B,UAAU,EACVhB,aAAa,EAEb,sCAAsC;IACtCnD,OAAO,EACPoE,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,kBAAkB,EAClBC,gBAAgB,EAChBC,qBAAqB,EACtB,GAAG5E,eAAe;QACjB,SAAS;QACTuC,OAAOC;QACPC;QACAU;QACAL;QACAC;QACAC;QAEA,QAAQ;QACRN,YAAYC;QACZC;QACAU,eAAeC;QAEf,WAAW;QACXpD,SAASmB;QACTK;QACAC;QACAK;QACAP;QACAS;QACAC;QAEA,QAAQ;QACR3B;IACF;IAEA,4BAA4B;IAC5B,MAAMoE,UAAUlG,aAAaqC;IAC7B,MAAMoD,WAAWzF,aAAa2D,QAAQ+B;IAEtC,sCAAsC;IACtC,MAAM,CAACS,2BAA2BC,6BAA6B,GAAGtG,MAAMuG,QAAQ,CAE9ExD;IACF,MAAMyD,aAAaxG,MAAMyG,KAAK;IAC9B,MAAMC,wBACJT,uBAAuB,OAAO,CAAC,EAAEO,WAAW,CAAC,EAAEP,mBAAmB,CAAC,GAAGU;IACxE,MAAMC,uBAAuB5G,MAAM6G,MAAM,CAAiB;IAE1D,MAAMC,cAAc,CAACC;QACnB,IAAInC,aAAa;YACfA,YAAYmC;QACd;QAEA,IAAI,CAAC3C,UAAU;YACb2B,UAAU;YACVI,sBAAsB;QACxB;IACF;IAEA,MAAMa,aAAa,CAACD;QAClB,IAAI/B,YAAY;YACdA,WAAW+B;QACb;QAEA,iEAAiE;QACjE,IAAI,CAAC3C,YAAY,CAAC2C,MAAME,gBAAgB,IAAI,CAAC9D,WAAW;YACtD4D,MAAMG,cAAc;QACtB;IACF;IAEA,MAAMC,qBAAqBnH,MAAM6G,MAAM,CAAgB,EAAE,EAAEO,OAAO;IAElE,MAAMC,kBAAkB,CAACC,OAAeC,SAAS,KAAK;QACpD,MAAMC,WAAWZ,qBAAqBQ,OAAO;QAC7C,MAAMK,OAAON,kBAAkB,CAACG,MAAM;QAEtC,6EAA6E,GAC7E,IAAI,CAACG,QAAQ,CAACD,UAAU;YACtB;QACF;QAEA,MAAME,iBAAiBF,SAASG,YAAY;QAC5C,MAAMC,YAAYJ,SAASI,SAAS;QACpC,MAAMC,UAAUJ,KAAKK,SAAS;QAC9B,MAAMC,aAAaN,KAAKE,YAAY;QAEpC,6DAA6D,GAC7D,IAAIJ,QAAQ;YACVC,SAASI,SAAS,GAAGC,UAAUH,iBAAiB,IAAIK,aAAa;QACnE,OAAO,IAAIF,UAAUE,aAAaL,iBAAiBE,WAAW;YAC5DJ,SAASI,SAAS,GAAGC,UAAUH,iBAAiBK;QAClD,OAAO,IAAIF,UAAUD,WAAW;YAC9BJ,SAASI,SAAS,GAAGC;QACvB;IACF;IAEA,MAAMG,qBAAqB,CAACV,OAAeW;QACzC,IAAIX,UAAUW,UAAU;YACtB,6DAA6D,GAC7D;QACF;QAEA,MAAMnG,SAASJ,OAAO,CAAC4F,MAAM;QAE7B,IAAIjG,mBAAmBS,WAAWA,OAAOE,QAAQ,EAAE;YACjD;QACF;QAEAqF,gBAAgBC;QAChBnB,sBAAsBmB;IACxB;IAEA,MAAMY,cAAc,CAACC,WAA0BC;QAC7C,IAAId,QAAQa,cAAc,OAAO,CAAC,IAAIA;QAEtC,IAAIC,SAASnH,mBAAmB;YAC9B,MAAMkH,YAAY1G,eAAeC,SAAS4F;YAC1CA,QAAQa,cAAc,CAAC,IAAI1G,eAAeC,WAAWyG,WAAW,kDAAkD;QACpH,OAAO,IAAIC,SAASlH,mBAAmB;YACrC,MAAMmH,cAAcpG,gBAAgBP,SAAS4F;YAC7CA,QAAQe,gBAAgB,CAAC,IAAIpG,gBAAgBP,WAAW2G,aAAa,0DAA0D;QACjI;QAEAL,mBAAmBV,OAAOrB;IAC5B;IAEA,MAAMqC,gBAAgB,CAACvB;QACrB,IAAI7B,eAAe;YACjBA,cAAc6B;QAChB;QAEA,IAAIA,MAAME,gBAAgB,IAAI7C,UAAU;YACtC;QACF;QAEA,OAAQ2C,MAAMwB,GAAG;YACf,KAAKnI,KAAKoI,QAAQ;YAClB,KAAKpI,KAAKqI,UAAU;gBAClB1B,MAAMG,cAAc;gBAEpB,IAAI,CAACpB,QAAQ;oBACXC,UAAU;oBACVmC,YAAY,MAAMjH;gBACpB,OAAO;oBACLiH,YACEjC,oBACAc,MAAMwB,GAAG,KAAKnI,KAAKoI,QAAQ,GAAGtH,oBAAoBD;gBAEtD;gBACA;YACF,KAAKb,KAAKsI,KAAK;gBAAE;oBACf,IAAI,CAAC5C,QAAQ;wBACX;oBACF;oBACA,IAAIG,sBAAsB,MAAM;wBAC9B,MAAM0C,cAAcjH,OAAO,CAACuE,mBAAmB;wBAC/C,IAAI0C,eAAetH,mBAAmBsH,cAAc;4BAClD5B,MAAMG,cAAc;4BAEpB,IAAItE,eAAe;gCACjBA,cAAcmE,OAAO4B;4BACvB;4BAEAnD,UAAUmD;4BACVxC,sBAAsB;4BACtBN;4BACA,IAAI7C,kBAAkB;gCACpB+C,UAAU;4BACZ;4BAEA;wBACF;oBACF;oBAEA,IAAI,CAAC5C,WAAW;wBACd4D,MAAMG,cAAc;oBACtB;oBACA;gBACF;YACA,KAAK9G,KAAKwI,MAAM;YAChB,KAAKxI,KAAKyI,GAAG;gBACX,IAAI/C,QAAQ;oBACVC,UAAU;gBACZ;QACJ;IACF;IAEA/F,MAAM8I,SAAS,CAAC;QACd,IAAI7C,uBAAuB,MAAM;YAC/BC,iBAAiB;QACnB,OAAO;YACL,MAAM6C,0BAA0BrH,OAAO,CAACuE,mBAAmB;YAE3D,IAAI8C,2BAA2B1H,mBAAmB0H,0BAA0B;gBAC1E7C,iBAAiB6C;YACnB;QACF;IACF,GAAG;QAACrH;QAASuE;QAAoBC;KAAiB;IAElD,MAAM8C,4BAA4BhJ,MAAMiJ,WAAW,CAAC,CAACnG;QACnD,0BAA0B,GAC1B,IAAIA,UAAUoG,UAAU,CAAC,QAAQ;YAC/B5C,6BAA6B;QAC/B,OAAO,IAAIxD,UAAUoG,UAAU,CAAC,WAAW;YACzC5C,6BAA6B;QAC/B;IACF,GAAG,EAAE;IAEL,MAAM6C,uBAAuBnJ,MAAMiJ,WAAW,CAAC;QAC7C9C,sBAAsB;IACxB,GAAG;QAACA;KAAsB;IAE1B,MAAMiD,qBAAqBpJ,MAAMiJ,WAAW,CAAC;QAC3ClD,UAAU;IACZ,GAAG;QAACA;KAAU;IAEd5F,wBACEiJ,oBACAtD,SAASM,UAAU,MACnBN,SAASc,uBAAuB;IAGlC,MAAMyC,mBAAmBrJ,MAAMsJ,OAAO,CACpC,IACE,AAACxD,UACCX,2BAA2B,KAC1BkB,CAAAA,2BAA2BkD,SAAS,SACjC/H,MAAM,CAAC,sBAAsB,GAC7BA,MAAM,CAAC,wBAAwB,AAAD,KACpCmF,WACF;QAACxB;QAAwBW;QAAQO;KAA0B;IAG7D,MAAMmD,mBAAmBpE,oBAAqB,CAAA,CAAC,CAACtB,MAAMlC,MAAM,IAAI,CAAC,CAACqC,WAAWrC,MAAM,AAAD;IAElF,qBACE;;0BACE,KAACtB;gBACE,GAAGgF,SAAS;gBACbtD,UAAUA;gBACVoC,UAAUA;gBACVoF,kBAAkBA;gBAClBnE,mBAAmBA;gBACnB,iBAAiB;gBACjBhD,IAAIC;gBACJC,YAAY6D;gBACZ5D,WAAWvC,WAAWuB,MAAM,CAAC,cAAc,EAAE6H,kBAAkB7G;gBAC/DC,QAAQA;gBACRgH,OACE9G,kCACE,KAAC9B;oBACCiF,QAAQA;oBACRtD,WAAWgH,mBAAmBhI,MAAM,CAAC,6BAA6B,GAAGmF;;gBAI3E,SAAS;gBACT7C,OAAOA;gBACP4F,iBAAiBnE;gBACjBoE,oBAAoBlE;gBACpBjB,YAAYA;gBACZoF,SAASlE;gBACT,QAAQ;gBACR7B,QAAQ8B;gBACR1B,YAAYA;gBACZY,eAAeA;gBACfF,SAASmC;gBACT/B,QAAQiC;gBACR/B,WAAWqD;gBACX,OAAO;gBACPuB,MAAK;gBACLC,iBAAehE;gBACfiE,qBAAkB;gBAClBC,iBAAelE,SAASU,aAAaG;gBACrCsD,yBAAuBnE,SAASY,wBAAwBC;gBACxDuD,iBAAc;;YAEfpE,wBACC,KAACnF;gBACCwJ,eAAa1G;gBACb2G,WAAWhE;gBACXtD,WAAWC;gBACXsH,cAAczD;gBACd0D,mBAAmBtB;gBACnBuB,cAAcpB;gBACd/F,UAAUA;gBACVoH,WAAWnH;gBACXoH,aAAanH;gBACbC,aAAaA;gBACbmH,gBAAgBvF;gBAChBvB,oBAAoBA;gBACpB,OAAO;gBACPvB,IAAImE;gBACJqD,MAAK;gBACLc,mBAAiBrI;0BAEhBZ,QAAQkJ,GAAG,CAAC,CAAC9I,QAAQwF;oBACpB,MAAMuD,iBAAiB,CAAC,EAAErE,WAAW,CAAC,EAAEc,MAAM,CAAC;oBAE/C,IAAIlG,oBAAoBU,SAAS;wBAC/B,qBACE,KAAChB;4BAA0B0B,WAAWhB,MAAM,CAAC,qBAAqB;sCAC/DM,OAAOgJ,WAAW;2BADP;oBAIlB;oBACA,IAAI3J,wBAAwBW,SAAS;wBACnC,qBACE,KAAClB;4BAECyB,IAAIwI;4BACJE,SAAS9E,uBAAuBqB;4BAChC0D,aAAa,IAAMzF,mBAAmBtB;4BACtCgH,cAAc,IAAM9E,sBAAsBmB;sCAEzCxF,OAAOoJ,UAAU;2BANd;oBASV;oBACA,qBACE,KAAClL,MAAMmL,QAAQ;kCACZ1G,aACC;4BACEpC,IAAIwI;4BACJ7I,UAAUF,OAAOE,QAAQ;4BACzB+I,SAAS/E,gBACL3B,eAAevC,YAAYuC,eAAe2B,iBAC1C;4BACJoF,UAAUtJ,OAAOuJ,KAAK;4BACtBC,UAAU,CAAC,CAACxH,MAAMyH,IAAI,CACpB,CAACC,iBACCnH,eAAemH,oBAAoBnH,eAAevC;4BAEtDS,YAAWkJ,IAAI;gCACb,IAAIA,MAAM;oCACRtE,kBAAkB,CAACG,MAAM,GAAGmE;gCAC9B;4BACF;4BACAT,aAAYjE,KAAuC;gCACjD,IAAIjF,OAAOE,QAAQ,EAAE;oCACnB;gCACF;gCACA,IAAIY,eAAe;oCACjBA,cAAcmE,OAAOjF;gCACvB;gCAEA,IAAI,CAACiF,MAAME,gBAAgB,EAAE;oCAC3BjE,oBAAoB+C,UAAU;oCAC9BP,UAAU1D;oCACV+D;gCACF;4BACF;4BACAoF;gCACE9E,sBAAsBmB;4BACxB;wBACF,GACAxF;uBApCiB,CAAC,EAAE,OAAOA,OAAOgC,KAAK,CAAC,CAAC,EAAEhC,OAAOgC,KAAK,CAAC,CAAC;gBAwCjE;;;;AAKV,EAAE"}
1
+ {"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { Keys } from '../../lib/accessibility';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n renderChipDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport {\n CustomSelectDropdown,\n CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n type CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n DEFAULT_EMPTY_TEXT,\n DEFAULT_SELECTED_BEHAVIOR,\n FOCUS_ACTION_NEXT,\n FOCUS_ACTION_PREV,\n isCreateNewOptionPreset,\n isEmptyOptionPreset,\n isNotServicePreset,\n renderOptionDefault,\n} from './constants';\nimport type { FocusActionType, OptionPreset } from './types';\nimport { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';\nimport styles from './ChipsSelect.module.css';\n\nconst findIndexAfter = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n startIndex = -1,\n) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex(\n (option, i) => i > startIndex && (!isNotServicePreset(option) || !option.disabled),\n );\n};\n\nconst findIndexBefore = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n endIndex: number = options.length,\n) => {\n let result = -1;\n if (endIndex <= 0) {\n return result;\n }\n for (let i = endIndex - 1; i >= 0; i--) {\n let option = options[i];\n\n if (!isNotServicePreset(option) || !option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nexport interface ChipsSelectProps<O extends ChipOption>\n extends ChipsInputBaseProps<O>,\n UseChipsSelectProps<O>,\n Pick<FormFieldProps, 'status' | 'mode' | 'before'>,\n Pick<\n CustomSelectDropdownProps,\n 'overscrollBehavior' | 'autoHideScrollbar' | 'autoHideScrollbarDelay'\n > {\n placement?: 'top' | 'bottom';\n /**\n * Отрисовка Spinner вместо списка опций в выпадающем списке\n */\n fetching?: boolean;\n /**\n * Закрытие выпадающего списка после выбора элемента\n */\n closeAfterSelect?: boolean;\n /**\n * Ширина раскрывающегося списка зависит от контента\n */\n dropdownAutoWidth?: boolean;\n /**\n * Принудительно использовать портал.\n */\n forceDropdownPortal?: boolean;\n /**\n * Передача `data-testid`.\n */\n dropdownTestId?: string;\n /**\n * Иконка раскрывающегося списка\n */\n icon?: React.ReactNode;\n /**\n * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)\n */\n addOnBlur?: boolean;\n /**\n * Отключает максимальную высоту по умолчанию\n */\n noMaxHeight?: boolean;\n\n renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;\n /**\n * Событие срабатывающее перед onChange\n */\n onChangeStart?: (event: React.MouseEvent | React.KeyboardEvent, option: O) => void;\n\n /**\n * Отступ от выпадающего списка\n */\n dropdownOffsetDistance?: number;\n\n /**\n * Если `true`, то справа будет отображаться кнопка для очистки значения\n */\n allowClearButton?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>({\n // FormFieldProps\n id: labelledbyId,\n getRootRef,\n className,\n status = 'default',\n icon: dropdownIconProp,\n onChangeStart,\n\n // CustomSelectDropdownProps\n options: optionsProp,\n placement: placementProp = 'bottom',\n closeAfterSelect = true,\n selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n emptyText = DEFAULT_EMPTY_TEXT,\n creatable = false,\n fetching = false,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight = false,\n filterFn = defaultFilterFn,\n dropdownTestId,\n onClose,\n onOpen,\n overscrollBehavior,\n\n // ChipsInputProps\n getRef,\n value: valueProp,\n defaultValue,\n inputValue: inputValueProp,\n defaultInputValue,\n disabled,\n readOnly,\n getOptionValue = getOptionValueDefault,\n getOptionLabel = getOptionLabelDefault,\n getNewOptionData = getNewOptionDataDefault,\n renderChip = renderChipDefault,\n renderOption = renderOptionDefault,\n onChange,\n onFocus: onFocusProp,\n onInputChange: onInputChangeProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n dropdownOffsetDistance = 0,\n allowClearButton,\n clearButtonTestId,\n ...restProps\n}: ChipsSelectProps<Option>): React.ReactNode => {\n const {\n // Связано с ChipsInputProps\n // option\n value,\n addOptionFromInput,\n addOption,\n removeOption,\n clearOptions,\n // input\n inputRef: inputRefHook,\n inputValue,\n clearInput,\n onInputChange,\n\n // Связано с CustomSelectDropdownProps\n options,\n opened,\n setOpened,\n focusedOption,\n focusedOptionIndex,\n setFocusedOption,\n setFocusedOptionIndex,\n } = useChipsSelect({\n // option\n value: valueProp,\n defaultValue,\n onChange,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue,\n onInputChange: onInputChangeProp,\n\n // dropdown\n options: optionsProp,\n emptyText,\n creatable,\n filterFn,\n selectedBehavior,\n onClose,\n onOpen,\n\n // other\n disabled,\n });\n\n // Связано с ChipsInputProps\n const rootRef = useExternRef(getRootRef);\n const inputRef = useExternRef(getRef, inputRefHook);\n\n // Связано с CustomSelectDropdownProps\n const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<\n 'top' | 'bottom'\n >(placementProp);\n\n const onDropdownPlacementChange = React.useCallback((placement: Placement) => {\n if (placement.startsWith('top')) {\n setDropdownVerticalPlacement('top');\n } else if (placement.startsWith('bottom')) {\n setDropdownVerticalPlacement('bottom');\n }\n }, []);\n\n const dropdownId = React.useId();\n const dropdownCurrentItemId =\n focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;\n const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onFocusProp) {\n onFocusProp(event);\n }\n\n if (!readOnly) {\n setOpened(true);\n setFocusedOptionIndex(null);\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlurProp) {\n onBlurProp(event);\n }\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!readOnly && !event.defaultPrevented && !creatable) {\n event.preventDefault();\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = dropdownScrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (!item || !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n /* istanbul ignore next: нет представления как воспроизвести */\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n };\n\n const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n if (index === oldIndex) {\n /* istanbul ignore next: нет представления как воспроизвести */\n return;\n }\n\n const option = options[index];\n\n if (isNotServicePreset(option) && option.disabled) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === FOCUS_ACTION_PREV) {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (onKeyDownProp) {\n onKeyDownProp(event);\n }\n\n if (event.defaultPrevented || readOnly) {\n return;\n }\n\n switch (event.key) {\n case Keys.ARROW_UP:\n case Keys.ARROW_DOWN:\n event.preventDefault();\n\n if (!opened) {\n setOpened(true);\n focusOption(null, FOCUS_ACTION_NEXT);\n } else {\n focusOption(\n focusedOptionIndex,\n event.key === Keys.ARROW_UP ? FOCUS_ACTION_PREV : FOCUS_ACTION_NEXT,\n );\n }\n break;\n case Keys.ENTER: {\n if (!opened) {\n break;\n }\n if (focusedOptionIndex != null) {\n const foundOption = options[focusedOptionIndex];\n if (foundOption && isNotServicePreset(foundOption)) {\n event.preventDefault();\n\n if (onChangeStart) {\n onChangeStart(event, foundOption);\n }\n\n addOption(foundOption);\n setFocusedOptionIndex(null);\n clearInput();\n if (closeAfterSelect) {\n setOpened(false);\n }\n\n break;\n }\n }\n\n if (!creatable) {\n event.preventDefault();\n }\n break;\n }\n case Keys.ESCAPE:\n case Keys.TAB:\n if (opened) {\n setOpened(false);\n }\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex === null) {\n setFocusedOption(null);\n } else {\n const foundFocusedOptionIndex = options[focusedOptionIndex];\n\n if (foundFocusedOptionIndex && isNotServicePreset(foundFocusedOptionIndex)) {\n setFocusedOption(foundFocusedOptionIndex);\n }\n }\n }, [options, focusedOptionIndex, setFocusedOption]);\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const handleClickOutside = React.useCallback(() => {\n setOpened(false);\n }, [setOpened]);\n\n useGlobalOnClickOutside(\n handleClickOutside,\n opened ? rootRef : null,\n opened ? dropdownScrollBoxRef : null,\n );\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (dropdownVerticalPlacement.includes('top')\n ? styles['ChipsSelect--pop-up']\n : styles['ChipsSelect--pop-down'])) ||\n undefined,\n [dropdownOffsetDistance, opened, dropdownVerticalPlacement],\n );\n\n const clearButtonShown = allowClearButton && (!!value.length || !!inputValue.length);\n\n return (\n <>\n <ChipsInputBase\n {...restProps}\n disabled={disabled}\n readOnly={readOnly}\n clearButtonShown={clearButtonShown}\n clearButtonTestId={clearButtonTestId}\n // FormFieldProps\n id={labelledbyId}\n getRootRef={rootRef}\n className={classNames(styles['ChipsSelect'], openedClassNames, className)}\n status={status}\n after={\n dropdownIconProp || (\n <DropdownIcon\n opened={opened}\n className={clearButtonShown ? styles['ChipsSelect__dropdown-icon'] : undefined}\n />\n )\n }\n // option\n value={value}\n onAddChipOption={addOptionFromInput}\n onRemoveChipOption={removeOption}\n renderChip={renderChip}\n onClear={clearOptions}\n // input\n getRef={inputRef}\n inputValue={inputValue}\n onInputChange={onInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n // a11y\n role=\"combobox\"\n aria-expanded={opened}\n aria-autocomplete=\"list\"\n aria-controls={opened ? dropdownId : undefined}\n aria-activedescendant={opened ? dropdownCurrentItemId : undefined}\n aria-haspopup=\"listbox\"\n />\n {opened && (\n <CustomSelectDropdown\n data-testid={dropdownTestId}\n targetRef={rootRef}\n placement={dropdownVerticalPlacement}\n scrollBoxRef={dropdownScrollBoxRef}\n onPlacementChange={onDropdownPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n autoWidth={dropdownAutoWidth}\n forcePortal={forceDropdownPortal}\n noMaxHeight={noMaxHeight}\n offsetDistance={dropdownOffsetDistance}\n overscrollBehavior={overscrollBehavior}\n // a11y\n id={dropdownId}\n role=\"listbox\"\n aria-labelledby={labelledbyId}\n >\n {options.map((option, index) => {\n const dropdownItemId = `${dropdownId}-${index}`;\n\n if (isEmptyOptionPreset(option)) {\n return (\n <Footnote key=\"empty-text\" className={styles['ChipsSelect__empty']}>\n {option.placeholder}\n </Footnote>\n );\n }\n if (isCreateNewOptionPreset(option)) {\n return (\n <CustomSelectOption\n key=\"create-new-option\"\n id={dropdownItemId}\n hovered={focusedOptionIndex === index}\n onMouseDown={() => addOptionFromInput(inputValue)}\n onMouseEnter={() => setFocusedOptionIndex(index)}\n >\n {option.actionText}\n </CustomSelectOption>\n );\n }\n return (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderOption(\n {\n id: dropdownItemId,\n disabled: option.disabled,\n hovered: focusedOption\n ? getOptionValue(option) === getOptionValue(focusedOption)\n : false,\n children: option.label,\n selected: !!value.find(\n (selectedOption: Option) =>\n getOptionValue(selectedOption) === getOptionValue(option),\n ),\n getRootRef(node) {\n if (node) {\n chipsSelectOptions[index] = node;\n }\n },\n onMouseDown(event: React.MouseEvent<HTMLDivElement>) {\n if (option.disabled) {\n return;\n }\n if (onChangeStart) {\n onChangeStart(event, option);\n }\n\n if (!event.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n clearInput();\n }\n },\n onMouseEnter() {\n setFocusedOptionIndex(index);\n },\n },\n option,\n )}\n </React.Fragment>\n );\n })}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalOnClickOutside","Keys","defaultFilterFn","ChipsInputBase","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","renderChipDefault","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Footnote","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","isCreateNewOptionPreset","isEmptyOptionPreset","isNotServicePreset","renderOptionDefault","useChipsSelect","styles","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","ChipsSelect","id","labelledbyId","getRootRef","className","status","icon","dropdownIconProp","onChangeStart","optionsProp","placement","placementProp","closeAfterSelect","selectedBehavior","emptyText","creatable","fetching","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","filterFn","dropdownTestId","onClose","onOpen","overscrollBehavior","getRef","value","valueProp","defaultValue","inputValue","inputValueProp","defaultInputValue","readOnly","getOptionValue","getOptionLabel","getNewOptionData","renderChip","renderOption","onChange","onFocus","onFocusProp","onInputChange","onInputChangeProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","dropdownOffsetDistance","allowClearButton","clearButtonTestId","restProps","addOptionFromInput","addOption","removeOption","clearOptions","inputRef","inputRefHook","clearInput","opened","setOpened","focusedOption","focusedOptionIndex","setFocusedOption","setFocusedOptionIndex","rootRef","dropdownVerticalPlacement","setDropdownVerticalPlacement","useState","onDropdownPlacementChange","useCallback","startsWith","dropdownId","useId","dropdownCurrentItemId","undefined","dropdownScrollBoxRef","useRef","handleFocus","event","handleBlur","defaultPrevented","preventDefault","chipsSelectOptions","current","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","beforeIndex","handleKeyDown","key","ARROW_UP","ARROW_DOWN","ENTER","foundOption","ESCAPE","TAB","useEffect","foundFocusedOptionIndex","onDropdownMouseLeave","handleClickOutside","openedClassNames","useMemo","includes","clearButtonShown","after","onAddChipOption","onRemoveChipOption","onClear","role","aria-expanded","aria-autocomplete","aria-controls","aria-activedescendant","aria-haspopup","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","offsetDistance","aria-labelledby","map","dropdownItemId","placeholder","hovered","onMouseDown","onMouseEnter","actionText","Fragment","children","label","selected","find","selectedOption","node"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,IAAI,QAAQ,0BAA0B;AAE/C,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,cAAc,QAAQ,mCAAmC;AAClE,SACEC,uBAAuB,EACvBC,qBAAqB,EACrBC,qBAAqB,EACrBC,iBAAiB,QACZ,8BAA8B;AAErC,SACEC,oBAAoB,QAEf,+CAA+C;AACtD,SACEC,kBAAkB,QAEb,2CAA2C;AAClD,SAASC,YAAY,QAAQ,+BAA+B;AAE5D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SACEC,kBAAkB,EAClBC,yBAAyB,EACzBC,iBAAiB,EACjBC,iBAAiB,EACjBC,uBAAuB,EACvBC,mBAAmB,EACnBC,kBAAkB,EAClBC,mBAAmB,QACd,cAAc;AAErB,SAASC,cAAc,QAAkC,mBAAmB;AAC5E,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,iBAAiB,CACrBC,UAAkC,EAAE,EACpCC,aAAa,CAAC,CAAC;IAEf,IAAIA,cAAcD,QAAQE,MAAM,GAAG,GAAG;QACpC,OAAO,CAAC;IACV;IACA,OAAOF,QAAQG,SAAS,CACtB,CAACC,QAAQC,IAAMA,IAAIJ,cAAe,CAAA,CAACN,mBAAmBS,WAAW,CAACA,OAAOE,QAAQ,AAAD;AAEpF;AAEA,MAAMC,kBAAkB,CACtBP,UAAkC,EAAE,EACpCQ,WAAmBR,QAAQE,MAAM;IAEjC,IAAIO,SAAS,CAAC;IACd,IAAID,YAAY,GAAG;QACjB,OAAOC;IACT;IACA,IAAK,IAAIJ,IAAIG,WAAW,GAAGH,KAAK,GAAGA,IAAK;QACtC,IAAID,SAASJ,OAAO,CAACK,EAAE;QAEvB,IAAI,CAACV,mBAAmBS,WAAW,CAACA,OAAOE,QAAQ,EAAE;YACnDG,SAASJ;YACT;QACF;IACF;IACA,OAAOI;AACT;AA6DA;;CAEC,GACD,OAAO,MAAMC,cAAc,CAA4B,EACrD,iBAAiB;AACjBC,IAAIC,YAAY,EAChBC,UAAU,EACVC,SAAS,EACTC,SAAS,SAAS,EAClBC,MAAMC,gBAAgB,EACtBC,aAAa,EAEb,4BAA4B;AAC5BlB,SAASmB,WAAW,EACpBC,WAAWC,gBAAgB,QAAQ,EACnCC,mBAAmB,IAAI,EACvBC,mBAAmBjC,yBAAyB,EAC5CkC,YAAYnC,kBAAkB,EAC9BoC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,iBAAiB,EACjBC,mBAAmB,EACnBC,cAAc,KAAK,EACnBC,WAAWnD,eAAe,EAC1BoD,cAAc,EACdC,OAAO,EACPC,MAAM,EACNC,kBAAkB,EAElB,kBAAkB;AAClBC,MAAM,EACNC,OAAOC,SAAS,EAChBC,YAAY,EACZC,YAAYC,cAAc,EAC1BC,iBAAiB,EACjBnC,QAAQ,EACRoC,QAAQ,EACRC,iBAAiB5D,qBAAqB,EACtC6D,iBAAiB9D,qBAAqB,EACtC+D,mBAAmBhE,uBAAuB,EAC1CiE,aAAa9D,iBAAiB,EAC9B+D,eAAenD,mBAAmB,EAClCoD,QAAQ,EACRC,SAASC,WAAW,EACpBC,eAAeC,iBAAiB,EAChCC,QAAQC,UAAU,EAClBC,WAAWC,aAAa,EACxBC,yBAAyB,CAAC,EAC1BC,gBAAgB,EAChBC,iBAAiB,EACjB,GAAGC,WACsB;IACzB,MAAM,EACJ,4BAA4B;IAC5B,SAAS;IACTxB,KAAK,EACLyB,kBAAkB,EAClBC,SAAS,EACTC,YAAY,EACZC,YAAY,EACZ,QAAQ;IACRC,UAAUC,YAAY,EACtB3B,UAAU,EACV4B,UAAU,EACVhB,aAAa,EAEb,sCAAsC;IACtCnD,OAAO,EACPoE,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,kBAAkB,EAClBC,gBAAgB,EAChBC,qBAAqB,EACtB,GAAG5E,eAAe;QACjB,SAAS;QACTuC,OAAOC;QACPC;QACAU;QACAL;QACAC;QACAC;QAEA,QAAQ;QACRN,YAAYC;QACZC;QACAU,eAAeC;QAEf,WAAW;QACXpD,SAASmB;QACTK;QACAC;QACAK;QACAP;QACAS;QACAC;QAEA,QAAQ;QACR3B;IACF;IAEA,4BAA4B;IAC5B,MAAMoE,UAAUlG,aAAaqC;IAC7B,MAAMoD,WAAWzF,aAAa2D,QAAQ+B;IAEtC,sCAAsC;IACtC,MAAM,CAACS,2BAA2BC,6BAA6B,GAAGtG,MAAMuG,QAAQ,CAE9ExD;IAEF,MAAMyD,4BAA4BxG,MAAMyG,WAAW,CAAC,CAAC3D;QACnD,IAAIA,UAAU4D,UAAU,CAAC,QAAQ;YAC/BJ,6BAA6B;QAC/B,OAAO,IAAIxD,UAAU4D,UAAU,CAAC,WAAW;YACzCJ,6BAA6B;QAC/B;IACF,GAAG,EAAE;IAEL,MAAMK,aAAa3G,MAAM4G,KAAK;IAC9B,MAAMC,wBACJZ,uBAAuB,OAAO,CAAC,EAAEU,WAAW,CAAC,EAAEV,mBAAmB,CAAC,GAAGa;IACxE,MAAMC,uBAAuB/G,MAAMgH,MAAM,CAAiB;IAE1D,MAAMC,cAAc,CAACC;QACnB,IAAItC,aAAa;YACfA,YAAYsC;QACd;QAEA,IAAI,CAAC9C,UAAU;YACb2B,UAAU;YACVI,sBAAsB;QACxB;IACF;IAEA,MAAMgB,aAAa,CAACD;QAClB,IAAIlC,YAAY;YACdA,WAAWkC;QACb;QAEA,iEAAiE;QACjE,IAAI,CAAC9C,YAAY,CAAC8C,MAAME,gBAAgB,IAAI,CAACjE,WAAW;YACtD+D,MAAMG,cAAc;QACtB;IACF;IAEA,MAAMC,qBAAqBtH,MAAMgH,MAAM,CAAgB,EAAE,EAAEO,OAAO;IAElE,MAAMC,kBAAkB,CAACC,OAAeC,SAAS,KAAK;QACpD,MAAMC,WAAWZ,qBAAqBQ,OAAO;QAC7C,MAAMK,OAAON,kBAAkB,CAACG,MAAM;QAEtC,6EAA6E,GAC7E,IAAI,CAACG,QAAQ,CAACD,UAAU;YACtB;QACF;QAEA,MAAME,iBAAiBF,SAASG,YAAY;QAC5C,MAAMC,YAAYJ,SAASI,SAAS;QACpC,MAAMC,UAAUJ,KAAKK,SAAS;QAC9B,MAAMC,aAAaN,KAAKE,YAAY;QAEpC,6DAA6D,GAC7D,IAAIJ,QAAQ;YACVC,SAASI,SAAS,GAAGC,UAAUH,iBAAiB,IAAIK,aAAa;QACnE,OAAO,IAAIF,UAAUE,aAAaL,iBAAiBE,WAAW;YAC5DJ,SAASI,SAAS,GAAGC,UAAUH,iBAAiBK;QAClD,OAAO,IAAIF,UAAUD,WAAW;YAC9BJ,SAASI,SAAS,GAAGC;QACvB;IACF;IAEA,MAAMG,qBAAqB,CAACV,OAAeW;QACzC,IAAIX,UAAUW,UAAU;YACtB,6DAA6D,GAC7D;QACF;QAEA,MAAMtG,SAASJ,OAAO,CAAC+F,MAAM;QAE7B,IAAIpG,mBAAmBS,WAAWA,OAAOE,QAAQ,EAAE;YACjD;QACF;QAEAwF,gBAAgBC;QAChBtB,sBAAsBsB;IACxB;IAEA,MAAMY,cAAc,CAACC,WAA0BC;QAC7C,IAAId,QAAQa,cAAc,OAAO,CAAC,IAAIA;QAEtC,IAAIC,SAAStH,mBAAmB;YAC9B,MAAMqH,YAAY7G,eAAeC,SAAS+F;YAC1CA,QAAQa,cAAc,CAAC,IAAI7G,eAAeC,WAAW4G,WAAW,kDAAkD;QACpH,OAAO,IAAIC,SAASrH,mBAAmB;YACrC,MAAMsH,cAAcvG,gBAAgBP,SAAS+F;YAC7CA,QAAQe,gBAAgB,CAAC,IAAIvG,gBAAgBP,WAAW8G,aAAa,0DAA0D;QACjI;QAEAL,mBAAmBV,OAAOxB;IAC5B;IAEA,MAAMwC,gBAAgB,CAACvB;QACrB,IAAIhC,eAAe;YACjBA,cAAcgC;QAChB;QAEA,IAAIA,MAAME,gBAAgB,IAAIhD,UAAU;YACtC;QACF;QAEA,OAAQ8C,MAAMwB,GAAG;YACf,KAAKtI,KAAKuI,QAAQ;YAClB,KAAKvI,KAAKwI,UAAU;gBAClB1B,MAAMG,cAAc;gBAEpB,IAAI,CAACvB,QAAQ;oBACXC,UAAU;oBACVsC,YAAY,MAAMpH;gBACpB,OAAO;oBACLoH,YACEpC,oBACAiB,MAAMwB,GAAG,KAAKtI,KAAKuI,QAAQ,GAAGzH,oBAAoBD;gBAEtD;gBACA;YACF,KAAKb,KAAKyI,KAAK;gBAAE;oBACf,IAAI,CAAC/C,QAAQ;wBACX;oBACF;oBACA,IAAIG,sBAAsB,MAAM;wBAC9B,MAAM6C,cAAcpH,OAAO,CAACuE,mBAAmB;wBAC/C,IAAI6C,eAAezH,mBAAmByH,cAAc;4BAClD5B,MAAMG,cAAc;4BAEpB,IAAIzE,eAAe;gCACjBA,cAAcsE,OAAO4B;4BACvB;4BAEAtD,UAAUsD;4BACV3C,sBAAsB;4BACtBN;4BACA,IAAI7C,kBAAkB;gCACpB+C,UAAU;4BACZ;4BAEA;wBACF;oBACF;oBAEA,IAAI,CAAC5C,WAAW;wBACd+D,MAAMG,cAAc;oBACtB;oBACA;gBACF;YACA,KAAKjH,KAAK2I,MAAM;YAChB,KAAK3I,KAAK4I,GAAG;gBACX,IAAIlD,QAAQ;oBACVC,UAAU;gBACZ;QACJ;IACF;IAEA/F,MAAMiJ,SAAS,CAAC;QACd,IAAIhD,uBAAuB,MAAM;YAC/BC,iBAAiB;QACnB,OAAO;YACL,MAAMgD,0BAA0BxH,OAAO,CAACuE,mBAAmB;YAE3D,IAAIiD,2BAA2B7H,mBAAmB6H,0BAA0B;gBAC1EhD,iBAAiBgD;YACnB;QACF;IACF,GAAG;QAACxH;QAASuE;QAAoBC;KAAiB;IAElD,MAAMiD,uBAAuBnJ,MAAMyG,WAAW,CAAC;QAC7CN,sBAAsB;IACxB,GAAG;QAACA;KAAsB;IAE1B,MAAMiD,qBAAqBpJ,MAAMyG,WAAW,CAAC;QAC3CV,UAAU;IACZ,GAAG;QAACA;KAAU;IAEd5F,wBACEiJ,oBACAtD,SAASM,UAAU,MACnBN,SAASiB,uBAAuB;IAGlC,MAAMsC,mBAAmBrJ,MAAMsJ,OAAO,CACpC,IACE,AAACxD,UACCX,2BAA2B,KAC1BkB,CAAAA,0BAA0BkD,QAAQ,CAAC,SAChC/H,MAAM,CAAC,sBAAsB,GAC7BA,MAAM,CAAC,wBAAwB,AAAD,KACpCsF,WACF;QAAC3B;QAAwBW;QAAQO;KAA0B;IAG7D,MAAMmD,mBAAmBpE,oBAAqB,CAAA,CAAC,CAACtB,MAAMlC,MAAM,IAAI,CAAC,CAACqC,WAAWrC,MAAM,AAAD;IAElF,qBACE;;0BACE,KAACtB;gBACE,GAAGgF,SAAS;gBACbtD,UAAUA;gBACVoC,UAAUA;gBACVoF,kBAAkBA;gBAClBnE,mBAAmBA;gBACnB,iBAAiB;gBACjBhD,IAAIC;gBACJC,YAAY6D;gBACZ5D,WAAWvC,WAAWuB,MAAM,CAAC,cAAc,EAAE6H,kBAAkB7G;gBAC/DC,QAAQA;gBACRgH,OACE9G,kCACE,KAAC9B;oBACCiF,QAAQA;oBACRtD,WAAWgH,mBAAmBhI,MAAM,CAAC,6BAA6B,GAAGsF;;gBAI3E,SAAS;gBACThD,OAAOA;gBACP4F,iBAAiBnE;gBACjBoE,oBAAoBlE;gBACpBjB,YAAYA;gBACZoF,SAASlE;gBACT,QAAQ;gBACR7B,QAAQ8B;gBACR1B,YAAYA;gBACZY,eAAeA;gBACfF,SAASsC;gBACTlC,QAAQoC;gBACRlC,WAAWwD;gBACX,OAAO;gBACPoB,MAAK;gBACLC,iBAAehE;gBACfiE,qBAAkB;gBAClBC,iBAAelE,SAASa,aAAaG;gBACrCmD,yBAAuBnE,SAASe,wBAAwBC;gBACxDoD,iBAAc;;YAEfpE,wBACC,KAACnF;gBACCwJ,eAAa1G;gBACb2G,WAAWhE;gBACXtD,WAAWuD;gBACXgE,cAActD;gBACduD,mBAAmB9D;gBACnB+D,cAAcpB;gBACd/F,UAAUA;gBACVoH,WAAWnH;gBACXoH,aAAanH;gBACbC,aAAaA;gBACbmH,gBAAgBvF;gBAChBvB,oBAAoBA;gBACpB,OAAO;gBACPvB,IAAIsE;gBACJkD,MAAK;gBACLc,mBAAiBrI;0BAEhBZ,QAAQkJ,GAAG,CAAC,CAAC9I,QAAQ2F;oBACpB,MAAMoD,iBAAiB,CAAC,EAAElE,WAAW,CAAC,EAAEc,MAAM,CAAC;oBAE/C,IAAIrG,oBAAoBU,SAAS;wBAC/B,qBACE,KAAChB;4BAA0B0B,WAAWhB,MAAM,CAAC,qBAAqB;sCAC/DM,OAAOgJ,WAAW;2BADP;oBAIlB;oBACA,IAAI3J,wBAAwBW,SAAS;wBACnC,qBACE,KAAClB;4BAECyB,IAAIwI;4BACJE,SAAS9E,uBAAuBwB;4BAChCuD,aAAa,IAAMzF,mBAAmBtB;4BACtCgH,cAAc,IAAM9E,sBAAsBsB;sCAEzC3F,OAAOoJ,UAAU;2BANd;oBASV;oBACA,qBACE,KAAClL,MAAMmL,QAAQ;kCACZ1G,aACC;4BACEpC,IAAIwI;4BACJ7I,UAAUF,OAAOE,QAAQ;4BACzB+I,SAAS/E,gBACL3B,eAAevC,YAAYuC,eAAe2B,iBAC1C;4BACJoF,UAAUtJ,OAAOuJ,KAAK;4BACtBC,UAAU,CAAC,CAACxH,MAAMyH,IAAI,CACpB,CAACC,iBACCnH,eAAemH,oBAAoBnH,eAAevC;4BAEtDS,YAAWkJ,IAAI;gCACb,IAAIA,MAAM;oCACRnE,kBAAkB,CAACG,MAAM,GAAGgE;gCAC9B;4BACF;4BACAT,aAAY9D,KAAuC;gCACjD,IAAIpF,OAAOE,QAAQ,EAAE;oCACnB;gCACF;gCACA,IAAIY,eAAe;oCACjBA,cAAcsE,OAAOpF;gCACvB;gCAEA,IAAI,CAACoF,MAAME,gBAAgB,EAAE;oCAC3BpE,oBAAoB+C,UAAU;oCAC9BP,UAAU1D;oCACV+D;gCACF;4BACF;4BACAoF;gCACE9E,sBAAsBsB;4BACxB;wBACF,GACA3F;uBApCiB,CAAC,EAAE,OAAOA,OAAOgC,KAAK,CAAC,CAAC,EAAEhC,OAAOgC,KAAK,CAAC,CAAC;gBAwCjE;;;;AAKV,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/Clickable.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,qBAAqB,EAEtB,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EAAiB,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACnF,OAAO,EAGL,UAAU,EAEX,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,WAAW,CAC7C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,qBAAqB,EACrB,UAAU;CAAG;AA0FjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,CAQnE;AA2CD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,wEAIxB,cAAc,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAqB5B,CAAC"}
1
+ {"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/Clickable.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,qBAAqB,EAEtB,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EAAiB,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACnF,OAAO,EAGL,UAAU,EAEX,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,WAAW,CAC7C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,qBAAqB,EACrB,UAAU;CAAG;AA0FjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,CAWnE;AA2CD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,wEAIxB,cAAc,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAqB5B,CAAC"}
@@ -54,7 +54,7 @@ import styles from './Clickable.module.css';
54
54
  /**
55
55
  * Проверяем, является ли компонент кликабельным
56
56
  */ export function checkClickable(props) {
57
- return (props.href !== undefined || props.onClick !== undefined || props.onClickCapture !== undefined || props.Component === 'label') && !props.disabled;
57
+ return (props.href !== undefined || props.onClick !== undefined || props.onClickCapture !== undefined || props.Component === 'a' || props.Component === 'button' || props.Component === 'label' || props.Component === 'input') && !props.disabled;
58
58
  }
59
59
  /**
60
60
  * Определяет правильный компонент и его свойства
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport {\n FocusVisibleModeProps,\n useFocusVisibleClassName,\n} from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { RootComponent, RootComponentProps } from '../RootComponent/RootComponent';\nimport {\n ClickableLockStateContext,\n DEFAULT_ACTIVE_EFFECT_DELAY,\n StateProps,\n useState,\n} from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n extends RootComponentProps<T>,\n FocusVisibleModeProps,\n StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n href,\n onClick,\n onClickCapture,\n activeClassName,\n hoverClassName,\n hasActive,\n hasHover,\n hovered,\n activated,\n activeEffectDelay,\n ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Кликабельный компонент. Добавляем кучу обвесов\n */\nconst RealClickable = <T,>({\n baseClassName,\n children,\n focusVisibleMode = 'inside',\n activeClassName,\n hoverClassName,\n activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY,\n hasHover = true,\n hasActive = true,\n hovered,\n activated,\n onPointerEnter,\n onPointerLeave,\n onPointerDown,\n onPointerCancel,\n onPointerUp,\n onBlur,\n onFocus,\n onKeyDown,\n ...restProps\n}: ClickableProps<T>) => {\n const { focusVisible, ...focusEvents } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: focusVisibleMode });\n\n const { stateClassName, setLockBubblingImmediate, ...stateEvents } = useState({\n activeClassName,\n hoverClassName,\n activeEffectDelay,\n hasHover,\n hasActive,\n hovered,\n activated,\n });\n\n const handlers = mergeCalls(\n focusEvents,\n stateEvents,\n { onKeyDown: clickByKeyboardHandler },\n {\n onPointerEnter,\n onPointerLeave,\n onPointerDown,\n onPointerCancel,\n onPointerUp,\n onBlur,\n onFocus,\n onKeyDown,\n },\n );\n\n return (\n <RootComponent\n baseClassName={classNames(\n baseClassName,\n styles['Clickable__realClickable'],\n focusVisibleClassNames,\n stateClassName,\n )}\n {...handlers}\n {...restProps}\n >\n <ClickableLockStateContext.Provider value={setLockBubblingImmediate}>\n {children}\n </ClickableLockStateContext.Provider>\n </RootComponent>\n );\n};\n\n/**\n * Проверяем, является ли компонент кликабельным\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n return (\n (props.href !== undefined ||\n props.onClick !== undefined ||\n props.onClickCapture !== undefined ||\n props.Component === 'label') &&\n !props.disabled\n );\n}\n\n/**\n * Определяет правильный компонент и его свойства\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n Component,\n onClick,\n onClickCapture,\n href,\n disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n if (Component !== undefined) {\n return { Component };\n } else if (href !== undefined) {\n return { 'Component': 'a', 'aria-disabled': disabled };\n } else if (onClick !== undefined || onClickCapture !== undefined) {\n return {\n 'Component': 'div',\n 'role': 'button',\n 'tabIndex': disabled ? undefined : 0,\n 'aria-disabled': disabled,\n };\n }\n\n return {};\n}\n\nconst getUserAgentResetClassName = (Component?: React.ElementType) => {\n if (Component === 'a') {\n return styles.Clickable__resetLinkStyle;\n }\n if (Component === 'button') {\n return styles.Clickable__resetButtonStyle;\n }\n return;\n};\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>({\n focusVisibleMode = 'inside',\n baseClassName: baseClassNameProp,\n ...restProps\n}: ClickableProps<T>): React.ReactNode => {\n const commonProps = component(restProps);\n const isClickable = checkClickable(restProps);\n const baseClassName = classNames(\n baseClassNameProp,\n getUserAgentResetClassName(commonProps.Component),\n styles['Clickable__host'],\n );\n\n if (isClickable) {\n return (\n <RealClickable\n baseClassName={baseClassName}\n focusVisibleMode={focusVisibleMode}\n {...commonProps}\n {...restProps}\n />\n );\n }\n\n return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n};\n"],"names":["classNames","useFocusVisible","useFocusVisibleClassName","mergeCalls","clickByKeyboardHandler","RootComponent","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useState","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","activated","activeEffectDelay","restProps","RealClickable","baseClassName","children","focusVisibleMode","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","focusVisible","focusEvents","focusVisibleClassNames","mode","stateClassName","setLockBubblingImmediate","stateEvents","handlers","Provider","value","checkClickable","props","undefined","Component","disabled","component","getUserAgentResetClassName","Clickable__resetLinkStyle","Clickable__resetButtonStyle","Clickable","baseClassNameProp","commonProps","isClickable"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport {\n FocusVisibleModeProps,\n useFocusVisibleClassName,\n} from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { RootComponent, RootComponentProps } from '../RootComponent/RootComponent';\nimport {\n ClickableLockStateContext,\n DEFAULT_ACTIVE_EFFECT_DELAY,\n StateProps,\n useState,\n} from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n extends RootComponentProps<T>,\n FocusVisibleModeProps,\n StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n href,\n onClick,\n onClickCapture,\n activeClassName,\n hoverClassName,\n hasActive,\n hasHover,\n hovered,\n activated,\n activeEffectDelay,\n ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Кликабельный компонент. Добавляем кучу обвесов\n */\nconst RealClickable = <T,>({\n baseClassName,\n children,\n focusVisibleMode = 'inside',\n activeClassName,\n hoverClassName,\n activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY,\n hasHover = true,\n hasActive = true,\n hovered,\n activated,\n onPointerEnter,\n onPointerLeave,\n onPointerDown,\n onPointerCancel,\n onPointerUp,\n onBlur,\n onFocus,\n onKeyDown,\n ...restProps\n}: ClickableProps<T>) => {\n const { focusVisible, ...focusEvents } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: focusVisibleMode });\n\n const { stateClassName, setLockBubblingImmediate, ...stateEvents } = useState({\n activeClassName,\n hoverClassName,\n activeEffectDelay,\n hasHover,\n hasActive,\n hovered,\n activated,\n });\n\n const handlers = mergeCalls(\n focusEvents,\n stateEvents,\n { onKeyDown: clickByKeyboardHandler },\n {\n onPointerEnter,\n onPointerLeave,\n onPointerDown,\n onPointerCancel,\n onPointerUp,\n onBlur,\n onFocus,\n onKeyDown,\n },\n );\n\n return (\n <RootComponent\n baseClassName={classNames(\n baseClassName,\n styles['Clickable__realClickable'],\n focusVisibleClassNames,\n stateClassName,\n )}\n {...handlers}\n {...restProps}\n >\n <ClickableLockStateContext.Provider value={setLockBubblingImmediate}>\n {children}\n </ClickableLockStateContext.Provider>\n </RootComponent>\n );\n};\n\n/**\n * Проверяем, является ли компонент кликабельным\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n return (\n (props.href !== undefined ||\n props.onClick !== undefined ||\n props.onClickCapture !== undefined ||\n props.Component === 'a' ||\n props.Component === 'button' ||\n props.Component === 'label' ||\n props.Component === 'input') &&\n !props.disabled\n );\n}\n\n/**\n * Определяет правильный компонент и его свойства\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n Component,\n onClick,\n onClickCapture,\n href,\n disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n if (Component !== undefined) {\n return { Component };\n } else if (href !== undefined) {\n return { 'Component': 'a', 'aria-disabled': disabled };\n } else if (onClick !== undefined || onClickCapture !== undefined) {\n return {\n 'Component': 'div',\n 'role': 'button',\n 'tabIndex': disabled ? undefined : 0,\n 'aria-disabled': disabled,\n };\n }\n\n return {};\n}\n\nconst getUserAgentResetClassName = (Component?: React.ElementType) => {\n if (Component === 'a') {\n return styles.Clickable__resetLinkStyle;\n }\n if (Component === 'button') {\n return styles.Clickable__resetButtonStyle;\n }\n return;\n};\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>({\n focusVisibleMode = 'inside',\n baseClassName: baseClassNameProp,\n ...restProps\n}: ClickableProps<T>): React.ReactNode => {\n const commonProps = component(restProps);\n const isClickable = checkClickable(restProps);\n const baseClassName = classNames(\n baseClassNameProp,\n getUserAgentResetClassName(commonProps.Component),\n styles['Clickable__host'],\n );\n\n if (isClickable) {\n return (\n <RealClickable\n baseClassName={baseClassName}\n focusVisibleMode={focusVisibleMode}\n {...commonProps}\n {...restProps}\n />\n );\n }\n\n return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n};\n"],"names":["classNames","useFocusVisible","useFocusVisibleClassName","mergeCalls","clickByKeyboardHandler","RootComponent","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useState","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","activated","activeEffectDelay","restProps","RealClickable","baseClassName","children","focusVisibleMode","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","focusVisible","focusEvents","focusVisibleClassNames","mode","stateClassName","setLockBubblingImmediate","stateEvents","handlers","Provider","value","checkClickable","props","undefined","Component","disabled","component","getUserAgentResetClassName","Clickable__resetLinkStyle","Clickable__resetButtonStyle","Clickable","baseClassNameProp","commonProps","isClickable"],"mappings":"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"}
@@ -2,23 +2,13 @@ import * as React from 'react';
2
2
  import { type FilterFn } from '../../lib/select';
3
3
  import { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';
4
4
  import { CustomSelectDropdownProps } from '../CustomSelectDropdown/CustomSelectDropdown';
5
- import { CustomSelectOptionProps } from '../CustomSelectOption/CustomSelectOption';
6
5
  import { FormFieldProps } from '../FormField/FormField';
7
6
  import { NativeSelectProps } from '../NativeSelect/NativeSelect';
8
7
  import { SelectType } from '../Select/Select';
9
8
  import { type CustomSelectClearButtonProps } from './CustomSelectClearButton';
10
- type SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>['value'];
11
- export interface CustomSelectOptionInterface {
12
- value: SelectValue;
13
- label: React.ReactElement | string;
14
- disabled?: boolean;
15
- [index: string]: any;
16
- }
17
- export interface CustomSelectRenderOption<T extends CustomSelectOptionInterface> extends CustomSelectOptionProps {
18
- option: T;
19
- }
20
- export type { CustomSelectClearButtonProps };
21
- export interface SelectProps<OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface> extends NativeSelectProps, FormFieldProps, TrackerOptionsProps, Pick<CustomSelectDropdownProps, 'overscrollBehavior' | 'autoHideScrollbar' | 'autoHideScrollbarDelay'> {
9
+ import type { CustomSelectOptionInterface, CustomSelectRenderOption } from './types';
10
+ export type { CustomSelectClearButtonProps, CustomSelectOptionInterface, CustomSelectRenderOption };
11
+ export interface SelectProps<OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface> extends NativeSelectProps, Omit<FormFieldProps, 'maxHeight'>, TrackerOptionsProps, Pick<CustomSelectDropdownProps, 'overscrollBehavior' | 'autoHideScrollbar' | 'autoHideScrollbarDelay'> {
22
12
  /**
23
13
  * ref на внутрений компонент input
24
14
  */
@@ -1 +1 @@
1
- {"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,2BAA2B,CAAC;AASnC,OAAO,KAAK,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAiCrF,YAAY,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,CAAC;AAEpG,MAAM,WAAW,WAAW,CAC1B,gBAAgB,SAAS,2BAA2B,GAAG,2BAA2B,CAClF,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,mBAAmB,EACnB,IAAI,CACF,yBAAyB,EACzB,oBAAoB,GAAG,mBAAmB,GAAG,wBAAwB,CACtE;IACH;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAChD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtF;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,EAChB,sBAAsB,GACvB,EAAE;QACD,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAChE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;GAEG;AACH,wBAAgB,YAAY,CAAC,gBAAgB,SAAS,2BAA2B,EAC/E,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GACnC,KAAK,CAAC,SAAS,CAisBjB"}