@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
@@ -0,0 +1,22 @@
1
+ import * as React from "react";
2
+ import "./SplitCol.css";
3
+ export interface SplitColContextProps {
4
+ colRef: React.RefObject<HTMLDivElement> | null;
5
+ animate: boolean;
6
+ }
7
+ export declare const SplitColContext: React.Context<SplitColContextProps>;
8
+ export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
9
+ width?: number | string;
10
+ maxWidth?: number | string;
11
+ minWidth?: number | string;
12
+ /**
13
+ * Если false, то переходы между Panel происходят без анимации
14
+ */
15
+ animate?: boolean;
16
+ /**
17
+ * Если true, то добавляются боковые отступы фиксированной величины
18
+ */
19
+ spaced?: boolean;
20
+ fixed?: boolean;
21
+ }
22
+ export declare const SplitCol: React.FC<SplitColProps>;
@@ -0,0 +1,15 @@
1
+ import * as React from "react";
2
+ import { HasRef, HasRootRef } from "../../types";
3
+ import "./SplitLayout.css";
4
+ export interface SplitLayoutProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
5
+ /**
6
+ * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
7
+ */
8
+ popout?: React.ReactNode;
9
+ /**
10
+ * Свойство для отрисовки `ModalRoot`.
11
+ */
12
+ modal?: React.ReactNode;
13
+ header?: React.ReactNode;
14
+ }
15
+ export declare const SplitLayout: React.FC<SplitLayoutProps>;
@@ -0,0 +1,7 @@
1
+ import * as React from "react";
2
+ import { HorizontalScrollProps } from "../HorizontalScroll/HorizontalScroll";
3
+ import "./SubnavigationBar.css";
4
+ export interface SubnavigationBarProps extends React.HTMLAttributes<HTMLDivElement>, Pick<HorizontalScrollProps, "showArrows" | "getScrollToLeft" | "getScrollToRight" | "scrollAnimationDuration"> {
5
+ mode?: "fixed" | "overflow";
6
+ }
7
+ export declare const SubnavigationBar: React.FC<SubnavigationBarProps>;
@@ -0,0 +1,21 @@
1
+ import * as React from "react";
2
+ import { TappableProps } from "../Tappable/Tappable";
3
+ import "./SubnavigationButton.css";
4
+ export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
5
+ size?: "m" | "l";
6
+ selected?: boolean;
7
+ /**
8
+ * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode="fixed" />`
9
+ */
10
+ textLevel?: 1 | 2 | 3;
11
+ /**
12
+ * Рекомендуется использовать только иконки с размером 24
13
+ */
14
+ before?: React.ReactNode;
15
+ /**
16
+ * Рекомендуется использовать только `<Counter size="s" />` или `<Badge />`
17
+ */
18
+ after?: React.ReactNode;
19
+ expandable?: boolean;
20
+ }
21
+ export declare const SubnavigationButton: React.FC<SubnavigationButtonProps>;
@@ -18,9 +18,7 @@ var SubnavigationButtonTypography = function SubnavigationButtonTypography(_ref)
18
18
  restProps = _objectWithoutProperties(_ref, _excluded);
19
19
 
20
20
  if (textLevel === 1) {
21
- return createScopedElement(Subhead, _extends({
22
- weight: "regular"
23
- }, restProps));
21
+ return createScopedElement(Subhead, restProps);
24
22
  }
25
23
 
26
24
  return createScopedElement(Caption, _extends({
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"names":["classNames","getClassName","getTitleFromChildren","hasReactNode","Tappable","Icon16Dropdown","usePlatform","Caption","Subhead","SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","props","platform","size","selected","before","after","expandable","children","defaultProps"],"mappings":";;;;;AAEA,SAASA,UAAT;AACA,SAASC,YAAT;AACA,SAASC,oBAAT,EAA+BC,YAA/B;AACA,OAAOC,QAAP;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SAASC,WAAT;AACA,OAAOC,OAAP;AACA,OAAOC,OAAP;AACA;;AAuBA,IAAMC,6BAAoE,GAAG,SAAvEA,6BAAuE,OAG1C;AAAA,MAFjCC,SAEiC,QAFjCA,SAEiC;AAAA,MAD9BC,SAC8B;;AACjC,MAAID,SAAS,KAAK,CAAlB,EAAqB;AACnB,WAAO,oBAAC,OAAD;AAAS,MAAA,MAAM,EAAC;AAAhB,OAA8BC,SAA9B,EAAP;AACD;;AAED,SACE,oBAAC,OAAD;AACE,IAAA,KAAK,EAAED,SAAS,KAAK,CAAd,GAAkB,GAAlB,GAAwB,GADjC;AAEE,IAAA,MAAM,EAAC;AAFT,KAGMC,SAHN,EADF;AAOD,CAfD;;AAiBA,OAAO,IAAMC,mBAAuD,GAAG,SAA1DA,mBAA0D,CACrEC,KADqE,EAElE;AACH,MAAMC,QAAQ,GAAGR,WAAW,EAA5B;;AACA,MACES,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,4BASIE,KATJ;;AAWA,SACE,oBAAC,QAAD,eACMF,SADN;AAEE,IAAA,SAAS,EAAE,KAFb;AAGE,IAAA,gBAAgB,EAAC,SAHnB;AAIE,IAAA,SAAS,EAAEX,UAAU,CACnBC,YAAY,CAAC,qBAAD,EAAwBa,QAAxB,CADO,iCAEKC,IAFL,GAGnB;AACE,uCAAiCC;AADnC,KAHmB,CAJvB;AAWE,kBAAYd,oBAAoB,CAACkB,QAAD;AAXlC,MAaE;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGjB,YAAY,CAACc,MAAD,CAAZ,IACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA+CA,MAA/C,CAFJ,EAIE,oBAAC,6BAAD;AACE,IAAA,SAAS,EAAEP,SADb;AAEE,IAAA,SAAS,EAAC,4BAFZ;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGU,QALH,CAJF,EAWGjB,YAAY,CAACe,KAAD,CAAZ,IACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA8CA,KAA9C,CAZJ,EAcGC,UAAU,IACT,oBAAC,cAAD;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":["classNames","getClassName","getTitleFromChildren","hasReactNode","Tappable","Icon16Dropdown","usePlatform","Caption","Subhead","SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","props","platform","size","selected","before","after","expandable","children","defaultProps"],"mappings":";;;;;AAEA,SAASA,UAAT;AACA,SAASC,YAAT;AACA,SAASC,oBAAT,EAA+BC,YAA/B;AACA,OAAOC,QAAP;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SAASC,WAAT;AACA,OAAOC,OAAP;AACA,OAAOC,OAAP;AACA;;AAuBA,IAAMC,6BAAoE,GAAG,SAAvEA,6BAAuE,OAG1C;AAAA,MAFjCC,SAEiC,QAFjCA,SAEiC;AAAA,MAD9BC,SAC8B;;AACjC,MAAID,SAAS,KAAK,CAAlB,EAAqB;AACnB,WAAO,oBAAC,OAAD,EAAaC,SAAb,CAAP;AACD;;AAED,SACE,oBAAC,OAAD;AACE,IAAA,KAAK,EAAED,SAAS,KAAK,CAAd,GAAkB,GAAlB,GAAwB,GADjC;AAEE,IAAA,MAAM,EAAC;AAFT,KAGMC,SAHN,EADF;AAOD,CAfD;;AAiBA,OAAO,IAAMC,mBAAuD,GAAG,SAA1DA,mBAA0D,CACrEC,KADqE,EAElE;AACH,MAAMC,QAAQ,GAAGR,WAAW,EAA5B;;AACA,MACES,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,4BASIE,KATJ;;AAWA,SACE,oBAAC,QAAD,eACMF,SADN;AAEE,IAAA,SAAS,EAAE,KAFb;AAGE,IAAA,gBAAgB,EAAC,SAHnB;AAIE,IAAA,SAAS,EAAEX,UAAU,CACnBC,YAAY,CAAC,qBAAD,EAAwBa,QAAxB,CADO,iCAEKC,IAFL,GAGnB;AACE,uCAAiCC;AADnC,KAHmB,CAJvB;AAWE,kBAAYd,oBAAoB,CAACkB,QAAD;AAXlC,MAaE;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGjB,YAAY,CAACc,MAAD,CAAZ,IACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA+CA,MAA/C,CAFJ,EAIE,oBAAC,6BAAD;AACE,IAAA,SAAS,EAAEP,SADb;AAEE,IAAA,SAAS,EAAC,4BAFZ;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGU,QALH,CAJF,EAWGjB,YAAY,CAACe,KAAD,CAAZ,IACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA8CA,KAA9C,CAZJ,EAcGC,UAAU,IACT,oBAAC,cAAD;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"}
@@ -1 +1 @@
1
- .vkuiSwitch{position:relative;display:block;cursor:pointer}.vkuiSwitch--disabled{cursor:default}.vkuiSwitch__self{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;clip:rect(1px,1px,1px,1px);overflow:hidden;opacity:0}.vkuiSwitch__pseudo{position:relative;display:block;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}.vkuiSwitch__pseudo::before{position:absolute;content:"";top:-3px;left:-3px;border-radius:50%;box-sizing:border-box}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo::before{-webkit-transform:translateX(20px);transform:translateX(20px)}.vkuiSwitch__self[disabled]+.vkuiSwitch__pseudo{opacity:.4}.vkuiSwitch--ios .vkuiSwitch__pseudo{width:51px;height:31px;border:2px solid transparent;background:rgba(0,28,61,.08);background:var(--placeholder_icon_background);border-radius:15px}.vkuiSwitch--ios.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo{width:47px;height:27px;border-radius:13px}.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo{background:#2688eb;background:var(--accent)}.vkuiSwitch--ios .vkuiSwitch__pseudo::before{top:0;left:0;width:27px;height:27px;background:#fff;background:var(--white);box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06),inset 0 0 0 .5px rgba(0,0,0,.04)}.vkuiSwitch--ios.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo::before{width:23px;height:23px}.vkuiSwitch--android,.vkuiSwitch--vkcom{padding:3px}.vkuiSwitch--android .vkuiSwitch__pseudo::after,.vkuiSwitch--vkcom .vkuiSwitch__pseudo::after{content:"";display:block;width:100%;height:100%}.vkuiSwitch--android .vkuiSwitch__self:checked+.vkuiSwitch__pseudo::after,.vkuiSwitch--vkcom .vkuiSwitch__self:checked+.vkuiSwitch__pseudo::after{background:#2688eb;background:var(--accent);opacity:.48}.vkuiSwitch--android .vkuiSwitch__pseudo{width:34px;height:14px}.vkuiSwitch--android .vkuiSwitch__pseudo::after{background:#c6c5c5;border-radius:7px}.vkuiSwitch--android.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo{width:32px;height:12px}.vkuiSwitch--android.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo::after{border-radius:6px}.vkuiSwitch--android .vkuiSwitch__pseudo::before{width:20px;height:20px;background:#f1f1f1;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24)}.vkuiSwitch--android.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo::before{width:18px;height:18px}.vkuiSwitch--android .vkuiSwitch__self:checked+.vkuiSwitch__pseudo::before{background:#2688eb;background:var(--accent)}.vkuiSwitch--android.vkuiSwitch--sizeY-compact .vkuiSwitch__self:checked+.vkuiSwitch__pseudo::before{-webkit-transform:translateX(19px);transform:translateX(19px)}.vkuiSwitch--vkcom .vkuiSwitch__pseudo{width:28px;height:10px}.vkuiSwitch--vkcom .vkuiSwitch__pseudo::after{border-radius:45px;background:#b8c1cc;background:var(--icon_tertiary);opacity:.48}.vkuiSwitch--vkcom .vkuiSwitch__pseudo::before{left:-2px;width:16px;height:16px;background:#f9f9f9;background:var(--background_light);border:1px solid #b8c1cc;border:1px solid var(--icon_tertiary);z-index:1}.vkuiSwitch--vkcom .vkuiSwitch__self:checked+.vkuiSwitch__pseudo::before{background:#2688eb;background:var(--accent);border:0;-webkit-transform:translateX(16px);transform:translateX(16px)}@media (prefers-reduced-motion:no-preference){.vkuiSwitch__pseudo::before{transition:-webkit-transform .1s ease;transition:transform .1s ease;transition:transform .1s ease,-webkit-transform .1s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo{transition:background-color .2s ease,border-color .2s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo::before{transition:-webkit-transform .2s cubic-bezier(.36,-.24,.26,1.32);transition:transform .2s cubic-bezier(.36,-.24,.26,1.32);transition:transform .2s cubic-bezier(.36,-.24,.26,1.32),-webkit-transform .2s cubic-bezier(.36,-.24,.26,1.32)}.vkuiSwitch--android .vkuiSwitch__pseudo::after,.vkuiSwitch--vkcom .vkuiSwitch__pseudo::after{transition:background-color .1s ease}}.vkuiSimpleCell .vkuiSwitch{margin-left:10px}
1
+ .vkuiSwitch{position:relative;display:block;cursor:pointer}.vkuiSwitch--disabled{cursor:default}.vkuiSwitch__pseudo{position:relative;display:block;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}.vkuiSwitch__pseudo::before{position:absolute;content:"";top:-3px;left:-3px;border-radius:50%;box-sizing:border-box}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo::before{-webkit-transform:translateX(20px);transform:translateX(20px)}.vkuiSwitch__self[disabled]+.vkuiSwitch__pseudo{opacity:.4}.vkuiSwitch--ios .vkuiSwitch__pseudo{width:51px;height:31px;border:2px solid transparent;background:rgba(0,28,61,.08);background:var(--placeholder_icon_background);border-radius:15px}.vkuiSwitch--ios.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo{width:47px;height:27px;border-radius:13px}.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo{background:#2688eb;background:var(--accent)}.vkuiSwitch--ios .vkuiSwitch__pseudo::before{top:0;left:0;width:27px;height:27px;background:#fff;background:var(--white);box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06),inset 0 0 0 .5px rgba(0,0,0,.04)}.vkuiSwitch--ios.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo::before{width:23px;height:23px}.vkuiSwitch--android,.vkuiSwitch--vkcom{padding:3px}.vkuiSwitch--android .vkuiSwitch__pseudo::after,.vkuiSwitch--vkcom .vkuiSwitch__pseudo::after{content:"";display:block;width:100%;height:100%}.vkuiSwitch--android .vkuiSwitch__self:checked+.vkuiSwitch__pseudo::after,.vkuiSwitch--vkcom .vkuiSwitch__self:checked+.vkuiSwitch__pseudo::after{background:#2688eb;background:var(--accent);opacity:.48}.vkuiSwitch--android .vkuiSwitch__pseudo{width:34px;height:14px}.vkuiSwitch--android .vkuiSwitch__pseudo::after{background:#c6c5c5;border-radius:7px}.vkuiSwitch--android.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo{width:32px;height:12px}.vkuiSwitch--android.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo::after{border-radius:6px}.vkuiSwitch--android .vkuiSwitch__pseudo::before{width:20px;height:20px;background:#f1f1f1;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24)}.vkuiSwitch--android.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo::before{width:18px;height:18px}.vkuiSwitch--android .vkuiSwitch__self:checked+.vkuiSwitch__pseudo::before{background:#2688eb;background:var(--accent)}.vkuiSwitch--android.vkuiSwitch--sizeY-compact .vkuiSwitch__self:checked+.vkuiSwitch__pseudo::before{-webkit-transform:translateX(19px);transform:translateX(19px)}.vkuiSwitch--vkcom .vkuiSwitch__pseudo{width:28px;height:10px}.vkuiSwitch--vkcom .vkuiSwitch__pseudo::after{border-radius:45px;background:#b8c1cc;background:var(--icon_tertiary);opacity:.48}.vkuiSwitch--vkcom .vkuiSwitch__pseudo::before{left:-2px;width:16px;height:16px;background:#f9f9f9;background:var(--background_light);border:1px solid #b8c1cc;border:1px solid var(--icon_tertiary);z-index:1}.vkuiSwitch--vkcom .vkuiSwitch__self:checked+.vkuiSwitch__pseudo::before{background:#2688eb;background:var(--accent);border:0;-webkit-transform:translateX(16px);transform:translateX(16px)}@media (prefers-reduced-motion:no-preference){.vkuiSwitch__pseudo::before{transition:-webkit-transform .1s ease;transition:transform .1s ease;transition:transform .1s ease,-webkit-transform .1s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo{transition:background-color .2s ease,border-color .2s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo::before{transition:-webkit-transform .2s cubic-bezier(.36,-.24,.26,1.32);transition:transform .2s cubic-bezier(.36,-.24,.26,1.32);transition:transform .2s cubic-bezier(.36,-.24,.26,1.32),-webkit-transform .2s cubic-bezier(.36,-.24,.26,1.32)}.vkuiSwitch--android .vkuiSwitch__pseudo::after,.vkuiSwitch--vkcom .vkuiSwitch__pseudo::after{transition:background-color .1s ease}}.vkuiSimpleCell .vkuiSwitch{margin-left:10px}
@@ -0,0 +1,7 @@
1
+ import * as React from "react";
2
+ import { HasRootRef } from "../../types";
3
+ import { VisuallyHiddenInputProps } from "../VisuallyHiddenInput/VisuallyHiddenInput";
4
+ import "./Switch.css";
5
+ export interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {
6
+ }
7
+ export declare const Switch: React.FC<SwitchProps>;
@@ -1,20 +1,19 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["style", "className", "getRef", "getRootRef"];
3
+ var _excluded = ["style", "className", "getRootRef"];
4
4
  import { createScopedElement } from "../../lib/jsxRuntime";
5
5
  import { getClassName } from "../../helpers/getClassName";
6
6
  import { classNames } from "../../lib/classNames";
7
7
  import { callMultiple } from "../../lib/callMultiple";
8
8
  import { usePlatform } from "../../hooks/usePlatform";
9
9
  import { useAdaptivity } from "../../hooks/useAdaptivity";
10
- import { useExternRef } from "../../hooks/useExternRef";
10
+ import { VisuallyHiddenInput } from "../VisuallyHiddenInput/VisuallyHiddenInput";
11
11
  import { useFocusVisible } from "../../hooks/useFocusVisible";
12
12
  import { FocusVisible } from "../FocusVisible/FocusVisible";
13
13
  import "./Switch.css";
14
14
  export var Switch = function Switch(_ref) {
15
15
  var style = _ref.style,
16
16
  className = _ref.className,
17
- getRef = _ref.getRef,
18
17
  getRootRef = _ref.getRootRef,
19
18
  restProps = _objectWithoutProperties(_ref, _excluded);
20
19
 
@@ -28,7 +27,6 @@ export var Switch = function Switch(_ref) {
28
27
  onBlur = _useFocusVisible.onBlur,
29
28
  onFocus = _useFocusVisible.onFocus;
30
29
 
31
- var inputRef = useExternRef(getRef);
32
30
  return createScopedElement("label", {
33
31
  vkuiClass: classNames(getClassName("Switch", platform), "Switch--sizeY-".concat(sizeY), {
34
32
  "Switch--disabled": restProps.disabled,
@@ -38,10 +36,9 @@ export var Switch = function Switch(_ref) {
38
36
  style: style,
39
37
  ref: getRootRef,
40
38
  role: "presentation"
41
- }, createScopedElement("input", _extends({}, restProps, {
39
+ }, createScopedElement(VisuallyHiddenInput, _extends({}, restProps, {
42
40
  type: "checkbox",
43
41
  vkuiClass: "Switch__self",
44
- ref: inputRef,
45
42
  onBlur: callMultiple(onBlur, restProps.onBlur),
46
43
  onFocus: callMultiple(onFocus, restProps.onFocus)
47
44
  })), createScopedElement("span", {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"names":["getClassName","classNames","callMultiple","usePlatform","useAdaptivity","useExternRef","useFocusVisible","FocusVisible","Switch","style","className","getRef","getRootRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","inputRef","disabled"],"mappings":";;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AAEA,SAASC,aAAT;AACA,SAASC,YAAT;AACA,SAASC,eAAT;AACA,SAASC,YAAT;AACA;AAOA,OAAO,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,OAM1B;AAAA,MALjBC,KAKiB,QALjBA,KAKiB;AAAA,MAJjBC,SAIiB,QAJjBA,SAIiB;AAAA,MAHjBC,MAGiB,QAHjBA,MAGiB;AAAA,MAFjBC,UAEiB,QAFjBA,UAEiB;AAAA,MADdC,SACc;;AACjB,MAAMC,QAAQ,GAAGX,WAAW,EAA5B;;AACA,uBAAkBC,aAAa,EAA/B;AAAA,MAAQW,KAAR,kBAAQA,KAAR;;AACA,yBAA0CT,eAAe,EAAzD;AAAA,MAAQU,YAAR,oBAAQA,YAAR;AAAA,MAAsBC,MAAtB,oBAAsBA,MAAtB;AAAA,MAA8BC,OAA9B,oBAA8BA,OAA9B;;AAEA,MAAMC,QAAQ,GAAGd,YAAY,CAACM,MAAD,CAA7B;AAEA,SACE;AACE,IAAA,SAAS,EAAEV,UAAU,CACnBD,YAAY,CAAC,QAAD,EAAWc,QAAX,CADO,0BAEFC,KAFE,GAGnB;AACE,0BAAoBF,SAAS,CAACO,QADhC;AAEE,+BAAyBJ;AAF3B,KAHmB,CADvB;AASE,IAAA,SAAS,EAAEN,SATb;AAUE,IAAA,KAAK,EAAED,KAVT;AAWE,IAAA,GAAG,EAAEG,UAXP;AAYE,IAAA,IAAI,EAAC;AAZP,KAcE,0CACMC,SADN;AAEE,IAAA,IAAI,EAAC,UAFP;AAGE,IAAA,SAAS,EAAC,cAHZ;AAIE,IAAA,GAAG,EAAEM,QAJP;AAKE,IAAA,MAAM,EAAEjB,YAAY,CAACe,MAAD,EAASJ,SAAS,CAACI,MAAnB,CALtB;AAME,IAAA,OAAO,EAAEf,YAAY,CAACgB,OAAD,EAAUL,SAAS,CAACK,OAApB;AANvB,KAdF,EAsBE;AAAM,IAAA,IAAI,EAAC,cAAX;AAA0B,IAAA,SAAS,EAAC;AAApC,IAtBF,EAuBE,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,IAvBF,CADF;AA2BD,CAxCM","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useFocusVisible } from \"../../hooks/useFocusVisible\";\nimport { FocusVisible } from \"../FocusVisible/FocusVisible\";\nimport \"./Switch.css\";\n\nexport interface SwitchProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRootRef<HTMLLabelElement>,\n HasRef<HTMLInputElement> {}\n\nexport const Switch: React.FC<SwitchProps> = ({\n style,\n className,\n getRef,\n getRootRef,\n ...restProps\n}: SwitchProps) => {\n const platform = usePlatform();\n const { sizeY } = useAdaptivity();\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n const inputRef = useExternRef(getRef);\n\n return (\n <label\n vkuiClass={classNames(\n getClassName(\"Switch\", platform),\n `Switch--sizeY-${sizeY}`,\n {\n \"Switch--disabled\": restProps.disabled,\n \"Switch--focus-visible\": focusVisible,\n }\n )}\n className={className}\n style={style}\n ref={getRootRef}\n role=\"presentation\"\n >\n <input\n {...restProps}\n type=\"checkbox\"\n vkuiClass=\"Switch__self\"\n ref={inputRef}\n onBlur={callMultiple(onBlur, restProps.onBlur)}\n onFocus={callMultiple(onFocus, restProps.onFocus)}\n />\n <span role=\"presentation\" vkuiClass=\"Switch__pseudo\" />\n <FocusVisible mode=\"outside\" />\n </label>\n );\n};\n"],"file":"Switch.js"}
1
+ {"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"names":["getClassName","classNames","callMultiple","usePlatform","useAdaptivity","VisuallyHiddenInput","useFocusVisible","FocusVisible","Switch","style","className","getRootRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","disabled"],"mappings":";;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AAEA,SAASC,aAAT;AACA,SACEC,mBADF;AAIA,SAASC,eAAT;AACA,SAASC,YAAT;AACA;AAMA,OAAO,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,OAK1B;AAAA,MAJjBC,KAIiB,QAJjBA,KAIiB;AAAA,MAHjBC,SAGiB,QAHjBA,SAGiB;AAAA,MAFjBC,UAEiB,QAFjBA,UAEiB;AAAA,MADdC,SACc;;AACjB,MAAMC,QAAQ,GAAGV,WAAW,EAA5B;;AACA,uBAAkBC,aAAa,EAA/B;AAAA,MAAQU,KAAR,kBAAQA,KAAR;;AACA,yBAA0CR,eAAe,EAAzD;AAAA,MAAQS,YAAR,oBAAQA,YAAR;AAAA,MAAsBC,MAAtB,oBAAsBA,MAAtB;AAAA,MAA8BC,OAA9B,oBAA8BA,OAA9B;;AAEA,SACE;AACE,IAAA,SAAS,EAAEhB,UAAU,CACnBD,YAAY,CAAC,QAAD,EAAWa,QAAX,CADO,0BAEFC,KAFE,GAGnB;AACE,0BAAoBF,SAAS,CAACM,QADhC;AAEE,+BAAyBH;AAF3B,KAHmB,CADvB;AASE,IAAA,SAAS,EAAEL,SATb;AAUE,IAAA,KAAK,EAAED,KAVT;AAWE,IAAA,GAAG,EAAEE,UAXP;AAYE,IAAA,IAAI,EAAC;AAZP,KAcE,oBAAC,mBAAD,eACMC,SADN;AAEE,IAAA,IAAI,EAAC,UAFP;AAGE,IAAA,SAAS,EAAC,cAHZ;AAIE,IAAA,MAAM,EAAEV,YAAY,CAACc,MAAD,EAASJ,SAAS,CAACI,MAAnB,CAJtB;AAKE,IAAA,OAAO,EAAEd,YAAY,CAACe,OAAD,EAAUL,SAAS,CAACK,OAApB;AALvB,KAdF,EAqBE;AAAM,IAAA,IAAI,EAAC,cAAX;AAA0B,IAAA,SAAS,EAAC;AAApC,IArBF,EAsBE,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,IAtBF,CADF;AA0BD,CApCM","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport {\n VisuallyHiddenInput,\n VisuallyHiddenInputProps,\n} from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { useFocusVisible } from \"../../hooks/useFocusVisible\";\nimport { FocusVisible } from \"../FocusVisible/FocusVisible\";\nimport \"./Switch.css\";\n\nexport interface SwitchProps\n extends VisuallyHiddenInputProps,\n HasRootRef<HTMLLabelElement> {}\n\nexport const Switch: React.FC<SwitchProps> = ({\n style,\n className,\n getRootRef,\n ...restProps\n}: SwitchProps) => {\n const platform = usePlatform();\n const { sizeY } = useAdaptivity();\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n return (\n <label\n vkuiClass={classNames(\n getClassName(\"Switch\", platform),\n `Switch--sizeY-${sizeY}`,\n {\n \"Switch--disabled\": restProps.disabled,\n \"Switch--focus-visible\": focusVisible,\n }\n )}\n className={className}\n style={style}\n ref={getRootRef}\n role=\"presentation\"\n >\n <VisuallyHiddenInput\n {...restProps}\n type=\"checkbox\"\n vkuiClass=\"Switch__self\"\n onBlur={callMultiple(onBlur, restProps.onBlur)}\n onFocus={callMultiple(onFocus, restProps.onFocus)}\n />\n <span role=\"presentation\" vkuiClass=\"Switch__pseudo\" />\n <FocusVisible mode=\"outside\" />\n </label>\n );\n};\n"],"file":"Switch.js"}
@@ -0,0 +1,11 @@
1
+ import * as React from "react";
2
+ import "./Tabbar.css";
3
+ export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
4
+ /**
5
+ * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)
6
+ */
7
+ shadow?: boolean;
8
+ itemsLayout?: "vertical" | "horizontal" | "auto";
9
+ }
10
+ declare const Tabbar: React.FunctionComponent<TabbarProps>;
11
+ export default Tabbar;
@@ -0,0 +1,21 @@
1
+ import * as React from "react";
2
+ import { HasComponent, HasRootRef } from "../../types";
3
+ import "./TabbarItem.css";
4
+ export interface TabbarItemProps extends Omit<React.AllHTMLAttributes<HTMLElement>, "label">, // TODO убрать Omit после удаления свойства label
5
+ HasRootRef<HTMLElement>, HasComponent {
6
+ selected?: boolean;
7
+ /**
8
+ * Тест рядом с иконкой
9
+ */
10
+ text?: React.ReactNode;
11
+ /**
12
+ * Индикатор над иконкой. Принимает `<Badge mode="prominent" />` или `<Counter size="s" mode="prominent" />`
13
+ */
14
+ indicator?: React.ReactNode;
15
+ /**
16
+ * @deprecated будет удалено в 5.0.0. Используйте `indicator`
17
+ */
18
+ label?: React.ReactNode;
19
+ }
20
+ declare const TabbarItem: React.FunctionComponent<TabbarItemProps>;
21
+ export default TabbarItem;
@@ -0,0 +1,10 @@
1
+ import * as React from "react";
2
+ import { HasRootRef } from "../../types";
3
+ import { AdaptivityProps } from "../../hoc/withAdaptivity";
4
+ import "./Tabs.css";
5
+ export interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, AdaptivityProps {
6
+ mode?: "default" | "buttons" | "segmented";
7
+ }
8
+ export declare const TabsModeContext: React.Context<"default" | "buttons" | "segmented" | undefined>;
9
+ declare const _default: React.FC<Pick<TabsProps, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "getRootRef"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
10
+ export default _default;
@@ -0,0 +1,8 @@
1
+ import * as React from "react";
2
+ import "./TabsItem.css";
3
+ export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
4
+ after?: React.ReactNode;
5
+ selected?: boolean;
6
+ }
7
+ declare const TabsItem: React.FC<TabsItemProps>;
8
+ export default TabsItem;
@@ -0,0 +1,40 @@
1
+ import * as React from "react";
2
+ import { TouchProps } from "../Touch/Touch";
3
+ import { HasComponent, HasRootRef } from "../../types";
4
+ import { AdaptivityProps } from "../../hoc/withAdaptivity";
5
+ import { FocusVisibleMode } from "../FocusVisible/FocusVisible";
6
+ import "./Tappable.css";
7
+ export interface TappableProps extends Omit<React.AllHTMLAttributes<HTMLElement>, "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onMouseDown" | "onMouseMove" | "onMouseUp" | "onMouseLeave">, HasRootRef<HTMLElement>, AdaptivityProps, HasComponent, Pick<TouchProps, "onStart" | "onEnd" | "onMove"> {
8
+ /**
9
+ * Длительность показа active-состояния
10
+ */
11
+ activeEffectDelay?: number;
12
+ stopPropagation?: boolean;
13
+ /**
14
+ * Указывает, должен ли компонент реагировать на hover-состояние
15
+ */
16
+ hasHover?: boolean;
17
+ /**
18
+ * Указывает, должен ли компонент реагировать на active-состояние
19
+ */
20
+ hasActive?: boolean;
21
+ /**
22
+ * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active
23
+ */
24
+ activeMode?: "opacity" | "background" | string;
25
+ /**
26
+ * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover
27
+ */
28
+ hoverMode?: "opacity" | "background" | string;
29
+ /**
30
+ * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
31
+ */
32
+ focusVisibleMode?: FocusVisibleMode | string;
33
+ }
34
+ export interface RootComponentProps extends TouchProps {
35
+ ref?: React.Ref<HTMLElement>;
36
+ }
37
+ export declare const ACTIVE_DELAY = 70;
38
+ export declare const ACTIVE_EFFECT_DELAY = 600;
39
+ declare const _default: React.FC<Pick<TappableProps, "max" | "required" | "high" | "low" | "disabled" | "default" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "color" | "content" | "size" | "wrap" | "multiple" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "className" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "srcLang" | "value" | "download" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster" | "challenge" | "keyType" | "keyParams" | "onStart" | "onMove" | "onEnd" | "Component" | "getRootRef" | "stopPropagation" | "activeEffectDelay" | "hasHover" | "hoverMode" | "hasActive" | "activeMode" | "focusVisibleMode"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
40
+ export default _default;
@@ -0,0 +1,14 @@
1
+ import * as React from "react";
2
+ import { HoverPopperProps } from "../HoverPopper/HoverPopper";
3
+ import "./TextTooltip.css";
4
+ export interface TextTooltipProps extends Omit<HoverPopperProps, "arrow" | "arrowClassName" | "content"> {
5
+ /**
6
+ * Текст тултипа
7
+ */
8
+ text?: React.ReactNode;
9
+ /**
10
+ * Заголовок тултипа
11
+ */
12
+ header?: React.ReactNode;
13
+ }
14
+ export declare const TextTooltip: React.FC<TextTooltipProps>;
@@ -23,11 +23,10 @@ export var TextTooltip = function TextTooltip(_ref) {
23
23
  arrowClassName: prefixClass("TextTooltip__arrow"),
24
24
  content: createScopedElement(React.Fragment, null, hasReactNode(header) && createScopedElement(Subhead, {
25
25
  Component: "span",
26
- weight: "medium",
26
+ weight: "2",
27
27
  vkuiClass: "TextTooltip__header"
28
28
  }, header), hasReactNode(text) && createScopedElement(Subhead, {
29
29
  Component: "span",
30
- weight: "regular",
31
30
  vkuiClass: "TextTooltip__text"
32
31
  }, text))
33
32
  }, popperProps), children);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"names":["React","HoverPopper","getClassName","usePlatform","hasReactNode","Subhead","prefixClass","TextTooltip","children","text","header","popperProps","platform"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,OAAOC,OAAP;AACA,SAASC,WAAT;AACA;AAcA,OAAO,IAAMC,WAAuC,GAAG,SAA1CA,WAA0C,OAK/B;AAAA,MAJtBC,QAIsB,QAJtBA,QAIsB;AAAA,MAHtBC,IAGsB,QAHtBA,IAGsB;AAAA,MAFtBC,MAEsB,QAFtBA,MAEsB;AAAA,MADnBC,WACmB;;AACtB,MAAMC,QAAQ,GAAGT,WAAW,EAA5B;AAEA,SACE,oBAAC,WAAD;AACE,IAAA,SAAS,EAAED,YAAY,CAAC,aAAD,EAAgBU,QAAhB,CADzB;AAEE,IAAA,KAAK,MAFP;AAGE,IAAA,cAAc,EAAEN,WAAW,CAAC,oBAAD,CAH7B;AAIE,IAAA,OAAO,EACL,oBAAC,KAAD,CAAO,QAAP,QACGF,YAAY,CAACM,MAAD,CAAZ,IACC,oBAAC,OAAD;AACE,MAAA,SAAS,EAAC,MADZ;AAEE,MAAA,MAAM,EAAC,QAFT;AAGE,MAAA,SAAS,EAAC;AAHZ,OAKGA,MALH,CAFJ,EAUGN,YAAY,CAACK,IAAD,CAAZ,IACC,oBAAC,OAAD;AACE,MAAA,SAAS,EAAC,MADZ;AAEE,MAAA,MAAM,EAAC,SAFT;AAGE,MAAA,SAAS,EAAC;AAHZ,OAKGA,IALH,CAXJ;AALJ,KA0BME,WA1BN,GA4BGH,QA5BH,CADF;AAgCD,CAxCM","sourcesContent":["import * as React from \"react\";\nimport { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport \"./TextTooltip.css\";\n\nexport interface TextTooltipProps\n extends Omit<HoverPopperProps, \"arrow\" | \"arrowClassName\" | \"content\"> {\n /**\n * Текст тултипа\n */\n text?: React.ReactNode;\n /**\n * Заголовок тултипа\n */\n header?: React.ReactNode;\n}\n\nexport const TextTooltip: React.FC<TextTooltipProps> = ({\n children,\n text,\n header,\n ...popperProps\n}: TextTooltipProps) => {\n const platform = usePlatform();\n\n return (\n <HoverPopper\n vkuiClass={getClassName(\"TextTooltip\", platform)}\n arrow\n arrowClassName={prefixClass(\"TextTooltip__arrow\")}\n content={\n <React.Fragment>\n {hasReactNode(header) && (\n <Subhead\n Component=\"span\"\n weight=\"medium\"\n vkuiClass=\"TextTooltip__header\"\n >\n {header}\n </Subhead>\n )}\n {hasReactNode(text) && (\n <Subhead\n Component=\"span\"\n weight=\"regular\"\n vkuiClass=\"TextTooltip__text\"\n >\n {text}\n </Subhead>\n )}\n </React.Fragment>\n }\n {...popperProps}\n >\n {children}\n </HoverPopper>\n );\n};\n"],"file":"TextTooltip.js"}
1
+ {"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"names":["React","HoverPopper","getClassName","usePlatform","hasReactNode","Subhead","prefixClass","TextTooltip","children","text","header","popperProps","platform"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,OAAOC,OAAP;AACA,SAASC,WAAT;AACA;AAcA,OAAO,IAAMC,WAAuC,GAAG,SAA1CA,WAA0C,OAK/B;AAAA,MAJtBC,QAIsB,QAJtBA,QAIsB;AAAA,MAHtBC,IAGsB,QAHtBA,IAGsB;AAAA,MAFtBC,MAEsB,QAFtBA,MAEsB;AAAA,MADnBC,WACmB;;AACtB,MAAMC,QAAQ,GAAGT,WAAW,EAA5B;AAEA,SACE,oBAAC,WAAD;AACE,IAAA,SAAS,EAAED,YAAY,CAAC,aAAD,EAAgBU,QAAhB,CADzB;AAEE,IAAA,KAAK,MAFP;AAGE,IAAA,cAAc,EAAEN,WAAW,CAAC,oBAAD,CAH7B;AAIE,IAAA,OAAO,EACL,oBAAC,KAAD,CAAO,QAAP,QACGF,YAAY,CAACM,MAAD,CAAZ,IACC,oBAAC,OAAD;AACE,MAAA,SAAS,EAAC,MADZ;AAEE,MAAA,MAAM,EAAC,GAFT;AAGE,MAAA,SAAS,EAAC;AAHZ,OAKGA,MALH,CAFJ,EAUGN,YAAY,CAACK,IAAD,CAAZ,IACC,oBAAC,OAAD;AAAS,MAAA,SAAS,EAAC,MAAnB;AAA0B,MAAA,SAAS,EAAC;AAApC,OACGA,IADH,CAXJ;AALJ,KAsBME,WAtBN,GAwBGH,QAxBH,CADF;AA4BD,CApCM","sourcesContent":["import * as React from \"react\";\nimport { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport \"./TextTooltip.css\";\n\nexport interface TextTooltipProps\n extends Omit<HoverPopperProps, \"arrow\" | \"arrowClassName\" | \"content\"> {\n /**\n * Текст тултипа\n */\n text?: React.ReactNode;\n /**\n * Заголовок тултипа\n */\n header?: React.ReactNode;\n}\n\nexport const TextTooltip: React.FC<TextTooltipProps> = ({\n children,\n text,\n header,\n ...popperProps\n}: TextTooltipProps) => {\n const platform = usePlatform();\n\n return (\n <HoverPopper\n vkuiClass={getClassName(\"TextTooltip\", platform)}\n arrow\n arrowClassName={prefixClass(\"TextTooltip__arrow\")}\n content={\n <React.Fragment>\n {hasReactNode(header) && (\n <Subhead\n Component=\"span\"\n weight=\"2\"\n vkuiClass=\"TextTooltip__header\"\n >\n {header}\n </Subhead>\n )}\n {hasReactNode(text) && (\n <Subhead Component=\"span\" vkuiClass=\"TextTooltip__text\">\n {text}\n </Subhead>\n )}\n </React.Fragment>\n }\n {...popperProps}\n >\n {children}\n </HoverPopper>\n );\n};\n"],"file":"TextTooltip.js"}
@@ -0,0 +1,11 @@
1
+ import * as React from "react";
2
+ import { HasRef, HasRootRef } from "../../types";
3
+ import { AdaptivityProps } from "../../hoc/withAdaptivity";
4
+ import "./Textarea.css";
5
+ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, HasRef<HTMLTextAreaElement>, HasRootRef<HTMLElement>, AdaptivityProps {
6
+ grow?: boolean;
7
+ onResize?(el: HTMLTextAreaElement): void;
8
+ defaultValue?: string;
9
+ }
10
+ declare const _default: React.FC<Pick<TextareaProps, "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "color" | "wrap" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "autoFocus" | "autoComplete" | "maxLength" | "minLength" | "readOnly" | "cols" | "dirName" | "rows" | "getRootRef" | "getRef" | "grow" | "onResize"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
11
+ export default _default;
@@ -0,0 +1,55 @@
1
+ import * as React from "react";
2
+ import "./Tooltip.css";
3
+ export interface TooltipProps {
4
+ /**
5
+ * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает
6
+ * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,
7
+ * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.
8
+ */
9
+ children: React.ReactElement;
10
+ mode?: "accent" | "light";
11
+ /**
12
+ * Если передан `false`, то рисуется просто `children`.
13
+ */
14
+ isShown?: boolean;
15
+ /**
16
+ * Текст тултипа.
17
+ */
18
+ text?: React.ReactNode;
19
+ /**
20
+ * Заголовок тултипа.
21
+ */
22
+ header?: React.ReactNode;
23
+ /**
24
+ * Положение по горизонтали (прижатие к левому или правому краю `children`).
25
+ * Если не задано, позиция по горизонтали определятся автоматически
26
+ */
27
+ alignX?: "center" | "left" | "right";
28
+ /**
29
+ * Положение по вертикали (расположение над или под `children`).
30
+ * Если не задано, позиция по вертикали определятся автоматически
31
+ */
32
+ alignY?: "top" | "bottom";
33
+ /**
34
+ * Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).
35
+ */
36
+ offsetX?: number;
37
+ /**
38
+ * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).
39
+ */
40
+ offsetY?: number;
41
+ /**
42
+ * Сдвиг стрелочки относительно центра дочернего элемента.
43
+ */
44
+ cornerOffset?: number;
45
+ /**
46
+ * Сдвиг стрелочки относительно ширины тултипа
47
+ */
48
+ cornerAbsoluteOffset?: number;
49
+ /**
50
+ * Callback, который вызывается при клике по любому месту в пределах экрана.
51
+ */
52
+ onClose?: () => void;
53
+ }
54
+ declare const Tooltip: React.FC<TooltipProps>;
55
+ export default Tooltip;
@@ -50,10 +50,9 @@ var SimpleTooltip = /*#__PURE__*/React.forwardRef(function SimpleTooltip(_ref, r
50
50
  })), createScopedElement("div", {
51
51
  vkuiClass: "Tooltip__content"
52
52
  }, header && createScopedElement(Subhead, {
53
- weight: "semibold",
53
+ weight: "1",
54
54
  vkuiClass: "Tooltip__title"
55
55
  }, header), text && createScopedElement(Subhead, {
56
- weight: "regular",
57
56
  vkuiClass: "Tooltip__text"
58
57
  }, text))));
59
58
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":["React","ReactDOM","classNames","getClassName","Subhead","useNavTransition","usePopper","tooltipContainerAttr","useExternRef","useDOM","warnOnce","hasReactNode","useGlobalEventListener","isDOMTypeElement","element","isValidElement","type","baseClassName","warn","IS_DEV","process","env","NODE_ENV","SimpleTooltip","forwardRef","ref","mode","header","text","arrowRef","style","attributes","container","arrow","mapAlignX","x","getPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","_isShown","isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","restProps","entering","useState","tooltipRef","setTooltipRef","tooltipArrowRef","setTooltipArrowRef","target","setTarget","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","tooltipContainer","useMemo","closest","strategy","position","Error","arrowOffsetModiifer","name","enabled","phase","fn","state","modifiersData","undefined","y","modifiers","options","offset","padding","styles","document","passive","childRef","props","getRootRef","patchedRef","child","cloneElement","createPortal","el","popper","defaultProps"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport { useNavTransition } from \"../NavTransitionContext/NavTransitionContext\";\nimport { Modifier, usePopper } from \"react-popper\";\nimport { Placement } from \"@popperjs/core\";\nimport { tooltipContainerAttr } from \"./TooltipContainer\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useDOM } from \"../../lib/dom\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport \"./Tooltip.css\";\n\ninterface SimpleTooltipProps extends Partial<TooltipProps> {\n target?: HTMLDivElement;\n arrowRef?: React.Ref<HTMLDivElement>;\n style?: {\n arrow: React.CSSProperties;\n container: React.CSSProperties;\n };\n attributes?: {\n arrow: React.HTMLAttributes<HTMLDivElement> | null;\n container: React.HTMLAttributes<HTMLDivElement> | null;\n };\n}\n\nconst isDOMTypeElement = (\n element: React.ReactElement\n): element is React.DOMElement<any, any> => {\n return React.isValidElement(element) && typeof element.type === \"string\";\n};\n\nconst baseClassName = getClassName(\"Tooltip\");\nconst warn = warnOnce(\"Tooltip\");\nconst IS_DEV = process.env.NODE_ENV === \"development\";\n\nconst SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(\n function SimpleTooltip(\n { mode = \"accent\", header, text, arrowRef, style = {}, attributes },\n ref\n ) {\n return (\n <div vkuiClass={classNames(baseClassName, `Tooltip--${mode}`)}>\n <div\n vkuiClass=\"Tooltip__container\"\n ref={ref}\n style={style.container}\n {...attributes?.container}\n >\n <div\n vkuiClass=\"Tooltip__corner\"\n style={style.arrow}\n {...attributes?.arrow}\n ref={arrowRef}\n />\n <div vkuiClass=\"Tooltip__content\">\n {header && (\n <Subhead weight=\"semibold\" vkuiClass=\"Tooltip__title\">\n {header}\n </Subhead>\n )}\n {text && (\n <Subhead weight=\"regular\" vkuiClass=\"Tooltip__text\">\n {text}\n </Subhead>\n )}\n </div>\n </div>\n </div>\n );\n }\n);\n\nexport interface TooltipProps {\n /**\n * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n */\n children: React.ReactElement;\n mode?: \"accent\" | \"light\";\n /**\n * Если передан `false`, то рисуется просто `children`.\n */\n isShown?: boolean;\n /**\n * Текст тултипа.\n */\n text?: React.ReactNode;\n /**\n * Заголовок тултипа.\n */\n header?: React.ReactNode;\n /**\n * Положение по горизонтали (прижатие к левому или правому краю `children`).\n * Если не задано, позиция по горизонтали определятся автоматически\n */\n alignX?: \"center\" | \"left\" | \"right\";\n /**\n * Положение по вертикали (расположение над или под `children`).\n * Если не задано, позиция по вертикали определятся автоматически\n */\n alignY?: \"top\" | \"bottom\";\n /**\n * Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).\n */\n offsetX?: number;\n /**\n * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).\n */\n offsetY?: number;\n /**\n * Сдвиг стрелочки относительно центра дочернего элемента.\n */\n cornerOffset?: number;\n /**\n * Сдвиг стрелочки относительно ширины тултипа\n */\n cornerAbsoluteOffset?: number;\n /**\n * Callback, который вызывается при клике по любому месту в пределах экрана.\n */\n onClose?: () => void;\n}\n\ndeclare type ArrowOffsetModifierOptions = {\n offset: number;\n};\ndeclare type ArrowOffsetModifier = Modifier<\n \"arrowOffset\",\n ArrowOffsetModifierOptions\n>;\n\nfunction mapAlignX(x: TooltipProps[\"alignX\"]) {\n switch (x) {\n case \"left\":\n return \"start\";\n case \"right\":\n return \"end\";\n default:\n return \"\";\n }\n}\nfunction getPlacement(\n alignX: TooltipProps[\"alignX\"],\n alignY: TooltipProps[\"alignY\"]\n): Placement {\n return [alignY || \"bottom\", mapAlignX(alignX || \"left\")]\n .filter((p) => !!p)\n .join(\"-\") as Placement;\n}\nfunction isVerticalPlacement(placement: Placement) {\n return placement.startsWith(\"top\") || placement.startsWith(\"bottom\");\n}\n\nconst Tooltip: React.FC<TooltipProps> = ({\n children,\n isShown: _isShown,\n offsetX = 0,\n offsetY = 15,\n alignX,\n alignY,\n onClose,\n cornerOffset = 0,\n cornerAbsoluteOffset,\n ...restProps\n}) => {\n const { entering } = useNavTransition();\n const isShown = _isShown && !entering;\n const [tooltipRef, setTooltipRef] = React.useState<HTMLElement | null>(null);\n const [tooltipArrowRef, setTooltipArrowRef] =\n React.useState<HTMLElement | null>(null);\n const [target, setTarget] = React.useState<HTMLElement>();\n\n if (IS_DEV) {\n const multiChildren = React.Children.count(children) > 1;\n // Empty children is a noop\n const primitiveChild =\n hasReactNode(children) && typeof children !== \"object\";\n (multiChildren || primitiveChild) &&\n warn(\n [\n \"children must be a single React element, got\",\n multiChildren && \"multiple\",\n primitiveChild && JSON.stringify(children),\n ]\n .filter(Boolean)\n .join(\" \")\n );\n }\n\n /* eslint-disable no-restricted-properties */\n /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion*/\n const tooltipContainer = React.useMemo(\n () => target?.closest(`[${tooltipContainerAttr}]`) as HTMLDivElement,\n [target]\n );\n const strategy = React.useMemo(\n () => (target?.style.position === \"fixed\" ? \"fixed\" : \"absolute\"),\n [target]\n );\n /* eslint-enable @typescript-eslint/no-unnecessary-type-assertion*/\n /* eslint-enable no-restricted-properties */\n\n if (IS_DEV && target && !tooltipContainer) {\n throw new Error(\n \"Use TooltipContainer for Tooltip outside Panel (see docs)\"\n );\n }\n\n const arrowOffsetModiifer = React.useMemo<ArrowOffsetModifier>(() => {\n return {\n name: \"arrowOffset\",\n enabled: true,\n phase: \"main\",\n fn({ state }) {\n if (!state.modifiersData.arrow) {\n return;\n }\n if (isVerticalPlacement(state.placement)) {\n if (cornerAbsoluteOffset !== undefined) {\n state.modifiersData.arrow.x = cornerAbsoluteOffset;\n } else {\n if (state.modifiersData.arrow?.x !== undefined) {\n state.modifiersData.arrow.x += cornerOffset;\n }\n }\n } else {\n if (cornerAbsoluteOffset !== undefined) {\n state.modifiersData.arrow.y = cornerAbsoluteOffset;\n } else {\n if (state.modifiersData.arrow?.y !== undefined) {\n state.modifiersData.arrow.y += cornerOffset;\n }\n }\n }\n },\n };\n }, [cornerOffset, cornerAbsoluteOffset]);\n\n const placement = getPlacement(alignX, alignY);\n const { styles, attributes } = usePopper(target, tooltipRef, {\n strategy,\n placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [offsetX, offsetY],\n },\n },\n {\n name: \"arrow\",\n options: {\n element: tooltipArrowRef,\n padding: 14,\n },\n },\n {\n name: \"preventOverflow\",\n },\n {\n name: \"flip\",\n },\n arrowOffsetModiifer,\n ],\n });\n\n const { document } = useDOM();\n useGlobalEventListener(document, \"click\", isShown && onClose, {\n passive: true,\n });\n // NOTE: setting isShown to true used to trigger usePopper().forceUpdate()\n\n const childRef =\n React.isValidElement(children) &&\n (isDOMTypeElement(children) ? children.ref : children.props.getRootRef);\n const patchedRef = useExternRef(setTarget, childRef);\n const child = React.isValidElement(children)\n ? React.cloneElement(children, {\n [isDOMTypeElement(children) ? \"ref\" : \"getRootRef\"]: patchedRef,\n })\n : children;\n\n return (\n <React.Fragment>\n {child}\n {isShown &&\n target != null &&\n ReactDOM.createPortal(\n <SimpleTooltip\n {...restProps}\n ref={(el) => setTooltipRef(el)}\n arrowRef={(el) => setTooltipArrowRef(el)}\n style={{ arrow: styles.arrow, container: styles.popper }}\n attributes={{\n arrow: attributes.arrow ?? null,\n container: attributes.popper ?? null,\n }}\n />,\n tooltipContainer\n )}\n </React.Fragment>\n );\n};\n\nTooltip.defaultProps = {\n offsetX: 0,\n offsetY: 15,\n cornerOffset: 0,\n isShown: true,\n mode: \"accent\",\n};\n// eslint-disable-next-line import/no-default-export\nexport default Tooltip;\n"],"file":"Tooltip.js"}
1
+ {"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":["React","ReactDOM","classNames","getClassName","Subhead","useNavTransition","usePopper","tooltipContainerAttr","useExternRef","useDOM","warnOnce","hasReactNode","useGlobalEventListener","isDOMTypeElement","element","isValidElement","type","baseClassName","warn","IS_DEV","process","env","NODE_ENV","SimpleTooltip","forwardRef","ref","mode","header","text","arrowRef","style","attributes","container","arrow","mapAlignX","x","getPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","_isShown","isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","restProps","entering","useState","tooltipRef","setTooltipRef","tooltipArrowRef","setTooltipArrowRef","target","setTarget","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","tooltipContainer","useMemo","closest","strategy","position","Error","arrowOffsetModiifer","name","enabled","phase","fn","state","modifiersData","undefined","y","modifiers","options","offset","padding","styles","document","passive","childRef","props","getRootRef","patchedRef","child","cloneElement","createPortal","el","popper","defaultProps"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport { useNavTransition } from \"../NavTransitionContext/NavTransitionContext\";\nimport { Modifier, usePopper } from \"react-popper\";\nimport { Placement } from \"@popperjs/core\";\nimport { tooltipContainerAttr } from \"./TooltipContainer\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useDOM } from \"../../lib/dom\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport \"./Tooltip.css\";\n\ninterface SimpleTooltipProps extends Partial<TooltipProps> {\n target?: HTMLDivElement;\n arrowRef?: React.Ref<HTMLDivElement>;\n style?: {\n arrow: React.CSSProperties;\n container: React.CSSProperties;\n };\n attributes?: {\n arrow: React.HTMLAttributes<HTMLDivElement> | null;\n container: React.HTMLAttributes<HTMLDivElement> | null;\n };\n}\n\nconst isDOMTypeElement = (\n element: React.ReactElement\n): element is React.DOMElement<any, any> => {\n return React.isValidElement(element) && typeof element.type === \"string\";\n};\n\nconst baseClassName = getClassName(\"Tooltip\");\nconst warn = warnOnce(\"Tooltip\");\nconst IS_DEV = process.env.NODE_ENV === \"development\";\n\nconst SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(\n function SimpleTooltip(\n { mode = \"accent\", header, text, arrowRef, style = {}, attributes },\n ref\n ) {\n return (\n <div vkuiClass={classNames(baseClassName, `Tooltip--${mode}`)}>\n <div\n vkuiClass=\"Tooltip__container\"\n ref={ref}\n style={style.container}\n {...attributes?.container}\n >\n <div\n vkuiClass=\"Tooltip__corner\"\n style={style.arrow}\n {...attributes?.arrow}\n ref={arrowRef}\n />\n <div vkuiClass=\"Tooltip__content\">\n {header && (\n <Subhead weight=\"1\" vkuiClass=\"Tooltip__title\">\n {header}\n </Subhead>\n )}\n {text && <Subhead vkuiClass=\"Tooltip__text\">{text}</Subhead>}\n </div>\n </div>\n </div>\n );\n }\n);\n\nexport interface TooltipProps {\n /**\n * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n */\n children: React.ReactElement;\n mode?: \"accent\" | \"light\";\n /**\n * Если передан `false`, то рисуется просто `children`.\n */\n isShown?: boolean;\n /**\n * Текст тултипа.\n */\n text?: React.ReactNode;\n /**\n * Заголовок тултипа.\n */\n header?: React.ReactNode;\n /**\n * Положение по горизонтали (прижатие к левому или правому краю `children`).\n * Если не задано, позиция по горизонтали определятся автоматически\n */\n alignX?: \"center\" | \"left\" | \"right\";\n /**\n * Положение по вертикали (расположение над или под `children`).\n * Если не задано, позиция по вертикали определятся автоматически\n */\n alignY?: \"top\" | \"bottom\";\n /**\n * Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).\n */\n offsetX?: number;\n /**\n * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).\n */\n offsetY?: number;\n /**\n * Сдвиг стрелочки относительно центра дочернего элемента.\n */\n cornerOffset?: number;\n /**\n * Сдвиг стрелочки относительно ширины тултипа\n */\n cornerAbsoluteOffset?: number;\n /**\n * Callback, который вызывается при клике по любому месту в пределах экрана.\n */\n onClose?: () => void;\n}\n\ndeclare type ArrowOffsetModifierOptions = {\n offset: number;\n};\ndeclare type ArrowOffsetModifier = Modifier<\n \"arrowOffset\",\n ArrowOffsetModifierOptions\n>;\n\nfunction mapAlignX(x: TooltipProps[\"alignX\"]) {\n switch (x) {\n case \"left\":\n return \"start\";\n case \"right\":\n return \"end\";\n default:\n return \"\";\n }\n}\nfunction getPlacement(\n alignX: TooltipProps[\"alignX\"],\n alignY: TooltipProps[\"alignY\"]\n): Placement {\n return [alignY || \"bottom\", mapAlignX(alignX || \"left\")]\n .filter((p) => !!p)\n .join(\"-\") as Placement;\n}\nfunction isVerticalPlacement(placement: Placement) {\n return placement.startsWith(\"top\") || placement.startsWith(\"bottom\");\n}\n\nconst Tooltip: React.FC<TooltipProps> = ({\n children,\n isShown: _isShown,\n offsetX = 0,\n offsetY = 15,\n alignX,\n alignY,\n onClose,\n cornerOffset = 0,\n cornerAbsoluteOffset,\n ...restProps\n}) => {\n const { entering } = useNavTransition();\n const isShown = _isShown && !entering;\n const [tooltipRef, setTooltipRef] = React.useState<HTMLElement | null>(null);\n const [tooltipArrowRef, setTooltipArrowRef] =\n React.useState<HTMLElement | null>(null);\n const [target, setTarget] = React.useState<HTMLElement>();\n\n if (IS_DEV) {\n const multiChildren = React.Children.count(children) > 1;\n // Empty children is a noop\n const primitiveChild =\n hasReactNode(children) && typeof children !== \"object\";\n (multiChildren || primitiveChild) &&\n warn(\n [\n \"children must be a single React element, got\",\n multiChildren && \"multiple\",\n primitiveChild && JSON.stringify(children),\n ]\n .filter(Boolean)\n .join(\" \")\n );\n }\n\n /* eslint-disable no-restricted-properties */\n /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion*/\n const tooltipContainer = React.useMemo(\n () => target?.closest(`[${tooltipContainerAttr}]`) as HTMLDivElement,\n [target]\n );\n const strategy = React.useMemo(\n () => (target?.style.position === \"fixed\" ? \"fixed\" : \"absolute\"),\n [target]\n );\n /* eslint-enable @typescript-eslint/no-unnecessary-type-assertion*/\n /* eslint-enable no-restricted-properties */\n\n if (IS_DEV && target && !tooltipContainer) {\n throw new Error(\n \"Use TooltipContainer for Tooltip outside Panel (see docs)\"\n );\n }\n\n const arrowOffsetModiifer = React.useMemo<ArrowOffsetModifier>(() => {\n return {\n name: \"arrowOffset\",\n enabled: true,\n phase: \"main\",\n fn({ state }) {\n if (!state.modifiersData.arrow) {\n return;\n }\n if (isVerticalPlacement(state.placement)) {\n if (cornerAbsoluteOffset !== undefined) {\n state.modifiersData.arrow.x = cornerAbsoluteOffset;\n } else {\n if (state.modifiersData.arrow?.x !== undefined) {\n state.modifiersData.arrow.x += cornerOffset;\n }\n }\n } else {\n if (cornerAbsoluteOffset !== undefined) {\n state.modifiersData.arrow.y = cornerAbsoluteOffset;\n } else {\n if (state.modifiersData.arrow?.y !== undefined) {\n state.modifiersData.arrow.y += cornerOffset;\n }\n }\n }\n },\n };\n }, [cornerOffset, cornerAbsoluteOffset]);\n\n const placement = getPlacement(alignX, alignY);\n const { styles, attributes } = usePopper(target, tooltipRef, {\n strategy,\n placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [offsetX, offsetY],\n },\n },\n {\n name: \"arrow\",\n options: {\n element: tooltipArrowRef,\n padding: 14,\n },\n },\n {\n name: \"preventOverflow\",\n },\n {\n name: \"flip\",\n },\n arrowOffsetModiifer,\n ],\n });\n\n const { document } = useDOM();\n useGlobalEventListener(document, \"click\", isShown && onClose, {\n passive: true,\n });\n // NOTE: setting isShown to true used to trigger usePopper().forceUpdate()\n\n const childRef =\n React.isValidElement(children) &&\n (isDOMTypeElement(children) ? children.ref : children.props.getRootRef);\n const patchedRef = useExternRef(setTarget, childRef);\n const child = React.isValidElement(children)\n ? React.cloneElement(children, {\n [isDOMTypeElement(children) ? \"ref\" : \"getRootRef\"]: patchedRef,\n })\n : children;\n\n return (\n <React.Fragment>\n {child}\n {isShown &&\n target != null &&\n ReactDOM.createPortal(\n <SimpleTooltip\n {...restProps}\n ref={(el) => setTooltipRef(el)}\n arrowRef={(el) => setTooltipArrowRef(el)}\n style={{ arrow: styles.arrow, container: styles.popper }}\n attributes={{\n arrow: attributes.arrow ?? null,\n container: attributes.popper ?? null,\n }}\n />,\n tooltipContainer\n )}\n </React.Fragment>\n );\n};\n\nTooltip.defaultProps = {\n offsetX: 0,\n offsetY: 15,\n cornerOffset: 0,\n isShown: true,\n mode: \"accent\",\n};\n// eslint-disable-next-line import/no-default-export\nexport default Tooltip;\n"],"file":"Tooltip.js"}
@@ -0,0 +1,5 @@
1
+ import * as React from "react";
2
+ export declare const tooltipContainerAttr = "data-tooltip-container";
3
+ export declare const TooltipContainer: React.ForwardRefExoticComponent<React.HtmlHTMLAttributes<HTMLDivElement> & {
4
+ fixed?: boolean | undefined;
5
+ } & React.RefAttributes<HTMLDivElement>>;