@vkontakte/vkui 4.26.0 → 4.27.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (657) hide show
  1. package/.cache/.eslintcache +1 -1
  2. package/.cache/.stylelintcache +1 -1
  3. package/.cache/.tsbuildinfo +389 -243
  4. package/.cache/ts/src/components/ActionSheetItem/ActionSheetItem.d.ts +1 -2
  5. package/.cache/ts/src/components/Alert/Alert.d.ts +1 -2
  6. package/.cache/ts/src/components/AppearanceProvider/AppearanceProvider.d.ts +1 -0
  7. package/.cache/ts/src/components/AppearanceProvider/AppearanceProviderContext.d.ts +1 -6
  8. package/.cache/ts/src/components/Card/Card.d.ts +1 -2
  9. package/.cache/ts/src/components/CardScroll/CardScroll.d.ts +4 -7
  10. package/.cache/ts/src/components/Chip/Chip.d.ts +2 -2
  11. package/.cache/ts/src/components/ConfigProvider/ConfigProvider.d.ts +1 -1
  12. package/.cache/ts/src/components/ConfigProvider/ConfigProviderContext.d.ts +5 -12
  13. package/.cache/ts/src/components/Gradient/Gradient.d.ts +1 -2
  14. package/.cache/ts/src/components/SegmentedControl/SegmentedControl.d.ts +17 -0
  15. package/.cache/ts/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.d.ts +4 -0
  16. package/.cache/ts/src/components/SliderSwitch/SliderSwitch.d.ts +6 -2
  17. package/.cache/ts/src/components/SliderSwitch/SliderSwitchButton.d.ts +4 -2
  18. package/.cache/ts/src/components/Switch/Switch.d.ts +3 -2
  19. package/.cache/ts/src/components/Typography/Subhead/Subhead.d.ts +4 -1
  20. package/.cache/ts/src/components/Typography/Title/Title.d.ts +4 -1
  21. package/.cache/ts/src/components/VisuallyHiddenInput/VisuallyHiddenInput.d.ts +12 -0
  22. package/.cache/ts/src/hooks/useAppearance.d.ts +1 -1
  23. package/.cache/ts/src/hooks/usePlatform.d.ts +1 -1
  24. package/.cache/ts/src/index.d.ts +7 -5
  25. package/.cache/ts/src/lib/utils.d.ts +1 -0
  26. package/.cache/ts/src/tokenized/index.d.ts +12 -0
  27. package/CSS_GUIDE.md +145 -0
  28. package/VKUI_TOKENS_MIGRATION_GUIDE.md +2 -1
  29. package/dist/cjs/components/ActionSheet/ActionSheetDropdownDesktop.js +5 -1
  30. package/dist/cjs/components/ActionSheet/ActionSheetDropdownDesktop.js.map +1 -1
  31. package/dist/cjs/components/ActionSheetItem/ActionSheetItem.d.ts +1 -2
  32. package/dist/cjs/components/ActionSheetItem/ActionSheetItem.js +16 -11
  33. package/dist/cjs/components/ActionSheetItem/ActionSheetItem.js.map +1 -1
  34. package/dist/cjs/components/Alert/Alert.d.ts +1 -2
  35. package/dist/cjs/components/Alert/Alert.js +12 -12
  36. package/dist/cjs/components/Alert/Alert.js.map +1 -1
  37. package/dist/cjs/components/AppRoot/AppRoot.js +0 -8
  38. package/dist/cjs/components/AppRoot/AppRoot.js.map +1 -1
  39. package/dist/cjs/components/AppRoot/AppRootPortal.js +9 -2
  40. package/dist/cjs/components/AppRoot/AppRootPortal.js.map +1 -1
  41. package/dist/cjs/components/AppearanceProvider/AppearanceProvider.d.ts +1 -0
  42. package/dist/cjs/components/AppearanceProvider/AppearanceProvider.js +34 -12
  43. package/dist/cjs/components/AppearanceProvider/AppearanceProvider.js.map +1 -1
  44. package/dist/cjs/components/AppearanceProvider/AppearanceProviderContext.d.ts +1 -6
  45. package/dist/cjs/components/AppearanceProvider/AppearanceProviderContext.js +3 -1
  46. package/dist/cjs/components/AppearanceProvider/AppearanceProviderContext.js.map +1 -1
  47. package/dist/cjs/components/Banner/Banner.js +2 -4
  48. package/dist/cjs/components/Banner/Banner.js.map +1 -1
  49. package/dist/cjs/components/Button/Button.js +12 -4
  50. package/dist/cjs/components/Button/Button.js.map +1 -1
  51. package/dist/cjs/components/Card/Card.d.ts +1 -2
  52. package/dist/cjs/components/Card/Card.js +4 -8
  53. package/dist/cjs/components/Card/Card.js.map +1 -1
  54. package/dist/cjs/components/CardScroll/CardScroll.d.ts +4 -7
  55. package/dist/cjs/components/CardScroll/CardScroll.js +11 -15
  56. package/dist/cjs/components/CardScroll/CardScroll.js.map +1 -1
  57. package/dist/cjs/components/Chip/Chip.d.ts +2 -2
  58. package/dist/cjs/components/Chip/Chip.js +3 -5
  59. package/dist/cjs/components/Chip/Chip.js.map +1 -1
  60. package/dist/cjs/components/ChipsInput/ChipsInput.js +2 -2
  61. package/dist/cjs/components/ChipsInput/ChipsInput.js.map +1 -1
  62. package/dist/cjs/components/ConfigProvider/ConfigProvider.d.ts +1 -1
  63. package/dist/cjs/components/ConfigProvider/ConfigProvider.js +32 -44
  64. package/dist/cjs/components/ConfigProvider/ConfigProvider.js.map +1 -1
  65. package/dist/cjs/components/ConfigProvider/ConfigProviderContext.d.ts +5 -12
  66. package/dist/cjs/components/ConfigProvider/ConfigProviderContext.js +3 -5
  67. package/dist/cjs/components/ConfigProvider/ConfigProviderContext.js.map +1 -1
  68. package/dist/cjs/components/ContentCard/ContentCard.js +4 -4
  69. package/dist/cjs/components/ContentCard/ContentCard.js.map +1 -1
  70. package/dist/cjs/components/FormItem/FormItem.js +0 -1
  71. package/dist/cjs/components/FormItem/FormItem.js.map +1 -1
  72. package/dist/cjs/components/Gradient/Gradient.d.ts +1 -2
  73. package/dist/cjs/components/Gradient/Gradient.js +6 -10
  74. package/dist/cjs/components/Gradient/Gradient.js.map +1 -1
  75. package/dist/cjs/components/Header/Header.js +3 -7
  76. package/dist/cjs/components/Header/Header.js.map +1 -1
  77. package/dist/cjs/components/HorizontalCell/HorizontalCell.js +1 -3
  78. package/dist/cjs/components/HorizontalCell/HorizontalCell.js.map +1 -1
  79. package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js +1 -6
  80. package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
  81. package/dist/cjs/components/HorizontalScroll/HorizontalScrollArrow.js +1 -6
  82. package/dist/cjs/components/HorizontalScroll/HorizontalScrollArrow.js.map +1 -1
  83. package/dist/cjs/components/InfoRow/InfoRow.js +1 -2
  84. package/dist/cjs/components/InfoRow/InfoRow.js.map +1 -1
  85. package/dist/cjs/components/ModalCardBase/ModalCardBase.js +1 -1
  86. package/dist/cjs/components/ModalCardBase/ModalCardBase.js.map +1 -1
  87. package/dist/cjs/components/PanelHeaderButton/PanelHeaderButton.js +1 -1
  88. package/dist/cjs/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
  89. package/dist/cjs/components/Placeholder/Placeholder.js +1 -1
  90. package/dist/cjs/components/Placeholder/Placeholder.js.map +1 -1
  91. package/dist/cjs/components/Removable/Removable.js +8 -4
  92. package/dist/cjs/components/Removable/Removable.js.map +1 -1
  93. package/dist/cjs/components/RichCell/RichCell.js +0 -1
  94. package/dist/cjs/components/RichCell/RichCell.js.map +1 -1
  95. package/dist/cjs/components/Search/Search.js +47 -23
  96. package/dist/cjs/components/Search/Search.js.map +1 -1
  97. package/dist/cjs/components/SegmentedControl/SegmentedControl.d.ts +17 -0
  98. package/dist/cjs/components/SegmentedControl/SegmentedControl.js +116 -0
  99. package/dist/cjs/components/SegmentedControl/SegmentedControl.js.map +1 -0
  100. package/dist/cjs/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.d.ts +4 -0
  101. package/dist/cjs/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js +61 -0
  102. package/dist/cjs/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js.map +1 -0
  103. package/dist/cjs/components/SimpleCell/SimpleCell.js +21 -9
  104. package/dist/cjs/components/SimpleCell/SimpleCell.js.map +1 -1
  105. package/dist/cjs/components/SliderSwitch/SliderSwitch.d.ts +6 -2
  106. package/dist/cjs/components/SliderSwitch/SliderSwitch.js +18 -6
  107. package/dist/cjs/components/SliderSwitch/SliderSwitch.js.map +1 -1
  108. package/dist/cjs/components/SliderSwitch/SliderSwitchButton.d.ts +4 -2
  109. package/dist/cjs/components/SliderSwitch/SliderSwitchButton.js +6 -5
  110. package/dist/cjs/components/SliderSwitch/SliderSwitchButton.js.map +1 -1
  111. package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js +1 -3
  112. package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js.map +1 -1
  113. package/dist/cjs/components/Switch/Switch.d.ts +3 -2
  114. package/dist/cjs/components/Switch/Switch.js +3 -6
  115. package/dist/cjs/components/Switch/Switch.js.map +1 -1
  116. package/dist/cjs/components/TextTooltip/TextTooltip.js +1 -2
  117. package/dist/cjs/components/TextTooltip/TextTooltip.js.map +1 -1
  118. package/dist/cjs/components/Tooltip/Tooltip.js +1 -2
  119. package/dist/cjs/components/Tooltip/Tooltip.js.map +1 -1
  120. package/dist/cjs/components/Typography/Subhead/Subhead.d.ts +4 -1
  121. package/dist/cjs/components/Typography/Subhead/Subhead.js +15 -8
  122. package/dist/cjs/components/Typography/Subhead/Subhead.js.map +1 -1
  123. package/dist/cjs/components/Typography/Title/Title.d.ts +4 -1
  124. package/dist/cjs/components/Typography/Title/Title.js +9 -19
  125. package/dist/cjs/components/Typography/Title/Title.js.map +1 -1
  126. package/dist/cjs/components/UsersStack/UsersStack.js +0 -1
  127. package/dist/cjs/components/UsersStack/UsersStack.js.map +1 -1
  128. package/dist/cjs/components/VisuallyHiddenInput/VisuallyHiddenInput.d.ts +12 -0
  129. package/dist/cjs/components/VisuallyHiddenInput/VisuallyHiddenInput.js +37 -0
  130. package/dist/cjs/components/VisuallyHiddenInput/VisuallyHiddenInput.js.map +1 -0
  131. package/dist/cjs/hooks/useAppearance.d.ts +1 -1
  132. package/dist/cjs/hooks/useAppearance.js +2 -2
  133. package/dist/cjs/hooks/useAppearance.js.map +1 -1
  134. package/dist/cjs/hooks/usePlatform.d.ts +1 -1
  135. package/dist/cjs/hooks/usePlatform.js.map +1 -1
  136. package/dist/cjs/index.d.ts +7 -5
  137. package/dist/cjs/index.js +18 -10
  138. package/dist/cjs/index.js.map +1 -1
  139. package/dist/cjs/lib/utils.d.ts +1 -0
  140. package/dist/cjs/lib/utils.js +7 -0
  141. package/dist/cjs/lib/utils.js.map +1 -1
  142. package/dist/cjs/tokenized/index.d.ts +12 -0
  143. package/dist/cjs/tokenized/index.js +48 -0
  144. package/dist/cjs/tokenized/index.js.map +1 -1
  145. package/dist/components/ActionSheet/ActionSheetDropdownDesktop.js +5 -1
  146. package/dist/components/ActionSheet/ActionSheetDropdownDesktop.js.map +1 -1
  147. package/dist/components/ActionSheetItem/ActionSheetItem.d.ts +1 -2
  148. package/dist/components/ActionSheetItem/ActionSheetItem.js +14 -11
  149. package/dist/components/ActionSheetItem/ActionSheetItem.js.map +1 -1
  150. package/dist/components/Alert/Alert.d.ts +1 -2
  151. package/dist/components/Alert/Alert.js +11 -12
  152. package/dist/components/Alert/Alert.js.map +1 -1
  153. package/dist/components/AppRoot/AppRoot.js +0 -7
  154. package/dist/components/AppRoot/AppRoot.js.map +1 -1
  155. package/dist/components/AppRoot/AppRootPortal.js +7 -2
  156. package/dist/components/AppRoot/AppRootPortal.js.map +1 -1
  157. package/dist/components/AppearanceProvider/AppearanceProvider.d.ts +1 -0
  158. package/dist/components/AppearanceProvider/AppearanceProvider.js +29 -11
  159. package/dist/components/AppearanceProvider/AppearanceProvider.js.map +1 -1
  160. package/dist/components/AppearanceProvider/AppearanceProviderContext.d.ts +1 -6
  161. package/dist/components/AppearanceProvider/AppearanceProviderContext.js +2 -1
  162. package/dist/components/AppearanceProvider/AppearanceProviderContext.js.map +1 -1
  163. package/dist/components/Banner/Banner.js +2 -4
  164. package/dist/components/Banner/Banner.js.map +1 -1
  165. package/dist/components/Button/Button.js +12 -5
  166. package/dist/components/Button/Button.js.map +1 -1
  167. package/dist/components/Card/Card.d.ts +1 -2
  168. package/dist/components/Card/Card.js +3 -9
  169. package/dist/components/Card/Card.js.map +1 -1
  170. package/dist/components/CardScroll/CardScroll.d.ts +4 -7
  171. package/dist/components/CardScroll/CardScroll.js +9 -14
  172. package/dist/components/CardScroll/CardScroll.js.map +1 -1
  173. package/dist/components/Chip/Chip.d.ts +2 -2
  174. package/dist/components/Chip/Chip.js +2 -6
  175. package/dist/components/Chip/Chip.js.map +1 -1
  176. package/dist/components/ChipsInput/ChipsInput.js +1 -1
  177. package/dist/components/ChipsInput/ChipsInput.js.map +1 -1
  178. package/dist/components/ConfigProvider/ConfigProvider.d.ts +1 -1
  179. package/dist/components/ConfigProvider/ConfigProvider.js +31 -44
  180. package/dist/components/ConfigProvider/ConfigProvider.js.map +1 -1
  181. package/dist/components/ConfigProvider/ConfigProviderContext.d.ts +5 -12
  182. package/dist/components/ConfigProvider/ConfigProviderContext.js +2 -3
  183. package/dist/components/ConfigProvider/ConfigProviderContext.js.map +1 -1
  184. package/dist/components/ContentCard/ContentCard.js +3 -3
  185. package/dist/components/ContentCard/ContentCard.js.map +1 -1
  186. package/dist/components/FormItem/FormItem.js +0 -1
  187. package/dist/components/FormItem/FormItem.js.map +1 -1
  188. package/dist/components/Gradient/Gradient.d.ts +1 -2
  189. package/dist/components/Gradient/Gradient.js +5 -11
  190. package/dist/components/Gradient/Gradient.js.map +1 -1
  191. package/dist/components/Header/Header.js +3 -7
  192. package/dist/components/Header/Header.js.map +1 -1
  193. package/dist/components/HorizontalCell/HorizontalCell.js +1 -3
  194. package/dist/components/HorizontalCell/HorizontalCell.js.map +1 -1
  195. package/dist/components/HorizontalScroll/HorizontalScroll.js +1 -4
  196. package/dist/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
  197. package/dist/components/HorizontalScroll/HorizontalScrollArrow.js +1 -4
  198. package/dist/components/HorizontalScroll/HorizontalScrollArrow.js.map +1 -1
  199. package/dist/components/InfoRow/InfoRow.js +1 -2
  200. package/dist/components/InfoRow/InfoRow.js.map +1 -1
  201. package/dist/components/ModalCardBase/ModalCardBase.js +2 -2
  202. package/dist/components/ModalCardBase/ModalCardBase.js.map +1 -1
  203. package/dist/components/PanelHeaderButton/PanelHeaderButton.js +1 -1
  204. package/dist/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
  205. package/dist/components/Placeholder/Placeholder.js +1 -1
  206. package/dist/components/Placeholder/Placeholder.js.map +1 -1
  207. package/dist/components/Removable/Removable.js +8 -4
  208. package/dist/components/Removable/Removable.js.map +1 -1
  209. package/dist/components/RichCell/RichCell.js +0 -1
  210. package/dist/components/RichCell/RichCell.js.map +1 -1
  211. package/dist/components/Search/Search.js +45 -22
  212. package/dist/components/Search/Search.js.map +1 -1
  213. package/dist/components/SegmentedControl/SegmentedControl.d.ts +17 -0
  214. package/dist/components/SegmentedControl/SegmentedControl.js +94 -0
  215. package/dist/components/SegmentedControl/SegmentedControl.js.map +1 -0
  216. package/dist/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.d.ts +4 -0
  217. package/dist/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js +40 -0
  218. package/dist/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js.map +1 -0
  219. package/dist/components/SimpleCell/SimpleCell.js +21 -10
  220. package/dist/components/SimpleCell/SimpleCell.js.map +1 -1
  221. package/dist/components/SliderSwitch/SliderSwitch.d.ts +6 -2
  222. package/dist/components/SliderSwitch/SliderSwitch.js +14 -3
  223. package/dist/components/SliderSwitch/SliderSwitch.js.map +1 -1
  224. package/dist/components/SliderSwitch/SliderSwitchButton.d.ts +4 -2
  225. package/dist/components/SliderSwitch/SliderSwitchButton.js +5 -5
  226. package/dist/components/SliderSwitch/SliderSwitchButton.js.map +1 -1
  227. package/dist/components/SubnavigationButton/SubnavigationButton.js +1 -3
  228. package/dist/components/SubnavigationButton/SubnavigationButton.js.map +1 -1
  229. package/dist/components/Switch/Switch.d.ts +3 -2
  230. package/dist/components/Switch/Switch.js +3 -6
  231. package/dist/components/Switch/Switch.js.map +1 -1
  232. package/dist/components/TextTooltip/TextTooltip.js +1 -2
  233. package/dist/components/TextTooltip/TextTooltip.js.map +1 -1
  234. package/dist/components/Tooltip/Tooltip.js +1 -2
  235. package/dist/components/Tooltip/Tooltip.js.map +1 -1
  236. package/dist/components/Typography/Subhead/Subhead.d.ts +4 -1
  237. package/dist/components/Typography/Subhead/Subhead.js +13 -7
  238. package/dist/components/Typography/Subhead/Subhead.js.map +1 -1
  239. package/dist/components/Typography/Title/Title.d.ts +4 -1
  240. package/dist/components/Typography/Title/Title.js +7 -16
  241. package/dist/components/Typography/Title/Title.js.map +1 -1
  242. package/dist/components/UsersStack/UsersStack.js +0 -1
  243. package/dist/components/UsersStack/UsersStack.js.map +1 -1
  244. package/dist/components/VisuallyHiddenInput/VisuallyHiddenInput.d.ts +12 -0
  245. package/dist/components/VisuallyHiddenInput/VisuallyHiddenInput.js +23 -0
  246. package/dist/components/VisuallyHiddenInput/VisuallyHiddenInput.js.map +1 -0
  247. package/dist/components.css +10 -5
  248. package/dist/components.css.map +1 -1
  249. package/dist/cssm/appearance/constants.d.ts +1 -0
  250. package/dist/cssm/components/ActionSheet/ActionSheet.d.ts +26 -0
  251. package/dist/cssm/components/ActionSheet/ActionSheetContext.d.ts +8 -0
  252. package/dist/cssm/components/ActionSheet/ActionSheetDropdown.d.ts +4 -0
  253. package/dist/cssm/components/ActionSheet/ActionSheetDropdownDesktop.d.ts +4 -0
  254. package/dist/cssm/components/ActionSheet/ActionSheetDropdownDesktop.js +5 -1
  255. package/dist/cssm/components/ActionSheet/ActionSheetDropdownDesktop.js.map +1 -1
  256. package/dist/cssm/components/ActionSheet/types.d.ts +9 -0
  257. package/dist/cssm/components/ActionSheetItem/ActionSheetItem.d.ts +20 -0
  258. package/dist/cssm/components/ActionSheetItem/ActionSheetItem.js +14 -11
  259. package/dist/cssm/components/ActionSheetItem/ActionSheetItem.js.map +1 -1
  260. package/dist/cssm/components/AdaptivityProvider/AdaptivityContext.d.ts +46 -0
  261. package/dist/cssm/components/AdaptivityProvider/AdaptivityProvider.d.ts +10 -0
  262. package/dist/cssm/components/Alert/Alert.d.ts +24 -0
  263. package/dist/cssm/components/Alert/Alert.js +11 -12
  264. package/dist/cssm/components/Alert/Alert.js.map +1 -1
  265. package/dist/cssm/components/AppRoot/AppRoot.d.ts +14 -0
  266. package/dist/cssm/components/AppRoot/AppRoot.js +0 -7
  267. package/dist/cssm/components/AppRoot/AppRoot.js.map +1 -1
  268. package/dist/cssm/components/AppRoot/AppRootContext.d.ts +9 -0
  269. package/dist/cssm/components/AppRoot/AppRootPortal.d.ts +5 -0
  270. package/dist/cssm/components/AppRoot/AppRootPortal.js +7 -2
  271. package/dist/cssm/components/AppRoot/AppRootPortal.js.map +1 -1
  272. package/dist/cssm/components/AppRoot/ScrollContext.d.ts +23 -0
  273. package/dist/cssm/components/AppearanceProvider/AppearanceProvider.d.ts +7 -0
  274. package/dist/cssm/components/AppearanceProvider/AppearanceProvider.js +29 -11
  275. package/dist/cssm/components/AppearanceProvider/AppearanceProvider.js.map +1 -1
  276. package/dist/cssm/components/AppearanceProvider/AppearanceProviderContext.d.ts +3 -0
  277. package/dist/cssm/components/AppearanceProvider/AppearanceProviderContext.js +2 -1
  278. package/dist/cssm/components/AppearanceProvider/AppearanceProviderContext.js.map +1 -1
  279. package/dist/cssm/components/Avatar/Avatar.d.ts +22 -0
  280. package/dist/cssm/components/Badge/Badge.d.ts +6 -0
  281. package/dist/cssm/components/Banner/Banner.d.ts +65 -0
  282. package/dist/cssm/components/Banner/Banner.js +2 -4
  283. package/dist/cssm/components/Banner/Banner.js.map +1 -1
  284. package/dist/cssm/components/Button/Button.d.ts +20 -0
  285. package/dist/cssm/components/Button/Button.js +12 -5
  286. package/dist/cssm/components/Button/Button.js.map +1 -1
  287. package/dist/cssm/components/Card/Card.css +2 -2
  288. package/dist/cssm/components/Card/Card.d.ts +7 -0
  289. package/dist/cssm/components/Card/Card.js +3 -9
  290. package/dist/cssm/components/Card/Card.js.map +1 -1
  291. package/dist/cssm/components/CardGrid/CardGrid.d.ts +8 -0
  292. package/dist/cssm/components/CardScroll/CardScroll.css +1 -1
  293. package/dist/cssm/components/CardScroll/CardScroll.d.ts +12 -0
  294. package/dist/cssm/components/CardScroll/CardScroll.js +9 -14
  295. package/dist/cssm/components/CardScroll/CardScroll.js.map +1 -1
  296. package/dist/cssm/components/Cell/Cell.d.ts +47 -0
  297. package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.d.ts +5 -0
  298. package/dist/cssm/components/Cell/CellDragger/CellDragger.d.ts +6 -0
  299. package/dist/cssm/components/Cell/useDraggable.d.ts +13 -0
  300. package/dist/cssm/components/CellButton/CellButton.d.ts +9 -0
  301. package/dist/cssm/components/Checkbox/Checkbox.d.ts +10 -0
  302. package/dist/cssm/components/Chip/Chip.d.ts +16 -0
  303. package/dist/cssm/components/Chip/Chip.js +2 -6
  304. package/dist/cssm/components/Chip/Chip.js.map +1 -1
  305. package/dist/cssm/components/ChipsInput/ChipsInput.d.ts +30 -0
  306. package/dist/cssm/components/ChipsInput/ChipsInput.js +1 -1
  307. package/dist/cssm/components/ChipsInput/ChipsInput.js.map +1 -1
  308. package/dist/cssm/components/ChipsInput/useChipsInput.d.ts +14 -0
  309. package/dist/cssm/components/ChipsSelect/ChipsSelect.d.ts +41 -0
  310. package/dist/cssm/components/ChipsSelect/useChipsSelect.d.ts +22 -0
  311. package/dist/cssm/components/ClickPopper/ClickPopper.d.ts +21 -0
  312. package/dist/cssm/components/ConfigProvider/ConfigProvider.d.ts +12 -0
  313. package/dist/cssm/components/ConfigProvider/ConfigProvider.js +31 -44
  314. package/dist/cssm/components/ConfigProvider/ConfigProvider.js.map +1 -1
  315. package/dist/cssm/components/ConfigProvider/ConfigProviderContext.d.ts +36 -0
  316. package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js +2 -3
  317. package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js.map +1 -1
  318. package/dist/cssm/components/ContentCard/ContentCard.d.ts +34 -0
  319. package/dist/cssm/components/ContentCard/ContentCard.js +3 -3
  320. package/dist/cssm/components/ContentCard/ContentCard.js.map +1 -1
  321. package/dist/cssm/components/Counter/Counter.d.ts +11 -0
  322. package/dist/cssm/components/CustomScrollView/CustomScrollView.d.ts +10 -0
  323. package/dist/cssm/components/CustomSelect/CustomSelect.d.ts +56 -0
  324. package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +12 -0
  325. package/dist/cssm/components/CustomSelectOption/CustomSelectOption.css +1 -1
  326. package/dist/cssm/components/CustomSelectOption/CustomSelectOption.d.ts +15 -0
  327. package/dist/cssm/components/DatePicker/DatePicker.d.ts +24 -0
  328. package/dist/cssm/components/Div/Div.d.ts +7 -0
  329. package/dist/cssm/components/Dropdown/Dropdown.d.ts +8 -0
  330. package/dist/cssm/components/DropdownIcon/DropdownIcon.d.ts +3 -0
  331. package/dist/cssm/components/Epic/Epic.d.ts +10 -0
  332. package/dist/cssm/components/Epic/ScrollSaver.d.ts +6 -0
  333. package/dist/cssm/components/File/File.d.ts +9 -0
  334. package/dist/cssm/components/FixedLayout/FixedLayout.d.ts +19 -0
  335. package/dist/cssm/components/FocusTrap/FocusTrap.d.ts +8 -0
  336. package/dist/cssm/components/FocusVisible/FocusVisible.css +1 -1
  337. package/dist/cssm/components/FocusVisible/FocusVisible.d.ts +8 -0
  338. package/dist/cssm/components/Footer/Footer.d.ts +5 -0
  339. package/dist/cssm/components/FormField/FormField.d.ts +14 -0
  340. package/dist/cssm/components/FormItem/FormItem.d.ts +14 -0
  341. package/dist/cssm/components/FormItem/FormItem.js +0 -1
  342. package/dist/cssm/components/FormItem/FormItem.js.map +1 -1
  343. package/dist/cssm/components/FormLayout/FormLayout.d.ts +6 -0
  344. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.d.ts +13 -0
  345. package/dist/cssm/components/FormStatus/FormStatus.d.ts +7 -0
  346. package/dist/cssm/components/Gallery/Gallery.d.ts +39 -0
  347. package/dist/cssm/components/Gradient/Gradient.d.ts +7 -0
  348. package/dist/cssm/components/Gradient/Gradient.js +5 -11
  349. package/dist/cssm/components/Gradient/Gradient.js.map +1 -1
  350. package/dist/cssm/components/GridAvatar/GridAvatar.d.ts +8 -0
  351. package/dist/cssm/components/Group/Group.d.ts +23 -0
  352. package/dist/cssm/components/Header/Header.d.ts +18 -0
  353. package/dist/cssm/components/Header/Header.js +3 -7
  354. package/dist/cssm/components/Header/Header.js.map +1 -1
  355. package/dist/cssm/components/HorizontalCell/HorizontalCell.d.ts +10 -0
  356. package/dist/cssm/components/HorizontalCell/HorizontalCell.js +1 -3
  357. package/dist/cssm/components/HorizontalCell/HorizontalCell.js.map +1 -1
  358. package/dist/cssm/components/HorizontalScroll/HorizontalScroll.d.ts +19 -0
  359. package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js +1 -4
  360. package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
  361. package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.css +6 -1
  362. package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.d.ts +8 -0
  363. package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.js +1 -4
  364. package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.js.map +1 -1
  365. package/dist/cssm/components/HoverPopper/HoverPopper.d.ts +29 -0
  366. package/dist/cssm/components/IconButton/IconButton.d.ts +11 -0
  367. package/dist/cssm/components/InfoRow/InfoRow.d.ts +7 -0
  368. package/dist/cssm/components/InfoRow/InfoRow.js +1 -2
  369. package/dist/cssm/components/InfoRow/InfoRow.js.map +1 -1
  370. package/dist/cssm/components/InitialsAvatar/InitialsAvatar.d.ts +32 -0
  371. package/dist/cssm/components/Input/Input.d.ts +9 -0
  372. package/dist/cssm/components/Link/Link.d.ts +6 -0
  373. package/dist/cssm/components/List/List.d.ts +4 -0
  374. package/dist/cssm/components/List/ListContext.d.ts +4 -0
  375. package/dist/cssm/components/MiniInfoCell/MiniInfoCell.d.ts +39 -0
  376. package/dist/cssm/components/ModalCard/ModalCard.d.ts +10 -0
  377. package/dist/cssm/components/ModalCardBase/ModalCardBase.d.ts +32 -0
  378. package/dist/cssm/components/ModalCardBase/ModalCardBase.js +2 -2
  379. package/dist/cssm/components/ModalCardBase/ModalCardBase.js.map +1 -1
  380. package/dist/cssm/components/ModalDismissButton/ModalDismissButton.d.ts +5 -0
  381. package/dist/cssm/components/ModalPage/ModalPage.d.ts +22 -0
  382. package/dist/cssm/components/ModalPageHeader/ModalPageHeader.d.ts +8 -0
  383. package/dist/cssm/components/ModalRoot/ModalRoot.d.ts +16 -0
  384. package/dist/cssm/components/ModalRoot/ModalRootAdaptive.d.ts +10 -0
  385. package/dist/cssm/components/ModalRoot/ModalRootContext.d.ts +20 -0
  386. package/dist/cssm/components/ModalRoot/ModalRootDesktop.d.ts +16 -0
  387. package/dist/cssm/components/ModalRoot/constants.d.ts +3 -0
  388. package/dist/cssm/components/ModalRoot/types.d.ts +45 -0
  389. package/dist/cssm/components/ModalRoot/useModalManager.d.ts +37 -0
  390. package/dist/cssm/components/ModalRoot/withModalRootContext.d.ts +5 -0
  391. package/dist/cssm/components/NativeSelect/NativeSelect.d.ts +15 -0
  392. package/dist/cssm/components/NavTransitionContext/NavTransitionContext.d.ts +7 -0
  393. package/dist/cssm/components/Panel/Panel.d.ts +9 -0
  394. package/dist/cssm/components/PanelHeader/PanelHeader.d.ts +21 -0
  395. package/dist/cssm/components/PanelHeaderBack/PanelHeaderBack.d.ts +9 -0
  396. package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.d.ts +8 -0
  397. package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js +1 -1
  398. package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
  399. package/dist/cssm/components/PanelHeaderClose/PanelHeaderClose.d.ts +4 -0
  400. package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.d.ts +9 -0
  401. package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.d.ts +7 -0
  402. package/dist/cssm/components/PanelHeaderEdit/PanelHeaderEdit.d.ts +18 -0
  403. package/dist/cssm/components/PanelHeaderSubmit/PanelHeaderSubmit.d.ts +4 -0
  404. package/dist/cssm/components/PanelSpinner/PanelSpinner.d.ts +7 -0
  405. package/dist/cssm/components/Placeholder/Placeholder.d.ts +23 -0
  406. package/dist/cssm/components/Placeholder/Placeholder.js +1 -1
  407. package/dist/cssm/components/Placeholder/Placeholder.js.map +1 -1
  408. package/dist/cssm/components/PopoutRoot/PopoutRoot.d.ts +10 -0
  409. package/dist/cssm/components/PopoutWrapper/PopoutWrapper.d.ts +10 -0
  410. package/dist/cssm/components/Popper/Popper.d.ts +32 -0
  411. package/dist/cssm/components/Progress/Progress.d.ts +8 -0
  412. package/dist/cssm/components/PromoBanner/PromoBanner.d.ts +40 -0
  413. package/dist/cssm/components/PullToRefresh/PullToRefresh.d.ts +37 -0
  414. package/dist/cssm/components/PullToRefresh/PullToRefreshSpinner.d.ts +11 -0
  415. package/dist/cssm/components/Radio/Radio.d.ts +9 -0
  416. package/dist/cssm/components/RadioGroup/RadioGroup.d.ts +6 -0
  417. package/dist/cssm/components/RangeSlider/RangeSlider.d.ts +6 -0
  418. package/dist/cssm/components/RangeSlider/UniversalSlider.d.ts +16 -0
  419. package/dist/cssm/components/Removable/Removable.d.ts +21 -0
  420. package/dist/cssm/components/Removable/Removable.js +8 -4
  421. package/dist/cssm/components/Removable/Removable.js.map +1 -1
  422. package/dist/cssm/components/RichCell/RichCell.d.ts +36 -0
  423. package/dist/cssm/components/RichCell/RichCell.js +0 -1
  424. package/dist/cssm/components/RichCell/RichCell.js.map +1 -1
  425. package/dist/cssm/components/RichTooltip/RichTooltip.d.ts +5 -0
  426. package/dist/cssm/components/Root/Root.d.ts +31 -0
  427. package/dist/cssm/components/ScreenSpinner/ScreenSpinner.d.ts +6 -0
  428. package/dist/cssm/components/Search/Search.d.ts +17 -0
  429. package/dist/cssm/components/Search/Search.js +45 -22
  430. package/dist/cssm/components/Search/Search.js.map +1 -1
  431. package/dist/cssm/components/SegmentedControl/SegmentedControl.css +1 -0
  432. package/dist/cssm/components/SegmentedControl/SegmentedControl.d.ts +17 -0
  433. package/dist/cssm/components/SegmentedControl/SegmentedControl.js +95 -0
  434. package/dist/cssm/components/SegmentedControl/SegmentedControl.js.map +1 -0
  435. package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.css +1 -0
  436. package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.d.ts +4 -0
  437. package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js +41 -0
  438. package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js.map +1 -0
  439. package/dist/cssm/components/Select/Select.d.ts +7 -0
  440. package/dist/cssm/components/SelectMimicry/SelectMimicry.d.ts +10 -0
  441. package/dist/cssm/components/Separator/Separator.d.ts +11 -0
  442. package/dist/cssm/components/SimpleCell/SimpleCell.d.ts +39 -0
  443. package/dist/cssm/components/SimpleCell/SimpleCell.js +21 -10
  444. package/dist/cssm/components/SimpleCell/SimpleCell.js.map +1 -1
  445. package/dist/cssm/components/SimpleCheckbox/SimpleCheckbox.d.ts +9 -0
  446. package/dist/cssm/components/Slider/Slider.d.ts +5 -0
  447. package/dist/cssm/components/SliderSwitch/SliderSwitch.d.ts +47 -0
  448. package/dist/cssm/components/SliderSwitch/SliderSwitch.js +14 -3
  449. package/dist/cssm/components/SliderSwitch/SliderSwitch.js.map +1 -1
  450. package/dist/cssm/components/SliderSwitch/SliderSwitchButton.d.ts +11 -0
  451. package/dist/cssm/components/SliderSwitch/SliderSwitchButton.js +5 -5
  452. package/dist/cssm/components/SliderSwitch/SliderSwitchButton.js.map +1 -1
  453. package/dist/cssm/components/Snackbar/Snackbar.d.ts +35 -0
  454. package/dist/cssm/components/Spacing/Spacing.d.ts +18 -0
  455. package/dist/cssm/components/Spinner/Spinner.d.ts +7 -0
  456. package/dist/cssm/components/SplitCol/SplitCol.d.ts +22 -0
  457. package/dist/cssm/components/SplitLayout/SplitLayout.d.ts +15 -0
  458. package/dist/cssm/components/SubnavigationBar/SubnavigationBar.d.ts +7 -0
  459. package/dist/cssm/components/SubnavigationButton/SubnavigationButton.d.ts +21 -0
  460. package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js +1 -3
  461. package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js.map +1 -1
  462. package/dist/cssm/components/Switch/Switch.css +1 -1
  463. package/dist/cssm/components/Switch/Switch.d.ts +7 -0
  464. package/dist/cssm/components/Switch/Switch.js +3 -6
  465. package/dist/cssm/components/Switch/Switch.js.map +1 -1
  466. package/dist/cssm/components/Tabbar/Tabbar.d.ts +11 -0
  467. package/dist/cssm/components/TabbarItem/TabbarItem.d.ts +21 -0
  468. package/dist/cssm/components/Tabs/Tabs.d.ts +10 -0
  469. package/dist/cssm/components/TabsItem/TabsItem.d.ts +8 -0
  470. package/dist/cssm/components/Tappable/Tappable.d.ts +40 -0
  471. package/dist/cssm/components/TextTooltip/TextTooltip.d.ts +14 -0
  472. package/dist/cssm/components/TextTooltip/TextTooltip.js +1 -2
  473. package/dist/cssm/components/TextTooltip/TextTooltip.js.map +1 -1
  474. package/dist/cssm/components/Textarea/Textarea.d.ts +11 -0
  475. package/dist/cssm/components/Tooltip/Tooltip.d.ts +55 -0
  476. package/dist/cssm/components/Tooltip/Tooltip.js +1 -2
  477. package/dist/cssm/components/Tooltip/Tooltip.js.map +1 -1
  478. package/dist/cssm/components/Tooltip/TooltipContainer.d.ts +5 -0
  479. package/dist/cssm/components/Touch/Touch.d.ts +49 -0
  480. package/dist/cssm/components/Touch/TouchContext.d.ts +7 -0
  481. package/dist/cssm/components/Typography/Caption/Caption.d.ts +10 -0
  482. package/dist/cssm/components/Typography/Headline/Headline.d.ts +8 -0
  483. package/dist/cssm/components/Typography/Subhead/Subhead.css +1 -1
  484. package/dist/cssm/components/Typography/Subhead/Subhead.d.ts +11 -0
  485. package/dist/cssm/components/Typography/Subhead/Subhead.js +13 -7
  486. package/dist/cssm/components/Typography/Subhead/Subhead.js.map +1 -1
  487. package/dist/cssm/components/Typography/Text/Text.d.ts +8 -0
  488. package/dist/cssm/components/Typography/Title/Title.css +1 -1
  489. package/dist/cssm/components/Typography/Title/Title.d.ts +12 -0
  490. package/dist/cssm/components/Typography/Title/Title.js +7 -16
  491. package/dist/cssm/components/Typography/Title/Title.js.map +1 -1
  492. package/dist/cssm/components/UsersStack/UsersStack.d.ts +23 -0
  493. package/dist/cssm/components/UsersStack/UsersStack.js +0 -1
  494. package/dist/cssm/components/UsersStack/UsersStack.js.map +1 -1
  495. package/dist/cssm/components/UsersStack/masks.d.ts +1 -0
  496. package/dist/cssm/components/View/View.d.ts +80 -0
  497. package/dist/cssm/components/View/ViewInfinite.d.ts +66 -0
  498. package/dist/cssm/components/View/utils.d.ts +2 -0
  499. package/dist/cssm/components/VisuallyHiddenInput/VisuallyHiddenInput.css +1 -0
  500. package/dist/cssm/components/VisuallyHiddenInput/VisuallyHiddenInput.d.ts +12 -0
  501. package/dist/cssm/components/VisuallyHiddenInput/VisuallyHiddenInput.js +24 -0
  502. package/dist/cssm/components/VisuallyHiddenInput/VisuallyHiddenInput.js.map +1 -0
  503. package/dist/cssm/components/WriteBar/WriteBar.d.ts +23 -0
  504. package/dist/cssm/components/WriteBarIcon/WriteBarIcon.d.ts +18 -0
  505. package/dist/cssm/helpers/avatar.d.ts +5 -0
  506. package/dist/cssm/helpers/getClassName.d.ts +2 -0
  507. package/dist/cssm/helpers/getScheme.d.ts +8 -0
  508. package/dist/cssm/helpers/math.d.ts +5 -0
  509. package/dist/cssm/helpers/scheme.d.ts +34 -0
  510. package/dist/cssm/hoc/withAdaptivity.d.ts +13 -0
  511. package/dist/cssm/hoc/withContext.d.ts +2 -0
  512. package/dist/cssm/hoc/withInsets.d.ts +3 -0
  513. package/dist/cssm/hoc/withPlatform.d.ts +3 -0
  514. package/dist/cssm/hooks/useAdaptivity.d.ts +3 -0
  515. package/dist/cssm/hooks/useAppearance.d.ts +1 -0
  516. package/dist/cssm/hooks/useAppearance.js +2 -2
  517. package/dist/cssm/hooks/useAppearance.js.map +1 -1
  518. package/dist/cssm/hooks/useBrowserInfo.d.ts +2 -0
  519. package/dist/cssm/hooks/useEffectDev.d.ts +2 -0
  520. package/dist/cssm/hooks/useEnsuredControl.d.ts +6 -0
  521. package/dist/cssm/hooks/useEventListener.d.ts +7 -0
  522. package/dist/cssm/hooks/useExternRef.d.ts +2 -0
  523. package/dist/cssm/hooks/useFocusVisible.d.ts +6 -0
  524. package/dist/cssm/hooks/useGlobalEventListener.d.ts +2 -0
  525. package/dist/cssm/hooks/useInsets.d.ts +8 -0
  526. package/dist/cssm/hooks/useKeyboard.d.ts +11 -0
  527. package/dist/cssm/hooks/useKeyboardInputTracker.d.ts +1 -0
  528. package/dist/cssm/hooks/useObjectMemo.d.ts +2 -0
  529. package/dist/cssm/hooks/usePatchChildrenRef.d.ts +6 -0
  530. package/dist/cssm/hooks/usePlatform.d.ts +2 -0
  531. package/dist/cssm/hooks/usePlatform.js.map +1 -1
  532. package/dist/cssm/hooks/useTimeout.d.ts +4 -0
  533. package/dist/cssm/hooks/useWaitTransitionFinish.d.ts +3 -0
  534. package/dist/cssm/index.d.ts +279 -0
  535. package/dist/cssm/index.js +6 -5
  536. package/dist/cssm/index.js.map +1 -1
  537. package/dist/cssm/lib/SSR.d.ts +14 -0
  538. package/dist/cssm/lib/accessibility.d.ts +10 -0
  539. package/dist/cssm/lib/animate.d.ts +15 -0
  540. package/dist/cssm/lib/browser.d.ts +11 -0
  541. package/dist/cssm/lib/callMultiple.d.ts +1 -0
  542. package/dist/cssm/lib/classNames.d.ts +6 -0
  543. package/dist/cssm/lib/classScopingMode.d.ts +8 -0
  544. package/dist/cssm/lib/dom.d.ts +21 -0
  545. package/dist/cssm/lib/fx.d.ts +5 -0
  546. package/dist/cssm/lib/getNavId.d.ts +6 -0
  547. package/dist/cssm/lib/is.d.ts +1 -0
  548. package/dist/cssm/lib/isRefObject.d.ts +2 -0
  549. package/dist/cssm/lib/jsxRuntime.d.ts +8 -0
  550. package/dist/cssm/lib/offset.d.ts +7 -0
  551. package/dist/cssm/lib/platform.d.ts +19 -0
  552. package/dist/cssm/lib/polyfills.d.ts +6 -0
  553. package/dist/cssm/lib/prefixClass.d.ts +1 -0
  554. package/dist/cssm/lib/removeObjectKeys.d.ts +1 -0
  555. package/dist/cssm/lib/select.d.ts +7 -0
  556. package/dist/cssm/lib/styles.d.ts +1 -0
  557. package/dist/cssm/lib/supportEvents.d.ts +9 -0
  558. package/dist/cssm/lib/taptic.d.ts +2 -0
  559. package/dist/cssm/lib/testing.d.ts +1 -0
  560. package/dist/cssm/lib/touch.d.ts +9 -0
  561. package/dist/cssm/lib/useIsomorphicLayoutEffect.d.ts +2 -0
  562. package/dist/cssm/lib/utils.d.ts +15 -0
  563. package/dist/cssm/lib/utils.js +3 -0
  564. package/dist/cssm/lib/utils.js.map +1 -1
  565. package/dist/cssm/lib/warnOnce.d.ts +1 -0
  566. package/dist/cssm/styles/components.css +10 -5
  567. package/dist/cssm/styles/themes.css +1 -1
  568. package/dist/cssm/tokenized/index.d.ts +14 -0
  569. package/dist/cssm/tokenized/index.js +6 -0
  570. package/dist/cssm/tokenized/index.js.map +1 -1
  571. package/dist/cssm/types.d.ts +34 -0
  572. package/dist/cssm/unstable/index.d.ts +17 -0
  573. package/dist/hooks/useAppearance.d.ts +1 -1
  574. package/dist/hooks/useAppearance.js +2 -2
  575. package/dist/hooks/useAppearance.js.map +1 -1
  576. package/dist/hooks/usePlatform.d.ts +1 -1
  577. package/dist/hooks/usePlatform.js.map +1 -1
  578. package/dist/index.d.ts +7 -5
  579. package/dist/index.js +6 -5
  580. package/dist/index.js.map +1 -1
  581. package/dist/lib/utils.d.ts +1 -0
  582. package/dist/lib/utils.js +3 -0
  583. package/dist/lib/utils.js.map +1 -1
  584. package/dist/tokenized/index.d.ts +12 -0
  585. package/dist/tokenized/index.js +6 -0
  586. package/dist/tokenized/index.js.map +1 -1
  587. package/dist/vkui.css +11 -6
  588. package/dist/vkui.css.map +1 -1
  589. package/package.json +4 -3
  590. package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx +4 -0
  591. package/src/components/ActionSheetItem/ActionSheetItem.tsx +27 -27
  592. package/src/components/Alert/Alert.tsx +5 -7
  593. package/src/components/AppRoot/AppRoot.tsx +0 -6
  594. package/src/components/AppRoot/AppRootPortal.tsx +9 -1
  595. package/src/components/AppearanceProvider/AppearanceProvider.tsx +30 -13
  596. package/src/components/AppearanceProvider/AppearanceProviderContext.tsx +4 -9
  597. package/src/components/Banner/Banner.tsx +2 -2
  598. package/src/components/Button/Button.tsx +9 -9
  599. package/src/components/Card/Card.css +41 -0
  600. package/src/components/Card/Card.tsx +2 -9
  601. package/src/components/CardScroll/CardScroll.css +2 -39
  602. package/src/components/CardScroll/CardScroll.tsx +7 -17
  603. package/src/components/CardScroll/Readme.md +3 -2
  604. package/src/components/Chip/Chip.tsx +1 -4
  605. package/src/components/ChipsInput/ChipsInput.tsx +1 -1
  606. package/src/components/ConfigProvider/ConfigProvider.tsx +31 -40
  607. package/src/components/ConfigProvider/ConfigProviderContext.tsx +14 -18
  608. package/src/components/ContentCard/ContentCard.tsx +2 -2
  609. package/src/components/CustomSelectOption/CustomSelectOption.css +1 -0
  610. package/src/components/FocusVisible/FocusVisible.css +4 -8
  611. package/src/components/FormItem/FormItem.tsx +1 -5
  612. package/src/components/FormItem/Readme.md +14 -2
  613. package/src/components/Gradient/Gradient.tsx +4 -12
  614. package/src/components/Gradient/Readme.md +1 -1
  615. package/src/components/Header/Header.tsx +3 -3
  616. package/src/components/HorizontalCell/HorizontalCell.tsx +1 -3
  617. package/src/components/HorizontalScroll/HorizontalScroll.tsx +1 -5
  618. package/src/components/HorizontalScroll/HorizontalScrollArrow.css +12 -5
  619. package/src/components/HorizontalScroll/HorizontalScrollArrow.tsx +1 -5
  620. package/src/components/InfoRow/InfoRow.tsx +1 -1
  621. package/src/components/ModalCardBase/ModalCardBase.tsx +2 -2
  622. package/src/components/ModalRoot/Readme.md +1 -1
  623. package/src/components/PanelHeaderButton/PanelHeaderButton.tsx +1 -5
  624. package/src/components/Placeholder/Placeholder.tsx +1 -1
  625. package/src/components/Removable/Removable.tsx +9 -7
  626. package/src/components/RichCell/RichCell.tsx +1 -5
  627. package/src/components/Search/Search.tsx +38 -14
  628. package/src/components/SegmentedControl/Readme.md +94 -0
  629. package/src/components/SegmentedControl/SegmentedControl.css +42 -0
  630. package/src/components/SegmentedControl/SegmentedControl.tsx +105 -0
  631. package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.css +30 -0
  632. package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx +42 -0
  633. package/src/components/SimpleCell/SimpleCell.tsx +11 -11
  634. package/src/components/SliderSwitch/Readme.md +4 -0
  635. package/src/components/SliderSwitch/SliderSwitch.tsx +17 -3
  636. package/src/components/SliderSwitch/SliderSwitchButton.tsx +4 -4
  637. package/src/components/SubnavigationButton/SubnavigationButton.tsx +1 -1
  638. package/src/components/Switch/Switch.css +0 -12
  639. package/src/components/Switch/Switch.tsx +8 -10
  640. package/src/components/TextTooltip/TextTooltip.tsx +2 -6
  641. package/src/components/Tooltip/Tooltip.tsx +2 -6
  642. package/src/components/Typography/Subhead/Readme.md +18 -24
  643. package/src/components/Typography/Subhead/Subhead.css +22 -7
  644. package/src/components/Typography/Subhead/Subhead.tsx +23 -7
  645. package/src/components/Typography/Title/Readme.md +28 -41
  646. package/src/components/Typography/Title/Title.css +22 -13
  647. package/src/components/Typography/Title/Title.tsx +27 -22
  648. package/src/components/UsersStack/Readme.md +1 -1
  649. package/src/components/UsersStack/UsersStack.tsx +1 -1
  650. package/src/components/VisuallyHiddenInput/VisuallyHiddenInput.css +9 -0
  651. package/src/components/VisuallyHiddenInput/VisuallyHiddenInput.tsx +25 -0
  652. package/src/hooks/useAppearance.ts +2 -3
  653. package/src/hooks/usePlatform.ts +1 -1
  654. package/src/index.ts +11 -5
  655. package/src/lib/utils.ts +6 -0
  656. package/src/styles/components.css +3 -0
  657. package/src/tokenized/index.ts +22 -0
@@ -18,7 +18,7 @@ import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
18
18
  import Tappable from "../Tappable/Tappable";
19
19
 
20
20
  var RemovableIos = function RemovableIos(_ref) {
21
- var onRemoveClick = _ref.onRemoveClick,
21
+ var onRemove = _ref.onRemove,
22
22
  removePlaceholder = _ref.removePlaceholder,
23
23
  removePlaceholderString = _ref.removePlaceholderString,
24
24
  children = _ref.children;
@@ -27,6 +27,7 @@ var RemovableIos = function RemovableIos(_ref) {
27
27
  window = _useDOM.window;
28
28
 
29
29
  var removeButtonRef = React.useRef(null);
30
+ var disabledRef = React.useRef(true);
30
31
 
31
32
  var _React$useState = React.useState(0),
32
33
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -46,6 +47,8 @@ var RemovableIos = function RemovableIos(_ref) {
46
47
  var _removeButtonRef$curr;
47
48
 
48
49
  removeButtonRef === null || removeButtonRef === void 0 ? void 0 : (_removeButtonRef$curr = removeButtonRef.current) === null || _removeButtonRef$curr === void 0 ? void 0 : _removeButtonRef$curr.focus();
50
+ } else {
51
+ disabledRef.current = true;
49
52
  }
50
53
  };
51
54
 
@@ -57,6 +60,7 @@ var RemovableIos = function RemovableIos(_ref) {
57
60
  }
58
61
 
59
62
  var offsetWidth = removeButtonRef.current.offsetWidth;
63
+ disabledRef.current = false;
60
64
  updateRemoveOffset(offsetWidth);
61
65
  };
62
66
 
@@ -83,10 +87,10 @@ var RemovableIos = function RemovableIos(_ref) {
83
87
  Component: "button",
84
88
  hasActive: false,
85
89
  hasHover: false,
86
- disabled: removeOffset === 0,
90
+ disabled: disabledRef.current,
87
91
  getRootRef: removeButtonRef,
88
92
  vkuiClass: "Removable__remove",
89
- onClick: onRemoveClick
93
+ onClick: onRemove
90
94
  }, createScopedElement("span", {
91
95
  vkuiClass: "Removable__remove-in"
92
96
  }, removePlaceholder)));
@@ -130,7 +134,7 @@ export var Removable = function Removable(_ref2) {
130
134
  }, createScopedElement(Icon24Cancel, {
131
135
  role: "presentation"
132
136
  }))), platform === IOS && createScopedElement(RemovableIos, {
133
- onRemoveClick: onRemoveClick,
137
+ onRemove: onRemoveClick,
134
138
  removePlaceholder: removePlaceholder,
135
139
  removePlaceholderString: removePlaceholderString
136
140
  }, children));
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Removable/Removable.tsx"],"names":["React","classNames","getTitleFromChildren","noop","useExternRef","usePlatform","getClassName","useAdaptivity","useDOM","ANDROID","IOS","VKCOM","Icon24Cancel","IconButton","useGlobalEventListener","Tappable","RemovableIos","onRemoveClick","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","useState","removeOffset","updateRemoveOffset","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","transform","Removable","getRootRef","onRemove","align","restProps","platform","sizeY","ref","preventDefault"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { HasRootRef } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getTitleFromChildren, noop } from \"../../lib/utils\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useDOM } from \"../../lib/dom\";\nimport { ANDROID, IOS, VKCOM } from \"../../lib/platform\";\nimport { Icon24Cancel } from \"@vkontakte/icons\";\nimport IconButton from \"../IconButton/IconButton\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport Tappable from \"../Tappable/Tappable\";\nimport \"./Removable.css\";\n\nexport interface RemovableProps {\n /**\n * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n */\n removePlaceholder?: React.ReactNode;\n /**\n * Коллбэк срабатывает при клике на контрол удаления.\n */\n onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n}\n\ninterface RemovableIosOwnProps\n extends Pick<RemovableProps, \"removePlaceholder\"> {\n onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n removePlaceholderString?: string;\n}\n\nconst RemovableIos: React.FC<RemovableIosOwnProps> = ({\n onRemoveClick,\n removePlaceholder,\n removePlaceholderString,\n children,\n}) => {\n const { window } = useDOM();\n\n const removeButtonRef = React.useRef<HTMLElement>(null);\n const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n useGlobalEventListener(\n window,\n \"click\",\n () => {\n if (removeOffset > 0) {\n updateRemoveOffset(0);\n }\n },\n { capture: true }\n );\n\n const onRemoveTransitionEnd = () => {\n if (removeOffset > 0) {\n removeButtonRef?.current?.focus();\n }\n };\n\n const onRemoveActivateClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (!removeButtonRef.current) {\n return;\n }\n const { offsetWidth } = removeButtonRef.current;\n updateRemoveOffset(offsetWidth);\n };\n\n return (\n <div\n vkuiClass=\"Removable__content\"\n style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n onTransitionEnd={onRemoveTransitionEnd}\n >\n <IconButton\n hasActive={false}\n hasHover={false}\n aria-label={removePlaceholderString}\n vkuiClass=\"Removable__action Removable__toggle\"\n onClick={onRemoveActivateClick}\n disabled={removeOffset > 0}\n >\n <i vkuiClass=\"Removable__toggle-in\" role=\"presentation\" />\n </IconButton>\n {children}\n\n <span vkuiClass=\"Removable__offset\" aria-hidden=\"true\"></span>\n\n <Tappable\n Component=\"button\"\n hasActive={false}\n hasHover={false}\n disabled={removeOffset === 0}\n getRootRef={removeButtonRef}\n vkuiClass=\"Removable__remove\"\n onClick={onRemoveClick}\n >\n <span vkuiClass=\"Removable__remove-in\">{removePlaceholder}</span>\n </Tappable>\n </div>\n );\n};\n\ninterface RemovableOwnProps\n extends React.AllHTMLAttributes<HTMLElement>,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n /**\n * Расположение кнопки удаления.\n */\n align?: \"start\" | \"center\";\n}\n\nexport const Removable: React.FC<RemovableOwnProps> = ({\n getRootRef,\n children,\n onRemove = noop,\n removePlaceholder = \"Удалить\",\n align = \"center\",\n ...restProps\n}: RemovableOwnProps) => {\n const platform = usePlatform();\n const { sizeY } = useAdaptivity();\n\n const ref = useExternRef(getRootRef);\n\n const onRemoveClick = (e: React.MouseEvent) => {\n e.preventDefault();\n onRemove(e);\n };\n\n const removePlaceholderString: string =\n getTitleFromChildren(removePlaceholder);\n\n return (\n <div\n {...restProps}\n ref={ref}\n vkuiClass={classNames(\n getClassName(\"Removable\", platform),\n `Removable--${align}`,\n `Removable--sizeY-${sizeY}`\n )}\n >\n {(platform === ANDROID || platform === VKCOM) && (\n <div vkuiClass=\"Removable__content\">\n {children}\n\n <IconButton\n activeMode=\"opacity\"\n hoverMode=\"opacity\"\n vkuiClass=\"Removable__action\"\n onClick={onRemoveClick}\n aria-label={removePlaceholderString}\n >\n <Icon24Cancel role=\"presentation\" />\n </IconButton>\n </div>\n )}\n\n {platform === IOS && (\n <RemovableIos\n onRemoveClick={onRemoveClick}\n removePlaceholder={removePlaceholder}\n removePlaceholderString={removePlaceholderString}\n >\n {children}\n </RemovableIos>\n )}\n </div>\n );\n};\n"],"file":"Removable.js"}
1
+ {"version":3,"sources":["../../../src/components/Removable/Removable.tsx"],"names":["React","classNames","getTitleFromChildren","noop","useExternRef","usePlatform","getClassName","useAdaptivity","useDOM","ANDROID","IOS","VKCOM","Icon24Cancel","IconButton","useGlobalEventListener","Tappable","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","transform","Removable","getRootRef","align","restProps","platform","sizeY","ref","onRemoveClick","preventDefault"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { HasRootRef } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getTitleFromChildren, noop } from \"../../lib/utils\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useDOM } from \"../../lib/dom\";\nimport { ANDROID, IOS, VKCOM } from \"../../lib/platform\";\nimport { Icon24Cancel } from \"@vkontakte/icons\";\nimport IconButton from \"../IconButton/IconButton\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport Tappable from \"../Tappable/Tappable\";\nimport \"./Removable.css\";\n\nexport interface RemovableProps {\n /**\n * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n */\n removePlaceholder?: React.ReactNode;\n /**\n * Коллбэк срабатывает при клике на контрол удаления.\n */\n onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n removePlaceholderString?: string;\n}\n\nconst RemovableIos: React.FC<RemovableIosOwnProps> = ({\n onRemove,\n removePlaceholder,\n removePlaceholderString,\n children,\n}) => {\n const { window } = useDOM();\n\n const removeButtonRef = React.useRef<HTMLElement>(null);\n const disabledRef = React.useRef(true);\n const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n useGlobalEventListener(\n window,\n \"click\",\n () => {\n if (removeOffset > 0) {\n updateRemoveOffset(0);\n }\n },\n { capture: true }\n );\n\n const onRemoveTransitionEnd = () => {\n if (removeOffset > 0) {\n removeButtonRef?.current?.focus();\n } else {\n disabledRef.current = true;\n }\n };\n\n const onRemoveActivateClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (!removeButtonRef.current) {\n return;\n }\n const { offsetWidth } = removeButtonRef.current;\n disabledRef.current = false;\n updateRemoveOffset(offsetWidth);\n };\n\n return (\n <div\n vkuiClass=\"Removable__content\"\n style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n onTransitionEnd={onRemoveTransitionEnd}\n >\n <IconButton\n hasActive={false}\n hasHover={false}\n aria-label={removePlaceholderString}\n vkuiClass=\"Removable__action Removable__toggle\"\n onClick={onRemoveActivateClick}\n disabled={removeOffset > 0}\n >\n <i vkuiClass=\"Removable__toggle-in\" role=\"presentation\" />\n </IconButton>\n {children}\n\n <span vkuiClass=\"Removable__offset\" aria-hidden=\"true\"></span>\n\n <Tappable\n Component=\"button\"\n hasActive={false}\n hasHover={false}\n disabled={disabledRef.current}\n getRootRef={removeButtonRef}\n vkuiClass=\"Removable__remove\"\n onClick={onRemove}\n >\n <span vkuiClass=\"Removable__remove-in\">{removePlaceholder}</span>\n </Tappable>\n </div>\n );\n};\n\ninterface RemovableOwnProps\n extends React.AllHTMLAttributes<HTMLElement>,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n /**\n * Расположение кнопки удаления.\n */\n align?: \"start\" | \"center\";\n}\n\nexport const Removable: React.FC<RemovableOwnProps> = ({\n getRootRef,\n children,\n onRemove = noop,\n removePlaceholder = \"Удалить\",\n align = \"center\",\n ...restProps\n}: RemovableOwnProps) => {\n const platform = usePlatform();\n const { sizeY } = useAdaptivity();\n\n const ref = useExternRef(getRootRef);\n\n const onRemoveClick = (e: React.MouseEvent) => {\n e.preventDefault();\n onRemove(e);\n };\n\n const removePlaceholderString: string =\n getTitleFromChildren(removePlaceholder);\n\n return (\n <div\n {...restProps}\n ref={ref}\n vkuiClass={classNames(\n getClassName(\"Removable\", platform),\n `Removable--${align}`,\n `Removable--sizeY-${sizeY}`\n )}\n >\n {(platform === ANDROID || platform === VKCOM) && (\n <div vkuiClass=\"Removable__content\">\n {children}\n\n <IconButton\n activeMode=\"opacity\"\n hoverMode=\"opacity\"\n vkuiClass=\"Removable__action\"\n onClick={onRemoveClick}\n aria-label={removePlaceholderString}\n >\n <Icon24Cancel role=\"presentation\" />\n </IconButton>\n </div>\n )}\n\n {platform === IOS && (\n <RemovableIos\n onRemove={onRemoveClick}\n removePlaceholder={removePlaceholder}\n removePlaceholderString={removePlaceholderString}\n >\n {children}\n </RemovableIos>\n )}\n </div>\n );\n};\n"],"file":"Removable.js"}
@@ -42,7 +42,6 @@ var RichCell = function RichCell(_ref) {
42
42
  vkuiClass: "RichCell__text"
43
43
  }, text), hasReactNode(caption) && createScopedElement(Subhead, {
44
44
  Component: "span",
45
- weight: "regular",
46
45
  vkuiClass: "RichCell__caption"
47
46
  }, caption), (hasReactNode(bottom) || hasReactNode(actions)) && createScopedElement("div", {
48
47
  vkuiClass: "RichCell__bottom"
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/RichCell/RichCell.tsx"],"names":["classNames","usePlatform","getClassName","Tappable","hasReactNode","Text","Subhead","withAdaptivity","RichCell","children","text","caption","before","after","bottom","actions","multiline","sizeY","restProps","platform"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,SAASC,YAAT;AACA,OAAOC,IAAP;AACA,OAAOC,OAAP;AACA,SAASC,cAAT;;AAmCA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAWpC;AAAA,MAVJC,QAUI,QAVJA,QAUI;AAAA,MATJC,IASI,QATJA,IASI;AAAA,MARJC,OAQI,QARJA,OAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,SACC;;AACJ,MAAMC,QAAQ,GAAGlB,WAAW,EAA5B;AAEA,SACE,oBAAC,QAAD,eACMiB,SADN;AAEE,IAAA,SAAS,EAAElB,UAAU,CACnBE,YAAY,CAAC,UAAD,EAAaiB,QAAb,CADO,EAEnB;AACE,wBAAkBH;AADpB,KAFmB,4BAKAC,KALA;AAFvB,MAUGL,MAVH,EAWE;AAAK,IAAA,SAAS,EAAC;AAAf,KAEGC,KAFH,EAGE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,QAAb;AAAsB,IAAA,SAAS,EAAC;AAAhC,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAqCJ,QAArC,CADF,EAEGL,YAAY,CAACS,KAAD,CAAZ,IACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,KAAlC,CAHJ,CAHF,EASGT,YAAY,CAACM,IAAD,CAAZ,IACC,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,SAAb;AAAuB,IAAA,SAAS,EAAC;AAAjC,KACGA,IADH,CAVJ,EAcGN,YAAY,CAACO,OAAD,CAAZ,IACC,oBAAC,OAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,MAAM,EAAC,SAFT;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGA,OALH,CAfJ,EAuBG,CAACP,YAAY,CAACU,MAAD,CAAZ,IAAwBV,YAAY,CAACW,OAAD,CAArC,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,MADH,EAEGV,YAAY,CAACW,OAAD,CAAZ,IACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAoCA,OAApC,CAHJ,CAxBJ,CAXF,CADF;AA8CD,CA5DD,C,CA8DA;;;AACA,eAAeR,cAAc,CAACC,QAAD,EAAW;AAAES,EAAAA,KAAK,EAAE;AAAT,CAAX,CAA7B","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport Tappable, { TappableProps } from \"../Tappable/Tappable\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport Text from \"../Typography/Text/Text\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport { withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport \"./RichCell.css\";\n\nexport interface RichCellProps extends TappableProps {\n /**\n * Контейнер для текста под `children`.\n */\n text?: React.ReactNode;\n /**\n * Контейнер для текста под `text`.\n */\n caption?: React.ReactNode;\n /**\n * Контейнер для контента под `caption`. Например `<UsersStack size=\"s\" />`\n */\n bottom?: React.ReactNode;\n /**\n * Кнопка или набор кнопок `<Button size=\"s\" />`. Располагается под `bottom`.\n */\n actions?: React.ReactNode;\n /**\n * `<Avatar size={48|72} />`\n */\n before?: React.ReactNode;\n /**\n * Иконка 28 или текст\n */\n after?: React.ReactNode;\n /**\n * Убирает анимацию нажатия\n */\n disabled?: boolean;\n multiline?: boolean;\n}\n\nconst RichCell: React.FC<RichCellProps> = ({\n children,\n text,\n caption,\n before,\n after,\n bottom,\n actions,\n multiline,\n sizeY,\n ...restProps\n}) => {\n const platform = usePlatform();\n\n return (\n <Tappable\n {...restProps}\n vkuiClass={classNames(\n getClassName(\"RichCell\", platform),\n {\n \"RichCell--mult\": multiline,\n },\n `RichCell--sizeY-${sizeY}`\n )}\n >\n {before}\n <div vkuiClass=\"RichCell__in\">\n {/* Этот after будет скрыт из верстки. Он нужен для CSS */}\n {after}\n <Text weight=\"medium\" vkuiClass=\"RichCell__content\">\n <div vkuiClass=\"RichCell__children\">{children}</div>\n {hasReactNode(after) && (\n <div vkuiClass=\"RichCell__after\">{after}</div>\n )}\n </Text>\n {hasReactNode(text) && (\n <Text weight=\"regular\" vkuiClass=\"RichCell__text\">\n {text}\n </Text>\n )}\n {hasReactNode(caption) && (\n <Subhead\n Component=\"span\"\n weight=\"regular\"\n vkuiClass=\"RichCell__caption\"\n >\n {caption}\n </Subhead>\n )}\n {(hasReactNode(bottom) || hasReactNode(actions)) && (\n <div vkuiClass=\"RichCell__bottom\">\n {bottom}\n {hasReactNode(actions) && (\n <div vkuiClass=\"RichCell__actions\">{actions}</div>\n )}\n </div>\n )}\n </div>\n </Tappable>\n );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(RichCell, { sizeY: true });\n"],"file":"RichCell.js"}
1
+ {"version":3,"sources":["../../../src/components/RichCell/RichCell.tsx"],"names":["classNames","usePlatform","getClassName","Tappable","hasReactNode","Text","Subhead","withAdaptivity","RichCell","children","text","caption","before","after","bottom","actions","multiline","sizeY","restProps","platform"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,SAASC,YAAT;AACA,OAAOC,IAAP;AACA,OAAOC,OAAP;AACA,SAASC,cAAT;;AAmCA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAWpC;AAAA,MAVJC,QAUI,QAVJA,QAUI;AAAA,MATJC,IASI,QATJA,IASI;AAAA,MARJC,OAQI,QARJA,OAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,SACC;;AACJ,MAAMC,QAAQ,GAAGlB,WAAW,EAA5B;AAEA,SACE,oBAAC,QAAD,eACMiB,SADN;AAEE,IAAA,SAAS,EAAElB,UAAU,CACnBE,YAAY,CAAC,UAAD,EAAaiB,QAAb,CADO,EAEnB;AACE,wBAAkBH;AADpB,KAFmB,4BAKAC,KALA;AAFvB,MAUGL,MAVH,EAWE;AAAK,IAAA,SAAS,EAAC;AAAf,KAEGC,KAFH,EAGE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,QAAb;AAAsB,IAAA,SAAS,EAAC;AAAhC,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAqCJ,QAArC,CADF,EAEGL,YAAY,CAACS,KAAD,CAAZ,IACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,KAAlC,CAHJ,CAHF,EASGT,YAAY,CAACM,IAAD,CAAZ,IACC,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,SAAb;AAAuB,IAAA,SAAS,EAAC;AAAjC,KACGA,IADH,CAVJ,EAcGN,YAAY,CAACO,OAAD,CAAZ,IACC,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC,MAAnB;AAA0B,IAAA,SAAS,EAAC;AAApC,KACGA,OADH,CAfJ,EAmBG,CAACP,YAAY,CAACU,MAAD,CAAZ,IAAwBV,YAAY,CAACW,OAAD,CAArC,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,MADH,EAEGV,YAAY,CAACW,OAAD,CAAZ,IACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAoCA,OAApC,CAHJ,CApBJ,CAXF,CADF;AA0CD,CAxDD,C,CA0DA;;;AACA,eAAeR,cAAc,CAACC,QAAD,EAAW;AAAES,EAAAA,KAAK,EAAE;AAAT,CAAX,CAA7B","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport Tappable, { TappableProps } from \"../Tappable/Tappable\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport Text from \"../Typography/Text/Text\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport { withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport \"./RichCell.css\";\n\nexport interface RichCellProps extends TappableProps {\n /**\n * Контейнер для текста под `children`.\n */\n text?: React.ReactNode;\n /**\n * Контейнер для текста под `text`.\n */\n caption?: React.ReactNode;\n /**\n * Контейнер для контента под `caption`. Например `<UsersStack size=\"s\" />`\n */\n bottom?: React.ReactNode;\n /**\n * Кнопка или набор кнопок `<Button size=\"s\" />`. Располагается под `bottom`.\n */\n actions?: React.ReactNode;\n /**\n * `<Avatar size={48|72} />`\n */\n before?: React.ReactNode;\n /**\n * Иконка 28 или текст\n */\n after?: React.ReactNode;\n /**\n * Убирает анимацию нажатия\n */\n disabled?: boolean;\n multiline?: boolean;\n}\n\nconst RichCell: React.FC<RichCellProps> = ({\n children,\n text,\n caption,\n before,\n after,\n bottom,\n actions,\n multiline,\n sizeY,\n ...restProps\n}) => {\n const platform = usePlatform();\n\n return (\n <Tappable\n {...restProps}\n vkuiClass={classNames(\n getClassName(\"RichCell\", platform),\n {\n \"RichCell--mult\": multiline,\n },\n `RichCell--sizeY-${sizeY}`\n )}\n >\n {before}\n <div vkuiClass=\"RichCell__in\">\n {/* Этот after будет скрыт из верстки. Он нужен для CSS */}\n {after}\n <Text weight=\"medium\" vkuiClass=\"RichCell__content\">\n <div vkuiClass=\"RichCell__children\">{children}</div>\n {hasReactNode(after) && (\n <div vkuiClass=\"RichCell__after\">{after}</div>\n )}\n </Text>\n {hasReactNode(text) && (\n <Text weight=\"regular\" vkuiClass=\"RichCell__text\">\n {text}\n </Text>\n )}\n {hasReactNode(caption) && (\n <Subhead Component=\"span\" vkuiClass=\"RichCell__caption\">\n {caption}\n </Subhead>\n )}\n {(hasReactNode(bottom) || hasReactNode(actions)) && (\n <div vkuiClass=\"RichCell__bottom\">\n {bottom}\n {hasReactNode(actions) && (\n <div vkuiClass=\"RichCell__actions\">{actions}</div>\n )}\n </div>\n )}\n </div>\n </Tappable>\n );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(RichCell, { sizeY: true });\n"],"file":"RichCell.js"}
@@ -1,35 +1,62 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+ import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["before", "className", "defaultValue", "placeholder", "after", "getRef", "platform", "icon", "onIconClick", "style"];
4
+ var _excluded = ["platform", "children"],
5
+ _excluded2 = ["before", "className", "defaultValue", "placeholder", "after", "getRef", "platform", "icon", "onIconClick", "style"];
5
6
  import { createScopedElement } from "../../lib/jsxRuntime";
6
7
  import * as React from "react";
7
8
  import { classNames } from "../../lib/classNames";
8
9
  import { withPlatform } from "../../hoc/withPlatform";
9
10
  import { getClassName } from "../../helpers/getClassName";
10
11
  import { Icon16SearchOutline, Icon16Clear, Icon24Cancel } from "@vkontakte/icons";
11
- import { IOS, VKCOM } from "../../lib/platform";
12
+ import { IOS, VKCOM, ANDROID } from "../../lib/platform";
12
13
  import { Touch } from "../Touch/Touch";
13
14
  import { noop } from "../../lib/utils";
14
15
  import Text from "../Typography/Text/Text";
15
16
  import Title from "../Typography/Title/Title";
17
+ import Headline from "../Typography/Headline/Headline";
16
18
  import Separator from "../Separator/Separator";
17
19
  import { useExternRef } from "../../hooks/useExternRef";
18
20
  import { useEnsuredControl } from "../../hooks/useEnsuredControl";
19
21
 
20
- var Search = function Search(_ref) {
21
- var before = _ref.before,
22
- className = _ref.className,
23
- defaultValue = _ref.defaultValue,
24
- placeholder = _ref.placeholder,
25
- after = _ref.after,
26
- getRef = _ref.getRef,
27
- platform = _ref.platform,
28
- icon = _ref.icon,
29
- _ref$onIconClick = _ref.onIconClick,
30
- onIconClick = _ref$onIconClick === void 0 ? noop : _ref$onIconClick,
31
- style = _ref.style,
32
- inputProps = _objectWithoutProperties(_ref, _excluded);
22
+ var SearchPlaceholderTypography = function SearchPlaceholderTypography(_ref) {
23
+ var platform = _ref.platform,
24
+ children = _ref.children,
25
+ restProps = _objectWithoutProperties(_ref, _excluded);
26
+
27
+ switch (platform) {
28
+ case IOS:
29
+ return createScopedElement(Title, _extends({}, restProps, {
30
+ level: "3",
31
+ weight: "3"
32
+ }), children);
33
+
34
+ case VKCOM:
35
+ return createScopedElement(Text, _extends({}, restProps, {
36
+ weight: "regular"
37
+ }), children);
38
+
39
+ case ANDROID:
40
+ default:
41
+ return createScopedElement(Headline, _extends({}, restProps, {
42
+ weight: "regular"
43
+ }), children);
44
+ }
45
+ };
46
+
47
+ var Search = function Search(_ref2) {
48
+ var before = _ref2.before,
49
+ className = _ref2.className,
50
+ defaultValue = _ref2.defaultValue,
51
+ placeholder = _ref2.placeholder,
52
+ after = _ref2.after,
53
+ getRef = _ref2.getRef,
54
+ platform = _ref2.platform,
55
+ icon = _ref2.icon,
56
+ _ref2$onIconClick = _ref2.onIconClick,
57
+ onIconClick = _ref2$onIconClick === void 0 ? noop : _ref2$onIconClick,
58
+ style = _ref2.style,
59
+ inputProps = _objectWithoutProperties(_ref2, _excluded2);
33
60
 
34
61
  var inputRef = useExternRef(getRef);
35
62
 
@@ -106,13 +133,9 @@ var Search = function Search(_ref) {
106
133
  vkuiClass: "Search__placeholder"
107
134
  }, createScopedElement("div", {
108
135
  vkuiClass: "Search__placeholder-in"
109
- }, before, platform === VKCOM ? createScopedElement(Text, {
110
- vkuiClass: "Search__placeholder-text",
111
- weight: "regular"
112
- }, placeholder) : createScopedElement(Title, {
136
+ }, before, createScopedElement(SearchPlaceholderTypography, {
113
137
  vkuiClass: "Search__placeholder-text",
114
- level: "3",
115
- weight: "regular"
138
+ platform: platform
116
139
  }, placeholder)), isFocused && platform === IOS && after && createScopedElement("div", {
117
140
  vkuiClass: "Search__after-width"
118
141
  }, after))), createScopedElement("div", {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Search/Search.tsx"],"names":["React","classNames","withPlatform","getClassName","Icon16SearchOutline","Icon16Clear","Icon24Cancel","IOS","VKCOM","Touch","noop","Text","Title","Separator","useExternRef","useEnsuredControl","Search","before","className","defaultValue","placeholder","after","getRef","platform","icon","onIconClick","style","inputProps","inputRef","useState","isFocused","setFocused","value","onChange","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","defaultProps","autoComplete"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { withPlatform } from \"../../hoc/withPlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport {\n Icon16SearchOutline,\n Icon16Clear,\n Icon24Cancel,\n} from \"@vkontakte/icons\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\nimport { HasPlatform, HasRef } from \"../../types\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { VKUITouchEvent } from \"../../lib/touch\";\nimport { noop } from \"../../lib/utils\";\nimport Text from \"../Typography/Text/Text\";\nimport Title from \"../Typography/Title/Title\";\nimport Separator from \"../Separator/Separator\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport \"./Search.css\";\n\nexport type InputRef = (element: HTMLInputElement) => void;\n\nexport interface SearchProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasPlatform {\n /**\n * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n */\n after?: React.ReactNode;\n before?: React.ReactNode;\n icon?: React.ReactNode;\n onIconClick?: (e: VKUITouchEvent) => void;\n defaultValue?: string;\n}\n\nconst Search: React.FC<SearchProps> = ({\n before,\n className,\n defaultValue,\n placeholder,\n after,\n getRef,\n platform,\n icon,\n onIconClick = noop,\n style,\n ...inputProps\n}) => {\n const inputRef = useExternRef(getRef);\n const [isFocused, setFocused] = React.useState(false);\n const [value, onChange] = useEnsuredControl(inputProps, { defaultValue });\n\n const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocused(true);\n inputProps.onFocus && inputProps.onFocus(e);\n };\n\n const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocused(false);\n inputProps.onBlur && inputProps.onBlur(e);\n };\n\n const onCancel = React.useCallback(() => {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n \"value\"\n )?.set;\n nativeInputValueSetter?.call(inputRef.current, \"\");\n\n const ev2 = new Event(\"input\", { bubbles: true });\n inputRef.current?.dispatchEvent(ev2);\n }, [inputRef]);\n\n const onIconClickStart = React.useCallback(\n (e: TouchEvent) => onIconClick(e.originalEvent),\n [onIconClick]\n );\n\n const onIconCancelClickStart = React.useCallback(\n (e: TouchEvent) => {\n e.originalEvent.preventDefault();\n inputRef.current?.focus();\n onCancel();\n },\n [inputRef, onCancel]\n );\n\n return (\n <div\n vkuiClass={classNames(getClassName(\"Search\", platform), {\n \"Search--focused\": isFocused,\n \"Search--has-value\": !!value,\n \"Search--has-after\": !!after,\n \"Search--has-icon\": !!icon,\n })}\n className={className}\n style={style}\n >\n <div vkuiClass=\"Search__in\">\n <div vkuiClass=\"Search__width\" />\n <label vkuiClass=\"Search__control\">\n <input\n type=\"search\"\n {...inputProps}\n ref={inputRef}\n vkuiClass=\"Search__input\"\n onFocus={onFocus}\n onBlur={onBlur}\n onChange={onChange}\n value={value}\n />\n {platform === IOS && after && (\n <div vkuiClass=\"Search__after-width\">{after}</div>\n )}\n <div vkuiClass=\"Search__placeholder\">\n <div vkuiClass=\"Search__placeholder-in\">\n {before}\n {platform === VKCOM ? (\n <Text vkuiClass=\"Search__placeholder-text\" weight=\"regular\">\n {placeholder}\n </Text>\n ) : (\n <Title\n vkuiClass=\"Search__placeholder-text\"\n level=\"3\"\n weight=\"regular\"\n >\n {placeholder}\n </Title>\n )}\n </div>\n {isFocused && platform === IOS && after && (\n <div vkuiClass=\"Search__after-width\">{after}</div>\n )}\n </div>\n </label>\n <div vkuiClass=\"Search__after\" onClick={onCancel}>\n <div vkuiClass=\"Search__icons\">\n {icon && (\n <Touch onStart={onIconClickStart} vkuiClass=\"Search__icon\">\n {icon}\n </Touch>\n )}\n {!!value && (\n <Touch onStart={onIconCancelClickStart} vkuiClass=\"Search__icon\">\n {platform === IOS ? <Icon16Clear /> : <Icon24Cancel />}\n </Touch>\n )}\n </div>\n {platform === IOS && after && (\n <div vkuiClass=\"Search__after-in\">{after}</div>\n )}\n </div>\n </div>\n {platform === VKCOM && <Separator vkuiClass=\"Search__separator\" wide />}\n </div>\n );\n};\n\nSearch.defaultProps = {\n autoComplete: \"off\",\n defaultValue: \"\",\n placeholder: \"Поиск\",\n after: \"Отмена\",\n before: <Icon16SearchOutline />,\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withPlatform(Search);\n"],"file":"Search.js"}
1
+ {"version":3,"sources":["../../../src/components/Search/Search.tsx"],"names":["React","classNames","withPlatform","getClassName","Icon16SearchOutline","Icon16Clear","Icon24Cancel","IOS","VKCOM","ANDROID","Touch","noop","Text","Title","Headline","Separator","useExternRef","useEnsuredControl","SearchPlaceholderTypography","platform","children","restProps","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","inputProps","inputRef","useState","isFocused","setFocused","value","onChange","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","defaultProps","autoComplete"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { withPlatform } from \"../../hoc/withPlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport {\n Icon16SearchOutline,\n Icon16Clear,\n Icon24Cancel,\n} from \"@vkontakte/icons\";\nimport { IOS, VKCOM, ANDROID } from \"../../lib/platform\";\nimport { HasPlatform, HasRef } from \"../../types\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { VKUITouchEvent } from \"../../lib/touch\";\nimport { noop } from \"../../lib/utils\";\nimport Text from \"../Typography/Text/Text\";\nimport Title from \"../Typography/Title/Title\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport Separator from \"../Separator/Separator\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport \"./Search.css\";\n\nexport type InputRef = (element: HTMLInputElement) => void;\n\ninterface SearchPlaceholderTypographyProps\n extends HasPlatform,\n React.HTMLAttributes<HTMLElement> {}\n\nconst SearchPlaceholderTypography: React.FC<\n SearchPlaceholderTypographyProps\n> = ({ platform, children, ...restProps }) => {\n switch (platform) {\n case IOS:\n return (\n <Title {...restProps} level=\"3\" weight=\"3\">\n {children}\n </Title>\n );\n case VKCOM:\n return (\n <Text {...restProps} weight=\"regular\">\n {children}\n </Text>\n );\n case ANDROID:\n default:\n return (\n <Headline {...restProps} weight=\"regular\">\n {children}\n </Headline>\n );\n }\n};\n\nexport interface SearchProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasPlatform {\n /**\n * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n */\n after?: React.ReactNode;\n before?: React.ReactNode;\n icon?: React.ReactNode;\n onIconClick?: (e: VKUITouchEvent) => void;\n defaultValue?: string;\n}\n\nconst Search: React.FC<SearchProps> = ({\n before,\n className,\n defaultValue,\n placeholder,\n after,\n getRef,\n platform,\n icon,\n onIconClick = noop,\n style,\n ...inputProps\n}) => {\n const inputRef = useExternRef(getRef);\n const [isFocused, setFocused] = React.useState(false);\n const [value, onChange] = useEnsuredControl(inputProps, { defaultValue });\n\n const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocused(true);\n inputProps.onFocus && inputProps.onFocus(e);\n };\n\n const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocused(false);\n inputProps.onBlur && inputProps.onBlur(e);\n };\n\n const onCancel = React.useCallback(() => {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n \"value\"\n )?.set;\n nativeInputValueSetter?.call(inputRef.current, \"\");\n\n const ev2 = new Event(\"input\", { bubbles: true });\n inputRef.current?.dispatchEvent(ev2);\n }, [inputRef]);\n\n const onIconClickStart = React.useCallback(\n (e: TouchEvent) => onIconClick(e.originalEvent),\n [onIconClick]\n );\n\n const onIconCancelClickStart = React.useCallback(\n (e: TouchEvent) => {\n e.originalEvent.preventDefault();\n inputRef.current?.focus();\n onCancel();\n },\n [inputRef, onCancel]\n );\n\n return (\n <div\n vkuiClass={classNames(getClassName(\"Search\", platform), {\n \"Search--focused\": isFocused,\n \"Search--has-value\": !!value,\n \"Search--has-after\": !!after,\n \"Search--has-icon\": !!icon,\n })}\n className={className}\n style={style}\n >\n <div vkuiClass=\"Search__in\">\n <div vkuiClass=\"Search__width\" />\n <label vkuiClass=\"Search__control\">\n <input\n type=\"search\"\n {...inputProps}\n ref={inputRef}\n vkuiClass=\"Search__input\"\n onFocus={onFocus}\n onBlur={onBlur}\n onChange={onChange}\n value={value}\n />\n {platform === IOS && after && (\n <div vkuiClass=\"Search__after-width\">{after}</div>\n )}\n <div vkuiClass=\"Search__placeholder\">\n <div vkuiClass=\"Search__placeholder-in\">\n {before}\n <SearchPlaceholderTypography\n vkuiClass=\"Search__placeholder-text\"\n platform={platform}\n >\n {placeholder}\n </SearchPlaceholderTypography>\n </div>\n {isFocused && platform === IOS && after && (\n <div vkuiClass=\"Search__after-width\">{after}</div>\n )}\n </div>\n </label>\n <div vkuiClass=\"Search__after\" onClick={onCancel}>\n <div vkuiClass=\"Search__icons\">\n {icon && (\n <Touch onStart={onIconClickStart} vkuiClass=\"Search__icon\">\n {icon}\n </Touch>\n )}\n {!!value && (\n <Touch onStart={onIconCancelClickStart} vkuiClass=\"Search__icon\">\n {platform === IOS ? <Icon16Clear /> : <Icon24Cancel />}\n </Touch>\n )}\n </div>\n {platform === IOS && after && (\n <div vkuiClass=\"Search__after-in\">{after}</div>\n )}\n </div>\n </div>\n {platform === VKCOM && <Separator vkuiClass=\"Search__separator\" wide />}\n </div>\n );\n};\n\nSearch.defaultProps = {\n autoComplete: \"off\",\n defaultValue: \"\",\n placeholder: \"Поиск\",\n after: \"Отмена\",\n before: <Icon16SearchOutline />,\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withPlatform(Search);\n"],"file":"Search.js"}
@@ -0,0 +1,17 @@
1
+ import * as React from "react";
2
+ import { HasRootRef } from "../../types";
3
+ import "./SegmentedControl.css";
4
+ export declare type SegmentedControlValue = string | number | undefined;
5
+ export interface SegmentedControlOptionInterface extends Omit<React.HTMLAttributes<HTMLElement>, "label"> {
6
+ label: React.ReactChild;
7
+ value: SegmentedControlValue;
8
+ }
9
+ export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, HasRootRef<HTMLDivElement> {
10
+ options: SegmentedControlOptionInterface[];
11
+ size?: "m" | "l";
12
+ name?: string;
13
+ onChange?: (value: SegmentedControlValue) => void;
14
+ value?: SegmentedControlValue;
15
+ defaultValue?: SegmentedControlValue;
16
+ }
17
+ export declare const SegmentedControl: React.FC<SegmentedControlProps>;
@@ -0,0 +1,94 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
+ var _excluded = ["size", "name", "options", "getRootRef", "onChange", "value", "defaultValue", "children"],
5
+ _excluded2 = ["label"];
6
+ import { createScopedElement } from "../../lib/jsxRuntime";
7
+ import * as React from "react";
8
+ import { classNames } from "../../lib/classNames";
9
+ import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
10
+ import { generateRandomId, noop } from "../../lib/utils";
11
+ import { warnOnce } from "../../lib/warnOnce";
12
+ import { SegmentedControlOption } from "./SegmentedControlOption/SegmentedControlOption";
13
+ var warn = warnOnce("SegmentedControl");
14
+ export var SegmentedControl = function SegmentedControl(_ref) {
15
+ var _ref$size = _ref.size,
16
+ size = _ref$size === void 0 ? "l" : _ref$size,
17
+ name = _ref.name,
18
+ options = _ref.options,
19
+ getRootRef = _ref.getRootRef,
20
+ _ref$onChange = _ref.onChange,
21
+ onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
22
+ value = _ref.value,
23
+ defaultValue = _ref.defaultValue,
24
+ children = _ref.children,
25
+ restProps = _objectWithoutProperties(_ref, _excluded);
26
+
27
+ var initialValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
28
+
29
+ if (!initialValue) {
30
+ var _options$;
31
+
32
+ initialValue = (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value;
33
+ }
34
+
35
+ var _React$useState = React.useState(0),
36
+ _React$useState2 = _slicedToArray(_React$useState, 2),
37
+ activeOptionIdx = _React$useState2[0],
38
+ updateActiveOptionIdx = _React$useState2[1];
39
+
40
+ var _React$useState3 = React.useState(initialValue),
41
+ _React$useState4 = _slicedToArray(_React$useState3, 2),
42
+ activeValue = _React$useState4[0],
43
+ updateActiveValue = _React$useState4[1];
44
+
45
+ var nameRef = React.useRef(name !== null && name !== void 0 ? name : generateRandomId());
46
+ useIsomorphicLayoutEffect(function () {
47
+ var _activeOptionIdx = options.findIndex(function (option) {
48
+ return option.value === activeValue;
49
+ });
50
+
51
+ if (_activeOptionIdx === -1 && process.env.NODE_ENV === "development") {
52
+ warn("defaultValue: такого значения нет среди опций!");
53
+ }
54
+
55
+ updateActiveOptionIdx(_activeOptionIdx);
56
+ }, [activeValue, options]);
57
+ var translateX = "translateX(".concat(100 * activeOptionIdx, "%)");
58
+
59
+ var handleOnChange = function handleOnChange(value) {
60
+ updateActiveValue(value);
61
+ onChange(value);
62
+ };
63
+
64
+ return createScopedElement("div", _extends({}, restProps, {
65
+ vkuiClass: classNames("SegmentedControl", "SegmentedControl--".concat(size)),
66
+ ref: getRootRef
67
+ }), createScopedElement("div", {
68
+ role: "radiogroup",
69
+ vkuiClass: "SegmentedControl__in"
70
+ }, activeOptionIdx > -1 && createScopedElement("div", {
71
+ "aria-hidden": "true",
72
+ vkuiClass: "SegmentedControl__slider",
73
+ style: {
74
+ width: "".concat(100 / options.length, "%"),
75
+ transform: translateX,
76
+ WebkitTransform: translateX
77
+ }
78
+ }), options.map(function (_ref2) {
79
+ var label = _ref2.label,
80
+ optionProps = _objectWithoutProperties(_ref2, _excluded2);
81
+
82
+ return createScopedElement(SegmentedControlOption, _extends({
83
+ key: "".concat(optionProps.value)
84
+ }, optionProps, {
85
+ vkuiClass: "SegmentedControl__option",
86
+ name: nameRef.current,
87
+ checked: activeValue === optionProps.value,
88
+ onChange: function onChange() {
89
+ return handleOnChange(optionProps.value);
90
+ }
91
+ }), label);
92
+ })));
93
+ };
94
+ //# sourceMappingURL=SegmentedControl.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":["React","classNames","useIsomorphicLayoutEffect","generateRandomId","noop","warnOnce","SegmentedControlOption","warn","SegmentedControl","size","name","options","getRootRef","onChange","value","defaultValue","children","restProps","initialValue","useState","activeOptionIdx","updateActiveOptionIdx","activeValue","updateActiveValue","nameRef","useRef","_activeOptionIdx","findIndex","option","process","env","NODE_ENV","translateX","handleOnChange","width","length","transform","WebkitTransform","map","label","optionProps","current"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { generateRandomId, noop } from \"../../lib/utils\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { SegmentedControlOption } from \"./SegmentedControlOption/SegmentedControlOption\";\nimport { HasRootRef } from \"../../types\";\nimport \"./SegmentedControl.css\";\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n extends Omit<React.HTMLAttributes<HTMLElement>, \"label\"> {\n label: React.ReactChild;\n value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\">,\n HasRootRef<HTMLDivElement> {\n options: SegmentedControlOptionInterface[];\n size?: \"m\" | \"l\";\n name?: string;\n onChange?: (value: SegmentedControlValue) => void;\n value?: SegmentedControlValue;\n defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce(\"SegmentedControl\");\nexport const SegmentedControl: React.FC<SegmentedControlProps> = ({\n size = \"l\",\n name,\n options,\n getRootRef,\n onChange = noop,\n value,\n defaultValue,\n children,\n ...restProps\n}) => {\n let initialValue = defaultValue ?? value;\n\n if (!initialValue) {\n initialValue = options[0]?.value;\n }\n\n const [activeOptionIdx, updateActiveOptionIdx] = React.useState<number>(0);\n const [activeValue, updateActiveValue] =\n React.useState<SegmentedControlValue>(initialValue);\n\n const nameRef = React.useRef<string>(name ?? generateRandomId());\n\n useIsomorphicLayoutEffect(() => {\n const _activeOptionIdx = options.findIndex(\n (option) => option.value === activeValue\n );\n\n if (_activeOptionIdx === -1 && process.env.NODE_ENV === \"development\") {\n warn(\"defaultValue: такого значения нет среди опций!\");\n }\n\n updateActiveOptionIdx(_activeOptionIdx);\n }, [activeValue, options]);\n\n const translateX = `translateX(${100 * activeOptionIdx}%)`;\n\n const handleOnChange = (value: SegmentedControlValue) => {\n updateActiveValue(value);\n onChange(value);\n };\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\"SegmentedControl\", `SegmentedControl--${size}`)}\n ref={getRootRef}\n >\n <div role=\"radiogroup\" vkuiClass=\"SegmentedControl__in\">\n {activeOptionIdx > -1 && (\n <div\n aria-hidden=\"true\"\n vkuiClass=\"SegmentedControl__slider\"\n style={{\n width: `${100 / options.length}%`,\n transform: translateX,\n WebkitTransform: translateX,\n }}\n />\n )}\n {options.map(({ label, ...optionProps }) => (\n <SegmentedControlOption\n key={`${optionProps.value}`}\n {...optionProps}\n vkuiClass=\"SegmentedControl__option\"\n name={nameRef.current}\n checked={activeValue === optionProps.value}\n onChange={() => handleOnChange(optionProps.value)}\n >\n {label}\n </SegmentedControlOption>\n ))}\n </div>\n </div>\n );\n};\n"],"file":"SegmentedControl.js"}
@@ -0,0 +1,4 @@
1
+ import * as React from "react";
2
+ import { VisuallyHiddenInputProps } from "../../VisuallyHiddenInput/VisuallyHiddenInput";
3
+ import "./SegmentedControlOption.css";
4
+ export declare const SegmentedControlOption: React.FC<VisuallyHiddenInputProps>;
@@ -0,0 +1,40 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ var _excluded = ["className", "style", "children"];
4
+ import { createScopedElement } from "../../../lib/jsxRuntime";
5
+ import { useFocusVisible } from "../../../hooks/useFocusVisible";
6
+ import { callMultiple } from "../../../lib/callMultiple";
7
+ import { classNames } from "../../../lib/classNames";
8
+ import { FocusVisible } from "../../FocusVisible/FocusVisible";
9
+ import Text from "../../Typography/Text/Text";
10
+ import { VisuallyHiddenInput } from "../../VisuallyHiddenInput/VisuallyHiddenInput";
11
+ export var SegmentedControlOption = function SegmentedControlOption(_ref) {
12
+ var className = _ref.className,
13
+ style = _ref.style,
14
+ children = _ref.children,
15
+ restProps = _objectWithoutProperties(_ref, _excluded);
16
+
17
+ var _useFocusVisible = useFocusVisible(),
18
+ focusVisible = _useFocusVisible.focusVisible,
19
+ onBlur = _useFocusVisible.onBlur,
20
+ onFocus = _useFocusVisible.onFocus;
21
+
22
+ return createScopedElement("label", {
23
+ className: className,
24
+ style: style,
25
+ vkuiClass: classNames("SegmentedControlOption", {
26
+ "SegmentedControlOption--checked": restProps.checked,
27
+ "SegmentedControlOption--focus-visible": focusVisible
28
+ })
29
+ }, createScopedElement(VisuallyHiddenInput, _extends({}, restProps, {
30
+ type: "radio",
31
+ onBlur: callMultiple(onBlur, restProps.onBlur),
32
+ onFocus: callMultiple(onFocus, restProps.onFocus)
33
+ })), createScopedElement(Text, {
34
+ vkuiClass: "SegmentedControlOption__content",
35
+ weight: "medium"
36
+ }, children), createScopedElement(FocusVisible, {
37
+ mode: "inside"
38
+ }));
39
+ };
40
+ //# sourceMappingURL=SegmentedControlOption.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"names":["useFocusVisible","callMultiple","classNames","FocusVisible","Text","VisuallyHiddenInput","SegmentedControlOption","className","style","children","restProps","focusVisible","onBlur","onFocus","checked"],"mappings":";;;;AACA,SAASA,eAAT;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,OAAOC,IAAP;AACA,SACEC,mBADF;AAMA,OAAO,IAAMC,sBAA0D,GAAG,SAA7DA,sBAA6D,OAKpE;AAAA,MAJJC,SAII,QAJJA,SAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,SACC;;AACJ,yBAA0CV,eAAe,EAAzD;AAAA,MAAQW,YAAR,oBAAQA,YAAR;AAAA,MAAsBC,MAAtB,oBAAsBA,MAAtB;AAAA,MAA8BC,OAA9B,oBAA8BA,OAA9B;;AAEA,SACE;AACE,IAAA,SAAS,EAAEN,SADb;AAEE,IAAA,KAAK,EAAEC,KAFT;AAGE,IAAA,SAAS,EAAEN,UAAU,CAAC,wBAAD,EAA2B;AAC9C,yCAAmCQ,SAAS,CAACI,OADC;AAE9C,+CAAyCH;AAFK,KAA3B;AAHvB,KAQE,oBAAC,mBAAD,eACMD,SADN;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,MAAM,EAAET,YAAY,CAACW,MAAD,EAASF,SAAS,CAACE,MAAnB,CAHtB;AAIE,IAAA,OAAO,EAAEX,YAAY,CAACY,OAAD,EAAUH,SAAS,CAACG,OAApB;AAJvB,KARF,EAcE,oBAAC,IAAD;AAAM,IAAA,SAAS,EAAC,iCAAhB;AAAkD,IAAA,MAAM,EAAC;AAAzD,KACGJ,QADH,CAdF,EAiBE,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,IAjBF,CADF;AAqBD,CA7BM","sourcesContent":["import * as React from \"react\";\nimport { useFocusVisible } from \"../../../hooks/useFocusVisible\";\nimport { callMultiple } from \"../../../lib/callMultiple\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { FocusVisible } from \"../../FocusVisible/FocusVisible\";\nimport Text from \"../../Typography/Text/Text\";\nimport {\n VisuallyHiddenInput,\n VisuallyHiddenInputProps,\n} from \"../../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport \"./SegmentedControlOption.css\";\n\nexport const SegmentedControlOption: React.FC<VisuallyHiddenInputProps> = ({\n className,\n style,\n children,\n ...restProps\n}) => {\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n return (\n <label\n className={className}\n style={style}\n vkuiClass={classNames(\"SegmentedControlOption\", {\n \"SegmentedControlOption--checked\": restProps.checked,\n \"SegmentedControlOption--focus-visible\": focusVisible,\n })}\n >\n <VisuallyHiddenInput\n {...restProps}\n type=\"radio\"\n onBlur={callMultiple(onBlur, restProps.onBlur)}\n onFocus={callMultiple(onFocus, restProps.onFocus)}\n />\n <Text vkuiClass=\"SegmentedControlOption__content\" weight=\"medium\">\n {children}\n </Text>\n <FocusVisible mode=\"inside\" />\n </label>\n );\n};\n"],"file":"SegmentedControlOption.js"}
@@ -6,7 +6,7 @@ import { classNames } from "../../lib/classNames";
6
6
  import { getClassName } from "../../helpers/getClassName";
7
7
  import Tappable from "../Tappable/Tappable";
8
8
  import { Icon24Chevron } from "@vkontakte/icons";
9
- import { IOS } from "../../lib/platform";
9
+ import { ANDROID, IOS } from "../../lib/platform";
10
10
  import { usePlatform } from "../../hooks/usePlatform";
11
11
  import { hasReactNode } from "../../lib/utils";
12
12
  import { useAdaptivity } from "../../hooks/useAdaptivity";
@@ -14,19 +14,31 @@ import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
14
14
  import Title from "../Typography/Title/Title";
15
15
  import Text from "../Typography/Text/Text";
16
16
  import Subhead from "../Typography/Subhead/Subhead";
17
+ import Headline from "../Typography/Headline/Headline";
17
18
 
18
19
  var SimpleCellTypography = function SimpleCellTypography(props) {
19
20
  var _useAdaptivity = useAdaptivity(),
20
21
  sizeY = _useAdaptivity.sizeY;
21
22
 
22
- return sizeY === SizeType.COMPACT ? createScopedElement(Text, _extends({
23
- Component: "span",
24
- weight: "regular"
25
- }, props)) : createScopedElement(Title, _extends({
26
- Component: "span",
27
- level: "3",
28
- weight: "regular"
29
- }, props));
23
+ var platform = usePlatform();
24
+
25
+ if (sizeY === SizeType.COMPACT) {
26
+ return createScopedElement(Text, _extends({
27
+ Component: "span",
28
+ weight: "regular"
29
+ }, props));
30
+ } else if (platform === ANDROID) {
31
+ return createScopedElement(Headline, _extends({
32
+ Component: "span",
33
+ weight: "regular"
34
+ }, props));
35
+ } else {
36
+ return createScopedElement(Title, _extends({
37
+ Component: "span",
38
+ level: "3",
39
+ weight: "3"
40
+ }, props));
41
+ }
30
42
  };
31
43
 
32
44
  var SimpleCell = function SimpleCell(_ref) {
@@ -58,7 +70,6 @@ var SimpleCell = function SimpleCell(_ref) {
58
70
  vkuiClass: "SimpleCell__badge"
59
71
  }, badge)), description && createScopedElement(Subhead, {
60
72
  Component: "span",
61
- weight: "regular",
62
73
  vkuiClass: "SimpleCell__description"
63
74
  }, description)), hasReactNode(indicator) && createScopedElement(SimpleCellTypography, {
64
75
  Component: "span",
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/SimpleCell/SimpleCell.tsx"],"names":["classNames","getClassName","Tappable","Icon24Chevron","IOS","usePlatform","hasReactNode","useAdaptivity","withAdaptivity","SizeType","Title","Text","Subhead","SimpleCellTypography","props","sizeY","COMPACT","SimpleCell","badge","before","indicator","children","after","description","expandable","multiline","restProps","platform","hasAfter"],"mappings":";;;;AAEA,SAASA,UAAT;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,SAASC,aAAT,QAA8B,kBAA9B;AACA,SAASC,GAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,aAAT;AACA,SAASC,cAAT,EAAyBC,QAAzB;AACA,OAAOC,KAAP;AACA,OAAOC,IAAP;AACA,OAAOC,OAAP;;AAwCA,IAAMC,oBAAyD,GAAG,SAA5DA,oBAA4D,CAChEC,KADgE,EAE7D;AACH,uBAAkBP,aAAa,EAA/B;AAAA,MAAQQ,KAAR,kBAAQA,KAAR;;AAEA,SAAOA,KAAK,KAAKN,QAAQ,CAACO,OAAnB,GACL,oBAAC,IAAD;AAAM,IAAA,SAAS,EAAC,MAAhB;AAAuB,IAAA,MAAM,EAAC;AAA9B,KAA4CF,KAA5C,EADK,GAGL,oBAAC,KAAD;AAAO,IAAA,SAAS,EAAC,MAAjB;AAAwB,IAAA,KAAK,EAAC,GAA9B;AAAkC,IAAA,MAAM,EAAC;AAAzC,KAAuDA,KAAvD,EAHF;AAKD,CAVD;;AAYA,IAAMG,UAAqC,GAAG,SAAxCA,UAAwC,OAWvB;AAAA,MAVrBC,KAUqB,QAVrBA,KAUqB;AAAA,MATrBC,MASqB,QATrBA,MASqB;AAAA,MARrBC,SAQqB,QARrBA,SAQqB;AAAA,MAPrBC,QAOqB,QAPrBA,QAOqB;AAAA,MANrBC,KAMqB,QANrBA,KAMqB;AAAA,MALrBC,WAKqB,QALrBA,WAKqB;AAAA,MAJrBC,UAIqB,QAJrBA,UAIqB;AAAA,MAHrBC,SAGqB,QAHrBA,SAGqB;AAAA,MAFrBV,KAEqB,QAFrBA,KAEqB;AAAA,MADlBW,SACkB;;AACrB,MAAMC,QAAQ,GAAGtB,WAAW,EAA5B;AACA,MAAMuB,QAAQ,GAAGtB,YAAY,CAACgB,KAAD,CAAZ,IAAwBE,UAAU,IAAIG,QAAQ,KAAKvB,GAApE;AAEA,SACE,oBAAC,QAAD,eACMsB,SADN;AAEE,IAAA,SAAS,EAAE1B,UAAU,CACnBC,YAAY,CAAC,YAAD,EAAe0B,QAAf,CADO,EAEnB;AACE,yBAAmBH,UADrB;AAEE,0BAAoBC;AAFtB,KAFmB,8BAMEV,KANF;AAFvB,MAWGI,MAXH,EAYE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,oBAAC,oBAAD;AAAsB,IAAA,SAAS,EAAC;AAAhC,KACGE,QADH,CADF,EAIGf,YAAY,CAACY,KAAD,CAAZ,IACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAqCA,KAArC,CALJ,CADF,EASGK,WAAW,IACV,oBAAC,OAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,MAAM,EAAC,SAFT;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGA,WALH,CAVJ,CAZF,EA+BGjB,YAAY,CAACc,SAAD,CAAZ,IACC,oBAAC,oBAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,SAAS,EAAC;AAFZ,KAIGA,SAJH,CAhCJ,EAuCGQ,QAAQ,IACP;AAAK,IAAA,SAAS,EAAC;AAAf,KACGN,KADH,EAEGE,UAAU,IAAIG,QAAQ,KAAKvB,GAA3B,IAAkC,oBAAC,aAAD,OAFrC,CAxCJ,CADF;AAgDD,CA/DD,C,CAiEA;;;AACA,eAAeI,cAAc,CAACS,UAAD,EAAa;AAAEF,EAAAA,KAAK,EAAE;AAAT,CAAb,CAA7B","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport Tappable, { TappableProps } from \"../Tappable/Tappable\";\nimport { Icon24Chevron } from \"@vkontakte/icons\";\nimport { IOS } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { withAdaptivity, SizeType } from \"../../hoc/withAdaptivity\";\nimport Title from \"../Typography/Title/Title\";\nimport Text from \"../Typography/Text/Text\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport \"./SimpleCell.css\";\n\nexport interface SimpleCellOwnProps extends HasComponent {\n /**\n * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n */\n before?: React.ReactNode;\n /**\n * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n */\n badge?: React.ReactNode;\n /**\n * Контейнер для текста справа от `children`.\n */\n indicator?: React.ReactNode;\n /**\n * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n */\n after?: React.ReactNode;\n /**\n * Контейнер для текста под `children`.\n */\n description?: React.ReactNode;\n /**\n * Убирает анимацию нажатия\n */\n disabled?: boolean;\n /**\n * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n */\n expandable?: boolean;\n multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\ntype SimpleCellTypographyProps = React.HTMLAttributes<HTMLDivElement> &\n HasComponent;\n\nconst SimpleCellTypography: React.FC<SimpleCellTypographyProps> = (\n props: SimpleCellTypographyProps\n) => {\n const { sizeY } = useAdaptivity();\n\n return sizeY === SizeType.COMPACT ? (\n <Text Component=\"span\" weight=\"regular\" {...props} />\n ) : (\n <Title Component=\"span\" level=\"3\" weight=\"regular\" {...props} />\n );\n};\n\nconst SimpleCell: React.FC<SimpleCellProps> = ({\n badge,\n before,\n indicator,\n children,\n after,\n description,\n expandable,\n multiline,\n sizeY,\n ...restProps\n}: SimpleCellProps) => {\n const platform = usePlatform();\n const hasAfter = hasReactNode(after) || (expandable && platform === IOS);\n\n return (\n <Tappable\n {...restProps}\n vkuiClass={classNames(\n getClassName(\"SimpleCell\", platform),\n {\n \"SimpleCell--exp\": expandable,\n \"SimpleCell--mult\": multiline,\n },\n `SimpleCell--sizeY-${sizeY}`\n )}\n >\n {before}\n <div vkuiClass=\"SimpleCell__main\">\n <div vkuiClass=\"SimpleCell__content\">\n <SimpleCellTypography vkuiClass=\"SimpleCell__children\">\n {children}\n </SimpleCellTypography>\n {hasReactNode(badge) && (\n <span vkuiClass=\"SimpleCell__badge\">{badge}</span>\n )}\n </div>\n {description && (\n <Subhead\n Component=\"span\"\n weight=\"regular\"\n vkuiClass=\"SimpleCell__description\"\n >\n {description}\n </Subhead>\n )}\n </div>\n {hasReactNode(indicator) && (\n <SimpleCellTypography\n Component=\"span\"\n vkuiClass=\"SimpleCell__indicator\"\n >\n {indicator}\n </SimpleCellTypography>\n )}\n {hasAfter && (\n <div vkuiClass=\"SimpleCell__after\">\n {after}\n {expandable && platform === IOS && <Icon24Chevron />}\n </div>\n )}\n </Tappable>\n );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(SimpleCell, { sizeY: true });\n"],"file":"SimpleCell.js"}
1
+ {"version":3,"sources":["../../../src/components/SimpleCell/SimpleCell.tsx"],"names":["classNames","getClassName","Tappable","Icon24Chevron","ANDROID","IOS","usePlatform","hasReactNode","useAdaptivity","withAdaptivity","SizeType","Title","Text","Subhead","Headline","SimpleCellTypography","props","sizeY","platform","COMPACT","SimpleCell","badge","before","indicator","children","after","description","expandable","multiline","restProps","hasAfter"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport Tappable, { TappableProps } from \"../Tappable/Tappable\";\nimport { Icon24Chevron } from \"@vkontakte/icons\";\nimport { ANDROID, IOS } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { withAdaptivity, SizeType } from \"../../hoc/withAdaptivity\";\nimport Title from \"../Typography/Title/Title\";\nimport Text from \"../Typography/Text/Text\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport \"./SimpleCell.css\";\n\nexport interface SimpleCellOwnProps extends HasComponent {\n /**\n * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n */\n before?: React.ReactNode;\n /**\n * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n */\n badge?: React.ReactNode;\n /**\n * Контейнер для текста справа от `children`.\n */\n indicator?: React.ReactNode;\n /**\n * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n */\n after?: React.ReactNode;\n /**\n * Контейнер для текста под `children`.\n */\n description?: React.ReactNode;\n /**\n * Убирает анимацию нажатия\n */\n disabled?: boolean;\n /**\n * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n */\n expandable?: boolean;\n multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\ntype SimpleCellTypographyProps = React.HTMLAttributes<HTMLDivElement> &\n HasComponent;\n\nconst SimpleCellTypography: React.FC<SimpleCellTypographyProps> = (\n props: SimpleCellTypographyProps\n) => {\n const { sizeY } = useAdaptivity();\n const platform = usePlatform();\n\n if (sizeY === SizeType.COMPACT) {\n return <Text Component=\"span\" weight=\"regular\" {...props} />;\n } else if (platform === ANDROID) {\n return <Headline Component=\"span\" weight=\"regular\" {...props} />;\n } else {\n return <Title Component=\"span\" level=\"3\" weight=\"3\" {...props} />;\n }\n};\n\nconst SimpleCell: React.FC<SimpleCellProps> = ({\n badge,\n before,\n indicator,\n children,\n after,\n description,\n expandable,\n multiline,\n sizeY,\n ...restProps\n}: SimpleCellProps) => {\n const platform = usePlatform();\n const hasAfter = hasReactNode(after) || (expandable && platform === IOS);\n\n return (\n <Tappable\n {...restProps}\n vkuiClass={classNames(\n getClassName(\"SimpleCell\", platform),\n {\n \"SimpleCell--exp\": expandable,\n \"SimpleCell--mult\": multiline,\n },\n `SimpleCell--sizeY-${sizeY}`\n )}\n >\n {before}\n <div vkuiClass=\"SimpleCell__main\">\n <div vkuiClass=\"SimpleCell__content\">\n <SimpleCellTypography vkuiClass=\"SimpleCell__children\">\n {children}\n </SimpleCellTypography>\n {hasReactNode(badge) && (\n <span vkuiClass=\"SimpleCell__badge\">{badge}</span>\n )}\n </div>\n {description && (\n <Subhead Component=\"span\" vkuiClass=\"SimpleCell__description\">\n {description}\n </Subhead>\n )}\n </div>\n {hasReactNode(indicator) && (\n <SimpleCellTypography\n Component=\"span\"\n vkuiClass=\"SimpleCell__indicator\"\n >\n {indicator}\n </SimpleCellTypography>\n )}\n {hasAfter && (\n <div vkuiClass=\"SimpleCell__after\">\n {after}\n {expandable && platform === IOS && <Icon24Chevron />}\n </div>\n )}\n </Tappable>\n );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(SimpleCell, { sizeY: true });\n"],"file":"SimpleCell.js"}
@@ -18,7 +18,10 @@ interface SliderSwitchState {
18
18
  activeValue: SliderSwitchOptionInterface["value"];
19
19
  hoveredOptionId: number;
20
20
  }
21
- export default class SliderSwitch extends React.Component<SliderSwitchProps, SliderSwitchState> {
21
+ /**
22
+ * @deprecated Этот компонент устарел и будет удален в 5.0.0. Используйте [`SegmentedControl`](#/SegmentedControl).
23
+ */
24
+ declare class SliderSwitch extends React.Component<SliderSwitchProps, SliderSwitchState> {
22
25
  constructor(props: SliderSwitchProps);
23
26
  static defaultProps: {
24
27
  options: {
@@ -38,6 +41,7 @@ export default class SliderSwitch extends React.Component<SliderSwitchProps, Sli
38
41
  static getDerivedStateFromProps(nextProps: SliderSwitchProps, prevState: SliderSwitchState): {
39
42
  activeValue: string | number;
40
43
  } | null;
44
+ componentDidMount(): void;
41
45
  render(): JSX.Element;
42
46
  }
43
- export {};
47
+ export { SliderSwitch };