@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
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"names":["Search","before","className","defaultValue","placeholder","after","getRef","platform","icon","onIconClick","noop","style","inputProps","inputRef","React","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","IOS","VKCOM","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":["SearchPlaceholderTypography","platform","children","restProps","IOS","VKCOM","ANDROID","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","inputProps","inputRef","React","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,116 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
5
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.SegmentedControl = void 0;
11
+
12
+ var _jsxRuntime = require("../../lib/jsxRuntime");
13
+
14
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
+
16
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
+
18
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
19
+
20
+ var React = _interopRequireWildcard(require("react"));
21
+
22
+ var _classNames = require("../../lib/classNames");
23
+
24
+ var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
25
+
26
+ var _utils = require("../../lib/utils");
27
+
28
+ var _warnOnce = require("../../lib/warnOnce");
29
+
30
+ var _SegmentedControlOption = require("./SegmentedControlOption/SegmentedControlOption");
31
+
32
+ var _excluded = ["size", "name", "options", "getRootRef", "onChange", "value", "defaultValue", "children"],
33
+ _excluded2 = ["label"];
34
+ var warn = (0, _warnOnce.warnOnce)("SegmentedControl");
35
+
36
+ var SegmentedControl = function SegmentedControl(_ref) {
37
+ var _ref$size = _ref.size,
38
+ size = _ref$size === void 0 ? "l" : _ref$size,
39
+ name = _ref.name,
40
+ options = _ref.options,
41
+ getRootRef = _ref.getRootRef,
42
+ _ref$onChange = _ref.onChange,
43
+ onChange = _ref$onChange === void 0 ? _utils.noop : _ref$onChange,
44
+ value = _ref.value,
45
+ defaultValue = _ref.defaultValue,
46
+ children = _ref.children,
47
+ restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
48
+ var initialValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
49
+
50
+ if (!initialValue) {
51
+ var _options$;
52
+
53
+ initialValue = (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value;
54
+ }
55
+
56
+ var _React$useState = React.useState(0),
57
+ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
58
+ activeOptionIdx = _React$useState2[0],
59
+ updateActiveOptionIdx = _React$useState2[1];
60
+
61
+ var _React$useState3 = React.useState(initialValue),
62
+ _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
63
+ activeValue = _React$useState4[0],
64
+ updateActiveValue = _React$useState4[1];
65
+
66
+ var nameRef = React.useRef(name !== null && name !== void 0 ? name : (0, _utils.generateRandomId)());
67
+ (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
68
+ var _activeOptionIdx = options.findIndex(function (option) {
69
+ return option.value === activeValue;
70
+ });
71
+
72
+ if (_activeOptionIdx === -1 && process.env.NODE_ENV === "development") {
73
+ warn("defaultValue: такого значения нет среди опций!");
74
+ }
75
+
76
+ updateActiveOptionIdx(_activeOptionIdx);
77
+ }, [activeValue, options]);
78
+ var translateX = "translateX(".concat(100 * activeOptionIdx, "%)");
79
+
80
+ var handleOnChange = function handleOnChange(value) {
81
+ updateActiveValue(value);
82
+ onChange(value);
83
+ };
84
+
85
+ return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
86
+ vkuiClass: (0, _classNames.classNames)("SegmentedControl", "SegmentedControl--".concat(size)),
87
+ ref: getRootRef
88
+ }), (0, _jsxRuntime.createScopedElement)("div", {
89
+ role: "radiogroup",
90
+ vkuiClass: "SegmentedControl__in"
91
+ }, activeOptionIdx > -1 && (0, _jsxRuntime.createScopedElement)("div", {
92
+ "aria-hidden": "true",
93
+ vkuiClass: "SegmentedControl__slider",
94
+ style: {
95
+ width: "".concat(100 / options.length, "%"),
96
+ transform: translateX,
97
+ WebkitTransform: translateX
98
+ }
99
+ }), options.map(function (_ref2) {
100
+ var label = _ref2.label,
101
+ optionProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
102
+ return (0, _jsxRuntime.createScopedElement)(_SegmentedControlOption.SegmentedControlOption, (0, _extends2.default)({
103
+ key: "".concat(optionProps.value)
104
+ }, optionProps, {
105
+ vkuiClass: "SegmentedControl__option",
106
+ name: nameRef.current,
107
+ checked: activeValue === optionProps.value,
108
+ onChange: function onChange() {
109
+ return handleOnChange(optionProps.value);
110
+ }
111
+ }), label);
112
+ })));
113
+ };
114
+
115
+ exports.SegmentedControl = SegmentedControl;
116
+ //# sourceMappingURL=SegmentedControl.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":["warn","SegmentedControl","size","name","options","getRootRef","onChange","noop","value","defaultValue","children","restProps","initialValue","React","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,61 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.SegmentedControlOption = void 0;
9
+
10
+ var _jsxRuntime = require("../../../lib/jsxRuntime");
11
+
12
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
+
14
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
15
+
16
+ var _useFocusVisible2 = require("../../../hooks/useFocusVisible");
17
+
18
+ var _callMultiple = require("../../../lib/callMultiple");
19
+
20
+ var _classNames = require("../../../lib/classNames");
21
+
22
+ var _FocusVisible = require("../../FocusVisible/FocusVisible");
23
+
24
+ var _Text = _interopRequireDefault(require("../../Typography/Text/Text"));
25
+
26
+ var _VisuallyHiddenInput = require("../../VisuallyHiddenInput/VisuallyHiddenInput");
27
+
28
+ var _excluded = ["className", "style", "children"];
29
+
30
+ var SegmentedControlOption = function SegmentedControlOption(_ref) {
31
+ var className = _ref.className,
32
+ style = _ref.style,
33
+ children = _ref.children,
34
+ restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
35
+
36
+ var _useFocusVisible = (0, _useFocusVisible2.useFocusVisible)(),
37
+ focusVisible = _useFocusVisible.focusVisible,
38
+ onBlur = _useFocusVisible.onBlur,
39
+ onFocus = _useFocusVisible.onFocus;
40
+
41
+ return (0, _jsxRuntime.createScopedElement)("label", {
42
+ className: className,
43
+ style: style,
44
+ vkuiClass: (0, _classNames.classNames)("SegmentedControlOption", {
45
+ "SegmentedControlOption--checked": restProps.checked,
46
+ "SegmentedControlOption--focus-visible": focusVisible
47
+ })
48
+ }, (0, _jsxRuntime.createScopedElement)(_VisuallyHiddenInput.VisuallyHiddenInput, (0, _extends2.default)({}, restProps, {
49
+ type: "radio",
50
+ onBlur: (0, _callMultiple.callMultiple)(onBlur, restProps.onBlur),
51
+ onFocus: (0, _callMultiple.callMultiple)(onFocus, restProps.onFocus)
52
+ })), (0, _jsxRuntime.createScopedElement)(_Text.default, {
53
+ vkuiClass: "SegmentedControlOption__content",
54
+ weight: "medium"
55
+ }, children), (0, _jsxRuntime.createScopedElement)(_FocusVisible.FocusVisible, {
56
+ mode: "inside"
57
+ }));
58
+ };
59
+
60
+ exports.SegmentedControlOption = SegmentedControlOption;
61
+ //# sourceMappingURL=SegmentedControlOption.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"names":["SegmentedControlOption","className","style","children","restProps","focusVisible","onBlur","onFocus","checked"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAMO,IAAMA,sBAA0D,GAAG,SAA7DA,sBAA6D,OAKpE;AAAA,MAJJC,SAII,QAJJA,SAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,SACC;;AACJ,yBAA0C,wCAA1C;AAAA,MAAQC,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,EAAE,4BAAW,wBAAX,EAAqC;AAC9C,yCAAmCE,SAAS,CAACI,OADC;AAE9C,+CAAyCH;AAFK,KAArC;AAHb,KAQE,qCAAC,wCAAD,6BACMD,SADN;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,MAAM,EAAE,gCAAaE,MAAb,EAAqBF,SAAS,CAACE,MAA/B,CAHV;AAIE,IAAA,OAAO,EAAE,gCAAaC,OAAb,EAAsBH,SAAS,CAACG,OAAhC;AAJX,KARF,EAcE,qCAAC,aAAD;AAAM,IAAA,SAAS,EAAC,iCAAhB;AAAkD,IAAA,MAAM,EAAC;AAAzD,KACGJ,QADH,CAdF,EAiBE,qCAAC,0BAAD;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"}
@@ -37,20 +37,33 @@ var _Text = _interopRequireDefault(require("../Typography/Text/Text"));
37
37
 
38
38
  var _Subhead = _interopRequireDefault(require("../Typography/Subhead/Subhead"));
39
39
 
40
+ var _Headline = _interopRequireDefault(require("../Typography/Headline/Headline"));
41
+
40
42
  var _excluded = ["badge", "before", "indicator", "children", "after", "description", "expandable", "multiline", "sizeY"];
41
43
 
42
44
  var SimpleCellTypography = function SimpleCellTypography(props) {
43
45
  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
44
46
  sizeY = _useAdaptivity.sizeY;
45
47
 
46
- return sizeY === _withAdaptivity.SizeType.COMPACT ? (0, _jsxRuntime.createScopedElement)(_Text.default, (0, _extends2.default)({
47
- Component: "span",
48
- weight: "regular"
49
- }, props)) : (0, _jsxRuntime.createScopedElement)(_Title.default, (0, _extends2.default)({
50
- Component: "span",
51
- level: "3",
52
- weight: "regular"
53
- }, props));
48
+ var platform = (0, _usePlatform.usePlatform)();
49
+
50
+ if (sizeY === _withAdaptivity.SizeType.COMPACT) {
51
+ return (0, _jsxRuntime.createScopedElement)(_Text.default, (0, _extends2.default)({
52
+ Component: "span",
53
+ weight: "regular"
54
+ }, props));
55
+ } else if (platform === _platform.ANDROID) {
56
+ return (0, _jsxRuntime.createScopedElement)(_Headline.default, (0, _extends2.default)({
57
+ Component: "span",
58
+ weight: "regular"
59
+ }, props));
60
+ } else {
61
+ return (0, _jsxRuntime.createScopedElement)(_Title.default, (0, _extends2.default)({
62
+ Component: "span",
63
+ level: "3",
64
+ weight: "3"
65
+ }, props));
66
+ }
54
67
  };
55
68
 
56
69
  var SimpleCell = function SimpleCell(_ref) {
@@ -83,7 +96,6 @@ var SimpleCell = function SimpleCell(_ref) {
83
96
  vkuiClass: "SimpleCell__badge"
84
97
  }, badge)), description && (0, _jsxRuntime.createScopedElement)(_Subhead.default, {
85
98
  Component: "span",
86
- weight: "regular",
87
99
  vkuiClass: "SimpleCell__description"
88
100
  }, description)), (0, _utils.hasReactNode)(indicator) && (0, _jsxRuntime.createScopedElement)(SimpleCellTypography, {
89
101
  Component: "span",
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"names":["SimpleCellTypography","props","sizeY","SizeType","COMPACT","SimpleCell","badge","before","indicator","children","after","description","expandable","multiline","restProps","platform","hasAfter","IOS"],"mappings":";;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAwCA,IAAMA,oBAAyD,GAAG,SAA5DA,oBAA4D,CAChEC,KADgE,EAE7D;AACH,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AAEA,SAAOA,KAAK,KAAKC,yBAASC,OAAnB,GACL,qCAAC,aAAD;AAAM,IAAA,SAAS,EAAC,MAAhB;AAAuB,IAAA,MAAM,EAAC;AAA9B,KAA4CH,KAA5C,EADK,GAGL,qCAAC,cAAD;AAAO,IAAA,SAAS,EAAC,MAAjB;AAAwB,IAAA,KAAK,EAAC,GAA9B;AAAkC,IAAA,MAAM,EAAC;AAAzC,KAAuDA,KAAvD,EAHF;AAKD,CAVD;;AAYA,IAAMI,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,MAFrBX,KAEqB,QAFrBA,KAEqB;AAAA,MADlBY,SACkB;AACrB,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,MAAMC,QAAQ,GAAG,yBAAaN,KAAb,KAAwBE,UAAU,IAAIG,QAAQ,KAAKE,aAApE;;AAEA,SACE,qCAAC,iBAAD,6BACMH,SADN;AAEE,IAAA,SAAS,EAAE,4BACT,gCAAa,YAAb,EAA2BC,QAA3B,CADS,EAET;AACE,yBAAmBH,UADrB;AAEE,0BAAoBC;AAFtB,KAFS,8BAMYX,KANZ;AAFb,MAWGK,MAXH,EAYE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,qCAAC,oBAAD;AAAsB,IAAA,SAAS,EAAC;AAAhC,KACGE,QADH,CADF,EAIG,yBAAaH,KAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAqCA,KAArC,CALJ,CADF,EASGK,WAAW,IACV,qCAAC,gBAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,MAAM,EAAC,SAFT;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGA,WALH,CAVJ,CAZF,EA+BG,yBAAaH,SAAb,KACC,qCAAC,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,KAAKE,aAA3B,IAAkC,qCAAC,oBAAD,OAFrC,CAxCJ,CADF;AAgDD,CA/DD,C,CAiEA;;;eACe,oCAAeZ,UAAf,EAA2B;AAAEH,EAAAA,KAAK,EAAE;AAAT,CAA3B,C","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":["SimpleCellTypography","props","sizeY","platform","SizeType","COMPACT","ANDROID","SimpleCell","badge","before","indicator","children","after","description","expandable","multiline","restProps","hasAfter","IOS"],"mappings":";;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAwCA,IAAMA,oBAAyD,GAAG,SAA5DA,oBAA4D,CAChEC,KADgE,EAE7D;AACH,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AACA,MAAMC,QAAQ,GAAG,+BAAjB;;AAEA,MAAID,KAAK,KAAKE,yBAASC,OAAvB,EAAgC;AAC9B,WAAO,qCAAC,aAAD;AAAM,MAAA,SAAS,EAAC,MAAhB;AAAuB,MAAA,MAAM,EAAC;AAA9B,OAA4CJ,KAA5C,EAAP;AACD,GAFD,MAEO,IAAIE,QAAQ,KAAKG,iBAAjB,EAA0B;AAC/B,WAAO,qCAAC,iBAAD;AAAU,MAAA,SAAS,EAAC,MAApB;AAA2B,MAAA,MAAM,EAAC;AAAlC,OAAgDL,KAAhD,EAAP;AACD,GAFM,MAEA;AACL,WAAO,qCAAC,cAAD;AAAO,MAAA,SAAS,EAAC,MAAjB;AAAwB,MAAA,KAAK,EAAC,GAA9B;AAAkC,MAAA,MAAM,EAAC;AAAzC,OAAiDA,KAAjD,EAAP;AACD;AACF,CAbD;;AAeA,IAAMM,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,MAFrBb,KAEqB,QAFrBA,KAEqB;AAAA,MADlBc,SACkB;AACrB,MAAMb,QAAQ,GAAG,+BAAjB;;AACA,MAAMc,QAAQ,GAAG,yBAAaL,KAAb,KAAwBE,UAAU,IAAIX,QAAQ,KAAKe,aAApE;;AAEA,SACE,qCAAC,iBAAD,6BACMF,SADN;AAEE,IAAA,SAAS,EAAE,4BACT,gCAAa,YAAb,EAA2Bb,QAA3B,CADS,EAET;AACE,yBAAmBW,UADrB;AAEE,0BAAoBC;AAFtB,KAFS,8BAMYb,KANZ;AAFb,MAWGO,MAXH,EAYE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,qCAAC,oBAAD;AAAsB,IAAA,SAAS,EAAC;AAAhC,KACGE,QADH,CADF,EAIG,yBAAaH,KAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAqCA,KAArC,CALJ,CADF,EASGK,WAAW,IACV,qCAAC,gBAAD;AAAS,IAAA,SAAS,EAAC,MAAnB;AAA0B,IAAA,SAAS,EAAC;AAApC,KACGA,WADH,CAVJ,CAZF,EA2BG,yBAAaH,SAAb,KACC,qCAAC,oBAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,SAAS,EAAC;AAFZ,KAIGA,SAJH,CA5BJ,EAmCGO,QAAQ,IACP;AAAK,IAAA,SAAS,EAAC;AAAf,KACGL,KADH,EAEGE,UAAU,IAAIX,QAAQ,KAAKe,aAA3B,IAAkC,qCAAC,oBAAD,OAFrC,CApCJ,CADF;AA4CD,CA3DD,C,CA6DA;;;eACe,oCAAeX,UAAf,EAA2B;AAAEL,EAAAA,KAAK,EAAE;AAAT,CAA3B,C","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 };
@@ -7,7 +7,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
10
- exports.default = void 0;
10
+ exports.SliderSwitch = void 0;
11
11
 
12
12
  var _jsxRuntime = require("../../lib/jsxRuntime");
13
13
 
@@ -31,13 +31,18 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
31
31
 
32
32
  var React = _interopRequireWildcard(require("react"));
33
33
 
34
- var _SliderSwitchButton = _interopRequireDefault(require("./SliderSwitchButton"));
34
+ var _SliderSwitchButton = require("./SliderSwitchButton");
35
35
 
36
36
  var _classNames2 = require("../../lib/classNames");
37
37
 
38
+ var _warnOnce = require("../../lib/warnOnce");
39
+
38
40
  var _excluded = ["name", "options", "activeValue", "onSwitch"];
41
+ var warn = (0, _warnOnce.warnOnce)("SliderSwitch");
42
+ /**
43
+ * @deprecated Этот компонент устарел и будет удален в 5.0.0. Используйте [`SegmentedControl`](#/SegmentedControl).
44
+ */
39
45
 
40
- // eslint-disable-next-line import/no-default-export
41
46
  var SliderSwitch = /*#__PURE__*/function (_React$Component) {
42
47
  (0, _inherits2.default)(SliderSwitch, _React$Component);
43
48
 
@@ -134,6 +139,13 @@ var SliderSwitch = /*#__PURE__*/function (_React$Component) {
134
139
  }
135
140
 
136
141
  (0, _createClass2.default)(SliderSwitch, [{
142
+ key: "componentDidMount",
143
+ value: function componentDidMount() {
144
+ if (process.env.NODE_ENV === "development") {
145
+ warn("Этот компонент устарел и будет удален в 5.0.0. Используйте SegmentedControl.");
146
+ }
147
+ }
148
+ }, {
137
149
  key: "render",
138
150
  value: function render() {
139
151
  var _classNames;
@@ -166,14 +178,14 @@ var SliderSwitch = /*#__PURE__*/function (_React$Component) {
166
178
  type: "hidden",
167
179
  name: name,
168
180
  value: activeValue
169
- }), (0, _jsxRuntime.createScopedElement)(_SliderSwitchButton.default, {
181
+ }), (0, _jsxRuntime.createScopedElement)(_SliderSwitchButton.SliderSwitchButton, {
170
182
  active: firstActive,
171
183
  hovered: hoveredOptionId === 0,
172
184
  "aria-pressed": firstActive,
173
185
  onClick: this.handleFirstClick,
174
186
  onMouseEnter: this.handleFirstHover,
175
187
  getRootRef: this.firstButton
176
- }, firstOption.name), (0, _jsxRuntime.createScopedElement)(_SliderSwitchButton.default, {
188
+ }, firstOption.name), (0, _jsxRuntime.createScopedElement)(_SliderSwitchButton.SliderSwitchButton, {
177
189
  active: secondActive,
178
190
  hovered: hoveredOptionId === 1,
179
191
  onClick: this.handleSecondClick,
@@ -196,7 +208,7 @@ var SliderSwitch = /*#__PURE__*/function (_React$Component) {
196
208
  return SliderSwitch;
197
209
  }(React.Component);
198
210
 
199
- exports.default = SliderSwitch;
211
+ exports.SliderSwitch = SliderSwitch;
200
212
  (0, _defineProperty2.default)(SliderSwitch, "defaultProps", {
201
213
  options: [{
202
214
  name: "",
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/SliderSwitch/SliderSwitch.tsx"],"names":["SliderSwitch","props","value","onSwitch","setState","activeValue","options","hoveredOptionId","event","key","preventDefault","state","find","option","undefined","firstButton","current","focus","secondButton","React","createRef","name","_activeValue","restProps","firstOption","secondOption","firstActive","secondActive","switchByKey","resetFocusedOption","handleFirstClick","handleFirstHover","handleSecondClick","handleSecondHover","nextProps","prevState","Component"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport SliderSwitchButton from \"./SliderSwitchButton\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasPlatform } from \"../../types\";\nimport \"./SliderSwitch.css\";\n\nexport interface SliderSwitchOptionInterface {\n name: string;\n value: string | number;\n}\n\nexport interface SliderSwitchProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasPlatform {\n options: Array<{\n name: string;\n value: string | number;\n }>;\n activeValue?: SliderSwitchOptionInterface[\"value\"];\n name?: string;\n onSwitch?: (value: SliderSwitchOptionInterface[\"value\"]) => void;\n}\n\ninterface SliderSwitchState {\n activeValue: SliderSwitchOptionInterface[\"value\"];\n hoveredOptionId: number;\n}\n\n// eslint-disable-next-line import/no-default-export\nexport default class SliderSwitch extends React.Component<\n SliderSwitchProps,\n SliderSwitchState\n> {\n public constructor(props: SliderSwitchProps) {\n super(props);\n\n this.state = {\n activeValue: props.activeValue ?? \"\",\n hoveredOptionId: -1,\n };\n\n this.firstButton = React.createRef();\n this.secondButton = React.createRef();\n }\n\n static defaultProps = {\n options: [\n { name: \"\", value: \"\" },\n { name: \"\", value: \"\" },\n ],\n };\n\n firstButton: React.RefObject<HTMLDivElement>;\n secondButton: React.RefObject<HTMLDivElement>;\n\n onSwitch = (value: SliderSwitchOptionInterface[\"value\"]) => {\n const { onSwitch } = this.props;\n\n this.setState(\n () => ({\n activeValue: value,\n }),\n () => {\n onSwitch && onSwitch(value);\n }\n );\n };\n\n handleFirstClick = () => {\n const { options } = this.props;\n const { value } = options[0];\n\n this.onSwitch(value);\n };\n\n handleSecondClick = () => {\n const { options } = this.props;\n const { value } = options[1];\n\n this.onSwitch(value);\n };\n\n handleFirstHover = () => {\n this.setState(() => ({\n hoveredOptionId: 0,\n }));\n };\n\n handleSecondHover = () => {\n this.setState(() => ({\n hoveredOptionId: 1,\n }));\n };\n\n resetFocusedOption = () => {\n this.setState(() => ({\n hoveredOptionId: -1,\n }));\n };\n\n switchByKey = (event: React.KeyboardEvent) => {\n if (\n event.key !== \"Enter\" &&\n event.key !== \"Spacebar\" &&\n event.key !== \" \"\n ) {\n return;\n }\n event.preventDefault();\n\n const { options } = this.props;\n const { activeValue } = this.state;\n const value = options.find((option) => option.value !== activeValue)?.value;\n\n if (value !== undefined) {\n this.onSwitch(value);\n }\n\n if (options[0].value === value) {\n this.firstButton.current?.focus();\n } else {\n this.secondButton.current?.focus();\n }\n };\n\n static getDerivedStateFromProps(\n nextProps: SliderSwitchProps,\n prevState: SliderSwitchState\n ) {\n if (\n nextProps.activeValue &&\n nextProps.activeValue !== prevState.activeValue\n ) {\n return {\n activeValue: nextProps.activeValue,\n };\n }\n\n return null;\n }\n\n public render() {\n const {\n name,\n options,\n activeValue: _activeValue,\n onSwitch,\n ...restProps\n } = this.props;\n const { activeValue, hoveredOptionId } = this.state;\n\n const [firstOption, secondOption] = options;\n const firstActive = firstOption.value === activeValue;\n const secondActive = secondOption.value === activeValue;\n\n return (\n <div\n {...restProps}\n vkuiClass=\"SliderSwitch\"\n onKeyDown={this.switchByKey}\n onMouseLeave={this.resetFocusedOption}\n >\n {!firstActive && !secondActive && (\n <div vkuiClass=\"SliderSwitch__border\" />\n )}\n <div\n vkuiClass={classNames(\"SliderSwitch__slider\", {\n [\"SliderSwitch--firstActive\"]: firstActive,\n [\"SliderSwitch--secondActive\"]: secondActive,\n })}\n />\n <input type=\"hidden\" name={name} value={activeValue} />\n <SliderSwitchButton\n active={firstActive}\n hovered={hoveredOptionId === 0}\n aria-pressed={firstActive}\n onClick={this.handleFirstClick}\n onMouseEnter={this.handleFirstHover}\n getRootRef={this.firstButton}\n >\n {firstOption.name}\n </SliderSwitchButton>\n <SliderSwitchButton\n active={secondActive}\n hovered={hoveredOptionId === 1}\n onClick={this.handleSecondClick}\n onMouseEnter={this.handleSecondHover}\n getRootRef={this.secondButton}\n >\n {secondOption.name}\n </SliderSwitchButton>\n </div>\n );\n }\n}\n"],"file":"SliderSwitch.js"}
1
+ {"version":3,"sources":["../../../../src/components/SliderSwitch/SliderSwitch.tsx"],"names":["warn","SliderSwitch","props","value","onSwitch","setState","activeValue","options","hoveredOptionId","event","key","preventDefault","state","find","option","undefined","firstButton","current","focus","secondButton","React","createRef","process","env","NODE_ENV","name","_activeValue","restProps","firstOption","secondOption","firstActive","secondActive","switchByKey","resetFocusedOption","handleFirstClick","handleFirstHover","handleSecondClick","handleSecondHover","nextProps","prevState","Component"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { SliderSwitchButton } from \"./SliderSwitchButton\";\nimport { classNames } from \"../../lib/classNames\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { HasPlatform } from \"../../types\";\nimport \"./SliderSwitch.css\";\n\nexport interface SliderSwitchOptionInterface {\n name: string;\n value: string | number;\n}\n\nexport interface SliderSwitchProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasPlatform {\n options: Array<{\n name: string;\n value: string | number;\n }>;\n activeValue?: SliderSwitchOptionInterface[\"value\"];\n name?: string;\n onSwitch?: (value: SliderSwitchOptionInterface[\"value\"]) => void;\n}\n\ninterface SliderSwitchState {\n activeValue: SliderSwitchOptionInterface[\"value\"];\n hoveredOptionId: number;\n}\n\nconst warn = warnOnce(\"SliderSwitch\");\n/**\n * @deprecated Этот компонент устарел и будет удален в 5.0.0. Используйте [`SegmentedControl`](#/SegmentedControl).\n */\nclass SliderSwitch extends React.Component<\n SliderSwitchProps,\n SliderSwitchState\n> {\n public constructor(props: SliderSwitchProps) {\n super(props);\n\n this.state = {\n activeValue: props.activeValue ?? \"\",\n hoveredOptionId: -1,\n };\n\n this.firstButton = React.createRef();\n this.secondButton = React.createRef();\n }\n\n static defaultProps = {\n options: [\n { name: \"\", value: \"\" },\n { name: \"\", value: \"\" },\n ],\n };\n\n firstButton: React.RefObject<HTMLDivElement>;\n secondButton: React.RefObject<HTMLDivElement>;\n\n onSwitch = (value: SliderSwitchOptionInterface[\"value\"]) => {\n const { onSwitch } = this.props;\n\n this.setState(\n () => ({\n activeValue: value,\n }),\n () => {\n onSwitch && onSwitch(value);\n }\n );\n };\n\n handleFirstClick = () => {\n const { options } = this.props;\n const { value } = options[0];\n\n this.onSwitch(value);\n };\n\n handleSecondClick = () => {\n const { options } = this.props;\n const { value } = options[1];\n\n this.onSwitch(value);\n };\n\n handleFirstHover = () => {\n this.setState(() => ({\n hoveredOptionId: 0,\n }));\n };\n\n handleSecondHover = () => {\n this.setState(() => ({\n hoveredOptionId: 1,\n }));\n };\n\n resetFocusedOption = () => {\n this.setState(() => ({\n hoveredOptionId: -1,\n }));\n };\n\n switchByKey = (event: React.KeyboardEvent) => {\n if (\n event.key !== \"Enter\" &&\n event.key !== \"Spacebar\" &&\n event.key !== \" \"\n ) {\n return;\n }\n event.preventDefault();\n\n const { options } = this.props;\n const { activeValue } = this.state;\n const value = options.find((option) => option.value !== activeValue)?.value;\n\n if (value !== undefined) {\n this.onSwitch(value);\n }\n\n if (options[0].value === value) {\n this.firstButton.current?.focus();\n } else {\n this.secondButton.current?.focus();\n }\n };\n\n static getDerivedStateFromProps(\n nextProps: SliderSwitchProps,\n prevState: SliderSwitchState\n ) {\n if (\n nextProps.activeValue &&\n nextProps.activeValue !== prevState.activeValue\n ) {\n return {\n activeValue: nextProps.activeValue,\n };\n }\n\n return null;\n }\n\n componentDidMount(): void {\n if (process.env.NODE_ENV === \"development\") {\n warn(\n \"Этот компонент устарел и будет удален в 5.0.0. Используйте SegmentedControl.\"\n );\n }\n }\n\n public render() {\n const {\n name,\n options,\n activeValue: _activeValue,\n onSwitch,\n ...restProps\n } = this.props;\n const { activeValue, hoveredOptionId } = this.state;\n\n const [firstOption, secondOption] = options;\n const firstActive = firstOption.value === activeValue;\n const secondActive = secondOption.value === activeValue;\n\n return (\n <div\n {...restProps}\n vkuiClass=\"SliderSwitch\"\n onKeyDown={this.switchByKey}\n onMouseLeave={this.resetFocusedOption}\n >\n {!firstActive && !secondActive && (\n <div vkuiClass=\"SliderSwitch__border\" />\n )}\n <div\n vkuiClass={classNames(\"SliderSwitch__slider\", {\n [\"SliderSwitch--firstActive\"]: firstActive,\n [\"SliderSwitch--secondActive\"]: secondActive,\n })}\n />\n <input type=\"hidden\" name={name} value={activeValue} />\n <SliderSwitchButton\n active={firstActive}\n hovered={hoveredOptionId === 0}\n aria-pressed={firstActive}\n onClick={this.handleFirstClick}\n onMouseEnter={this.handleFirstHover}\n getRootRef={this.firstButton}\n >\n {firstOption.name}\n </SliderSwitchButton>\n <SliderSwitchButton\n active={secondActive}\n hovered={hoveredOptionId === 1}\n onClick={this.handleSecondClick}\n onMouseEnter={this.handleSecondHover}\n getRootRef={this.secondButton}\n >\n {secondOption.name}\n </SliderSwitchButton>\n </div>\n );\n }\n}\n\nexport { SliderSwitch };\n"],"file":"SliderSwitch.js"}
@@ -5,5 +5,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLElement>, Ha
5
5
  active?: boolean;
6
6
  hovered?: boolean;
7
7
  }
8
- declare const SliderSwitchButton: React.FunctionComponent<ButtonProps>;
9
- export default SliderSwitchButton;
8
+ /**
9
+ * @deprecated Этот компонент устарел и будет удален в 5.0.0.
10
+ */
11
+ export declare const SliderSwitchButton: React.FunctionComponent<ButtonProps>;
@@ -7,7 +7,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
10
- exports.default = void 0;
10
+ exports.SliderSwitchButton = void 0;
11
11
 
12
12
  var _jsxRuntime = require("../../lib/jsxRuntime");
13
13
 
@@ -33,6 +33,9 @@ var _Text = _interopRequireDefault(require("../Typography/Text/Text"));
33
33
 
34
34
  var _excluded = ["active", "hovered", "children", "getRootRef"];
35
35
 
36
+ /**
37
+ * @deprecated Этот компонент устарел и будет удален в 5.0.0.
38
+ */
36
39
  var SliderSwitchButton = function SliderSwitchButton(props) {
37
40
  var _classNames;
38
41
 
@@ -66,9 +69,7 @@ var SliderSwitchButton = function SliderSwitchButton(props) {
66
69
  }), (0, _jsxRuntime.createScopedElement)(_Text.default, {
67
70
  weight: "medium"
68
71
  }, children));
69
- }; // eslint-disable-next-line import/no-default-export
72
+ };
70
73
 
71
-
72
- var _default = SliderSwitchButton;
73
- exports.default = _default;
74
+ exports.SliderSwitchButton = SliderSwitchButton;
74
75
  //# sourceMappingURL=SliderSwitchButton.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/SliderSwitch/SliderSwitchButton.tsx"],"names":["SliderSwitchButton","props","active","hovered","children","getRootRef","restProps","platform","React","useState","focus","setFocus","toggleFocus"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;AAUA,IAAMA,kBAAwD,GAAG,SAA3DA,kBAA2D,CAC/DC,KAD+D,EAE5D;AAAA;;AACH,MAAQC,MAAR,GAAgED,KAAhE,CAAQC,MAAR;AAAA,MAAgBC,OAAhB,GAAgEF,KAAhE,CAAgBE,OAAhB;AAAA,MAAyBC,QAAzB,GAAgEH,KAAhE,CAAyBG,QAAzB;AAAA,MAAmCC,UAAnC,GAAgEJ,KAAhE,CAAmCI,UAAnC;AAAA,MAAkDC,SAAlD,0CAAgEL,KAAhE;AACA,MAAMM,QAAQ,GAAG,+BAAjB;;AACA,wBAA0BC,KAAK,CAACC,QAAN,CAAe,KAAf,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBD,IAAAA,QAAQ,CAAC,CAACD,KAAF,CAAR;AACD,GAFD;;AAIA,SACE,qCAAC,iBAAD,6BACMJ,SADN;AAEE,IAAA,SAAS,EAAE,6BAAW,gCAAa,sBAAb,EAAqCC,QAArC,CAAX,gEACR,8BADQ,EACyBL,MADzB,8CAER,6BAFQ,EAEwB,CAACA,MAAD,IAAWC,OAFnC,8CAGR,mCAHQ,EAG8BD,MAAM,IAAIC,OAHxC,8CAIR,6BAJQ,EAIwBO,KAAK,IAAI,CAACP,OAJlC,gBAFb;AAQE,IAAA,SAAS,EAAC,QARZ;AASE,IAAA,IAAI,EAAC,QATP;AAUE,IAAA,UAAU,EAAEE,UAVd;AAWE,oBAAcH,MAXhB;AAYE,IAAA,OAAO,EAAEU,WAZX;AAaE,IAAA,MAAM,EAAEA,WAbV;AAcE,IAAA,QAAQ,EAAE,CAdZ;AAeE,IAAA,SAAS,EAAE,KAfb;AAgBE,IAAA,SAAS,EAAC;AAhBZ,MAkBE,qCAAC,aAAD;AAAM,IAAA,MAAM,EAAC;AAAb,KAAuBR,QAAvB,CAlBF,CADF;AAsBD,CAjCD,C,CAmCA;;;eACeJ,kB","sourcesContent":["import * as React from \"react\";\nimport Tappable from \"../Tappable/Tappable\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport Text from \"../Typography/Text/Text\";\nimport \"./SliderSwitch.css\";\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement> {\n active?: boolean;\n hovered?: boolean;\n}\n\nconst SliderSwitchButton: React.FunctionComponent<ButtonProps> = (\n props: ButtonProps\n) => {\n const { active, hovered, children, getRootRef, ...restProps } = props;\n const platform = usePlatform();\n const [focus, setFocus] = React.useState(false);\n\n const toggleFocus = () => {\n setFocus(!focus);\n };\n\n return (\n <Tappable\n {...restProps}\n vkuiClass={classNames(getClassName(\"SliderSwitch__button\", platform), {\n [\"SliderSwitch__button--active\"]: active,\n [\"SliderSwitch__button--hover\"]: !active && hovered,\n [\"SliderSwitch__button--activeHover\"]: active && hovered,\n [\"SliderSwitch__button--focus\"]: focus && !hovered,\n })}\n Component=\"button\"\n type=\"button\"\n getRootRef={getRootRef}\n aria-pressed={active}\n onFocus={toggleFocus}\n onBlur={toggleFocus}\n tabIndex={0}\n hasActive={false}\n hoverMode=\"opacity\"\n >\n <Text weight=\"medium\">{children}</Text>\n </Tappable>\n );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default SliderSwitchButton;\n"],"file":"SliderSwitchButton.js"}
1
+ {"version":3,"sources":["../../../../src/components/SliderSwitch/SliderSwitchButton.tsx"],"names":["SliderSwitchButton","props","active","hovered","children","getRootRef","restProps","platform","React","useState","focus","setFocus","toggleFocus"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;AAUA;AACA;AACA;AACO,IAAMA,kBAAwD,GAAG,SAA3DA,kBAA2D,CACtEC,KADsE,EAEnE;AAAA;;AACH,MAAQC,MAAR,GAAgED,KAAhE,CAAQC,MAAR;AAAA,MAAgBC,OAAhB,GAAgEF,KAAhE,CAAgBE,OAAhB;AAAA,MAAyBC,QAAzB,GAAgEH,KAAhE,CAAyBG,QAAzB;AAAA,MAAmCC,UAAnC,GAAgEJ,KAAhE,CAAmCI,UAAnC;AAAA,MAAkDC,SAAlD,0CAAgEL,KAAhE;AACA,MAAMM,QAAQ,GAAG,+BAAjB;;AACA,wBAA0BC,KAAK,CAACC,QAAN,CAAe,KAAf,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBD,IAAAA,QAAQ,CAAC,CAACD,KAAF,CAAR;AACD,GAFD;;AAIA,SACE,qCAAC,iBAAD,6BACMJ,SADN;AAEE,IAAA,SAAS,EAAE,6BAAW,gCAAa,sBAAb,EAAqCC,QAArC,CAAX,gEACR,8BADQ,EACyBL,MADzB,8CAER,6BAFQ,EAEwB,CAACA,MAAD,IAAWC,OAFnC,8CAGR,mCAHQ,EAG8BD,MAAM,IAAIC,OAHxC,8CAIR,6BAJQ,EAIwBO,KAAK,IAAI,CAACP,OAJlC,gBAFb;AAQE,IAAA,SAAS,EAAC,QARZ;AASE,IAAA,IAAI,EAAC,QATP;AAUE,IAAA,UAAU,EAAEE,UAVd;AAWE,oBAAcH,MAXhB;AAYE,IAAA,OAAO,EAAEU,WAZX;AAaE,IAAA,MAAM,EAAEA,WAbV;AAcE,IAAA,QAAQ,EAAE,CAdZ;AAeE,IAAA,SAAS,EAAE,KAfb;AAgBE,IAAA,SAAS,EAAC;AAhBZ,MAkBE,qCAAC,aAAD;AAAM,IAAA,MAAM,EAAC;AAAb,KAAuBR,QAAvB,CAlBF,CADF;AAsBD,CAjCM","sourcesContent":["import * as React from \"react\";\nimport Tappable from \"../Tappable/Tappable\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport Text from \"../Typography/Text/Text\";\nimport \"./SliderSwitch.css\";\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement> {\n active?: boolean;\n hovered?: boolean;\n}\n\n/**\n * @deprecated Этот компонент устарел и будет удален в 5.0.0.\n */\nexport const SliderSwitchButton: React.FunctionComponent<ButtonProps> = (\n props: ButtonProps\n) => {\n const { active, hovered, children, getRootRef, ...restProps } = props;\n const platform = usePlatform();\n const [focus, setFocus] = React.useState(false);\n\n const toggleFocus = () => {\n setFocus(!focus);\n };\n\n return (\n <Tappable\n {...restProps}\n vkuiClass={classNames(getClassName(\"SliderSwitch__button\", platform), {\n [\"SliderSwitch__button--active\"]: active,\n [\"SliderSwitch__button--hover\"]: !active && hovered,\n [\"SliderSwitch__button--activeHover\"]: active && hovered,\n [\"SliderSwitch__button--focus\"]: focus && !hovered,\n })}\n Component=\"button\"\n type=\"button\"\n getRootRef={getRootRef}\n aria-pressed={active}\n onFocus={toggleFocus}\n onBlur={toggleFocus}\n tabIndex={0}\n hasActive={false}\n hoverMode=\"opacity\"\n >\n <Text weight=\"medium\">{children}</Text>\n </Tappable>\n );\n};\n"],"file":"SliderSwitchButton.js"}
@@ -37,9 +37,7 @@ var SubnavigationButtonTypography = function SubnavigationButtonTypography(_ref)
37
37
  restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
38
38
 
39
39
  if (textLevel === 1) {
40
- return (0, _jsxRuntime.createScopedElement)(_Subhead.default, (0, _extends2.default)({
41
- weight: "regular"
42
- }, restProps));
40
+ return (0, _jsxRuntime.createScopedElement)(_Subhead.default, restProps);
43
41
  }
44
42
 
45
43
  return (0, _jsxRuntime.createScopedElement)(_Caption.default, (0, _extends2.default)({
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"names":["SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","props","platform","size","selected","before","after","expandable","children","defaultProps"],"mappings":";;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;AAwBA,IAAMA,6BAAoE,GAAG,SAAvEA,6BAAuE,OAG1C;AAAA,MAFjCC,SAEiC,QAFjCA,SAEiC;AAAA,MAD9BC,SAC8B;;AACjC,MAAID,SAAS,KAAK,CAAlB,EAAqB;AACnB,WAAO,qCAAC,gBAAD;AAAS,MAAA,MAAM,EAAC;AAAhB,OAA8BC,SAA9B,EAAP;AACD;;AAED,SACE,qCAAC,gBAAD;AACE,IAAA,KAAK,EAAED,SAAS,KAAK,CAAd,GAAkB,GAAlB,GAAwB,GADjC;AAEE,IAAA,MAAM,EAAC;AAFT,KAGMC,SAHN,EADF;AAOD,CAfD;;AAiBO,IAAMC,mBAAuD,GAAG,SAA1DA,mBAA0D,CACrEC,KADqE,EAElE;AACH,MAAMC,QAAQ,GAAG,+BAAjB;AACA,MACEC,IADF,GASIF,KATJ,CACEE,IADF;AAAA,MAEEC,QAFF,GASIH,KATJ,CAEEG,QAFF;AAAA,MAGEN,SAHF,GASIG,KATJ,CAGEH,SAHF;AAAA,MAIEO,MAJF,GASIJ,KATJ,CAIEI,MAJF;AAAA,MAKEC,KALF,GASIL,KATJ,CAKEK,KALF;AAAA,MAMEC,UANF,GASIN,KATJ,CAMEM,UANF;AAAA,MAOEC,QAPF,GASIP,KATJ,CAOEO,QAPF;AAAA,MAQKT,SARL,0CASIE,KATJ;AAWA,SACE,qCAAC,iBAAD,6BACMF,SADN;AAEE,IAAA,SAAS,EAAE,KAFb;AAGE,IAAA,gBAAgB,EAAC,SAHnB;AAIE,IAAA,SAAS,EAAE,4BACT,gCAAa,qBAAb,EAAoCG,QAApC,CADS,iCAEeC,IAFf,GAGT;AACE,uCAAiCC;AADnC,KAHS,CAJb;AAWE,kBAAY,iCAAqBI,QAArB;AAXd,MAaE;AAAM,IAAA,SAAS,EAAC;AAAhB,KACG,yBAAaH,MAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA+CA,MAA/C,CAFJ,EAIE,qCAAC,6BAAD;AACE,IAAA,SAAS,EAAEP,SADb;AAEE,IAAA,SAAS,EAAC,4BAFZ;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGU,QALH,CAJF,EAWG,yBAAaF,KAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA8CA,KAA9C,CAZJ,EAcGC,UAAU,IACT,qCAAC,qBAAD;AAAgB,IAAA,SAAS,EAAC;AAA1B,IAfJ,CAbF,CADF;AAkCD,CAjDM;;;AAmDPP,mBAAmB,CAACS,YAApB,GAAmC;AACjCN,EAAAA,IAAI,EAAE,GAD2B;AAEjCL,EAAAA,SAAS,EAAE;AAFsB,CAAnC","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { getTitleFromChildren, hasReactNode } from \"../../lib/utils\";\nimport Tappable, { TappableProps } from \"../Tappable/Tappable\";\nimport { Icon16Dropdown } from \"@vkontakte/icons\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport Caption from \"../Typography/Caption/Caption\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport \"./SubnavigationButton.css\";\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, \"size\"> {\n size?: \"m\" | \"l\";\n selected?: boolean;\n /**\n * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n */\n textLevel?: 1 | 2 | 3;\n /**\n * Рекомендуется использовать только иконки с размером 24\n */\n before?: React.ReactNode;\n /**\n * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n */\n after?: React.ReactNode;\n expandable?: boolean;\n}\n\ntype SubnavButtonTypographyProps = Pick<SubnavigationButtonProps, \"textLevel\"> &\n HasComponent;\n\nconst SubnavigationButtonTypography: React.FC<SubnavButtonTypographyProps> = ({\n textLevel,\n ...restProps\n}: SubnavButtonTypographyProps) => {\n if (textLevel === 1) {\n return <Subhead weight=\"regular\" {...restProps} />;\n }\n\n return (\n <Caption\n level={textLevel === 2 ? \"1\" : \"2\"}\n weight=\"regular\"\n {...restProps}\n />\n );\n};\n\nexport const SubnavigationButton: React.FC<SubnavigationButtonProps> = (\n props: SubnavigationButtonProps\n) => {\n const platform = usePlatform();\n const {\n size,\n selected,\n textLevel,\n before,\n after,\n expandable,\n children,\n ...restProps\n } = props;\n\n return (\n <Tappable\n {...restProps}\n hasActive={false}\n focusVisibleMode=\"outside\"\n vkuiClass={classNames(\n getClassName(\"SubnavigationButton\", platform),\n `SubnavigationButton--${size}`,\n {\n \"SubnavigationButton--selected\": selected,\n }\n )}\n aria-label={getTitleFromChildren(children)}\n >\n <span vkuiClass=\"SubnavigationButton__in\">\n {hasReactNode(before) && (\n <span vkuiClass=\"SubnavigationButton__before\">{before}</span>\n )}\n <SubnavigationButtonTypography\n textLevel={textLevel}\n vkuiClass=\"SubnavigationButton__label\"\n Component=\"span\"\n >\n {children}\n </SubnavigationButtonTypography>\n {hasReactNode(after) && (\n <span vkuiClass=\"SubnavigationButton__after\">{after}</span>\n )}\n {expandable && (\n <Icon16Dropdown vkuiClass=\"SubnavigationButton__expandableIcon\" />\n )}\n </span>\n </Tappable>\n );\n};\n\nSubnavigationButton.defaultProps = {\n size: \"m\",\n textLevel: 1,\n};\n"],"file":"SubnavigationButton.js"}
1
+ {"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"names":["SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","props","platform","size","selected","before","after","expandable","children","defaultProps"],"mappings":";;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;AAwBA,IAAMA,6BAAoE,GAAG,SAAvEA,6BAAuE,OAG1C;AAAA,MAFjCC,SAEiC,QAFjCA,SAEiC;AAAA,MAD9BC,SAC8B;;AACjC,MAAID,SAAS,KAAK,CAAlB,EAAqB;AACnB,WAAO,qCAAC,gBAAD,EAAaC,SAAb,CAAP;AACD;;AAED,SACE,qCAAC,gBAAD;AACE,IAAA,KAAK,EAAED,SAAS,KAAK,CAAd,GAAkB,GAAlB,GAAwB,GADjC;AAEE,IAAA,MAAM,EAAC;AAFT,KAGMC,SAHN,EADF;AAOD,CAfD;;AAiBO,IAAMC,mBAAuD,GAAG,SAA1DA,mBAA0D,CACrEC,KADqE,EAElE;AACH,MAAMC,QAAQ,GAAG,+BAAjB;AACA,MACEC,IADF,GASIF,KATJ,CACEE,IADF;AAAA,MAEEC,QAFF,GASIH,KATJ,CAEEG,QAFF;AAAA,MAGEN,SAHF,GASIG,KATJ,CAGEH,SAHF;AAAA,MAIEO,MAJF,GASIJ,KATJ,CAIEI,MAJF;AAAA,MAKEC,KALF,GASIL,KATJ,CAKEK,KALF;AAAA,MAMEC,UANF,GASIN,KATJ,CAMEM,UANF;AAAA,MAOEC,QAPF,GASIP,KATJ,CAOEO,QAPF;AAAA,MAQKT,SARL,0CASIE,KATJ;AAWA,SACE,qCAAC,iBAAD,6BACMF,SADN;AAEE,IAAA,SAAS,EAAE,KAFb;AAGE,IAAA,gBAAgB,EAAC,SAHnB;AAIE,IAAA,SAAS,EAAE,4BACT,gCAAa,qBAAb,EAAoCG,QAApC,CADS,iCAEeC,IAFf,GAGT;AACE,uCAAiCC;AADnC,KAHS,CAJb;AAWE,kBAAY,iCAAqBI,QAArB;AAXd,MAaE;AAAM,IAAA,SAAS,EAAC;AAAhB,KACG,yBAAaH,MAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA+CA,MAA/C,CAFJ,EAIE,qCAAC,6BAAD;AACE,IAAA,SAAS,EAAEP,SADb;AAEE,IAAA,SAAS,EAAC,4BAFZ;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGU,QALH,CAJF,EAWG,yBAAaF,KAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA8CA,KAA9C,CAZJ,EAcGC,UAAU,IACT,qCAAC,qBAAD;AAAgB,IAAA,SAAS,EAAC;AAA1B,IAfJ,CAbF,CADF;AAkCD,CAjDM;;;AAmDPP,mBAAmB,CAACS,YAApB,GAAmC;AACjCN,EAAAA,IAAI,EAAE,GAD2B;AAEjCL,EAAAA,SAAS,EAAE;AAFsB,CAAnC","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { getTitleFromChildren, hasReactNode } from \"../../lib/utils\";\nimport Tappable, { TappableProps } from \"../Tappable/Tappable\";\nimport { Icon16Dropdown } from \"@vkontakte/icons\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport Caption from \"../Typography/Caption/Caption\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport \"./SubnavigationButton.css\";\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, \"size\"> {\n size?: \"m\" | \"l\";\n selected?: boolean;\n /**\n * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n */\n textLevel?: 1 | 2 | 3;\n /**\n * Рекомендуется использовать только иконки с размером 24\n */\n before?: React.ReactNode;\n /**\n * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n */\n after?: React.ReactNode;\n expandable?: boolean;\n}\n\ntype SubnavButtonTypographyProps = Pick<SubnavigationButtonProps, \"textLevel\"> &\n HasComponent;\n\nconst SubnavigationButtonTypography: React.FC<SubnavButtonTypographyProps> = ({\n textLevel,\n ...restProps\n}: SubnavButtonTypographyProps) => {\n if (textLevel === 1) {\n return <Subhead {...restProps} />;\n }\n\n return (\n <Caption\n level={textLevel === 2 ? \"1\" : \"2\"}\n weight=\"regular\"\n {...restProps}\n />\n );\n};\n\nexport const SubnavigationButton: React.FC<SubnavigationButtonProps> = (\n props: SubnavigationButtonProps\n) => {\n const platform = usePlatform();\n const {\n size,\n selected,\n textLevel,\n before,\n after,\n expandable,\n children,\n ...restProps\n } = props;\n\n return (\n <Tappable\n {...restProps}\n hasActive={false}\n focusVisibleMode=\"outside\"\n vkuiClass={classNames(\n getClassName(\"SubnavigationButton\", platform),\n `SubnavigationButton--${size}`,\n {\n \"SubnavigationButton--selected\": selected,\n }\n )}\n aria-label={getTitleFromChildren(children)}\n >\n <span vkuiClass=\"SubnavigationButton__in\">\n {hasReactNode(before) && (\n <span vkuiClass=\"SubnavigationButton__before\">{before}</span>\n )}\n <SubnavigationButtonTypography\n textLevel={textLevel}\n vkuiClass=\"SubnavigationButton__label\"\n Component=\"span\"\n >\n {children}\n </SubnavigationButtonTypography>\n {hasReactNode(after) && (\n <span vkuiClass=\"SubnavigationButton__after\">{after}</span>\n )}\n {expandable && (\n <Icon16Dropdown vkuiClass=\"SubnavigationButton__expandableIcon\" />\n )}\n </span>\n </Tappable>\n );\n};\n\nSubnavigationButton.defaultProps = {\n size: \"m\",\n textLevel: 1,\n};\n"],"file":"SubnavigationButton.js"}