@vkontakte/vkui 4.34.1 → 4.35.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (565) hide show
  1. package/.browserslistrc +5 -0
  2. package/.cache/.eslintcache +1 -1
  3. package/.cache/.stylelintcache +1 -1
  4. package/.cache/.tsbuildinfo +256 -229
  5. package/.cache/ts/src/components/ConfigProvider/ConfigProviderContext.d.ts +1 -0
  6. package/.cache/ts/src/components/CustomSelect/CustomSelect.d.ts +1 -1
  7. package/.cache/ts/src/components/Dropdown/Dropdown.d.ts +46 -5
  8. package/.cache/ts/src/components/FocusTrap/FocusTrap.d.ts +1 -1
  9. package/.cache/ts/src/components/ModalRoot/ModalRoot.d.ts +1 -1
  10. package/.cache/ts/src/components/ModalRoot/ModalRootDesktop.d.ts +1 -1
  11. package/.cache/ts/src/components/Popper/Popper.d.ts +18 -1
  12. package/.cache/ts/src/components/PopperArrow/PopperArrow.d.ts +8 -0
  13. package/.cache/ts/src/components/RichTooltip/RichTooltip.d.ts +7 -2
  14. package/.cache/ts/src/components/Snackbar/Snackbar.d.ts +5 -1
  15. package/.cache/ts/src/components/SplitCol/SplitCol.d.ts +1 -0
  16. package/.cache/ts/src/components/Tabbar/Tabbar.d.ts +8 -1
  17. package/.cache/ts/src/components/Tabs/Tabs.d.ts +13 -2
  18. package/.cache/ts/src/components/TabsItem/TabsItem.d.ts +22 -1
  19. package/.cache/ts/src/components/TextTooltip/TextTooltip.d.ts +5 -1
  20. package/.cache/ts/src/components/Textarea/Textarea.d.ts +3 -0
  21. package/.cache/ts/src/components/Tooltip/Tooltip.d.ts +18 -1
  22. package/.cache/ts/src/components/Typography/Headline/Headline.d.ts +3 -3
  23. package/.cache/ts/src/components/View/View.d.ts +2 -18
  24. package/.cache/ts/src/components/View/ViewInfinite.d.ts +1 -1
  25. package/.cache/ts/src/components/WriteBar/WriteBar.d.ts +5 -1
  26. package/.cache/ts/src/tokenized/index.d.ts +26 -0
  27. package/.eslintrc.json +14 -4
  28. package/dist/cjs/components/AppRoot/AppRoot.js +1 -0
  29. package/dist/cjs/components/AppRoot/AppRoot.js.map +1 -1
  30. package/dist/cjs/components/Button/Button.js +6 -4
  31. package/dist/cjs/components/Button/Button.js.map +1 -1
  32. package/dist/cjs/components/CardScroll/CardScroll.js +3 -1
  33. package/dist/cjs/components/CardScroll/CardScroll.js.map +1 -1
  34. package/dist/cjs/components/ChipsSelect/ChipsSelect.js +1 -0
  35. package/dist/cjs/components/ChipsSelect/ChipsSelect.js.map +1 -1
  36. package/dist/cjs/components/ConfigProvider/ConfigProviderContext.js +7 -1
  37. package/dist/cjs/components/ConfigProvider/ConfigProviderContext.js.map +1 -1
  38. package/dist/cjs/components/CustomSelect/CustomSelect.js +477 -554
  39. package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
  40. package/dist/cjs/components/Dropdown/Dropdown.js +147 -26
  41. package/dist/cjs/components/Dropdown/Dropdown.js.map +1 -1
  42. package/dist/cjs/components/Epic/Epic.js +1 -6
  43. package/dist/cjs/components/Epic/Epic.js.map +1 -1
  44. package/dist/cjs/components/FocusTrap/FocusTrap.js +9 -10
  45. package/dist/cjs/components/FocusTrap/FocusTrap.js.map +1 -1
  46. package/dist/cjs/components/HorizontalCell/HorizontalCell.js +4 -7
  47. package/dist/cjs/components/HorizontalCell/HorizontalCell.js.map +1 -1
  48. package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js +1 -0
  49. package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
  50. package/dist/cjs/components/HorizontalScroll/HorizontalScrollArrow.js +1 -1
  51. package/dist/cjs/components/HorizontalScroll/HorizontalScrollArrow.js.map +1 -1
  52. package/dist/cjs/components/Input/Input.js +1 -0
  53. package/dist/cjs/components/Input/Input.js.map +1 -1
  54. package/dist/cjs/components/MiniInfoCell/MiniInfoCell.js +2 -2
  55. package/dist/cjs/components/MiniInfoCell/MiniInfoCell.js.map +1 -1
  56. package/dist/cjs/components/ModalCardBase/ModalCardBase.js +1 -0
  57. package/dist/cjs/components/ModalCardBase/ModalCardBase.js.map +1 -1
  58. package/dist/cjs/components/NativeSelect/NativeSelect.js +1 -0
  59. package/dist/cjs/components/NativeSelect/NativeSelect.js.map +1 -1
  60. package/dist/cjs/components/Panel/Panel.js +1 -0
  61. package/dist/cjs/components/Panel/Panel.js.map +1 -1
  62. package/dist/cjs/components/PanelHeader/PanelHeader.js +1 -0
  63. package/dist/cjs/components/PanelHeader/PanelHeader.js.map +1 -1
  64. package/dist/cjs/components/Popper/Popper.js +16 -22
  65. package/dist/cjs/components/Popper/Popper.js.map +1 -1
  66. package/dist/cjs/components/PopperArrow/PopperArrow.js +40 -0
  67. package/dist/cjs/components/PopperArrow/PopperArrow.js.map +1 -0
  68. package/dist/cjs/components/Radio/Radio.js +1 -0
  69. package/dist/cjs/components/Radio/Radio.js.map +1 -1
  70. package/dist/cjs/components/RangeSlider/UniversalSlider.js +1 -0
  71. package/dist/cjs/components/RangeSlider/UniversalSlider.js.map +1 -1
  72. package/dist/cjs/components/RichTooltip/RichTooltip.js +6 -15
  73. package/dist/cjs/components/RichTooltip/RichTooltip.js.map +1 -1
  74. package/dist/cjs/components/Select/Select.js +1 -0
  75. package/dist/cjs/components/Select/Select.js.map +1 -1
  76. package/dist/cjs/components/SelectMimicry/SelectMimicry.js +1 -0
  77. package/dist/cjs/components/SelectMimicry/SelectMimicry.js.map +1 -1
  78. package/dist/cjs/components/SimpleCell/SimpleCell.js +21 -31
  79. package/dist/cjs/components/SimpleCell/SimpleCell.js.map +1 -1
  80. package/dist/cjs/components/Snackbar/Snackbar.js +7 -11
  81. package/dist/cjs/components/Snackbar/Snackbar.js.map +1 -1
  82. package/dist/cjs/components/SplitCol/SplitCol.js +7 -1
  83. package/dist/cjs/components/SplitCol/SplitCol.js.map +1 -1
  84. package/dist/cjs/components/SplitLayout/SplitLayout.js +5 -8
  85. package/dist/cjs/components/SplitLayout/SplitLayout.js.map +1 -1
  86. package/dist/cjs/components/Tabbar/Tabbar.js +15 -14
  87. package/dist/cjs/components/Tabbar/Tabbar.js.map +1 -1
  88. package/dist/cjs/components/TabbarItem/TabbarItem.js +8 -10
  89. package/dist/cjs/components/TabbarItem/TabbarItem.js.map +1 -1
  90. package/dist/cjs/components/Tabs/Tabs.js +23 -5
  91. package/dist/cjs/components/Tabs/Tabs.js.map +1 -1
  92. package/dist/cjs/components/TabsItem/TabsItem.js +39 -22
  93. package/dist/cjs/components/TabsItem/TabsItem.js.map +1 -1
  94. package/dist/cjs/components/TextTooltip/TextTooltip.js +6 -9
  95. package/dist/cjs/components/TextTooltip/TextTooltip.js.map +1 -1
  96. package/dist/cjs/components/Textarea/Textarea.js +5 -4
  97. package/dist/cjs/components/Textarea/Textarea.js.map +1 -1
  98. package/dist/cjs/components/Tooltip/Tooltip.js +94 -71
  99. package/dist/cjs/components/Tooltip/Tooltip.js.map +1 -1
  100. package/dist/cjs/components/Typography/Headline/Headline.js +11 -2
  101. package/dist/cjs/components/Typography/Headline/Headline.js.map +1 -1
  102. package/dist/cjs/components/View/View.js +388 -453
  103. package/dist/cjs/components/View/View.js.map +1 -1
  104. package/dist/cjs/components/WriteBar/WriteBar.js +12 -5
  105. package/dist/cjs/components/WriteBar/WriteBar.js.map +1 -1
  106. package/dist/cjs/components/WriteBarIcon/WriteBarIcon.js +3 -8
  107. package/dist/cjs/components/WriteBarIcon/WriteBarIcon.js.map +1 -1
  108. package/dist/cjs/hooks/useOrientationChange.js +2 -1
  109. package/dist/cjs/hooks/useOrientationChange.js.map +1 -1
  110. package/dist/cjs/tokenized/index.js +104 -0
  111. package/dist/cjs/tokenized/index.js.map +1 -1
  112. package/dist/components/AppRoot/AppRoot.js +1 -0
  113. package/dist/components/AppRoot/AppRoot.js.map +1 -1
  114. package/dist/components/Button/Button.js +6 -4
  115. package/dist/components/Button/Button.js.map +1 -1
  116. package/dist/components/CardScroll/CardScroll.js +3 -1
  117. package/dist/components/CardScroll/CardScroll.js.map +1 -1
  118. package/dist/components/ChipsSelect/ChipsSelect.js +1 -0
  119. package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
  120. package/dist/components/ConfigProvider/ConfigProviderContext.d.ts +1 -0
  121. package/dist/components/ConfigProvider/ConfigProviderContext.js +3 -0
  122. package/dist/components/ConfigProvider/ConfigProviderContext.js.map +1 -1
  123. package/dist/components/CustomSelect/CustomSelect.d.ts +1 -1
  124. package/dist/components/CustomSelect/CustomSelect.js +473 -580
  125. package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
  126. package/dist/components/Dropdown/Dropdown.d.ts +46 -5
  127. package/dist/components/Dropdown/Dropdown.js +137 -27
  128. package/dist/components/Dropdown/Dropdown.js.map +1 -1
  129. package/dist/components/Epic/Epic.js +1 -4
  130. package/dist/components/Epic/Epic.js.map +1 -1
  131. package/dist/components/FocusTrap/FocusTrap.d.ts +1 -1
  132. package/dist/components/FocusTrap/FocusTrap.js +9 -9
  133. package/dist/components/FocusTrap/FocusTrap.js.map +1 -1
  134. package/dist/components/HorizontalCell/HorizontalCell.js +3 -5
  135. package/dist/components/HorizontalCell/HorizontalCell.js.map +1 -1
  136. package/dist/components/HorizontalScroll/HorizontalScroll.js +1 -0
  137. package/dist/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
  138. package/dist/components/HorizontalScroll/HorizontalScrollArrow.js +2 -2
  139. package/dist/components/HorizontalScroll/HorizontalScrollArrow.js.map +1 -1
  140. package/dist/components/Input/Input.js +1 -0
  141. package/dist/components/Input/Input.js.map +1 -1
  142. package/dist/components/MiniInfoCell/MiniInfoCell.js +2 -2
  143. package/dist/components/MiniInfoCell/MiniInfoCell.js.map +1 -1
  144. package/dist/components/ModalCardBase/ModalCardBase.js +1 -0
  145. package/dist/components/ModalCardBase/ModalCardBase.js.map +1 -1
  146. package/dist/components/ModalRoot/ModalRoot.d.ts +1 -1
  147. package/dist/components/ModalRoot/ModalRootDesktop.d.ts +1 -1
  148. package/dist/components/NativeSelect/NativeSelect.js +1 -0
  149. package/dist/components/NativeSelect/NativeSelect.js.map +1 -1
  150. package/dist/components/Panel/Panel.js +1 -0
  151. package/dist/components/Panel/Panel.js.map +1 -1
  152. package/dist/components/PanelHeader/PanelHeader.js +1 -0
  153. package/dist/components/PanelHeader/PanelHeader.js.map +1 -1
  154. package/dist/components/Popper/Popper.d.ts +18 -1
  155. package/dist/components/Popper/Popper.js +15 -22
  156. package/dist/components/Popper/Popper.js.map +1 -1
  157. package/dist/components/PopperArrow/PopperArrow.d.ts +8 -0
  158. package/dist/components/PopperArrow/PopperArrow.js +27 -0
  159. package/dist/components/PopperArrow/PopperArrow.js.map +1 -0
  160. package/dist/components/Radio/Radio.js +1 -0
  161. package/dist/components/Radio/Radio.js.map +1 -1
  162. package/dist/components/RangeSlider/UniversalSlider.js +1 -0
  163. package/dist/components/RangeSlider/UniversalSlider.js.map +1 -1
  164. package/dist/components/RichTooltip/RichTooltip.d.ts +7 -2
  165. package/dist/components/RichTooltip/RichTooltip.js +5 -10
  166. package/dist/components/RichTooltip/RichTooltip.js.map +1 -1
  167. package/dist/components/Select/Select.js +1 -0
  168. package/dist/components/Select/Select.js.map +1 -1
  169. package/dist/components/SelectMimicry/SelectMimicry.js +1 -0
  170. package/dist/components/SelectMimicry/SelectMimicry.js.map +1 -1
  171. package/dist/components/SimpleCell/SimpleCell.js +19 -28
  172. package/dist/components/SimpleCell/SimpleCell.js.map +1 -1
  173. package/dist/components/Snackbar/Snackbar.d.ts +5 -1
  174. package/dist/components/Snackbar/Snackbar.js +8 -11
  175. package/dist/components/Snackbar/Snackbar.js.map +1 -1
  176. package/dist/components/SplitCol/SplitCol.d.ts +1 -0
  177. package/dist/components/SplitCol/SplitCol.js +3 -0
  178. package/dist/components/SplitCol/SplitCol.js.map +1 -1
  179. package/dist/components/SplitLayout/SplitLayout.js +4 -7
  180. package/dist/components/SplitLayout/SplitLayout.js.map +1 -1
  181. package/dist/components/Tabbar/Tabbar.d.ts +8 -1
  182. package/dist/components/Tabbar/Tabbar.js +15 -14
  183. package/dist/components/Tabbar/Tabbar.js.map +1 -1
  184. package/dist/components/TabbarItem/TabbarItem.js +7 -9
  185. package/dist/components/TabbarItem/TabbarItem.js.map +1 -1
  186. package/dist/components/Tabs/Tabs.d.ts +13 -2
  187. package/dist/components/Tabs/Tabs.js +23 -5
  188. package/dist/components/Tabs/Tabs.js.map +1 -1
  189. package/dist/components/TabsItem/TabsItem.d.ts +22 -1
  190. package/dist/components/TabsItem/TabsItem.js +40 -21
  191. package/dist/components/TabsItem/TabsItem.js.map +1 -1
  192. package/dist/components/TextTooltip/TextTooltip.d.ts +5 -1
  193. package/dist/components/TextTooltip/TextTooltip.js +5 -7
  194. package/dist/components/TextTooltip/TextTooltip.js.map +1 -1
  195. package/dist/components/Textarea/Textarea.d.ts +3 -0
  196. package/dist/components/Textarea/Textarea.js +5 -4
  197. package/dist/components/Textarea/Textarea.js.map +1 -1
  198. package/dist/components/Tooltip/Tooltip.d.ts +18 -1
  199. package/dist/components/Tooltip/Tooltip.js +89 -68
  200. package/dist/components/Tooltip/Tooltip.js.map +1 -1
  201. package/dist/components/Typography/Headline/Headline.d.ts +3 -3
  202. package/dist/components/Typography/Headline/Headline.js +10 -2
  203. package/dist/components/Typography/Headline/Headline.js.map +1 -1
  204. package/dist/components/View/View.d.ts +2 -18
  205. package/dist/components/View/View.js +384 -462
  206. package/dist/components/View/View.js.map +1 -1
  207. package/dist/components/View/ViewInfinite.d.ts +1 -1
  208. package/dist/components/WriteBar/WriteBar.d.ts +5 -1
  209. package/dist/components/WriteBar/WriteBar.js +10 -5
  210. package/dist/components/WriteBar/WriteBar.js.map +1 -1
  211. package/dist/components/WriteBarIcon/WriteBarIcon.js +3 -6
  212. package/dist/components/WriteBarIcon/WriteBarIcon.js.map +1 -1
  213. package/dist/components.css +143 -127
  214. package/dist/components.css.map +1 -1
  215. package/dist/cssm/components/ActionSheet/ActionSheet.css +1 -1
  216. package/dist/cssm/components/ActionSheetItem/ActionSheetItem.css +1 -1
  217. package/dist/cssm/components/Alert/Alert.css +1 -1
  218. package/dist/cssm/components/AppRoot/AppRoot.css +1 -1
  219. package/dist/cssm/components/AppRoot/AppRoot.js +1 -0
  220. package/dist/cssm/components/AppRoot/AppRoot.js.map +1 -1
  221. package/dist/cssm/components/Avatar/Avatar.css +3 -5
  222. package/dist/cssm/components/Badge/Badge.css +3 -3
  223. package/dist/cssm/components/Banner/Banner.css +5 -5
  224. package/dist/cssm/components/BaseGallery/BaseGallery.css +1 -1
  225. package/dist/cssm/components/Button/Button.css +53 -35
  226. package/dist/cssm/components/Button/Button.js +6 -4
  227. package/dist/cssm/components/Button/Button.js.map +1 -1
  228. package/dist/cssm/components/Calendar/Calendar.css +1 -1
  229. package/dist/cssm/components/CalendarDay/CalendarDay.css +1 -1
  230. package/dist/cssm/components/CalendarDays/CalendarDays.css +1 -1
  231. package/dist/cssm/components/CalendarHeader/CalendarHeader.css +1 -1
  232. package/dist/cssm/components/CalendarRange/CalendarRange.css +1 -1
  233. package/dist/cssm/components/CalendarTime/CalendarTime.css +1 -1
  234. package/dist/cssm/components/Card/Card.css +5 -6
  235. package/dist/cssm/components/CardGrid/CardGrid.css +1 -1
  236. package/dist/cssm/components/CardScroll/CardScroll.css +1 -1
  237. package/dist/cssm/components/CardScroll/CardScroll.js +3 -1
  238. package/dist/cssm/components/CardScroll/CardScroll.js.map +1 -1
  239. package/dist/cssm/components/Cell/Cell.css +3 -3
  240. package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.css +1 -1
  241. package/dist/cssm/components/Cell/CellDragger/CellDragger.css +1 -1
  242. package/dist/cssm/components/CellButton/CellButton.css +1 -1
  243. package/dist/cssm/components/Checkbox/Checkbox.css +1 -1
  244. package/dist/cssm/components/Chip/Chip.css +1 -1
  245. package/dist/cssm/components/ChipsInput/ChipsInput.css +1 -1
  246. package/dist/cssm/components/ChipsSelect/ChipsSelect.css +1 -1
  247. package/dist/cssm/components/ChipsSelect/ChipsSelect.js +1 -0
  248. package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
  249. package/dist/cssm/components/ConfigProvider/ConfigProviderContext.d.ts +1 -0
  250. package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js +3 -0
  251. package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js.map +1 -1
  252. package/dist/cssm/components/ContentCard/ContentCard.css +1 -1
  253. package/dist/cssm/components/Counter/Counter.css +31 -31
  254. package/dist/cssm/components/CustomScrollView/CustomScrollView.css +1 -1
  255. package/dist/cssm/components/CustomSelect/CustomSelect.css +1 -1
  256. package/dist/cssm/components/CustomSelect/CustomSelect.d.ts +1 -1
  257. package/dist/cssm/components/CustomSelect/CustomSelect.js +473 -580
  258. package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
  259. package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.css +3 -3
  260. package/dist/cssm/components/CustomSelectOption/CustomSelectOption.css +3 -3
  261. package/dist/cssm/components/DateInput/DateInput.css +1 -1
  262. package/dist/cssm/components/DatePicker/DatePicker.css +1 -1
  263. package/dist/cssm/components/DateRangeInput/DateRangeInput.css +1 -1
  264. package/dist/cssm/components/Dropdown/Dropdown.css +1 -1
  265. package/dist/cssm/components/Dropdown/Dropdown.d.ts +46 -5
  266. package/dist/cssm/components/Dropdown/Dropdown.js +137 -27
  267. package/dist/cssm/components/Dropdown/Dropdown.js.map +1 -1
  268. package/dist/cssm/components/Epic/Epic.css +1 -1
  269. package/dist/cssm/components/Epic/Epic.js +1 -4
  270. package/dist/cssm/components/Epic/Epic.js.map +1 -1
  271. package/dist/cssm/components/FixedLayout/FixedLayout.css +1 -1
  272. package/dist/cssm/components/FocusTrap/FocusTrap.d.ts +1 -1
  273. package/dist/cssm/components/FocusTrap/FocusTrap.js +9 -9
  274. package/dist/cssm/components/FocusTrap/FocusTrap.js.map +1 -1
  275. package/dist/cssm/components/FocusVisible/FocusVisible.css +1 -1
  276. package/dist/cssm/components/Footer/Footer.css +1 -1
  277. package/dist/cssm/components/FormField/FormField.css +9 -9
  278. package/dist/cssm/components/FormItem/FormItem.css +1 -1
  279. package/dist/cssm/components/FormLayout/FormLayout.css +1 -1
  280. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.css +1 -1
  281. package/dist/cssm/components/FormStatus/FormStatus.css +1 -1
  282. package/dist/cssm/components/Gradient/Gradient.css +1 -1
  283. package/dist/cssm/components/GridAvatar/GridAvatar.css +1 -1
  284. package/dist/cssm/components/Group/Group.css +1 -1
  285. package/dist/cssm/components/Header/Header.css +1 -1
  286. package/dist/cssm/components/HorizontalCell/HorizontalCell.css +1 -1
  287. package/dist/cssm/components/HorizontalCell/HorizontalCell.js +3 -5
  288. package/dist/cssm/components/HorizontalCell/HorizontalCell.js.map +1 -1
  289. package/dist/cssm/components/HorizontalScroll/HorizontalScroll.css +1 -1
  290. package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js +1 -0
  291. package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
  292. package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.css +3 -3
  293. package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.js +2 -2
  294. package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.js.map +1 -1
  295. package/dist/cssm/components/IconButton/IconButton.css +1 -1
  296. package/dist/cssm/components/InfoRow/InfoRow.css +1 -1
  297. package/dist/cssm/components/InitialsAvatar/InitialsAvatar.css +1 -1
  298. package/dist/cssm/components/Input/Input.css +1 -1
  299. package/dist/cssm/components/Input/Input.js +1 -0
  300. package/dist/cssm/components/Input/Input.js.map +1 -1
  301. package/dist/cssm/components/InputLike/InputLike.css +1 -1
  302. package/dist/cssm/components/InputLike/InputLikeDivider.css +1 -1
  303. package/dist/cssm/components/Link/Link.css +1 -1
  304. package/dist/cssm/components/MiniInfoCell/MiniInfoCell.css +1 -1
  305. package/dist/cssm/components/MiniInfoCell/MiniInfoCell.js +2 -2
  306. package/dist/cssm/components/MiniInfoCell/MiniInfoCell.js.map +1 -1
  307. package/dist/cssm/components/ModalCard/ModalCard.css +1 -1
  308. package/dist/cssm/components/ModalCardBase/ModalCardBase.css +3 -3
  309. package/dist/cssm/components/ModalCardBase/ModalCardBase.js +1 -0
  310. package/dist/cssm/components/ModalCardBase/ModalCardBase.js.map +1 -1
  311. package/dist/cssm/components/ModalDismissButton/ModalDismissButton.css +1 -1
  312. package/dist/cssm/components/ModalPage/ModalPage.css +1 -1
  313. package/dist/cssm/components/ModalPageHeader/ModalPageHeader.css +1 -1
  314. package/dist/cssm/components/ModalRoot/ModalRoot.css +1 -1
  315. package/dist/cssm/components/ModalRoot/ModalRoot.d.ts +1 -1
  316. package/dist/cssm/components/ModalRoot/ModalRootDesktop.d.ts +1 -1
  317. package/dist/cssm/components/NativeSelect/NativeSelect.js +1 -0
  318. package/dist/cssm/components/NativeSelect/NativeSelect.js.map +1 -1
  319. package/dist/cssm/components/Pagination/Pagination.css +1 -1
  320. package/dist/cssm/components/Panel/Panel.css +1 -1
  321. package/dist/cssm/components/Panel/Panel.js +1 -0
  322. package/dist/cssm/components/Panel/Panel.js.map +1 -1
  323. package/dist/cssm/components/PanelHeader/PanelHeader.css +1 -1
  324. package/dist/cssm/components/PanelHeader/PanelHeader.js +1 -0
  325. package/dist/cssm/components/PanelHeader/PanelHeader.js.map +1 -1
  326. package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.css +1 -1
  327. package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.css +1 -1
  328. package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.css +1 -1
  329. package/dist/cssm/components/Placeholder/Placeholder.css +3 -3
  330. package/dist/cssm/components/PopoutRoot/PopoutRoot.css +1 -1
  331. package/dist/cssm/components/PopoutWrapper/PopoutWrapper.css +1 -1
  332. package/dist/cssm/components/Popper/Popper.css +1 -1
  333. package/dist/cssm/components/Popper/Popper.d.ts +18 -1
  334. package/dist/cssm/components/Popper/Popper.js +15 -22
  335. package/dist/cssm/components/Popper/Popper.js.map +1 -1
  336. package/dist/cssm/components/PopperArrow/PopperArrow.css +1 -0
  337. package/dist/cssm/components/PopperArrow/PopperArrow.d.ts +8 -0
  338. package/dist/cssm/components/PopperArrow/PopperArrow.js +28 -0
  339. package/dist/cssm/components/PopperArrow/PopperArrow.js.map +1 -0
  340. package/dist/cssm/components/Progress/Progress.css +1 -1
  341. package/dist/cssm/components/PromoBanner/PromoBanner.css +1 -1
  342. package/dist/cssm/components/PullToRefresh/PullToRefresh.css +3 -3
  343. package/dist/cssm/components/Radio/Radio.css +1 -1
  344. package/dist/cssm/components/Radio/Radio.js +1 -0
  345. package/dist/cssm/components/Radio/Radio.js.map +1 -1
  346. package/dist/cssm/components/RadioGroup/RadioGroup.css +1 -1
  347. package/dist/cssm/components/RangeSlider/UniversalSlider.js +1 -0
  348. package/dist/cssm/components/RangeSlider/UniversalSlider.js.map +1 -1
  349. package/dist/cssm/components/Removable/Removable.css +1 -1
  350. package/dist/cssm/components/RichCell/RichCell.css +3 -3
  351. package/dist/cssm/components/RichTooltip/RichTooltip.css +3 -1
  352. package/dist/cssm/components/RichTooltip/RichTooltip.d.ts +7 -2
  353. package/dist/cssm/components/RichTooltip/RichTooltip.js +5 -10
  354. package/dist/cssm/components/RichTooltip/RichTooltip.js.map +1 -1
  355. package/dist/cssm/components/Root/Root.css +1 -1
  356. package/dist/cssm/components/ScreenSpinner/ScreenSpinner.css +1 -1
  357. package/dist/cssm/components/Search/Search.css +1 -1
  358. package/dist/cssm/components/SegmentedControl/SegmentedControl.css +1 -1
  359. package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.css +1 -1
  360. package/dist/cssm/components/Select/Select.css +1 -1
  361. package/dist/cssm/components/Select/Select.js +1 -0
  362. package/dist/cssm/components/Select/Select.js.map +1 -1
  363. package/dist/cssm/components/SelectMimicry/SelectMimicry.js +1 -0
  364. package/dist/cssm/components/SelectMimicry/SelectMimicry.js.map +1 -1
  365. package/dist/cssm/components/Separator/Separator.css +1 -1
  366. package/dist/cssm/components/SimpleCell/SimpleCell.css +1 -1
  367. package/dist/cssm/components/SimpleCell/SimpleCell.js +19 -28
  368. package/dist/cssm/components/SimpleCell/SimpleCell.js.map +1 -1
  369. package/dist/cssm/components/SimpleCheckbox/SimpleCheckbox.css +1 -1
  370. package/dist/cssm/components/Slider/Slider.css +3 -3
  371. package/dist/cssm/components/SliderSwitch/SliderSwitch.css +1 -1
  372. package/dist/cssm/components/Snackbar/Snackbar.css +1 -1
  373. package/dist/cssm/components/Snackbar/Snackbar.d.ts +5 -1
  374. package/dist/cssm/components/Snackbar/Snackbar.js +8 -11
  375. package/dist/cssm/components/Snackbar/Snackbar.js.map +1 -1
  376. package/dist/cssm/components/Spacing/Spacing.css +1 -1
  377. package/dist/cssm/components/Spinner/Spinner.css +1 -1
  378. package/dist/cssm/components/SplitCol/SplitCol.css +1 -1
  379. package/dist/cssm/components/SplitCol/SplitCol.d.ts +1 -0
  380. package/dist/cssm/components/SplitCol/SplitCol.js +3 -0
  381. package/dist/cssm/components/SplitCol/SplitCol.js.map +1 -1
  382. package/dist/cssm/components/SplitLayout/SplitLayout.css +1 -1
  383. package/dist/cssm/components/SplitLayout/SplitLayout.js +4 -7
  384. package/dist/cssm/components/SplitLayout/SplitLayout.js.map +1 -1
  385. package/dist/cssm/components/SubnavigationBar/SubnavigationBar.css +1 -1
  386. package/dist/cssm/components/SubnavigationButton/SubnavigationButton.css +1 -1
  387. package/dist/cssm/components/Switch/Switch.css +3 -3
  388. package/dist/cssm/components/Tabbar/Tabbar.css +5 -3
  389. package/dist/cssm/components/Tabbar/Tabbar.d.ts +8 -1
  390. package/dist/cssm/components/Tabbar/Tabbar.js +15 -14
  391. package/dist/cssm/components/Tabbar/Tabbar.js.map +1 -1
  392. package/dist/cssm/components/TabbarItem/TabbarItem.css +1 -1
  393. package/dist/cssm/components/TabbarItem/TabbarItem.js +7 -9
  394. package/dist/cssm/components/TabbarItem/TabbarItem.js.map +1 -1
  395. package/dist/cssm/components/Tabs/Tabs.css +1 -1
  396. package/dist/cssm/components/Tabs/Tabs.d.ts +13 -2
  397. package/dist/cssm/components/Tabs/Tabs.js +23 -5
  398. package/dist/cssm/components/Tabs/Tabs.js.map +1 -1
  399. package/dist/cssm/components/TabsItem/TabsItem.css +5 -1
  400. package/dist/cssm/components/TabsItem/TabsItem.d.ts +22 -1
  401. package/dist/cssm/components/TabsItem/TabsItem.js +40 -21
  402. package/dist/cssm/components/TabsItem/TabsItem.js.map +1 -1
  403. package/dist/cssm/components/Tappable/Tappable.css +5 -5
  404. package/dist/cssm/components/TextTooltip/TextTooltip.css +1 -1
  405. package/dist/cssm/components/TextTooltip/TextTooltip.d.ts +5 -1
  406. package/dist/cssm/components/TextTooltip/TextTooltip.js +5 -7
  407. package/dist/cssm/components/TextTooltip/TextTooltip.js.map +1 -1
  408. package/dist/cssm/components/Textarea/Textarea.css +1 -1
  409. package/dist/cssm/components/Textarea/Textarea.d.ts +3 -0
  410. package/dist/cssm/components/Textarea/Textarea.js +5 -4
  411. package/dist/cssm/components/Textarea/Textarea.js.map +1 -1
  412. package/dist/cssm/components/Tooltip/Tooltip.css +1 -1
  413. package/dist/cssm/components/Tooltip/Tooltip.d.ts +18 -1
  414. package/dist/cssm/components/Tooltip/Tooltip.js +89 -68
  415. package/dist/cssm/components/Tooltip/Tooltip.js.map +1 -1
  416. package/dist/cssm/components/Typography/Caption/Caption.css +1 -1
  417. package/dist/cssm/components/Typography/Footnote/Footnote.css +1 -1
  418. package/dist/cssm/components/Typography/Headline/Headline.css +1 -1
  419. package/dist/cssm/components/Typography/Headline/Headline.d.ts +3 -3
  420. package/dist/cssm/components/Typography/Headline/Headline.js +10 -2
  421. package/dist/cssm/components/Typography/Headline/Headline.js.map +1 -1
  422. package/dist/cssm/components/Typography/Paragraph/Paragraph.css +1 -1
  423. package/dist/cssm/components/Typography/Subhead/Subhead.css +1 -1
  424. package/dist/cssm/components/Typography/Text/Text.css +1 -1
  425. package/dist/cssm/components/Typography/Title/Title.css +1 -1
  426. package/dist/cssm/components/UsersStack/UsersStack.css +5 -5
  427. package/dist/cssm/components/View/View.css +1 -1
  428. package/dist/cssm/components/View/View.d.ts +2 -18
  429. package/dist/cssm/components/View/View.js +384 -462
  430. package/dist/cssm/components/View/View.js.map +1 -1
  431. package/dist/cssm/components/View/ViewIOS.css +1 -1
  432. package/dist/cssm/components/View/ViewInfinite.d.ts +1 -1
  433. package/dist/cssm/components/VisuallyHiddenInput/VisuallyHiddenInput.css +1 -1
  434. package/dist/cssm/components/WriteBar/WriteBar.css +3 -1
  435. package/dist/cssm/components/WriteBar/WriteBar.d.ts +5 -1
  436. package/dist/cssm/components/WriteBar/WriteBar.js +10 -5
  437. package/dist/cssm/components/WriteBar/WriteBar.js.map +1 -1
  438. package/dist/cssm/components/WriteBarIcon/WriteBarIcon.css +1 -1
  439. package/dist/cssm/components/WriteBarIcon/WriteBarIcon.js +3 -6
  440. package/dist/cssm/components/WriteBarIcon/WriteBarIcon.js.map +1 -1
  441. package/dist/cssm/fonts/fonts.css +1 -1
  442. package/dist/cssm/hooks/useOrientationChange.js +2 -1
  443. package/dist/cssm/hooks/useOrientationChange.js.map +1 -1
  444. package/dist/cssm/lib/calendar.d.ts +2 -2
  445. package/dist/cssm/styles/animations.css +1 -1
  446. package/dist/cssm/styles/bright_light.css +1 -1
  447. package/dist/cssm/styles/common.css +1 -1
  448. package/dist/cssm/styles/components.css +143 -127
  449. package/dist/cssm/styles/constants.css +3 -10
  450. package/dist/cssm/styles/space_gray.css +1 -1
  451. package/dist/cssm/styles/themes.css +1 -16
  452. package/dist/cssm/styles/unstable.css +3 -1
  453. package/dist/cssm/styles/vkcom_dark.css +1 -6
  454. package/dist/cssm/styles/vkcom_light.css +1 -11
  455. package/dist/cssm/tokenized/index.d.ts +26 -0
  456. package/dist/cssm/tokenized/index.js +13 -0
  457. package/dist/cssm/tokenized/index.js.map +1 -1
  458. package/dist/default_scheme.css +1 -1
  459. package/dist/default_scheme.css.map +1 -1
  460. package/dist/fonts.css +1 -1
  461. package/dist/fonts.css.map +1 -1
  462. package/dist/hooks/useOrientationChange.js +2 -1
  463. package/dist/hooks/useOrientationChange.js.map +1 -1
  464. package/dist/lib/calendar.d.ts +2 -2
  465. package/dist/tokenized/index.d.ts +26 -0
  466. package/dist/tokenized/index.js +13 -0
  467. package/dist/tokenized/index.js.map +1 -1
  468. package/dist/unstable.css +3 -1
  469. package/dist/unstable.css.map +1 -1
  470. package/dist/vkui.css +144 -143
  471. package/dist/vkui.css.map +1 -1
  472. package/package.json +6 -5
  473. package/src/components/AppRoot/AppRoot.tsx +2 -0
  474. package/src/components/Badge/Badge.css +0 -5
  475. package/src/components/Button/Button.css +0 -4
  476. package/src/components/Button/Button.tsx +4 -2
  477. package/src/components/Button/Readme.md +30 -59
  478. package/src/components/CardScroll/CardScroll.tsx +1 -1
  479. package/src/components/Cell/Cell.css +3 -2
  480. package/src/components/ChipsInput/ChipsInput.css +2 -0
  481. package/src/components/ChipsSelect/ChipsSelect.tsx +2 -0
  482. package/src/components/ConfigProvider/ConfigProviderContext.tsx +2 -0
  483. package/src/components/Counter/Counter.css +30 -0
  484. package/src/components/CustomScrollView/CustomScrollView.css +10 -5
  485. package/src/components/CustomSelect/CustomSelect.tsx +543 -574
  486. package/src/components/Dropdown/Dropdown.css +12 -0
  487. package/src/components/Dropdown/Dropdown.tsx +174 -20
  488. package/src/components/Dropdown/Readme.md +1 -0
  489. package/src/components/Epic/Epic.tsx +1 -4
  490. package/src/components/FixedLayout/Readme.md +103 -109
  491. package/src/components/FocusTrap/FocusTrap.tsx +10 -10
  492. package/src/components/Group/Group.css +1 -1
  493. package/src/components/Group/Readme.md +1 -1
  494. package/src/components/HorizontalCell/HorizontalCell.css +25 -43
  495. package/src/components/HorizontalCell/HorizontalCell.tsx +3 -9
  496. package/src/components/HorizontalScroll/HorizontalScroll.css +23 -0
  497. package/src/components/HorizontalScroll/HorizontalScroll.tsx +2 -0
  498. package/src/components/HorizontalScroll/HorizontalScrollArrow.tsx +2 -2
  499. package/src/components/Input/Input.css +2 -0
  500. package/src/components/Input/Input.tsx +2 -0
  501. package/src/components/MiniInfoCell/MiniInfoCell.css +13 -3
  502. package/src/components/MiniInfoCell/MiniInfoCell.tsx +3 -3
  503. package/src/components/ModalCardBase/ModalCardBase.tsx +2 -0
  504. package/src/components/NativeSelect/NativeSelect.tsx +2 -0
  505. package/src/components/Panel/Panel.tsx +2 -0
  506. package/src/components/PanelHeader/PanelHeader.tsx +2 -0
  507. package/src/components/Popper/Popper.css +0 -35
  508. package/src/components/Popper/Popper.tsx +33 -25
  509. package/src/components/PopperArrow/PopperArrow.css +34 -0
  510. package/src/components/PopperArrow/PopperArrow.tsx +40 -0
  511. package/src/components/Radio/Radio.tsx +2 -0
  512. package/src/components/RangeSlider/UniversalSlider.tsx +2 -0
  513. package/src/components/RichTooltip/RichTooltip.css +44 -4
  514. package/src/components/RichTooltip/RichTooltip.tsx +9 -11
  515. package/src/components/Select/Select.tsx +2 -0
  516. package/src/components/SelectMimicry/SelectMimicry.tsx +2 -0
  517. package/src/components/SimpleCell/Readme.md +115 -129
  518. package/src/components/SimpleCell/SimpleCell.css +30 -68
  519. package/src/components/SimpleCell/SimpleCell.tsx +23 -25
  520. package/src/components/Snackbar/Readme.md +95 -123
  521. package/src/components/Snackbar/Snackbar.css +18 -27
  522. package/src/components/Snackbar/Snackbar.tsx +17 -11
  523. package/src/components/SplitCol/SplitCol.tsx +2 -0
  524. package/src/components/SplitLayout/SplitLayout.css +3 -7
  525. package/src/components/SplitLayout/SplitLayout.tsx +9 -6
  526. package/src/components/Switch/Switch.css +6 -2
  527. package/src/components/Tabbar/Tabbar.css +4 -1
  528. package/src/components/Tabbar/Tabbar.tsx +23 -12
  529. package/src/components/TabbarItem/TabbarItem.css +7 -5
  530. package/src/components/TabbarItem/TabbarItem.tsx +13 -7
  531. package/src/components/Tabs/Readme.md +191 -251
  532. package/src/components/Tabs/Tabs.css +27 -80
  533. package/src/components/Tabs/Tabs.tsx +45 -7
  534. package/src/components/TabsItem/Readme.md +1 -0
  535. package/src/components/TabsItem/TabsItem.css +191 -106
  536. package/src/components/TabsItem/TabsItem.tsx +72 -20
  537. package/src/components/TextTooltip/TextTooltip.css +41 -11
  538. package/src/components/TextTooltip/TextTooltip.tsx +9 -13
  539. package/src/components/Textarea/Textarea.css +2 -0
  540. package/src/components/Textarea/Textarea.tsx +5 -4
  541. package/src/components/Tooltip/Readme.md +128 -101
  542. package/src/components/Tooltip/Tooltip.css +29 -40
  543. package/src/components/Tooltip/Tooltip.tsx +98 -66
  544. package/src/components/Typography/Headline/Headline.tsx +15 -1
  545. package/src/components/View/Readme.md +2 -0
  546. package/src/components/View/View.tsx +451 -514
  547. package/src/components/WriteBar/WriteBar.css +27 -33
  548. package/src/components/WriteBar/WriteBar.tsx +16 -5
  549. package/src/components/WriteBarIcon/WriteBarIcon.css +6 -19
  550. package/src/components/WriteBarIcon/WriteBarIcon.tsx +6 -6
  551. package/src/hooks/useOrientationChange.ts +1 -0
  552. package/src/styles/components.css +1 -0
  553. package/src/styles/constants.css +8 -0
  554. package/src/tokenized/index.ts +39 -0
  555. package/tsconfig.json +1 -1
  556. package/.cache/ts/src/components/ClickPopper/ClickPopper.d.ts +0 -21
  557. package/dist/cjs/components/ClickPopper/ClickPopper.js +0 -96
  558. package/dist/cjs/components/ClickPopper/ClickPopper.js.map +0 -1
  559. package/dist/components/ClickPopper/ClickPopper.d.ts +0 -21
  560. package/dist/components/ClickPopper/ClickPopper.js +0 -71
  561. package/dist/components/ClickPopper/ClickPopper.js.map +0 -1
  562. package/dist/cssm/components/ClickPopper/ClickPopper.d.ts +0 -21
  563. package/dist/cssm/components/ClickPopper/ClickPopper.js +0 -71
  564. package/dist/cssm/components/ClickPopper/ClickPopper.js.map +0 -1
  565. package/src/components/ClickPopper/ClickPopper.tsx +0 -86
@@ -1,9 +1,9 @@
1
1
  import * as React from "react";
2
2
  import { HasComponent, HasRootRef } from "../../types";
3
3
  export interface FocusTrapProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
4
- onClose?: (props?: any) => void;
5
4
  restoreFocus?: boolean;
6
5
  timeout?: number;
6
+ onClose?(): void;
7
7
  }
8
8
  /**
9
9
  * @see https://vkcom.github.io/VKUI/#/FocusTrap
@@ -10,7 +10,6 @@ import { useTimeout } from "../../hooks/useTimeout";
10
10
  import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from "../../lib/accessibility";
11
11
  import { useDOM } from "../../lib/dom";
12
12
  import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
13
- import { noop } from "../../lib/utils";
14
13
  import { AppRootContext } from "../AppRoot/AppRootContext";
15
14
  var FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
16
15
 
@@ -20,8 +19,7 @@ var FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
20
19
  export var FocusTrap = function FocusTrap(_ref) {
21
20
  var _ref$Component = _ref.Component,
22
21
  Component = _ref$Component === void 0 ? "div" : _ref$Component,
23
- _ref$onClose = _ref.onClose,
24
- onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
22
+ onClose = _ref.onClose,
25
23
  _ref$restoreFocus = _ref.restoreFocus,
26
24
  restoreFocus = _ref$restoreFocus === void 0 ? true : _ref$restoreFocus,
27
25
  _ref$timeout = _ref.timeout,
@@ -63,7 +61,7 @@ export var FocusTrap = function FocusTrap(_ref) {
63
61
 
64
62
  useIsomorphicLayoutEffect(function () {
65
63
  if (!ref.current) {
66
- return noop();
64
+ return;
67
65
  }
68
66
 
69
67
  var nodes = [];
@@ -78,11 +76,12 @@ export var FocusTrap = function FocusTrap(_ref) {
78
76
  }
79
77
  });
80
78
 
81
- if (nodes !== null && nodes !== void 0 && nodes.length) {
82
- setFocusableNodes(nodes);
79
+ if (nodes.length === 0) {
80
+ // Чтобы фокус был хотя бы на родителе
81
+ nodes.push(ref.current);
83
82
  }
84
83
 
85
- return noop();
84
+ setFocusableNodes(nodes);
86
85
  }, [children]); // HANDLE TRAP UNMOUNT
87
86
 
88
87
  var focusOnTrapUnmount = useTimeout(function () {
@@ -98,7 +97,7 @@ export var FocusTrap = function FocusTrap(_ref) {
98
97
  };
99
98
  }
100
99
 
101
- return noop();
100
+ return;
102
101
  }, [restoreFocus]);
103
102
 
104
103
  var onDocumentKeydown = function onDocumentKeydown(e) {
@@ -121,7 +120,7 @@ export var FocusTrap = function FocusTrap(_ref) {
121
120
  }
122
121
  }
123
122
 
124
- if (pressedKey(e) === Keys.ESCAPE) {
123
+ if (onClose && pressedKey(e) === Keys.ESCAPE) {
125
124
  onClose();
126
125
  }
127
126
 
@@ -132,6 +131,7 @@ export var FocusTrap = function FocusTrap(_ref) {
132
131
  capture: true
133
132
  });
134
133
  return createScopedElement(Component, _extends({
134
+ tabIndex: -1,
135
135
  ref: ref
136
136
  }, restProps), children);
137
137
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":["React","useExternRef","useGlobalEventListener","useTimeout","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","noop","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","useContext","keyboardInput","focusOnTrapMount","current","contains","activeElement","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","capture"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport {\n FOCUSABLE_ELEMENTS_LIST,\n Keys,\n pressedKey,\n} from \"../../lib/accessibility\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { noop } from \"../../lib/utils\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { AppRootContext } from \"../AppRoot/AppRootContext\";\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\n\nexport interface FocusTrapProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent {\n onClose?: (props?: any) => void;\n restoreFocus?: boolean;\n timeout?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n Component = \"div\",\n onClose = noop,\n restoreFocus = true,\n timeout = 0,\n getRootRef,\n children,\n ...restProps\n}: FocusTrapProps) => {\n const ref = useExternRef<HTMLElement>(getRootRef);\n\n const { document, window } = useDOM();\n\n const [focusableNodes, setFocusableNodes] = React.useState<\n HTMLElement[] | null\n >(null);\n const [restoreFocusTo, setRestoreFocusTo] =\n React.useState<HTMLElement | null>(null);\n\n // HANDLE TRAP MOUNT\n\n const { keyboardInput } = React.useContext(AppRootContext);\n const focusOnTrapMount = useTimeout(() => {\n if (\n keyboardInput &&\n !ref.current?.contains(document!.activeElement) &&\n focusableNodes?.length\n ) {\n focusableNodes[0].focus();\n }\n }, timeout);\n useIsomorphicLayoutEffect(() => {\n focusOnTrapMount.set();\n }, []);\n\n // HANDLE FOCUSABLE NODES\n\n useIsomorphicLayoutEffect(() => {\n if (!ref.current) {\n return noop();\n }\n\n const nodes: HTMLElement[] = [];\n Array.prototype.forEach.call(\n // eslint-disable-next-line no-restricted-properties\n ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n (focusableEl: Element) => {\n const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n if (display !== \"none\" && visibility !== \"hidden\") {\n nodes.push(focusableEl as HTMLElement);\n }\n }\n );\n\n if (nodes?.length) {\n setFocusableNodes(nodes);\n }\n\n return noop();\n }, [children]);\n\n // HANDLE TRAP UNMOUNT\n\n const focusOnTrapUnmount = useTimeout(() => {\n if (restoreFocusTo) {\n restoreFocusTo.focus();\n }\n }, timeout);\n useIsomorphicLayoutEffect(() => {\n if (restoreFocus && document!.activeElement) {\n setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n return () => {\n focusOnTrapUnmount.set();\n };\n }\n\n return noop();\n }, [restoreFocus]);\n\n const onDocumentKeydown = (e: KeyboardEvent) => {\n if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n const lastIdx = focusableNodes.length - 1;\n const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n const shouldFocusFirstNode =\n targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);\n\n if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {\n e.preventDefault();\n\n const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n if (node !== document!.activeElement) {\n node.focus();\n }\n\n return false;\n }\n }\n\n if (pressedKey(e) === Keys.ESCAPE) {\n onClose();\n }\n\n return true;\n };\n useGlobalEventListener(document, \"keydown\", onDocumentKeydown, {\n capture: true,\n });\n\n return (\n <Component ref={ref} {...restProps}>\n {children}\n </Component>\n );\n};\n"],"file":"FocusTrap.js"}
1
+ {"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":["React","useExternRef","useGlobalEventListener","useTimeout","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","useContext","keyboardInput","focusOnTrapMount","current","contains","activeElement","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","capture"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport {\n FOCUSABLE_ELEMENTS_LIST,\n Keys,\n pressedKey,\n} from \"../../lib/accessibility\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { AppRootContext } from \"../AppRoot/AppRootContext\";\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\n\nexport interface FocusTrapProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent {\n restoreFocus?: boolean;\n timeout?: number;\n onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n Component = \"div\",\n onClose,\n restoreFocus = true,\n timeout = 0,\n getRootRef,\n children,\n ...restProps\n}: FocusTrapProps) => {\n const ref = useExternRef<HTMLElement>(getRootRef);\n\n const { document, window } = useDOM();\n\n const [focusableNodes, setFocusableNodes] = React.useState<\n HTMLElement[] | null\n >(null);\n const [restoreFocusTo, setRestoreFocusTo] =\n React.useState<HTMLElement | null>(null);\n\n // HANDLE TRAP MOUNT\n\n const { keyboardInput } = React.useContext(AppRootContext);\n const focusOnTrapMount = useTimeout(() => {\n if (\n keyboardInput &&\n !ref.current?.contains(document!.activeElement) &&\n focusableNodes?.length\n ) {\n focusableNodes[0].focus();\n }\n }, timeout);\n useIsomorphicLayoutEffect(() => {\n focusOnTrapMount.set();\n }, []);\n\n // HANDLE FOCUSABLE NODES\n\n useIsomorphicLayoutEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const nodes: HTMLElement[] = [];\n Array.prototype.forEach.call(\n // eslint-disable-next-line no-restricted-properties\n ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n (focusableEl: Element) => {\n const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n if (display !== \"none\" && visibility !== \"hidden\") {\n nodes.push(focusableEl as HTMLElement);\n }\n }\n );\n\n if (nodes.length === 0) {\n // Чтобы фокус был хотя бы на родителе\n nodes.push(ref.current);\n }\n\n setFocusableNodes(nodes);\n }, [children]);\n\n // HANDLE TRAP UNMOUNT\n\n const focusOnTrapUnmount = useTimeout(() => {\n if (restoreFocusTo) {\n restoreFocusTo.focus();\n }\n }, timeout);\n useIsomorphicLayoutEffect(() => {\n if (restoreFocus && document!.activeElement) {\n setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n return () => {\n focusOnTrapUnmount.set();\n };\n }\n\n return;\n }, [restoreFocus]);\n\n const onDocumentKeydown = (e: KeyboardEvent) => {\n if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n const lastIdx = focusableNodes.length - 1;\n const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n const shouldFocusFirstNode =\n targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);\n\n if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {\n e.preventDefault();\n\n const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n if (node !== document!.activeElement) {\n node.focus();\n }\n\n return false;\n }\n }\n\n if (onClose && pressedKey(e) === Keys.ESCAPE) {\n onClose();\n }\n\n return true;\n };\n useGlobalEventListener(document, \"keydown\", onDocumentKeydown, {\n capture: true,\n });\n\n return (\n <Component tabIndex={-1} ref={ref} {...restProps}>\n {children}\n </Component>\n );\n};\n"],"file":"FocusTrap.js"}
@@ -1 +1 @@
1
- [class$="--focus-visible"]>.vkuiFocusVisible{position:absolute;top:2px;left:2px;right:2px;bottom:2px;border-radius:inherit;box-shadow:0 0 0 2px #2688eb;box-shadow:0 0 0 2px var(--accent, var(--vkui--color_stroke_accent));-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;z-index:0}[class$="--focus-visible"]>.vkuiFocusVisible--outside{top:-2px;left:-2px;right:-2px;bottom:-2px}@media (prefers-reduced-motion:no-preference){[class$="--focus-visible"]>.vkuiFocusVisible{top:4px;left:4px;right:4px;bottom:4px;-webkit-animation:vkui-animation-focus-visible .15s ease-in-out forwards;animation:vkui-animation-focus-visible .15s ease-in-out forwards;-webkit-animation-delay:.01ms;animation-delay:.01ms;will-change:top,left,bottom,right}[class$="--focus-visible"]>.vkuiFocusVisible--outside{top:0;left:0;bottom:0;right:0;-webkit-animation-name:vkui-animation-focus-visible-outside;animation-name:vkui-animation-focus-visible-outside}@-webkit-keyframes vkui-animation-focus-visible{to{top:2px;left:2px;bottom:2px;right:2px;will-change:auto}}@keyframes vkui-animation-focus-visible{to{top:2px;left:2px;bottom:2px;right:2px;will-change:auto}}@-webkit-keyframes vkui-animation-focus-visible-outside{to{top:-2px;left:-2px;bottom:-2px;right:-2px;will-change:auto}}@keyframes vkui-animation-focus-visible-outside{to{top:-2px;left:-2px;bottom:-2px;right:-2px;will-change:auto}}}
1
+ [class$="--focus-visible"]>.vkuiFocusVisible{border-radius:inherit;bottom:2px;box-shadow:0 0 0 2px #2688eb;box-shadow:0 0 0 2px var(--accent,var(--vkui--color_stroke_accent));left:2px;overflow:hidden;pointer-events:none;position:absolute;right:2px;top:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0}[class$="--focus-visible"]>.vkuiFocusVisible--outside{bottom:-2px;left:-2px;right:-2px;top:-2px}@media (prefers-reduced-motion:no-preference){[class$="--focus-visible"]>.vkuiFocusVisible{-webkit-animation:vkui-animation-focus-visible .15s ease-in-out forwards;animation:vkui-animation-focus-visible .15s ease-in-out forwards;-webkit-animation-delay:.01ms;animation-delay:.01ms;bottom:4px;left:4px;right:4px;top:4px;will-change:top,left,bottom,right}[class$="--focus-visible"]>.vkuiFocusVisible--outside{-webkit-animation-name:vkui-animation-focus-visible-outside;animation-name:vkui-animation-focus-visible-outside;bottom:0;left:0;right:0;top:0}@-webkit-keyframes vkui-animation-focus-visible{to{bottom:2px;left:2px;right:2px;top:2px;will-change:auto}}@keyframes vkui-animation-focus-visible{to{bottom:2px;left:2px;right:2px;top:2px;will-change:auto}}@-webkit-keyframes vkui-animation-focus-visible-outside{to{bottom:-2px;left:-2px;right:-2px;top:-2px;will-change:auto}}@keyframes vkui-animation-focus-visible-outside{to{bottom:-2px;left:-2px;right:-2px;top:-2px;will-change:auto}}}
@@ -1 +1 @@
1
- .vkuiFooter{display:block;margin:24px 0;padding-top:0;padding-bottom:0;text-align:center;color:#818c99;color:var(--text_secondary, var(--vkui--color_text_secondary))}
1
+ .vkuiFooter{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary));display:block;margin:24px 0;padding-bottom:0;padding-top:0;text-align:center}
@@ -1,9 +1,9 @@
1
- .vkuiFormField{position:relative;display:flex;align-items:center;box-sizing:border-box;min-height:44px;min-height:var(--vkui--size_field_height--regular,44px)}.vkuiFormField--sizeY-compact{min-height:36px;min-height:var(--vkui--size_field_height--compact,36px)}.vkuiFormField__before,.vkuiFormField__after{position:relative;z-index:2;display:flex;align-items:center;align-content:center;justify-content:center;flex-shrink:0;min-width:44px;min-width:var(--vkui--size_field_height--regular,44px);height:100%;color:#99a2ad;color:var(--icon_secondary, var(--vkui--color_icon_secondary))}.vkuiFormField--sizeY-compact .vkuiFormField__before,.vkuiFormField--sizeY-compact .vkuiFormField__after{min-width:36px;min-width:var(--vkui--size_field_height--compact,36px);height:36px;height:var(--vkui--size_field_height--compact,36px)}.vkuiFormField__before{color:#2688eb;color:var(--accent, var(--vkui--color_icon_accent))}.vkuiFormField__after{color:#99a2ad;color:var(--icon_secondary, var(--vkui--color_icon_secondary))}.vkuiFormField__border{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;box-sizing:border-box;-webkit-transform-origin:left top;transform-origin:left top;border:1px solid transparent;border:var(--thin-border) solid transparent;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px)}.vkuiFormField--default .vkuiFormField__border{border-color:rgba(0,0,0,.12);border-color:var(--field_border, var(--vkui--color_field_border_alpha));background-color:#f2f3f5;background-color:var(--field_background,
2
- var(--vkui--color_field_background)
3
- )}.vkuiFormItem--error .vkuiFormField__border{background-color:#faebeb;background-color:var(--field_error_background,
4
- var(--vkui--color_background_negative_tint)
5
- );border-color:#e64646;border-color:var(--field_error_border, var(--vkui--color_stroke_negative))}.vkuiFormItem--valid .vkuiFormField__border{border-color:#4bb34b;border-color:var(--field_valid_border, var(--vkui--color_stroke_positive))}.vkuiFormField--disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,0.64);cursor:default;pointer-events:none}.vkuiFormField--hover .vkuiFormField__border{background-color:#f2f3f5;background-color:var(--field_background,
6
- var(--vkui--color_field_background)
7
- )}.vkuiFormField--default.vkuiFormField--hover .vkuiFormField__border{border-color:rgba(0,0,0,.24);border-color:var(--icon_tertiary_alpha,
8
- var(--vkui--color_field_border_alpha--hover)
9
- )}.vkuiFormField:focus-within .vkuiFormField__border,.vkuiFormField :focus~.vkuiFormField__border,.vkuiChipsInput--focused .vkuiFormField__border{border-color:#2688eb;border-color:var(--accent, var(--vkui--color_stroke_accent))}.vkuiModalCardBase__header+.vkuiFormField,.vkuiModalCardBase__subheader+.vkuiFormField{margin-top:16px}.vkuiSelect--pop-down .vkuiFormField__border{border-bottom-left-radius:0;border-bottom-right-radius:0}.vkuiSelect--pop-up .vkuiFormField__border{border-top-left-radius:0;border-top-right-radius:0}.vkuiCalendarHeader__picker .vkuiFormField__after{min-width:12px;padding-right:8px}.vkuiChipsInput .vkuiFormField__after{z-index:3}
1
+ .vkuiFormField{align-items:center;box-sizing:border-box;display:flex;min-height:44px;min-height:var(--vkui--size_field_height--regular,44px);position:relative}.vkuiFormField--sizeY-compact{min-height:36px;min-height:var(--vkui--size_field_height--compact,36px)}.vkuiFormField__after,.vkuiFormField__before{align-content:center;align-items:center;color:#99a2ad;color:var(--icon_secondary,var(--vkui--color_icon_secondary));display:flex;flex-shrink:0;height:100%;justify-content:center;min-width:44px;min-width:var(--vkui--size_field_height--regular,44px);position:relative;z-index:2}.vkuiFormField--sizeY-compact .vkuiFormField__after,.vkuiFormField--sizeY-compact .vkuiFormField__before{height:36px;height:var(--vkui--size_field_height--compact,36px);min-width:36px;min-width:var(--vkui--size_field_height--compact,36px)}.vkuiFormField__before{color:#2688eb;color:var(--accent,var(--vkui--color_icon_accent))}.vkuiFormField__after{color:#99a2ad;color:var(--icon_secondary,var(--vkui--color_icon_secondary))}.vkuiFormField__border{border:1px solid transparent;border:var(--thin-border) solid transparent;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);box-sizing:border-box;height:100%;left:0;position:absolute;top:0;-webkit-transform-origin:left top;transform-origin:left top;width:100%;z-index:1}.vkuiFormField--default .vkuiFormField__border{background-color:#f2f3f5;background-color:var(
2
+ --field_background,var(--vkui--color_field_background)
3
+ );border-color:rgba(0,0,0,.12);border-color:var(--field_border,var(--vkui--color_field_border_alpha))}.vkuiFormItem--error .vkuiFormField__border{background-color:#faebeb;background-color:var(
4
+ --field_error_background,var(--vkui--color_background_negative_tint)
5
+ );border-color:#e64646;border-color:var(--field_error_border,var(--vkui--color_stroke_negative))}.vkuiFormItem--valid .vkuiFormField__border{border-color:#4bb34b;border-color:var(--field_valid_border,var(--vkui--color_stroke_positive))}.vkuiFormField--disabled{cursor:default;opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,.64);pointer-events:none}.vkuiFormField--hover .vkuiFormField__border{background-color:#f2f3f5;background-color:var(
6
+ --field_background,var(--vkui--color_field_background)
7
+ )}.vkuiFormField--default.vkuiFormField--hover .vkuiFormField__border{border-color:rgba(0,0,0,.24);border-color:var(
8
+ --icon_tertiary_alpha,var(--vkui--color_field_border_alpha--hover)
9
+ )}.vkuiChipsInput--focused .vkuiFormField__border,.vkuiFormField :focus~.vkuiFormField__border,.vkuiFormField:focus-within .vkuiFormField__border{border-color:#2688eb;border-color:var(--accent,var(--vkui--color_stroke_accent))}.vkuiModalCardBase__header+.vkuiFormField,.vkuiModalCardBase__subheader+.vkuiFormField{margin-top:16px}.vkuiSelect--pop-down .vkuiFormField__border{border-bottom-left-radius:0;border-bottom-right-radius:0}.vkuiSelect--pop-up .vkuiFormField__border{border-top-left-radius:0;border-top-right-radius:0}.vkuiCalendarHeader__picker .vkuiFormField__after{min-width:12px;padding-right:8px}.vkuiChipsInput .vkuiFormField__after{z-index:3}
@@ -1 +1 @@
1
- .vkuiFormItem{display:block;padding:12px 16px;padding:var(--vkui--size_form_item_padding_vertical--regular,12px) var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiFormItem--removable{padding-left:0;padding-right:0}.vkuiFormItem__removable{max-width:100%;flex-grow:1;flex-shrink:0;flex-basis:0;padding:0;min-width:1px;overflow:hidden}.vkuiFormItem__top{padding-top:2px;padding-bottom:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#6d7885;color:var(--text_subhead, var(--vkui--color_text_subhead))}.vkuiFormItem__bottom{color:#818c99;color:var(--text_secondary, var(--vkui--color_text_secondary));padding-top:8px}.vkuiFormItem--error .vkuiFormItem__bottom{color:#e64646;color:var(--field_error_border, var(--vkui--color_text_negative))}.vkuiFormItem--valid .vkuiFormItem__bottom,.vkuiFormItem--verified .vkuiFormItem__bottom{color:#4bb34b;color:var(--field_valid_border, var(--vkui--color_text_positive))}.vkuiFormItem--sizeY-compact .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-compact .vkuiFormItem__bottom{padding-top:6px}.vkuiFormItem--ios{--formitem_padding:12px}.vkuiFormLayoutGroup--horizontal .vkuiFormItem{max-width:100%;flex-grow:1;flex-shrink:0;flex-basis:0;padding:0;min-width:1px}.vkuiFormLayoutGroup--horizontal .vkuiFormItem+.vkuiFormItem{margin-left:24px}.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop{margin-top:calc(-2px - 18px - 8px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--regular,18px) - 8px)}.vkuiFormItem--withTop.vkuiFormItem--sizeY-compact .vkuiFormItem__removable,.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop.vkuiFormItem--sizeY-compact{margin-top:calc(-2px - 16px - 6px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact,16px) - 6px)}
1
+ .vkuiFormItem{display:block;padding:12px 16px;padding:var(--vkui--size_form_item_padding_vertical--regular,12px) var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiFormItem--removable{padding-left:0;padding-right:0}.vkuiFormItem__removable{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;overflow:hidden;padding:0}.vkuiFormItem__top{color:#6d7885;color:var(--text_subhead,var(--vkui--color_text_subhead));overflow:hidden;padding-bottom:8px;padding-top:2px;text-overflow:ellipsis;white-space:nowrap}.vkuiFormItem__bottom{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary));padding-top:8px}.vkuiFormItem--error .vkuiFormItem__bottom{color:#e64646;color:var(--field_error_border,var(--vkui--color_text_negative))}.vkuiFormItem--valid .vkuiFormItem__bottom,.vkuiFormItem--verified .vkuiFormItem__bottom{color:#4bb34b;color:var(--field_valid_border,var(--vkui--color_text_positive))}.vkuiFormItem--sizeY-compact .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-compact .vkuiFormItem__bottom{padding-top:6px}.vkuiFormItem--ios{--formitem_padding:12px}.vkuiFormLayoutGroup--horizontal .vkuiFormItem{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;padding:0}.vkuiFormLayoutGroup--horizontal .vkuiFormItem+.vkuiFormItem{margin-left:24px}.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop{margin-top:calc(-2px - 18px - 8px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--regular,18px) - 8px)}.vkuiFormItem--withTop.vkuiFormItem--sizeY-compact .vkuiFormItem__removable,.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop.vkuiFormItem--sizeY-compact{margin-top:calc(-2px - 16px - 6px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact,16px) - 6px)}
@@ -1 +1 @@
1
- .vkuiFormLayout{position:relative}.vkuiFormLayout__submit{position:absolute;visibility:hidden;pointer-events:none;left:0;top:0;padding:0;width:0;height:0;-webkit-appearance:none;appearance:none;border:0}
1
+ .vkuiFormLayout{position:relative}.vkuiFormLayout__submit{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;height:0;left:0;padding:0;pointer-events:none;position:absolute;top:0;visibility:hidden;width:0}
@@ -1 +1 @@
1
- .vkuiFormLayoutGroup--horizontal{display:flex;padding:12px 16px;padding:var(--vkui--size_form_item_padding_vertical--regular,12px) var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiFormLayoutGroup__removable{flex-grow:1;min-width:0;max-width:100%}.vkuiFormLayoutGroup--ios{--formitem_padding:12px}.vkuiFormLayoutGroup--removable{padding-left:0;padding-right:0}
1
+ .vkuiFormLayoutGroup--horizontal{display:flex;padding:12px 16px;padding:var(--vkui--size_form_item_padding_vertical--regular,12px) var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiFormLayoutGroup__removable{flex-grow:1;max-width:100%;min-width:0}.vkuiFormLayoutGroup--ios{--formitem_padding:12px}.vkuiFormLayoutGroup--removable{padding-left:0;padding-right:0}
@@ -1 +1 @@
1
- .vkuiFormStatus{border-radius:10px;padding:12px;background:#f2f3f5;background:var(--field_background);color:#6d7885;color:var(--text_subhead)}.vkuiFormStatus__header,.vkuiFormStatus b:first-child{color:#000;color:var(--text_primary)}.vkuiFormStatus__header:not(:last-child),.vkuiFormStatus b:first-child{margin-bottom:2px}.vkuiFormStatus--error{background:#faebeb;background:var(--field_error_background);color:#e64646;color:var(--field_error_border)}.vkuiFormStatus--error .vkuiFormStatus__header,.vkuiFormStatus--error .vkuiFormStatus b:first-child{color:currentColor}.vkuiFormStatus b:first-child{display:block;font-size:16px;line-height:20px;font-weight:500}
1
+ .vkuiFormStatus{background:#f2f3f5;background:var(--field_background);border-radius:10px;color:#6d7885;color:var(--text_subhead);padding:12px}.vkuiFormStatus b:first-child,.vkuiFormStatus__header{color:#000;color:var(--text_primary)}.vkuiFormStatus b:first-child,.vkuiFormStatus__header:not(:last-child){margin-bottom:2px}.vkuiFormStatus--error{background:#faebeb;background:var(--field_error_background);color:#e64646;color:var(--field_error_border)}.vkuiFormStatus--error .vkuiFormStatus b:first-child,.vkuiFormStatus--error .vkuiFormStatus__header{color:currentColor}.vkuiFormStatus b:first-child{display:block;font-size:16px;font-weight:500;line-height:20px}
@@ -1 +1 @@
1
- .vkuiGradient--md-tint.vkuiGradient--to-top{background:linear-gradient(to bottom,rgba(249,249,249,0)0,rgba(249,249,249,.036) 13%,rgba(249,249,249,.15) 27%,rgba(249,249,249,.79) 68%,rgba(249,249,249,.95) 84%,#f9f9f9 100%);background:linear-gradient(to bottom,var(--vkui--gradient_tint,rgba(249, 249, 249, 0) 0% , rgba(249, 249, 249, 0.036) 13% , rgba(249, 249, 249, 0.15) 27% , rgba(249, 249, 249, 0.79) 68% , rgba(249, 249, 249, 0.95) 84% , rgba(249, 249, 249, 1) 100%))}.vkuiGradient--md-tint.vkuiGradient--to-bottom{background:linear-gradient(to top,rgba(249,249,249,0)0,rgba(249,249,249,.036) 13%,rgba(249,249,249,.15) 27%,rgba(249,249,249,.79) 68%,rgba(249,249,249,.95) 84%,#f9f9f9 100%);background:linear-gradient(to top,var(--vkui--gradient_tint,rgba(249, 249, 249, 0) 0% , rgba(249, 249, 249, 0.036) 13% , rgba(249, 249, 249, 0.15) 27% , rgba(249, 249, 249, 0.79) 68% , rgba(249, 249, 249, 0.95) 84% , rgba(249, 249, 249, 1) 100%))}.vkuiGradient--md-white.vkuiGradient--to-top{background:linear-gradient(to bottom,rgba(255,255,255,0)0,rgba(255,255,255,.036) 13%,rgba(255,255,255,.15) 27%,rgba(255,255,255,.79) 68%,rgba(255,255,255,.95) 84%,#fff 100%);background:linear-gradient(to bottom,var(--vkui--gradient_white,rgba(255, 255, 255, 0) 0% , rgba(255, 255, 255, 0.036) 13% , rgba(255, 255, 255, 0.15) 27% , rgba(255, 255, 255, 0.79) 68% , rgba(255, 255, 255, 0.95) 84% , rgba(255, 255, 255, 1) 100%))}.vkuiGradient--md-white.vkuiGradient--to-bottom{background:linear-gradient(to top,rgba(255,255,255,0)0,rgba(255,255,255,.036) 13%,rgba(255,255,255,.15) 27%,rgba(255,255,255,.79) 68%,rgba(255,255,255,.95) 84%,#fff 100%);background:linear-gradient(to top,var(--vkui--gradient_white,rgba(255, 255, 255, 0) 0% , rgba(255, 255, 255, 0.036) 13% , rgba(255, 255, 255, 0.15) 27% , rgba(255, 255, 255, 0.79) 68% , rgba(255, 255, 255, 0.95) 84% , rgba(255, 255, 255, 1) 100%))}.vkuiGradient--md-black.vkuiGradient--to-top{background:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.014) 13%,rgba(0,0,0,.06) 27%,rgba(0,0,0,.316) 68%,rgba(0,0,0,.38) 84%,rgba(0,0,0,.4) 100%);background:linear-gradient(to bottom,var(--vkui--gradient_black,rgba(0, 0, 0, 0) 0% , rgba(0, 0, 0, 0.014) 13% , rgba(0, 0, 0, 0.06) 27% , rgba(0, 0, 0, 0.316) 68% , rgba(0, 0, 0, 0.38) 84% , rgba(0, 0, 0, 0.4) 100%))}.vkuiGradient--md-black.vkuiGradient--to-bottom{background:linear-gradient(to top,transparent 0,rgba(0,0,0,.014) 13%,rgba(0,0,0,.06) 27%,rgba(0,0,0,.316) 68%,rgba(0,0,0,.38) 84%,rgba(0,0,0,.4) 100%);background:linear-gradient(to top,var(--vkui--gradient_black,rgba(0, 0, 0, 0) 0% , rgba(0, 0, 0, 0.014) 13% , rgba(0, 0, 0, 0.06) 27% , rgba(0, 0, 0, 0.316) 68% , rgba(0, 0, 0, 0.38) 84% , rgba(0, 0, 0, 0.4) 100%))}
1
+ .vkuiGradient--md-tint.vkuiGradient--to-top{background:linear-gradient(180deg,hsla(0,0%,98%,0) 0,hsla(0,0%,98%,.036) 13%,hsla(0,0%,98%,.15) 27%,hsla(0,0%,98%,.79) 68%,hsla(0,0%,98%,.95) 84%,#f9f9f9);background:linear-gradient(to bottom,var(--vkui--gradient_tint,hsla(0,0%,98%,0) 0,hsla(0,0%,98%,.036) 13%,hsla(0,0%,98%,.15) 27%,hsla(0,0%,98%,.79) 68%,hsla(0,0%,98%,.95) 84%,#f9f9f9 100%))}.vkuiGradient--md-tint.vkuiGradient--to-bottom{background:linear-gradient(0deg,hsla(0,0%,98%,0) 0,hsla(0,0%,98%,.036) 13%,hsla(0,0%,98%,.15) 27%,hsla(0,0%,98%,.79) 68%,hsla(0,0%,98%,.95) 84%,#f9f9f9);background:linear-gradient(to top,var(--vkui--gradient_tint,hsla(0,0%,98%,0) 0,hsla(0,0%,98%,.036) 13%,hsla(0,0%,98%,.15) 27%,hsla(0,0%,98%,.79) 68%,hsla(0,0%,98%,.95) 84%,#f9f9f9 100%))}.vkuiGradient--md-white.vkuiGradient--to-top{background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.036) 13%,hsla(0,0%,100%,.15) 27%,hsla(0,0%,100%,.79) 68%,hsla(0,0%,100%,.95) 84%,#fff);background:linear-gradient(to bottom,var(--vkui--gradient_white,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.036) 13%,hsla(0,0%,100%,.15) 27%,hsla(0,0%,100%,.79) 68%,hsla(0,0%,100%,.95) 84%,#fff 100%))}.vkuiGradient--md-white.vkuiGradient--to-bottom{background:linear-gradient(0deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.036) 13%,hsla(0,0%,100%,.15) 27%,hsla(0,0%,100%,.79) 68%,hsla(0,0%,100%,.95) 84%,#fff);background:linear-gradient(to top,var(--vkui--gradient_white,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.036) 13%,hsla(0,0%,100%,.15) 27%,hsla(0,0%,100%,.79) 68%,hsla(0,0%,100%,.95) 84%,#fff 100%))}.vkuiGradient--md-black.vkuiGradient--to-top{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.014) 13%,rgba(0,0,0,.06) 27%,rgba(0,0,0,.316) 68%,rgba(0,0,0,.38) 84%,rgba(0,0,0,.4));background:linear-gradient(to bottom,var(--vkui--gradient_black,transparent 0,rgba(0,0,0,.014) 13%,rgba(0,0,0,.06) 27%,rgba(0,0,0,.316) 68%,rgba(0,0,0,.38) 84%,rgba(0,0,0,.4) 100%))}.vkuiGradient--md-black.vkuiGradient--to-bottom{background:linear-gradient(0deg,transparent 0,rgba(0,0,0,.014) 13%,rgba(0,0,0,.06) 27%,rgba(0,0,0,.316) 68%,rgba(0,0,0,.38) 84%,rgba(0,0,0,.4));background:linear-gradient(to top,var(--vkui--gradient_black,transparent 0,rgba(0,0,0,.014) 13%,rgba(0,0,0,.06) 27%,rgba(0,0,0,.316) 68%,rgba(0,0,0,.38) 84%,rgba(0,0,0,.4) 100%))}
@@ -1 +1 @@
1
- .vkuiGridAvatar__in{display:flex;flex-flow:column wrap;height:100%;width:100%;overflow:hidden;border-radius:inherit;--grid-avatar-image-offset:2px}.vkuiGridAvatar__item{width:calc(50% - var(--grid-avatar-image-offset)/2);height:calc(50% - var(--grid-avatar-image-offset)/2);margin-right:var(--grid-avatar-image-offset);background-size:cover;background-position:center}.vkuiGridAvatar__item:only-child{width:100%}.vkuiGridAvatar__item:first-child:not(:nth-last-child(4)),.vkuiGridAvatar__item:nth-child(2):last-child{height:100%}.vkuiGridAvatar__item:nth-last-child(n+3)~.vkuiGridAvatar__item:nth-last-child(2),.vkuiGridAvatar__item:nth-last-child(4){margin-bottom:var(--grid-avatar-image-offset)}
1
+ .vkuiGridAvatar__in{--grid-avatar-image-offset:2px;border-radius:inherit;display:flex;flex-flow:column wrap;height:100%;overflow:hidden;width:100%}.vkuiGridAvatar__item{background-position:50%;background-size:cover;height:calc(50% - var(--grid-avatar-image-offset) / 2);margin-right:var(--grid-avatar-image-offset);width:calc(50% - var(--grid-avatar-image-offset) / 2)}.vkuiGridAvatar__item:only-child{width:100%}.vkuiGridAvatar__item:first-child:not(:nth-last-child(4)),.vkuiGridAvatar__item:nth-child(2):last-child{height:100%}.vkuiGridAvatar__item:nth-last-child(4),.vkuiGridAvatar__item:nth-last-child(n+3)~.vkuiGridAvatar__item:nth-last-child(2){margin-bottom:var(--grid-avatar-image-offset)}
@@ -1 +1 @@
1
- .vkuiGroup{color:#000;color:var(--text_primary, var(--vkui--color_text_primary))}.vkuiGroup__inner{padding-top:8px;padding-bottom:8px}.vkuiGroup--sizeX-regular>.vkuiGroup__inner{padding:8px}.vkuiGroup--card>.vkuiGroup__inner{background:#fff;background:var(--background_content, var(--vkui--color_background_content));border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);position:relative}.vkuiGroup--card>.vkuiGroup__inner::after{content:"";left:0;top:0;width:100%;height:100%;position:absolute;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #e1e3e6;box-shadow:inset 0 0 0 var(--thin-border) var(--input_border)}.vkuiGroup--plain>.vkuiGroup__separator{padding-top:8px;padding-bottom:8px}.vkuiGroup--sizeX-regular.vkuiGroup--plain>.vkuiGroup__separator{padding:8px}.vkuiGroup:last-of-type>.vkuiGroup__separator{display:none}.vkuiGroup:last-of-type>.vkuiGroup__separator--force,.vkuiGroup--sizeX-regular.vkuiGroup--card:last-of-type>.vkuiGroup__separator{display:block}.vkuiGroup__description{display:block;padding:4px 16px 16px;color:#818c99;color:var(--text_secondary, var(--vkui--color_text_secondary))}.vkuiGroup .vkuiGroup>.vkuiGroup__inner,.vkuiGroup .vkuiGroup>.vkuiGroup__separator{padding-left:0;padding-right:0}.vkuiGroup .vkuiGroup:first-of-type>.vkuiGroup__inner{padding-top:0}.vkuiGroup .vkuiGroup:last-of-type>.vkuiGroup__inner{padding-bottom:0}.vkuiGroup--ios .vkuiGroup__description{padding:4px 12px 16px}.vkuiPanelHeader--vkcom~.vkuiGroup--card:first-of-type,.vkuiPanelHeader--vkcom+* .vkuiGroup--card:first-of-type{position:relative;top:-1px}.vkuiPanelHeader--vkcom~.vkuiGroup--card:first-of-type .vkuiGroup__inner,.vkuiPanelHeader--vkcom+* .vkuiGroup--card:first-of-type .vkuiGroup__inner{border-top-right-radius:0;border-top-left-radius:0}
1
+ .vkuiGroup{color:#000;color:var(--text_primary,var(--vkui--color_text_primary))}.vkuiGroup__inner{padding-bottom:8px;padding-top:8px}.vkuiGroup--sizeX-regular>.vkuiGroup__inner{padding:8px}.vkuiGroup--card>.vkuiGroup__inner{background:#fff;background:var(--background_content,var(--vkui--color_background_content));border-radius:12px;border-radius:var(--vkui--size_border_radius_paper--regular,12px);position:relative}.vkuiGroup--card>.vkuiGroup__inner:after{border-radius:inherit;box-shadow:inset 0 0 0 1px #e1e3e6;box-shadow:inset 0 0 0 var(--thin-border) var(--input_border);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.vkuiGroup--plain>.vkuiGroup__separator{padding-bottom:8px;padding-top:8px}.vkuiGroup--sizeX-regular.vkuiGroup--plain>.vkuiGroup__separator{padding:8px}.vkuiGroup:last-of-type>.vkuiGroup__separator{display:none}.vkuiGroup--sizeX-regular.vkuiGroup--card:last-of-type>.vkuiGroup__separator,.vkuiGroup:last-of-type>.vkuiGroup__separator--force{display:block}.vkuiGroup__description{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary));display:block;padding:4px 16px 16px}.vkuiGroup .vkuiGroup>.vkuiGroup__inner,.vkuiGroup .vkuiGroup>.vkuiGroup__separator{padding-left:0;padding-right:0}.vkuiGroup .vkuiGroup:first-of-type>.vkuiGroup__inner{padding-top:0}.vkuiGroup .vkuiGroup:last-of-type>.vkuiGroup__inner{padding-bottom:0}.vkuiGroup--ios .vkuiGroup__description{padding:4px 12px 16px}.vkuiPanelHeader--vkcom+* .vkuiGroup--card:first-of-type,.vkuiPanelHeader--vkcom~.vkuiGroup--card:first-of-type{position:relative;top:-1px}.vkuiPanelHeader--vkcom+* .vkuiGroup--card:first-of-type .vkuiGroup__inner,.vkuiPanelHeader--vkcom~.vkuiGroup--card:first-of-type .vkuiGroup__inner{border-top-left-radius:0;border-top-right-radius:0}
@@ -1 +1 @@
1
- .vkuiHeader{display:flex;align-items:baseline;justify-content:space-between;padding:0 16px;-webkit-user-select:text;user-select:text}.vkuiHeader__main{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#000;color:var(--text_primary)}.vkuiHeader__content{display:flex;align-items:baseline}.vkuiHeader__content-in{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.vkuiHeader__content-in--multiline{white-space:initial;word-break:break-word}.vkuiHeader--multiline{white-space:normal}.vkuiHeader__subtitle{color:#818c99;color:var(--text_secondary)}.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:-1px}.vkuiHeader--mode-secondary .vkuiHeader__main,.vkuiHeader--mode-tertiary .vkuiHeader__main{color:#818c99;color:var(--text_secondary)}.vkuiHeader--pi .vkuiHeader__main{color:#000;color:var(--text_primary)}.vkuiHeader__indicator{color:#818c99;color:var(--text_secondary);margin-left:6px;flex-shrink:0}.vkuiHeader--mode-primary .vkuiHeader__indicator{color:#6d7885;color:var(--text_subhead)}.vkuiHeader:not(.vkuiHeader--pi) .vkuiHeader__indicator{align-self:center}.vkuiHeader--mode-secondary .vkuiHeader__indicator{margin-left:8px}.vkuiHeader__aside{white-space:nowrap;margin-left:12px}.vkuiHeader__aside>.vkuiIcon{position:relative;color:#99a2ad;color:var(--icon_secondary)}.vkuiHeader__aside>.vkuiIcon--24{top:3px}.vkuiHeader__aside>.vkuiIcon--16{top:1px}.vkuiHeader--android .vkuiHeader__main{margin:15px 0 9px}.vkuiHeader--android.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:11px}.vkuiHeader--ios{padding:0 12px}.vkuiHeader--ios .vkuiHeader__main{margin:13px 0 9px}.vkuiHeader--ios.vkuiHeader--mode-secondary .vkuiHeader__main{margin:14px 0 10px}.vkuiHeader--ios.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:9px}.vkuiHeader--vkcom{height:64px;align-items:center}.vkuiHeader--vkcom .vkuiHeader__main{color:#000;color:var(--text_primary)}.vkuiHeader--vkcom.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:0}.vkuiHeader--vkcom.vkuiHeader--mode-secondary{height:56px}.vkuiHeader--vkcom.vkuiHeader--mode-tertiary{height:40px}.vkuiGroup--plain:not(:first-of-type) .vkuiGroup__inner>.vkuiHeader:first-child{margin-top:-16px}.vkuiGroup--card>.vkuiGroup__inner>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child{margin-top:-4px}
1
+ .vkuiHeader{align-items:baseline;display:flex;justify-content:space-between;padding:0 16px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.vkuiHeader__main{color:#000;color:var(--text_primary);min-width:0;overflow:hidden;text-overflow:ellipsis}.vkuiHeader__content{align-items:baseline;display:flex}.vkuiHeader__content-in{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiHeader__content-in--multiline{white-space:normal;word-break:break-word}.vkuiHeader--multiline{white-space:normal}.vkuiHeader__subtitle{color:#818c99;color:var(--text_secondary)}.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:-1px}.vkuiHeader--mode-secondary .vkuiHeader__main,.vkuiHeader--mode-tertiary .vkuiHeader__main{color:#818c99;color:var(--text_secondary)}.vkuiHeader--pi .vkuiHeader__main{color:#000;color:var(--text_primary)}.vkuiHeader__indicator{color:#818c99;color:var(--text_secondary);flex-shrink:0;margin-left:6px}.vkuiHeader--mode-primary .vkuiHeader__indicator{color:#6d7885;color:var(--text_subhead)}.vkuiHeader:not(.vkuiHeader--pi) .vkuiHeader__indicator{align-self:center}.vkuiHeader--mode-secondary .vkuiHeader__indicator{margin-left:8px}.vkuiHeader__aside{margin-left:12px;white-space:nowrap}.vkuiHeader__aside>.vkuiIcon{color:#99a2ad;color:var(--icon_secondary);position:relative}.vkuiHeader__aside>.vkuiIcon--24{top:3px}.vkuiHeader__aside>.vkuiIcon--16{top:1px}.vkuiHeader--android .vkuiHeader__main{margin:15px 0 9px}.vkuiHeader--android.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:11px}.vkuiHeader--ios{padding:0 12px}.vkuiHeader--ios .vkuiHeader__main{margin:13px 0 9px}.vkuiHeader--ios.vkuiHeader--mode-secondary .vkuiHeader__main{margin:14px 0 10px}.vkuiHeader--ios.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:9px}.vkuiHeader--vkcom{align-items:center;height:64px}.vkuiHeader--vkcom .vkuiHeader__main{color:#000;color:var(--text_primary)}.vkuiHeader--vkcom.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:0}.vkuiHeader--vkcom.vkuiHeader--mode-secondary{height:56px}.vkuiHeader--vkcom.vkuiHeader--mode-tertiary{height:40px}.vkuiGroup--plain:not(:first-of-type) .vkuiGroup__inner>.vkuiHeader:first-child{margin-top:-16px}.vkuiGroup--card>.vkuiGroup__inner>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child{margin-top:-4px}
@@ -1 +1 @@
1
- .vkuiHorizontalCell{display:flex}.vkuiHorizontalCell__image{display:flex;justify-content:center}.vkuiHorizontalCell__body{text-decoration:none}.vkuiHorizontalCell__content{color:#000;color:var(--text_primary);word-break:break-all;text-overflow:ellipsis}.vkuiHorizontalCell__subtitle{color:#818c99;color:var(--text_secondary);line-height:18px}.vkuiHorizontalCell--s{max-width:80px}.vkuiHorizontalCell--s .vkuiHorizontalCell__image{padding:4px 8px}.vkuiHorizontalCell--s .vkuiHorizontalCell__content{padding:2px 4px 8px;text-align:center}.vkuiHorizontalCell--m{width:100px}.vkuiHorizontalCell--l{width:auto}.vkuiHorizontalCell--m .vkuiHorizontalCell__image,.vkuiHorizontalCell--l .vkuiHorizontalCell__image{padding:4px 6px}.vkuiHorizontalCell--m .vkuiHorizontalCell__content,.vkuiHorizontalCell--l .vkuiHorizontalCell__content{padding:2px 6px 8px;text-align:left}.vkuiHorizontalCell--ios:first-child::before,.vkuiHorizontalCell--ios:last-child::after{content:"";min-width:4px}.vkuiHorizontalCell--ios.vkuiHorizontalCell--s:first-child,.vkuiHorizontalCell--ios.vkuiHorizontalCell--s:last-child{max-width:88px}.vkuiHorizontalCell--ios.vkuiHorizontalCell--m:first-child,.vkuiHorizontalCell--ios.vkuiHorizontalCell--m:last-child{width:106px}.vkuiHorizontalCell--android:first-child::before,.vkuiHorizontalCell--android:last-child::after,.vkuiHorizontalCell--vkcom:first-child::before,.vkuiHorizontalCell--vkcom:last-child::after{content:"";min-width:8px}.vkuiHorizontalCell--android.vkuiHorizontalCell--s:first-child,.vkuiHorizontalCell--android.vkuiHorizontalCell--s:last-child,.vkuiHorizontalCell--vkcom.vkuiHorizontalCell--s:first-child,.vkuiHorizontalCell--vkcom.vkuiHorizontalCell--s:last-child{max-width:88px}.vkuiHorizontalCell--android.vkuiHorizontalCell--m:first-child,.vkuiHorizontalCell--android.vkuiHorizontalCell--m:last-child,.vkuiHorizontalCell--vkcom.vkuiHorizontalCell--m:first-child,.vkuiHorizontalCell--vkcom.vkuiHorizontalCell--m:last-child{width:116px}
1
+ .vkuiHorizontalCell{display:flex}.vkuiHorizontalCell__image{display:flex;justify-content:center}.vkuiHorizontalCell__body{text-decoration:none}.vkuiHorizontalCell__content{color:#000;color:var(--text_primary,var(--vkui--color_text_primary));text-overflow:ellipsis;word-break:break-all}.vkuiHorizontalCell__subtitle{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiHorizontalCell__content .vkuiHorizontalCell__subtitle{margin-top:2px}.vkuiHorizontalCell--s{max-width:80px}.vkuiHorizontalCell__image{padding:4px 6px}.vkuiHorizontalCell__content{padding:2px 6px 8px;text-align:left}.vkuiHorizontalCell--s .vkuiHorizontalCell__image{padding:4px 8px}.vkuiHorizontalCell--s .vkuiHorizontalCell__content{padding:2px 4px 8px;text-align:center}.vkuiHorizontalCell--m{width:100px}.vkuiHorizontalCell--l{width:auto}.vkuiHorizontalCell:first-child:before,.vkuiHorizontalCell:last-child:after{content:"";min-width:10px}.vkuiHorizontalCell--s:first-child:before,.vkuiHorizontalCell--s:last-child:after{min-width:8px}.vkuiHorizontalCell--s:first-child,.vkuiHorizontalCell--s:last-child{max-width:88px}.vkuiHorizontalCell--m:first-child,.vkuiHorizontalCell--m:last-child{width:110px}
@@ -4,12 +4,11 @@ var _excluded = ["size", "children"],
4
4
  _excluded2 = ["className", "header", "style", "subtitle", "size", "children", "getRootRef", "getRef"];
5
5
  import { createScopedElement } from "../../lib/jsxRuntime";
6
6
  import { classNames } from "../../lib/classNames";
7
- import { getClassName } from "../../helpers/getClassName";
8
- import { usePlatform } from "../../hooks/usePlatform";
9
7
  import { hasReactNode } from "../../lib/utils";
10
8
  import { Caption } from "../Typography/Caption/Caption";
11
9
  import { Tappable } from "../Tappable/Tappable";
12
10
  import { Subhead } from "../Typography/Subhead/Subhead";
11
+ import { Footnote } from "../Typography/Footnote/Footnote";
13
12
  import { Avatar } from "../Avatar/Avatar";
14
13
  import "./HorizontalCell.css";
15
14
 
@@ -41,9 +40,8 @@ export var HorizontalCell = function HorizontalCell(_ref2) {
41
40
  getRef = _ref2.getRef,
42
41
  restProps = _objectWithoutProperties(_ref2, _excluded2);
43
42
 
44
- var platform = usePlatform();
45
43
  return createScopedElement("div", {
46
- vkuiClass: classNames(getClassName("HorizontalCell", platform), "HorizontalCell--".concat(size)),
44
+ vkuiClass: classNames("HorizontalCell", "HorizontalCell--".concat(size)),
47
45
  ref: getRootRef,
48
46
  style: style,
49
47
  className: className
@@ -57,7 +55,7 @@ export var HorizontalCell = function HorizontalCell(_ref2) {
57
55
  }, hasReactNode(header) && createScopedElement(CellTypography, {
58
56
  size: size,
59
57
  vkuiClass: "HorizontalCell__title"
60
- }, header), hasReactNode(subtitle) && createScopedElement(Caption, {
58
+ }, header), hasReactNode(subtitle) && createScopedElement(Footnote, {
61
59
  vkuiClass: "HorizontalCell__subtitle"
62
60
  }, subtitle))));
63
61
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"names":["classNames","getClassName","usePlatform","hasReactNode","Caption","Tappable","Subhead","Avatar","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","platform"],"mappings":";;;;;AACA,SAASA,UAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,OAAT;AACA,SAASC,QAAT;AACA,SAASC,OAAT;AACA,SAASC,MAAT;AAEA;;AAMA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAII;AAAA,MAHzBC,IAGyB,QAHzBA,IAGyB;AAAA,MAFzBC,QAEyB,QAFzBA,QAEyB;AAAA,MADtBC,SACsB;;AACzB,SAAOF,IAAI,KAAK,GAAT,GACL,oBAAC,OAAD;AAAS,IAAA,KAAK,EAAC;AAAf,KAAuBE,SAAvB,GACGD,QADH,CADK,GAKL,oBAAC,OAAD,EAAaC,SAAb,EAAyBD,QAAzB,CALF;AAOD,CAZD;;AAyBA;AACA;AACA;AACA,OAAO,IAAME,cAAc,GAAG,SAAjBA,cAAiB,QAUH;AAAA,MATzBC,SASyB,SATzBA,SASyB;AAAA,MARzBC,MAQyB,SARzBA,MAQyB;AAAA,MAPzBC,KAOyB,SAPzBA,KAOyB;AAAA,MANzBC,QAMyB,SANzBA,QAMyB;AAAA,yBALzBP,IAKyB;AAAA,MALzBA,IAKyB,2BALlB,GAKkB;AAAA,6BAJzBC,QAIyB;AAAA,MAJzBA,QAIyB,+BAJd,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAIc;AAAA,MAHzBO,UAGyB,SAHzBA,UAGyB;AAAA,MAFzBC,MAEyB,SAFzBA,MAEyB;AAAA,MADtBP,SACsB;;AACzB,MAAMQ,QAAQ,GAAGjB,WAAW,EAA5B;AAEA,SACE;AACE,IAAA,SAAS,EAAEF,UAAU,CACnBC,YAAY,CAAC,gBAAD,EAAmBkB,QAAnB,CADO,4BAEAV,IAFA,EADvB;AAKE,IAAA,GAAG,EAAEQ,UALP;AAME,IAAA,KAAK,EAAEF,KANT;AAOE,IAAA,SAAS,EAAEF;AAPb,KASE,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,sBADZ;AAEE,IAAA,UAAU,EAAEK;AAFd,KAGMP,SAHN,GAKGR,YAAY,CAACO,QAAD,CAAZ,IACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAwCA,QAAxC,CANJ,EAQE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGP,YAAY,CAACW,MAAD,CAAZ,IACC,oBAAC,cAAD;AAAgB,IAAA,IAAI,EAAEL,IAAtB;AAA4B,IAAA,SAAS,EAAC;AAAtC,KACGK,MADH,CAFJ,EAMGX,YAAY,CAACa,QAAD,CAAZ,IACC,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KAA+CA,QAA/C,CAPJ,CARF,CATF,CADF;AA+BD,CA5CM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { HasComponent, HasRef, HasRootRef } from \"../../types\";\nimport \"./HorizontalCell.css\";\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n size: HorizontalCellProps[\"size\"];\n}\n\nconst CellTypography = ({\n size,\n children,\n ...restProps\n}: CellTypographyProps) => {\n return size === \"s\" ? (\n <Caption level=\"2\" {...restProps}>\n {children}\n </Caption>\n ) : (\n <Subhead {...restProps}>{children}</Subhead>\n );\n};\n\nexport interface HorizontalCellProps\n extends React.AnchorHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement>,\n HasComponent {\n size?: \"s\" | \"m\" | \"l\";\n header?: React.ReactNode;\n subtitle?: React.ReactNode;\n disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n className,\n header,\n style,\n subtitle,\n size = \"s\",\n children = <Avatar size={56} />,\n getRootRef,\n getRef,\n ...restProps\n}: HorizontalCellProps) => {\n const platform = usePlatform();\n\n return (\n <div\n vkuiClass={classNames(\n getClassName(\"HorizontalCell\", platform),\n `HorizontalCell--${size}`\n )}\n ref={getRootRef}\n style={style}\n className={className}\n >\n <Tappable\n vkuiClass=\"HorizontalCell__body\"\n getRootRef={getRef}\n {...restProps}\n >\n {hasReactNode(children) && (\n <div vkuiClass=\"HorizontalCell__image\">{children}</div>\n )}\n <div vkuiClass=\"HorizontalCell__content\">\n {hasReactNode(header) && (\n <CellTypography size={size} vkuiClass=\"HorizontalCell__title\">\n {header}\n </CellTypography>\n )}\n {hasReactNode(subtitle) && (\n <Caption vkuiClass=\"HorizontalCell__subtitle\">{subtitle}</Caption>\n )}\n </div>\n </Tappable>\n </div>\n );\n};\n"],"file":"HorizontalCell.js"}
1
+ {"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"names":["classNames","hasReactNode","Caption","Tappable","Subhead","Footnote","Avatar","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef"],"mappings":";;;;;AACA,SAASA,UAAT;AACA,SAASC,YAAT;AACA,SAASC,OAAT;AACA,SAASC,QAAT;AACA,SAASC,OAAT;AACA,SAASC,QAAT;AACA,SAASC,MAAT;AAEA;;AAMA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAII;AAAA,MAHzBC,IAGyB,QAHzBA,IAGyB;AAAA,MAFzBC,QAEyB,QAFzBA,QAEyB;AAAA,MADtBC,SACsB;;AACzB,SAAOF,IAAI,KAAK,GAAT,GACL,oBAAC,OAAD;AAAS,IAAA,KAAK,EAAC;AAAf,KAAuBE,SAAvB,GACGD,QADH,CADK,GAKL,oBAAC,OAAD,EAAaC,SAAb,EAAyBD,QAAzB,CALF;AAOD,CAZD;;AAyBA;AACA;AACA;AACA,OAAO,IAAME,cAAc,GAAG,SAAjBA,cAAiB,QAUH;AAAA,MATzBC,SASyB,SATzBA,SASyB;AAAA,MARzBC,MAQyB,SARzBA,MAQyB;AAAA,MAPzBC,KAOyB,SAPzBA,KAOyB;AAAA,MANzBC,QAMyB,SANzBA,QAMyB;AAAA,yBALzBP,IAKyB;AAAA,MALzBA,IAKyB,2BALlB,GAKkB;AAAA,6BAJzBC,QAIyB;AAAA,MAJzBA,QAIyB,+BAJd,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAIc;AAAA,MAHzBO,UAGyB,SAHzBA,UAGyB;AAAA,MAFzBC,MAEyB,SAFzBA,MAEyB;AAAA,MADtBP,SACsB;;AACzB,SACE;AACE,IAAA,SAAS,EAAEV,UAAU,CAAC,gBAAD,4BAAsCQ,IAAtC,EADvB;AAEE,IAAA,GAAG,EAAEQ,UAFP;AAGE,IAAA,KAAK,EAAEF,KAHT;AAIE,IAAA,SAAS,EAAEF;AAJb,KAME,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,sBADZ;AAEE,IAAA,UAAU,EAAEK;AAFd,KAGMP,SAHN,GAKGT,YAAY,CAACQ,QAAD,CAAZ,IACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAwCA,QAAxC,CANJ,EAQE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGR,YAAY,CAACY,MAAD,CAAZ,IACC,oBAAC,cAAD;AAAgB,IAAA,IAAI,EAAEL,IAAtB;AAA4B,IAAA,SAAS,EAAC;AAAtC,KACGK,MADH,CAFJ,EAMGZ,YAAY,CAACc,QAAD,CAAZ,IACC,oBAAC,QAAD;AAAU,IAAA,SAAS,EAAC;AAApB,KAAgDA,QAAhD,CAPJ,CARF,CANF,CADF;AA4BD,CAvCM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { HasComponent, HasRef, HasRootRef } from \"../../types\";\nimport \"./HorizontalCell.css\";\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n size: HorizontalCellProps[\"size\"];\n}\n\nconst CellTypography = ({\n size,\n children,\n ...restProps\n}: CellTypographyProps) => {\n return size === \"s\" ? (\n <Caption level=\"2\" {...restProps}>\n {children}\n </Caption>\n ) : (\n <Subhead {...restProps}>{children}</Subhead>\n );\n};\n\nexport interface HorizontalCellProps\n extends React.AnchorHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement>,\n HasComponent {\n size?: \"s\" | \"m\" | \"l\";\n header?: React.ReactNode;\n subtitle?: React.ReactNode;\n disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n className,\n header,\n style,\n subtitle,\n size = \"s\",\n children = <Avatar size={56} />,\n getRootRef,\n getRef,\n ...restProps\n}: HorizontalCellProps) => {\n return (\n <div\n vkuiClass={classNames(\"HorizontalCell\", `HorizontalCell--${size}`)}\n ref={getRootRef}\n style={style}\n className={className}\n >\n <Tappable\n vkuiClass=\"HorizontalCell__body\"\n getRootRef={getRef}\n {...restProps}\n >\n {hasReactNode(children) && (\n <div vkuiClass=\"HorizontalCell__image\">{children}</div>\n )}\n <div vkuiClass=\"HorizontalCell__content\">\n {hasReactNode(header) && (\n <CellTypography size={size} vkuiClass=\"HorizontalCell__title\">\n {header}\n </CellTypography>\n )}\n {hasReactNode(subtitle) && (\n <Footnote vkuiClass=\"HorizontalCell__subtitle\">{subtitle}</Footnote>\n )}\n </div>\n </Tappable>\n </div>\n );\n};\n"],"file":"HorizontalCell.js"}
@@ -1 +1 @@
1
- .vkuiHorizontalScroll{position:relative;overflow-x:hidden}.vkuiHorizontalScroll__in{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.vkuiHorizontalScroll__in::-webkit-scrollbar{display:none}.vkuiHorizontalScroll__in-wrapper{transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}.vkuiHorizontalScroll__arrowLeft:hover~.vkuiHorizontalScroll__in .vkuiHorizontalScroll__in-wrapper{-webkit-transform:translateX(8px);transform:translateX(8px)}.vkuiHorizontalScroll__arrowRight:hover~.vkuiHorizontalScroll__in .vkuiHorizontalScroll__in-wrapper{-webkit-transform:translateX(-8px);transform:translateX(-8px)}
1
+ .vkuiHorizontalScroll{overflow-x:hidden;position:relative}.vkuiHorizontalScroll__in{-webkit-overflow-scrolling:touch;overflow-x:auto;scrollbar-width:none}.vkuiHorizontalScroll__in::-webkit-scrollbar{display:none}.vkuiHorizontalScroll__in-wrapper{transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}.vkuiHorizontalScroll__arrowLeft:hover~.vkuiHorizontalScroll__in .vkuiHorizontalScroll__in-wrapper{-webkit-transform:translateX(8px);transform:translateX(8px)}.vkuiHorizontalScroll__arrowRight:hover~.vkuiHorizontalScroll__in .vkuiHorizontalScroll__in-wrapper{-webkit-transform:translateX(-8px);transform:translateX(-8px)}.vkuiTabs .vkuiHorizontalScroll{min-width:100%}.vkuiTabs__in .vkuiHorizontalScroll__in-wrapper{align-items:stretch;display:flex}.vkuiTabs--sizeX-compact.vkuiTabs--withGaps .vkuiHorizontalScroll__in-wrapper:after,.vkuiTabs--sizeX-compact.vkuiTabs--withGaps .vkuiHorizontalScroll__in-wrapper:before{content:"";display:block;flex-shrink:0;height:1px;width:8px}
@@ -200,4 +200,5 @@ var HorizontalScrollComponent = function HorizontalScrollComponent(_ref2) {
200
200
  export var HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {
201
201
  hasMouse: true
202
202
  });
203
+ HorizontalScroll.displayName = "HorizontalScroll";
203
204
  //# sourceMappingURL=HorizontalScroll.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":["React","withAdaptivity","HorizontalScrollArrow","easeInOutSine","useEventListener","useExternRef","classNames","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScrollComponent","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","hasMouse","getRef","restProps","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","HorizontalScroll"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport { HorizontalScrollArrow } from \"./HorizontalScrollArrow\";\nimport { easeInOutSine } from \"../../lib/fx\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { HasRef } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./HorizontalScroll.css\";\n\ninterface ScrollContext {\n scrollElement: HTMLElement | null;\n scrollAnimationDuration: number;\n animationQueue: VoidFunction[];\n getScrollPosition: (currentPosition: number) => number;\n onScrollToRightBorder: VoidFunction;\n onScrollEnd: VoidFunction;\n onScrollStart: VoidFunction;\n /**\n * Начальная ширина прокрутки.\n * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n */\n initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n extends React.HTMLAttributes<HTMLDivElement>,\n AdaptivityProps,\n HasRef<HTMLDivElement> {\n /**\n * Функция для расчета величины прокрутки при клике на левую стрелку.\n */\n getScrollToLeft?: ScrollPositionHandler;\n /**\n * Функция для расчета величины прокрутки при клике на правую стрелку.\n */\n getScrollToRight?: ScrollPositionHandler;\n arrowSize?: \"m\" | \"l\";\n showArrows?: boolean | \"always\";\n scrollAnimationDuration?: number;\n}\n\n/**\n * timing method\n */\nfunction now() {\n return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue,\n onScrollToRightBorder,\n onScrollEnd,\n onScrollStart,\n initialScrollWidth,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n if (!scrollElement || !getScrollPosition) {\n return;\n }\n\n /**\n * максимальное значение сдвига влево\n */\n const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n let startLeft = roundUpElementScrollLeft(scrollElement);\n let endLeft = getScrollPosition(startLeft);\n\n onScrollStart();\n\n if (endLeft >= maxLeft) {\n onScrollToRightBorder();\n endLeft = maxLeft;\n }\n\n const startTime = now();\n\n (function scroll() {\n if (!scrollElement) {\n onScrollEnd();\n return;\n }\n\n const time = now();\n const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n const value = easeInOutSine(elapsed);\n\n const currentLeft = startLeft + (endLeft - startLeft) * value;\n scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n if (\n roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) &&\n elapsed !== 1\n ) {\n requestAnimationFrame(scroll);\n return;\n }\n\n onScrollEnd();\n animationQueue.shift();\n if (animationQueue.length > 0) {\n animationQueue[0]();\n }\n })();\n}\n\nconst HorizontalScrollComponent = ({\n children,\n getScrollToLeft,\n getScrollToRight,\n showArrows = true,\n arrowSize = \"l\",\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n hasMouse,\n getRef,\n ...restProps\n}: HorizontalScrollProps) => {\n const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef);\n\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n const scrollTo = React.useCallback(\n (getScrollPosition: ScrollPositionHandler) => {\n const scrollElement = scrollerRef.current;\n\n animationQueue.current.push(() =>\n doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue: animationQueue.current,\n onScrollToRightBorder: () => setCanScrollRight(false),\n onScrollEnd: () => (isCustomScrollingRef.current = false),\n onScrollStart: () => (isCustomScrollingRef.current = true),\n initialScrollWidth:\n scrollElement?.firstElementChild?.scrollWidth || 0,\n scrollAnimationDuration,\n })\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollAnimationDuration, scrollerRef]\n );\n\n const scrollToLeft = React.useCallback(() => {\n const getScrollPosition =\n getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n const scrollToRight = React.useCallback(() => {\n const getScrollPosition =\n getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToRight, scrollTo, scrollerRef]);\n\n const onscroll = React.useCallback(() => {\n if (\n showArrows &&\n hasMouse &&\n scrollerRef.current &&\n !isCustomScrollingRef.current\n ) {\n const scrollElement = scrollerRef.current;\n\n setCanScrollLeft(scrollElement.scrollLeft > 0);\n setCanScrollRight(\n roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n scrollElement.scrollWidth\n );\n }\n }, [hasMouse, scrollerRef, showArrows]);\n\n const scrollEvent = useEventListener(\"scroll\", onscroll);\n React.useEffect(() => {\n if (scrollerRef.current) {\n scrollEvent.add(scrollerRef.current);\n }\n }, [scrollEvent, scrollerRef]);\n React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\n \"HorizontalScroll\",\n showArrows === \"always\" && \"HorizontalScroll--withConstArrows\"\n )}\n >\n {showArrows && hasMouse && canScrollLeft && (\n <HorizontalScrollArrow\n size={arrowSize}\n direction=\"left\"\n vkuiClass=\"HorizontalScroll__arrowLeft\"\n onClick={scrollToLeft}\n />\n )}\n {showArrows && hasMouse && canScrollRight && (\n <HorizontalScrollArrow\n size={arrowSize}\n direction=\"right\"\n vkuiClass=\"HorizontalScroll__arrowRight\"\n onClick={scrollToRight}\n />\n )}\n <div vkuiClass=\"HorizontalScroll__in\" ref={scrollerRef}>\n <div vkuiClass=\"HorizontalScroll__in-wrapper\">{children}</div>\n </div>\n </div>\n );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {\n hasMouse: true,\n});\n"],"file":"HorizontalScroll.js"}
1
+ {"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":["React","withAdaptivity","HorizontalScrollArrow","easeInOutSine","useEventListener","useExternRef","classNames","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScrollComponent","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","hasMouse","getRef","restProps","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","HorizontalScroll","displayName"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport { HorizontalScrollArrow } from \"./HorizontalScrollArrow\";\nimport { easeInOutSine } from \"../../lib/fx\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { HasRef } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./HorizontalScroll.css\";\n\ninterface ScrollContext {\n scrollElement: HTMLElement | null;\n scrollAnimationDuration: number;\n animationQueue: VoidFunction[];\n getScrollPosition: (currentPosition: number) => number;\n onScrollToRightBorder: VoidFunction;\n onScrollEnd: VoidFunction;\n onScrollStart: VoidFunction;\n /**\n * Начальная ширина прокрутки.\n * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n */\n initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n extends React.HTMLAttributes<HTMLDivElement>,\n AdaptivityProps,\n HasRef<HTMLDivElement> {\n /**\n * Функция для расчета величины прокрутки при клике на левую стрелку.\n */\n getScrollToLeft?: ScrollPositionHandler;\n /**\n * Функция для расчета величины прокрутки при клике на правую стрелку.\n */\n getScrollToRight?: ScrollPositionHandler;\n arrowSize?: \"m\" | \"l\";\n showArrows?: boolean | \"always\";\n scrollAnimationDuration?: number;\n}\n\n/**\n * timing method\n */\nfunction now() {\n return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue,\n onScrollToRightBorder,\n onScrollEnd,\n onScrollStart,\n initialScrollWidth,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n if (!scrollElement || !getScrollPosition) {\n return;\n }\n\n /**\n * максимальное значение сдвига влево\n */\n const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n let startLeft = roundUpElementScrollLeft(scrollElement);\n let endLeft = getScrollPosition(startLeft);\n\n onScrollStart();\n\n if (endLeft >= maxLeft) {\n onScrollToRightBorder();\n endLeft = maxLeft;\n }\n\n const startTime = now();\n\n (function scroll() {\n if (!scrollElement) {\n onScrollEnd();\n return;\n }\n\n const time = now();\n const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n const value = easeInOutSine(elapsed);\n\n const currentLeft = startLeft + (endLeft - startLeft) * value;\n scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n if (\n roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) &&\n elapsed !== 1\n ) {\n requestAnimationFrame(scroll);\n return;\n }\n\n onScrollEnd();\n animationQueue.shift();\n if (animationQueue.length > 0) {\n animationQueue[0]();\n }\n })();\n}\n\nconst HorizontalScrollComponent = ({\n children,\n getScrollToLeft,\n getScrollToRight,\n showArrows = true,\n arrowSize = \"l\",\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n hasMouse,\n getRef,\n ...restProps\n}: HorizontalScrollProps) => {\n const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef);\n\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n const scrollTo = React.useCallback(\n (getScrollPosition: ScrollPositionHandler) => {\n const scrollElement = scrollerRef.current;\n\n animationQueue.current.push(() =>\n doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue: animationQueue.current,\n onScrollToRightBorder: () => setCanScrollRight(false),\n onScrollEnd: () => (isCustomScrollingRef.current = false),\n onScrollStart: () => (isCustomScrollingRef.current = true),\n initialScrollWidth:\n scrollElement?.firstElementChild?.scrollWidth || 0,\n scrollAnimationDuration,\n })\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollAnimationDuration, scrollerRef]\n );\n\n const scrollToLeft = React.useCallback(() => {\n const getScrollPosition =\n getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n const scrollToRight = React.useCallback(() => {\n const getScrollPosition =\n getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToRight, scrollTo, scrollerRef]);\n\n const onscroll = React.useCallback(() => {\n if (\n showArrows &&\n hasMouse &&\n scrollerRef.current &&\n !isCustomScrollingRef.current\n ) {\n const scrollElement = scrollerRef.current;\n\n setCanScrollLeft(scrollElement.scrollLeft > 0);\n setCanScrollRight(\n roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n scrollElement.scrollWidth\n );\n }\n }, [hasMouse, scrollerRef, showArrows]);\n\n const scrollEvent = useEventListener(\"scroll\", onscroll);\n React.useEffect(() => {\n if (scrollerRef.current) {\n scrollEvent.add(scrollerRef.current);\n }\n }, [scrollEvent, scrollerRef]);\n React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\n \"HorizontalScroll\",\n showArrows === \"always\" && \"HorizontalScroll--withConstArrows\"\n )}\n >\n {showArrows && hasMouse && canScrollLeft && (\n <HorizontalScrollArrow\n size={arrowSize}\n direction=\"left\"\n vkuiClass=\"HorizontalScroll__arrowLeft\"\n onClick={scrollToLeft}\n />\n )}\n {showArrows && hasMouse && canScrollRight && (\n <HorizontalScrollArrow\n size={arrowSize}\n direction=\"right\"\n vkuiClass=\"HorizontalScroll__arrowRight\"\n onClick={scrollToRight}\n />\n )}\n <div vkuiClass=\"HorizontalScroll__in\" ref={scrollerRef}>\n <div vkuiClass=\"HorizontalScroll__in-wrapper\">{children}</div>\n </div>\n </div>\n );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {\n hasMouse: true,\n});\n\nHorizontalScroll.displayName = \"HorizontalScroll\";\n"],"file":"HorizontalScroll.js"}
@@ -1,3 +1,3 @@
1
- .vkuiHorizontalScrollArrow{position:absolute;cursor:pointer;-webkit-user-select:auto;user-select:auto;top:0;height:100%;padding:0;opacity:0;z-index:3;border:0;background-color:transparent;transition:opacity .15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:var(--android-easing);display:flex;flex-direction:column;justify-content:center}.vkuiHorizontalScrollArrow__icon{background-color:#fff;background-color:var(--modal_card_background,
2
- var(--vkui--color_background_modal)
3
- );color:#99a2ad;color:var(--icon_secondary, var(--vkui--color_icon_secondary));box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0px 0px 2px rgba(0, 0, 0, 0.08) , 0px 4px 16px rgba(0, 0, 0, 0.08));display:flex;align-items:center;justify-content:center}.vkuiHorizontalScrollArrow--m .vkuiHorizontalScrollArrow__icon{width:28px;height:28px;border-radius:14px}.vkuiHorizontalScrollArrow--l .vkuiHorizontalScrollArrow__icon{width:40px;height:40px;border-radius:24px}.vkuiHorizontalScrollArrow--left{padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular, 16px);left:0}.vkuiHorizontalScrollArrow--right{padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular, 16px);right:0}.vkuiHorizontalScrollArrow--ios .vkuiHorizontalScrollArrow{transition-timing-function:cubic-bezier(.36,.66,.04,1);transition-timing-function:var(--ios-easing)}.vkuiGallery:hover .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll:hover .vkuiHorizontalScrollArrow{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,0.64)}.vkuiGallery:hover .vkuiHorizontalScrollArrow:hover,.vkuiHorizontalScroll:hover .vkuiHorizontalScrollArrow:hover,.vkuiHorizontalScroll--withConstArrows .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll--withConstArrows:hover .vkuiHorizontalScrollArrow{opacity:1}
1
+ .vkuiHorizontalScrollArrow{background-color:initial;border:none;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;opacity:0;padding:0;position:absolute;top:0;transition:opacity .15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:var(--android-easing);-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;z-index:3}.vkuiHorizontalScrollArrow__icon{align-items:center;background-color:#fff;background-color:var(
2
+ --modal_card_background,var(--vkui--color_background_modal)
3
+ );box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08));color:#99a2ad;color:var(--icon_secondary,var(--vkui--color_icon_secondary));display:flex;justify-content:center}.vkuiHorizontalScrollArrow--m .vkuiHorizontalScrollArrow__icon{border-radius:14px;height:28px;width:28px}.vkuiHorizontalScrollArrow--l .vkuiHorizontalScrollArrow__icon{border-radius:24px;height:40px;width:40px}.vkuiHorizontalScrollArrow--left{left:0;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiHorizontalScrollArrow--right{padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular,16px);right:0}.vkuiHorizontalScrollArrow--ios .vkuiHorizontalScrollArrow{transition-timing-function:cubic-bezier(.36,.66,.04,1);transition-timing-function:var(--ios-easing)}.vkuiGallery:hover .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll:hover .vkuiHorizontalScrollArrow{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,.64)}.vkuiGallery:hover .vkuiHorizontalScrollArrow:hover,.vkuiHorizontalScroll--withConstArrows .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll--withConstArrows:hover .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll:hover .vkuiHorizontalScrollArrow:hover{opacity:1}
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  var _excluded = ["size", "direction", "onClick"];
4
4
  import { createScopedElement } from "../../lib/jsxRuntime";
5
- import { Icon24Chevron, Icon24ChevronLeft, Icon16Chevron, Icon16ChevronLeft } from "@vkontakte/icons";
5
+ import { Icon24Chevron, Icon24ChevronCompactLeft, Icon16Chevron, Icon16ChevronLeft } from "@vkontakte/icons";
6
6
  import { classNames } from "../../lib/classNames";
7
7
  import { usePlatform } from "../../hooks/usePlatform";
8
8
  import { IOS } from "../../lib/platform";
@@ -21,7 +21,7 @@ export var HorizontalScrollArrow = function HorizontalScrollArrow(_ref) {
21
21
  if (size === "m") {
22
22
  ArrowIcon = direction === "left" ? Icon16ChevronLeft : Icon16Chevron;
23
23
  } else {
24
- ArrowIcon = direction === "left" ? Icon24ChevronLeft : Icon24Chevron;
24
+ ArrowIcon = direction === "left" ? Icon24ChevronCompactLeft : Icon24Chevron;
25
25
  }
26
26
 
27
27
  return createScopedElement(Tappable, _extends({}, restProps, {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"names":["Icon24Chevron","Icon24ChevronLeft","Icon16Chevron","Icon16ChevronLeft","classNames","usePlatform","IOS","Tappable","HorizontalScrollArrow","size","direction","onClick","restProps","platform","ArrowIcon"],"mappings":";;;;AACA,SACEA,aADF,EAEEC,iBAFF,EAGEC,aAHF,EAIEC,iBAJF,QAKO,kBALP;AAMA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,GAAT;AACA,SAASC,QAAT;AACA;AAQA,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,OAKH;AAAA,uBAJhCC,IAIgC;AAAA,MAJhCA,IAIgC,0BAJzB,GAIyB;AAAA,MAHhCC,SAGgC,QAHhCA,SAGgC;AAAA,MAFhCC,OAEgC,QAFhCA,OAEgC;AAAA,MAD7BC,SAC6B;;AAChC,MAAMC,QAAQ,GAAGR,WAAW,EAA5B;AACA,MAAIS,SAAJ;;AAEA,MAAIL,IAAI,KAAK,GAAb,EAAkB;AAChBK,IAAAA,SAAS,GAAGJ,SAAS,KAAK,MAAd,GAAuBP,iBAAvB,GAA2CD,aAAvD;AACD,GAFD,MAEO;AACLY,IAAAA,SAAS,GAAGJ,SAAS,KAAK,MAAd,GAAuBT,iBAAvB,GAA2CD,aAAvD;AACD;;AAED,SACE,oBAAC,QAAD,eACMY,SADN;AAEE,IAAA,SAAS,EAAC,QAFZ;AAGE,IAAA,QAAQ,EAAE,KAHZ;AAIE,IAAA,SAAS,EAAE,KAJb;AAKE,IAAA,SAAS,EAAER,UAAU,CACnB,uBADmB,mCAEOK,IAFP,oCAGOC,SAHP,GAInBG,QAAQ,KAAKP,GAAb,IAAoB,4BAJD,CALvB;AAWE,IAAA,OAAO,EAAEK;AAXX,MAaE;AAAM,IAAA,SAAS,EAAC;AAAhB,KACE,oBAAC,SAAD,OADF,CAbF,CADF;AAmBD,CAlCM","sourcesContent":["import * as React from \"react\";\nimport {\n Icon24Chevron,\n Icon24ChevronLeft,\n Icon16Chevron,\n Icon16ChevronLeft,\n} from \"@vkontakte/icons\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { IOS } from \"../../lib/platform\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport \"./HorizontalScrollArrow.css\";\n\nexport interface HorizontalScrollArrowProps {\n direction: \"left\" | \"right\";\n size?: \"m\" | \"l\";\n onClick(): void;\n}\n\nexport const HorizontalScrollArrow = ({\n size = \"l\",\n direction,\n onClick,\n ...restProps\n}: HorizontalScrollArrowProps) => {\n const platform = usePlatform();\n let ArrowIcon: React.ComponentType<unknown>;\n\n if (size === \"m\") {\n ArrowIcon = direction === \"left\" ? Icon16ChevronLeft : Icon16Chevron;\n } else {\n ArrowIcon = direction === \"left\" ? Icon24ChevronLeft : Icon24Chevron;\n }\n\n return (\n <Tappable\n {...restProps}\n Component=\"button\"\n hasHover={false}\n hasActive={false}\n vkuiClass={classNames(\n \"HorizontalScrollArrow\",\n `HorizontalScrollArrow--${size}`,\n `HorizontalScrollArrow--${direction}`,\n platform === IOS && \"HorizontalScrollArrow--ios\"\n )}\n onClick={onClick}\n >\n <span vkuiClass=\"HorizontalScrollArrow__icon\">\n <ArrowIcon />\n </span>\n </Tappable>\n );\n};\n"],"file":"HorizontalScrollArrow.js"}
1
+ {"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"names":["Icon24Chevron","Icon24ChevronCompactLeft","Icon16Chevron","Icon16ChevronLeft","classNames","usePlatform","IOS","Tappable","HorizontalScrollArrow","size","direction","onClick","restProps","platform","ArrowIcon"],"mappings":";;;;AACA,SACEA,aADF,EAEEC,wBAFF,EAGEC,aAHF,EAIEC,iBAJF,QAKO,kBALP;AAMA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,GAAT;AACA,SAASC,QAAT;AACA;AAQA,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,OAKH;AAAA,uBAJhCC,IAIgC;AAAA,MAJhCA,IAIgC,0BAJzB,GAIyB;AAAA,MAHhCC,SAGgC,QAHhCA,SAGgC;AAAA,MAFhCC,OAEgC,QAFhCA,OAEgC;AAAA,MAD7BC,SAC6B;;AAChC,MAAMC,QAAQ,GAAGR,WAAW,EAA5B;AACA,MAAIS,SAAJ;;AAEA,MAAIL,IAAI,KAAK,GAAb,EAAkB;AAChBK,IAAAA,SAAS,GAAGJ,SAAS,KAAK,MAAd,GAAuBP,iBAAvB,GAA2CD,aAAvD;AACD,GAFD,MAEO;AACLY,IAAAA,SAAS,GAAGJ,SAAS,KAAK,MAAd,GAAuBT,wBAAvB,GAAkDD,aAA9D;AACD;;AAED,SACE,oBAAC,QAAD,eACMY,SADN;AAEE,IAAA,SAAS,EAAC,QAFZ;AAGE,IAAA,QAAQ,EAAE,KAHZ;AAIE,IAAA,SAAS,EAAE,KAJb;AAKE,IAAA,SAAS,EAAER,UAAU,CACnB,uBADmB,mCAEOK,IAFP,oCAGOC,SAHP,GAInBG,QAAQ,KAAKP,GAAb,IAAoB,4BAJD,CALvB;AAWE,IAAA,OAAO,EAAEK;AAXX,MAaE;AAAM,IAAA,SAAS,EAAC;AAAhB,KACE,oBAAC,SAAD,OADF,CAbF,CADF;AAmBD,CAlCM","sourcesContent":["import * as React from \"react\";\nimport {\n Icon24Chevron,\n Icon24ChevronCompactLeft,\n Icon16Chevron,\n Icon16ChevronLeft,\n} from \"@vkontakte/icons\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { IOS } from \"../../lib/platform\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport \"./HorizontalScrollArrow.css\";\n\nexport interface HorizontalScrollArrowProps {\n direction: \"left\" | \"right\";\n size?: \"m\" | \"l\";\n onClick(): void;\n}\n\nexport const HorizontalScrollArrow = ({\n size = \"l\",\n direction,\n onClick,\n ...restProps\n}: HorizontalScrollArrowProps) => {\n const platform = usePlatform();\n let ArrowIcon: React.ComponentType<unknown>;\n\n if (size === \"m\") {\n ArrowIcon = direction === \"left\" ? Icon16ChevronLeft : Icon16Chevron;\n } else {\n ArrowIcon = direction === \"left\" ? Icon24ChevronCompactLeft : Icon24Chevron;\n }\n\n return (\n <Tappable\n {...restProps}\n Component=\"button\"\n hasHover={false}\n hasActive={false}\n vkuiClass={classNames(\n \"HorizontalScrollArrow\",\n `HorizontalScrollArrow--${size}`,\n `HorizontalScrollArrow--${direction}`,\n platform === IOS && \"HorizontalScrollArrow--ios\"\n )}\n onClick={onClick}\n >\n <span vkuiClass=\"HorizontalScrollArrow__icon\">\n <ArrowIcon />\n </span>\n </Tappable>\n );\n};\n"],"file":"HorizontalScrollArrow.js"}
@@ -1 +1 @@
1
- .vkuiIconButton{-webkit-appearance:none;appearance:none;background:0 0;border:0;box-shadow:none;display:block;color:currentColor;padding:0;margin:0;position:relative;height:48px;border-radius:9999px}.vkuiIconButton--sizeY-compact{height:44px}.vkuiIconButton[disabled]{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,0.64)}.vkuiIconButton--ios{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px)}.vkuiIconButton .vkuiIcon--16{padding:16px}.vkuiIconButton .vkuiIcon--16.vkuiIcon--w-8{padding:16px 14px}.vkuiIconButton--sizeY-compact .vkuiIcon--16,.vkuiIconButton--sizeY-compact .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton .vkuiIcon--24{padding:12px}.vkuiIconButton--sizeY-compact .vkuiIcon--24{padding:10px}.vkuiIconButton .vkuiIcon--28{padding:10px}.vkuiIconButton--sizeY-compact .vkuiIcon--28{padding:8px}.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton,.vkuiFormField__after .vkuiIconButton{display:flex;align-items:center;align-content:center;justify-content:center;width:44px;width:var(--vkui--size_field_height--regular,44px);height:44px;height:var(--vkui--size_field_height--regular,44px);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px)}.vkuiFormField__after .vkuiIconButton .vkuiIcon.vkuiIcon.vkuiIcon{padding:0}.vkuiFormField__after .vkuiIconButton--sizeY-compact{width:36px;width:var(--vkui--size_field_height--compact,36px);height:36px;height:var(--vkui--size_field_height--compact,36px)}.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-compact,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-compact{height:36px;height:var(--vkui--size_field_height--compact,36px)}
1
+ .vkuiIconButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:9999px;box-shadow:none;color:currentColor;display:block;height:48px;margin:0;padding:0;position:relative}.vkuiIconButton--sizeY-compact{height:44px}.vkuiIconButton[disabled]{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,.64)}.vkuiIconButton--ios{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px)}.vkuiIconButton .vkuiIcon--16{padding:16px}.vkuiIconButton .vkuiIcon--16.vkuiIcon--w-8{padding:16px 14px}.vkuiIconButton--sizeY-compact .vkuiIcon--16,.vkuiIconButton--sizeY-compact .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton .vkuiIcon--24{padding:12px}.vkuiIconButton .vkuiIcon--28,.vkuiIconButton--sizeY-compact .vkuiIcon--24{padding:10px}.vkuiIconButton--sizeY-compact .vkuiIcon--28{padding:8px}.vkuiFormField__after .vkuiIconButton,.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton{align-content:center;align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);display:flex;height:44px;height:var(--vkui--size_field_height--regular,44px);justify-content:center;width:44px;width:var(--vkui--size_field_height--regular,44px)}.vkuiFormField__after .vkuiIconButton .vkuiIcon.vkuiIcon.vkuiIcon{padding:0}.vkuiFormField__after .vkuiIconButton--sizeY-compact{width:36px;width:var(--vkui--size_field_height--compact,36px)}.vkuiFormField__after .vkuiIconButton--sizeY-compact,.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-compact,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-compact{height:36px;height:var(--vkui--size_field_height--compact,36px)}
@@ -1 +1 @@
1
- .vkuiInfoRow{-webkit-user-select:text;user-select:text;text-overflow:ellipsis;overflow:hidden}.vkuiInfoRow__header{display:block;margin-bottom:2px;color:#6d7885;color:var(--text_subhead, var(--vkui--color_text_subhead));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
1
+ .vkuiInfoRow{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.vkuiInfoRow,.vkuiInfoRow__header{overflow:hidden;text-overflow:ellipsis}.vkuiInfoRow__header{color:#6d7885;color:var(--text_subhead,var(--vkui--color_text_subhead));display:block;margin-bottom:2px;white-space:nowrap}
@@ -1 +1 @@
1
- .vkuiInitialsAvatar{background-color:#99a2ad;background-image:linear-gradient(135deg,#b1b6bd,#99a2ad)}.vkuiInitialsAvatar--color-red{background-color:#e52e40;background-image:linear-gradient(135deg,#ff7583,#e52e40)}.vkuiInitialsAvatar--color-pink{background-color:#e62e6b;background-image:linear-gradient(135deg,#ff8880,#e62e6b)}.vkuiInitialsAvatar--color-orange{background-color:#e66b2e;background-image:linear-gradient(135deg,#ffbf80,#e66b2e)}.vkuiInitialsAvatar--color-yellow{background-color:#e7a902;background-image:linear-gradient(135deg,#ffd54f,#e7a902)}.vkuiInitialsAvatar--color-green{background-color:#6cd97e;background-image:linear-gradient(135deg,#6cd97e,#12b212)}.vkuiInitialsAvatar--color-l-blue{background-color:#2bb4d6;background-image:linear-gradient(135deg,#7df1fa,#2bb4d6)}.vkuiInitialsAvatar--color-blue{background-color:#3f8ae0;background-image:linear-gradient(135deg,#6cf,#3f8ae0)}.vkuiInitialsAvatar--color-violet{background-color:#8f3fe0;background-image:linear-gradient(135deg,#d3a6ff,#8f3fe0)}.vkuiInitialsAvatar__text{font-family:"VK Sans Display",-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-display);font-weight:600;color:#fff;color:var(--white, var(--vkui--color_text_contrast));text-transform:uppercase;text-align:center}
1
+ .vkuiInitialsAvatar{background-color:#99a2ad;background-image:linear-gradient(135deg,#b1b6bd,#99a2ad)}.vkuiInitialsAvatar--color-red{background-color:#e52e40;background-image:linear-gradient(135deg,#ff7583,#e52e40)}.vkuiInitialsAvatar--color-pink{background-color:#e62e6b;background-image:linear-gradient(135deg,#ff8880,#e62e6b)}.vkuiInitialsAvatar--color-orange{background-color:#e66b2e;background-image:linear-gradient(135deg,#ffbf80,#e66b2e)}.vkuiInitialsAvatar--color-yellow{background-color:#e7a902;background-image:linear-gradient(135deg,#ffd54f,#e7a902)}.vkuiInitialsAvatar--color-green{background-color:#6cd97e;background-image:linear-gradient(135deg,#6cd97e,#12b212)}.vkuiInitialsAvatar--color-l-blue{background-color:#2bb4d6;background-image:linear-gradient(135deg,#7df1fa,#2bb4d6)}.vkuiInitialsAvatar--color-blue{background-color:#3f8ae0;background-image:linear-gradient(135deg,#6cf,#3f8ae0)}.vkuiInitialsAvatar--color-violet{background-color:#8f3fe0;background-image:linear-gradient(135deg,#d3a6ff,#8f3fe0)}.vkuiInitialsAvatar__text{color:#fff;color:var(--white,var(--vkui--color_text_contrast));font-family:VK Sans Display,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-display);font-weight:600;text-align:center;text-transform:uppercase}
@@ -1 +1 @@
1
- .vkuiInput{position:relative;line-height:20px;font-size:16px}.vkuiInput--center .vkuiInput__el{text-align:center}.vkuiInput--right .vkuiInput__el{text-align:right}.vkuiInput__el{margin:0;width:100%;display:block;box-sizing:border-box;box-shadow:none;border:0;-webkit-appearance:none;appearance:none;text-overflow:ellipsis;font-weight:400;font-weight:var(--vkui--font_text--font_weight--regular,400);font-size:16px;font-size:var(--vkui--font_text--font_size--regular,16px);line-height:20px;line-height:var(--vkui--font_text--line_height--regular,20px);color:#000;color:var(--text_primary, var(--vkui--color_text_primary));padding-right:12px;padding-left:12px;position:relative;z-index:2;background:0 0}.vkuiInput--sizeY-compact .vkuiInput__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact,15px);line-height:20px;line-height:var(--vkui--font_text--line_height--compact,20px)}.vkuiInput--hasBefore .vkuiInput__el{padding-left:0}.vkuiInput--hasAfter .vkuiInput__el{padding-right:0}.vkuiInput__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,0.64)}.vkuiInput__el::-webkit-input-placeholder{color:#818c99;color:var(--field_text_placeholder, var(--vkui--color_text_secondary))}.vkuiInput__el::placeholder{color:#818c99;color:var(--field_text_placeholder, var(--vkui--color_text_secondary))}.vkuiInput__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--text_secondary, var(--vkui--color_text_secondary))}.vkuiInput__el:disabled::placeholder{color:#818c99;color:var(--text_secondary, var(--vkui--color_text_secondary))}
1
+ .vkuiInput{font-size:16px;line-height:20px;position:relative}.vkuiInput--center .vkuiInput__el{text-align:center}.vkuiInput--right .vkuiInput__el{text-align:right}.vkuiInput__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;box-shadow:none;box-sizing:border-box;color:#000;color:var(--text_primary,var(--vkui--color_text_primary));display:block;font-size:16px;font-size:var(--vkui--font_text--font_size--regular,16px);font-weight:400;font-weight:var(--vkui--font_text--font_weight--regular,400);line-height:20px;line-height:var(--vkui--font_text--line_height--regular,20px);margin:0;padding-left:12px;padding-right:12px;position:relative;text-overflow:ellipsis;width:100%;z-index:2}.vkuiInput--sizeY-compact .vkuiInput__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact,15px);line-height:20px;line-height:var(--vkui--font_text--line_height--compact,20px)}.vkuiInput--hasBefore .vkuiInput__el{padding-left:0}.vkuiInput--hasAfter .vkuiInput__el{padding-right:0}.vkuiInput__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,.64)}.vkuiInput__el::-webkit-input-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiInput__el::-moz-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiInput__el::-ms-input-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiInput__el::placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiInput__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiInput__el:disabled::-moz-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiInput__el:disabled::-ms-input-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiInput__el:disabled::placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}
@@ -43,4 +43,5 @@ var InputComponent = function InputComponent(_ref) {
43
43
  export var Input = withAdaptivity(InputComponent, {
44
44
  sizeY: true
45
45
  });
46
+ Input.displayName = "Input";
46
47
  //# sourceMappingURL=Input.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"names":["classNames","FormField","withAdaptivity","InputComponent","type","align","getRef","className","getRootRef","sizeY","style","before","after","restProps","disabled","Input"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,SAAT;AAEA,SAASC,cAAT;AACA;;AAUA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAWL;AAAA,uBAVhBC,IAUgB;AAAA,MAVhBA,IAUgB,0BAVT,MAUS;AAAA,MAThBC,KASgB,QAThBA,KASgB;AAAA,MARhBC,MAQgB,QARhBA,MAQgB;AAAA,MAPhBC,SAOgB,QAPhBA,SAOgB;AAAA,MANhBC,UAMgB,QANhBA,UAMgB;AAAA,MALhBC,KAKgB,QALhBA,KAKgB;AAAA,MAJhBC,KAIgB,QAJhBA,KAIgB;AAAA,MAHhBC,MAGgB,QAHhBA,MAGgB;AAAA,MAFhBC,KAEgB,QAFhBA,KAEgB;AAAA,MADbC,SACa;;AAChB,SACE,oBAAC,SAAD;AACE,IAAA,SAAS,EAAEb,UAAU,CACnB,OADmB,EAEnB,CAAC,CAACK,KAAF,qBAAqBA,KAArB,CAFmB,yBAGHI,KAHG,GAGM;AACzBE,IAAAA,MAAM,IAAI,kBAJS,EAKnBC,KAAK,IAAI,iBALU,CADvB;AAQE,IAAA,KAAK,EAAEF,KART;AASE,IAAA,SAAS,EAAEH,SATb;AAUE,IAAA,UAAU,EAAEC,UAVd;AAWE,IAAA,MAAM,EAAEG,MAXV;AAYE,IAAA,KAAK,EAAEC,KAZT;AAaE,IAAA,QAAQ,EAAEC,SAAS,CAACC;AAbtB,KAeE,0CAAWD,SAAX;AAAsB,IAAA,IAAI,EAAET,IAA5B;AAAkC,IAAA,SAAS,EAAC,WAA5C;AAAwD,IAAA,GAAG,EAAEE;AAA7D,KAfF,CADF;AAmBD,CA/BD;AAiCA;AACA;AACA;;;AACA,OAAO,IAAMS,KAAK,GAAGb,cAAc,CAACC,cAAD,EAAiB;AAClDM,EAAAA,KAAK,EAAE;AAD2C,CAAjB,CAA5B","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport \"./Input.css\";\n\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasAlign,\n AdaptivityProps,\n FormFieldProps {}\n\nconst InputComponent = ({\n type = \"text\",\n align,\n getRef,\n className,\n getRootRef,\n sizeY,\n style,\n before,\n after,\n ...restProps\n}: InputProps) => {\n return (\n <FormField\n vkuiClass={classNames(\n \"Input\",\n !!align && `Input--${align}`,\n `Input--sizeY-${sizeY}`, // TODO v5.0.0 поправить под новую адаптивность\n before && \"Input--hasBefore\",\n after && \"Input--hasAfter\"\n )}\n style={style}\n className={className}\n getRootRef={getRootRef}\n before={before}\n after={after}\n disabled={restProps.disabled}\n >\n <input {...restProps} type={type} vkuiClass=\"Input__el\" ref={getRef} />\n </FormField>\n );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = withAdaptivity(InputComponent, {\n sizeY: true,\n});\n"],"file":"Input.js"}
1
+ {"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"names":["classNames","FormField","withAdaptivity","InputComponent","type","align","getRef","className","getRootRef","sizeY","style","before","after","restProps","disabled","Input","displayName"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,SAAT;AAEA,SAASC,cAAT;AACA;;AAUA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAWL;AAAA,uBAVhBC,IAUgB;AAAA,MAVhBA,IAUgB,0BAVT,MAUS;AAAA,MAThBC,KASgB,QAThBA,KASgB;AAAA,MARhBC,MAQgB,QARhBA,MAQgB;AAAA,MAPhBC,SAOgB,QAPhBA,SAOgB;AAAA,MANhBC,UAMgB,QANhBA,UAMgB;AAAA,MALhBC,KAKgB,QALhBA,KAKgB;AAAA,MAJhBC,KAIgB,QAJhBA,KAIgB;AAAA,MAHhBC,MAGgB,QAHhBA,MAGgB;AAAA,MAFhBC,KAEgB,QAFhBA,KAEgB;AAAA,MADbC,SACa;;AAChB,SACE,oBAAC,SAAD;AACE,IAAA,SAAS,EAAEb,UAAU,CACnB,OADmB,EAEnB,CAAC,CAACK,KAAF,qBAAqBA,KAArB,CAFmB,yBAGHI,KAHG,GAGM;AACzBE,IAAAA,MAAM,IAAI,kBAJS,EAKnBC,KAAK,IAAI,iBALU,CADvB;AAQE,IAAA,KAAK,EAAEF,KART;AASE,IAAA,SAAS,EAAEH,SATb;AAUE,IAAA,UAAU,EAAEC,UAVd;AAWE,IAAA,MAAM,EAAEG,MAXV;AAYE,IAAA,KAAK,EAAEC,KAZT;AAaE,IAAA,QAAQ,EAAEC,SAAS,CAACC;AAbtB,KAeE,0CAAWD,SAAX;AAAsB,IAAA,IAAI,EAAET,IAA5B;AAAkC,IAAA,SAAS,EAAC,WAA5C;AAAwD,IAAA,GAAG,EAAEE;AAA7D,KAfF,CADF;AAmBD,CA/BD;AAiCA;AACA;AACA;;;AACA,OAAO,IAAMS,KAAK,GAAGb,cAAc,CAACC,cAAD,EAAiB;AAClDM,EAAAA,KAAK,EAAE;AAD2C,CAAjB,CAA5B;AAIPM,KAAK,CAACC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport \"./Input.css\";\n\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasAlign,\n AdaptivityProps,\n FormFieldProps {}\n\nconst InputComponent = ({\n type = \"text\",\n align,\n getRef,\n className,\n getRootRef,\n sizeY,\n style,\n before,\n after,\n ...restProps\n}: InputProps) => {\n return (\n <FormField\n vkuiClass={classNames(\n \"Input\",\n !!align && `Input--${align}`,\n `Input--sizeY-${sizeY}`, // TODO v5.0.0 поправить под новую адаптивность\n before && \"Input--hasBefore\",\n after && \"Input--hasAfter\"\n )}\n style={style}\n className={className}\n getRootRef={getRootRef}\n before={before}\n after={after}\n disabled={restProps.disabled}\n >\n <input {...restProps} type={type} vkuiClass=\"Input__el\" ref={getRef} />\n </FormField>\n );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = withAdaptivity(InputComponent, {\n sizeY: true,\n});\n\nInput.displayName = \"Input\";\n"],"file":"Input.js"}
@@ -1 +1 @@
1
- .vkuiInputLike__mask{position:relative}.vkuiInputLike__mask::after{content:"";position:absolute;width:calc(100% - .1em);height:1px;bottom:0;left:0;border-bottom:solid 1px #818c99;border-bottom:solid 1px var(--vkui--color_text_secondary,#818C99)}.vkuiInputLike__mask:last-child{margin-right:1px}.vkuiInputLike__last_character{letter-spacing:1px!important}.vkuiInputLike--full+.vkuiInputLikeDivider{color:#000;color:var(--vkui--color_text_primary,#000000)}
1
+ .vkuiInputLike__mask{position:relative}.vkuiInputLike__mask:after{border-bottom:1px solid #818c99;border-bottom:1px solid var(--vkui--color_text_secondary,#818c99);bottom:0;content:"";height:1px;left:0;position:absolute;width:calc(100% - .1em)}.vkuiInputLike__mask:last-child{margin-right:1px}.vkuiInputLike__last_character{letter-spacing:1px!important}.vkuiInputLike--full+.vkuiInputLikeDivider{color:#000;color:var(--vkui--color_text_primary,#000)}
@@ -1 +1 @@
1
- .vkuiInputLikeDivider{color:#818c99;color:var(--vkui--color_text_secondary,#818C99);letter-spacing:1px!important}
1
+ .vkuiInputLikeDivider{color:#818c99;color:var(--vkui--color_text_secondary,#818c99);letter-spacing:1px!important}
@@ -1 +1 @@
1
- .vkuiLink{color:#2688eb;color:var(--accent, var(--vkui--color_text_link));text-decoration:none;border:0;background:0 0;margin:0;padding:0;cursor:pointer;font-size:inherit;display:inline;border-radius:0}@media (hover:hover){.vkuiLink:hover{text-decoration:underline}}.vkuiLink--focus-visible{outline:2px solid #2688eb!important;outline:2px solid var(--accent, var(--vkui--color_stroke_accent))!important}.vkuiLink--has-visited:visited{color:#4986cc;color:var(--vkui--color_text_link_visited,#4986CC)}.vkuiLink .vkuiIcon{margin-left:4px;display:inline-block;vertical-align:middle}
1
+ .vkuiLink{background:none;border:0;border-radius:0;color:#2688eb;color:var(--accent,var(--vkui--color_text_link));cursor:pointer;display:inline;font-size:inherit;margin:0;padding:0;text-decoration:none}@media (hover:hover){.vkuiLink:hover{text-decoration:underline}}.vkuiLink--focus-visible{outline:2px solid #2688eb!important;outline:2px solid var(--accent,var(--vkui--color_stroke_accent))!important}.vkuiLink--has-visited:visited{color:#4986cc;color:var(--vkui--color_text_link_visited,#4986cc)}.vkuiLink .vkuiIcon{display:inline-block;margin-left:4px;vertical-align:middle}
@@ -1 +1 @@
1
- .vkuiMiniInfoCell{display:flex;padding:6px 16px;padding:6px var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiMiniInfoCell--lvl-primary{color:#000;color:var(--text_primary, var(--vkui--color_text_primary))}.vkuiMiniInfoCell--lvl-secondary{color:#6d7885;color:var(--text_subhead, var(--vkui--color_text_subhead))}.vkuiMiniInfoCell__icon{margin-right:12px;color:#99a2ad;color:var(--icon_outline_secondary, var(--vkui--color_icon_medium))}.vkuiMiniInfoCell__content{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiMiniInfoCell--wr-short .vkuiMiniInfoCell__content{white-space:initial;display:-webkit-box;max-height:60px;-webkit-line-clamp:3;-webkit-box-orient:vertical}.vkuiMiniInfoCell--wr-full .vkuiMiniInfoCell__content{overflow:inherit;white-space:initial}.vkuiMiniInfoCell__after{margin-left:12px;margin-top:-2px;margin-bottom:-2px}.vkuiMiniInfoCell--md-add,.vkuiMiniInfoCell--md-add .vkuiMiniInfoCell__icon{color:#2688eb;color:var(--accent, var(--vkui--color_icon_accent))}.vkuiMiniInfoCell--md-more,.vkuiMiniInfoCell--md-more .vkuiMiniInfoCell__icon{color:#2d81e0;color:var(--link_alternate, var(--vkui--color_icon_accent))}.vkuiMiniInfoCell--md-more{padding-top:10px;padding-bottom:10px}
1
+ .vkuiMiniInfoCell{display:flex;padding:6px 16px;padding:6px var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiMiniInfoCell--lvl-primary{color:#000;color:var(--text_primary,var(--vkui--color_text_primary))}.vkuiMiniInfoCell--lvl-secondary{color:#6d7885;color:var(--text_subhead,var(--vkui--color_text_subhead))}.vkuiMiniInfoCell__icon{color:#99a2ad;color:var(--icon_outline_secondary,var(--vkui--color_icon_secondary));margin-right:12px}.vkuiMiniInfoCell__content{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiMiniInfoCell--wr-short .vkuiMiniInfoCell__content{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;max-height:60px;white-space:normal}.vkuiMiniInfoCell--wr-full .vkuiMiniInfoCell__content{overflow:inherit;white-space:normal}.vkuiMiniInfoCell__after{margin-bottom:-2px;margin-left:12px;margin-top:-2px}.vkuiMiniInfoCell--md-add{color:#2688eb;color:var(--accent,var(--vkui--color_text_link))}.vkuiMiniInfoCell--md-add .vkuiMiniInfoCell__icon{color:#2688eb;color:var(--accent,var(--vkui--color_icon_accent))}.vkuiMiniInfoCell--md-more{color:#2d81e0;color:var(--link_alternate,var(--vkui--color_text_link))}.vkuiMiniInfoCell--md-more .vkuiMiniInfoCell__icon{color:#2d81e0;color:var(--link_alternate,var(--vkui--color_icon_accent))}.vkuiMiniInfoCell--md-more{padding-bottom:10px;padding-top:10px}