@vkontakte/vkui 4.35.2 → 4.36.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (651) hide show
  1. package/.cache/.eslintcache +1 -1
  2. package/.cache/.stylelintcache +1 -1
  3. package/.cache/.tsbuildinfo +21609 -18312
  4. package/.cache/ts/src/components/ActionSheet/ActionSheetDefaultIosCloseItem.d.ts +3 -0
  5. package/.cache/ts/src/components/ActionSheetItem/ActionSheetItem.d.ts +5 -1
  6. package/.cache/ts/src/components/AdaptivityProvider/AdaptivityProvider.d.ts +4 -4
  7. package/.cache/ts/src/components/ButtonGroup/ButtonGroup.d.ts +6 -2
  8. package/.cache/ts/src/components/Chip/Chip.d.ts +12 -5
  9. package/.cache/ts/src/components/ChipsInput/ChipsInput.d.ts +5 -26
  10. package/.cache/ts/src/components/ChipsInputBase/ChipsInputBase.d.ts +17 -0
  11. package/.cache/ts/src/components/ChipsSelect/ChipsSelect.d.ts +4 -4
  12. package/.cache/ts/src/components/CustomSelect/CustomSelect.d.ts +1 -1
  13. package/.cache/ts/src/components/DateInput/DateInput.d.ts +4 -2
  14. package/.cache/ts/src/components/DateRangeInput/DateRangeInput.d.ts +4 -2
  15. package/.cache/ts/src/components/DropdownIcon/DropdownIcon.d.ts +4 -2
  16. package/.cache/ts/src/components/FormField/FormField.d.ts +2 -1
  17. package/.cache/ts/src/components/FormLayoutGroup/FormLayoutGroup.d.ts +5 -1
  18. package/.cache/ts/src/components/FormStatus/FormStatus.d.ts +1 -0
  19. package/.cache/ts/src/components/Input/Input.d.ts +1 -1
  20. package/.cache/ts/src/components/List/List.d.ts +2 -1
  21. package/.cache/ts/src/components/ModalPage/ModalPage.d.ts +13 -1
  22. package/.cache/ts/src/components/NativeSelect/NativeSelect.d.ts +3 -2
  23. package/.cache/ts/src/components/Select/Select.d.ts +1 -1
  24. package/.cache/ts/src/components/SelectMimicry/SelectMimicry.d.ts +2 -2
  25. package/.cache/ts/src/components/Textarea/Textarea.d.ts +3 -2
  26. package/.cache/ts/src/{components/ChipsInput → hooks}/useChipsInput.d.ts +4 -3
  27. package/{dist/cssm/components/ChipsSelect → .cache/ts/src/hooks}/useChipsSelect.d.ts +4 -4
  28. package/.cache/ts/src/index.d.ts +3 -0
  29. package/.cache/ts/src/tokenized/index.d.ts +56 -0
  30. package/README.md +3 -2
  31. package/dist/cjs/components/ActionSheet/ActionSheet.js +4 -4
  32. package/dist/cjs/components/ActionSheet/ActionSheet.js.map +1 -1
  33. package/dist/cjs/components/ActionSheet/ActionSheetDefaultIosCloseItem.js +24 -0
  34. package/dist/cjs/components/ActionSheet/ActionSheetDefaultIosCloseItem.js.map +1 -0
  35. package/dist/cjs/components/ActionSheet/ActionSheetDropdown.js +10 -8
  36. package/dist/cjs/components/ActionSheet/ActionSheetDropdown.js.map +1 -1
  37. package/dist/cjs/components/ActionSheet/ActionSheetDropdownDesktop.js +4 -5
  38. package/dist/cjs/components/ActionSheet/ActionSheetDropdownDesktop.js.map +1 -1
  39. package/dist/cjs/components/ActionSheetItem/ActionSheetItem.js +15 -39
  40. package/dist/cjs/components/ActionSheetItem/ActionSheetItem.js.map +1 -1
  41. package/dist/cjs/components/AdaptivityProvider/AdaptivityProvider.js +2 -3
  42. package/dist/cjs/components/AdaptivityProvider/AdaptivityProvider.js.map +1 -1
  43. package/dist/cjs/components/Alert/Alert.js +11 -12
  44. package/dist/cjs/components/Alert/Alert.js.map +1 -1
  45. package/dist/cjs/components/AppRoot/AppRoot.js +2 -5
  46. package/dist/cjs/components/AppRoot/AppRoot.js.map +1 -1
  47. package/dist/cjs/components/Avatar/Avatar.js +4 -17
  48. package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
  49. package/dist/cjs/components/Banner/Banner.js +41 -47
  50. package/dist/cjs/components/Banner/Banner.js.map +1 -1
  51. package/dist/cjs/components/ButtonGroup/ButtonGroup.js.map +1 -1
  52. package/dist/cjs/components/CalendarDay/CalendarDay.js +4 -21
  53. package/dist/cjs/components/CalendarDay/CalendarDay.js.map +1 -1
  54. package/dist/cjs/components/CardScroll/CardScroll.js +2 -5
  55. package/dist/cjs/components/CardScroll/CardScroll.js.map +1 -1
  56. package/dist/cjs/components/Chip/Chip.js.map +1 -1
  57. package/dist/cjs/components/ChipsInput/ChipsInput.js +15 -198
  58. package/dist/cjs/components/ChipsInput/ChipsInput.js.map +1 -1
  59. package/dist/cjs/components/ChipsInputBase/ChipsInputBase.js +215 -0
  60. package/dist/cjs/components/ChipsInputBase/ChipsInputBase.js.map +1 -0
  61. package/dist/cjs/components/ChipsSelect/ChipsSelect.js +44 -27
  62. package/dist/cjs/components/ChipsSelect/ChipsSelect.js.map +1 -1
  63. package/dist/cjs/components/CustomSelect/CustomSelect.js +32 -31
  64. package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
  65. package/dist/cjs/components/DateInput/DateInput.js +4 -2
  66. package/dist/cjs/components/DateInput/DateInput.js.map +1 -1
  67. package/dist/cjs/components/DateRangeInput/DateRangeInput.js +4 -2
  68. package/dist/cjs/components/DateRangeInput/DateRangeInput.js.map +1 -1
  69. package/dist/cjs/components/DropdownIcon/DropdownIcon.js +16 -7
  70. package/dist/cjs/components/DropdownIcon/DropdownIcon.js.map +1 -1
  71. package/dist/cjs/components/FormField/FormField.js +4 -2
  72. package/dist/cjs/components/FormField/FormField.js.map +1 -1
  73. package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js +12 -3
  74. package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
  75. package/dist/cjs/components/FormStatus/FormStatus.js +4 -6
  76. package/dist/cjs/components/FormStatus/FormStatus.js.map +1 -1
  77. package/dist/cjs/components/Header/Header.js +3 -11
  78. package/dist/cjs/components/Header/Header.js.map +1 -1
  79. package/dist/cjs/components/IconButton/IconButton.js +4 -3
  80. package/dist/cjs/components/IconButton/IconButton.js.map +1 -1
  81. package/dist/cjs/components/Input/Input.js +4 -2
  82. package/dist/cjs/components/Input/Input.js.map +1 -1
  83. package/dist/cjs/components/List/List.js.map +1 -1
  84. package/dist/cjs/components/ModalDismissButton/ModalDismissButton.js +1 -6
  85. package/dist/cjs/components/ModalDismissButton/ModalDismissButton.js.map +1 -1
  86. package/dist/cjs/components/ModalPage/ModalPage.js +11 -10
  87. package/dist/cjs/components/ModalPage/ModalPage.js.map +1 -1
  88. package/dist/cjs/components/ModalPageHeader/ModalPageHeader.js +3 -4
  89. package/dist/cjs/components/ModalPageHeader/ModalPageHeader.js.map +1 -1
  90. package/dist/cjs/components/ModalRoot/ModalRoot.js +4 -18
  91. package/dist/cjs/components/ModalRoot/ModalRoot.js.map +1 -1
  92. package/dist/cjs/components/ModalRoot/ModalRootDesktop.js +3 -11
  93. package/dist/cjs/components/ModalRoot/ModalRootDesktop.js.map +1 -1
  94. package/dist/cjs/components/NativeSelect/NativeSelect.js +4 -2
  95. package/dist/cjs/components/NativeSelect/NativeSelect.js.map +1 -1
  96. package/dist/cjs/components/Panel/Panel.js +4 -10
  97. package/dist/cjs/components/Panel/Panel.js.map +1 -1
  98. package/dist/cjs/components/PanelHeader/PanelHeader.js +2 -11
  99. package/dist/cjs/components/PanelHeader/PanelHeader.js.map +1 -1
  100. package/dist/cjs/components/PanelHeaderBack/PanelHeaderBack.js +2 -7
  101. package/dist/cjs/components/PanelHeaderBack/PanelHeaderBack.js.map +1 -1
  102. package/dist/cjs/components/PanelHeaderButton/PanelHeaderButton.js +2 -7
  103. package/dist/cjs/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
  104. package/dist/cjs/components/PanelHeaderClose/PanelHeaderClose.js +1 -1
  105. package/dist/cjs/components/PanelHeaderClose/PanelHeaderClose.js.map +1 -1
  106. package/dist/cjs/components/PanelHeaderContent/PanelHeaderContent.js +5 -4
  107. package/dist/cjs/components/PanelHeaderContent/PanelHeaderContent.js.map +1 -1
  108. package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.js +4 -8
  109. package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.js.map +1 -1
  110. package/dist/cjs/components/PanelHeaderEdit/PanelHeaderEdit.js +1 -1
  111. package/dist/cjs/components/PanelHeaderEdit/PanelHeaderEdit.js.map +1 -1
  112. package/dist/cjs/components/PanelHeaderSubmit/PanelHeaderSubmit.js +1 -1
  113. package/dist/cjs/components/PanelHeaderSubmit/PanelHeaderSubmit.js.map +1 -1
  114. package/dist/cjs/components/PromoBanner/PromoBanner.js +1 -6
  115. package/dist/cjs/components/PromoBanner/PromoBanner.js.map +1 -1
  116. package/dist/cjs/components/Search/Search.js +7 -9
  117. package/dist/cjs/components/Search/Search.js.map +1 -1
  118. package/dist/cjs/components/SelectMimicry/SelectMimicry.js +4 -2
  119. package/dist/cjs/components/SelectMimicry/SelectMimicry.js.map +1 -1
  120. package/dist/cjs/components/SliderSwitch/SliderSwitch.js +2 -5
  121. package/dist/cjs/components/SliderSwitch/SliderSwitch.js.map +1 -1
  122. package/dist/cjs/components/SliderSwitch/SliderSwitchButton.js +2 -7
  123. package/dist/cjs/components/SliderSwitch/SliderSwitchButton.js.map +1 -1
  124. package/dist/cjs/components/SubnavigationBar/SubnavigationBar.js +1 -6
  125. package/dist/cjs/components/SubnavigationBar/SubnavigationBar.js.map +1 -1
  126. package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js +2 -5
  127. package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js.map +1 -1
  128. package/dist/cjs/components/Tappable/Tappable.js +8 -16
  129. package/dist/cjs/components/Tappable/Tappable.js.map +1 -1
  130. package/dist/cjs/components/Textarea/Textarea.js +4 -2
  131. package/dist/cjs/components/Textarea/Textarea.js.map +1 -1
  132. package/dist/cjs/components/UsersStack/UsersStack.js +71 -34
  133. package/dist/cjs/components/UsersStack/UsersStack.js.map +1 -1
  134. package/dist/cjs/components/View/View.js +2 -7
  135. package/dist/cjs/components/View/View.js.map +1 -1
  136. package/dist/cjs/components/View/ViewInfinite.js +1 -10
  137. package/dist/cjs/components/View/ViewInfinite.js.map +1 -1
  138. package/dist/cjs/{components/ChipsInput → hooks}/useChipsInput.js +0 -0
  139. package/dist/cjs/hooks/useChipsInput.js.map +1 -0
  140. package/dist/cjs/{components/ChipsSelect → hooks}/useChipsSelect.js +1 -1
  141. package/dist/cjs/hooks/useChipsSelect.js.map +1 -0
  142. package/dist/cjs/index.js +8 -0
  143. package/dist/cjs/index.js.map +1 -1
  144. package/dist/cjs/lib/animate.js +2 -2
  145. package/dist/cjs/lib/animate.js.map +1 -1
  146. package/dist/cjs/lib/platform.js +9 -4
  147. package/dist/cjs/lib/platform.js.map +1 -1
  148. package/dist/cjs/lib/testing.js +2 -2
  149. package/dist/cjs/lib/testing.js.map +1 -1
  150. package/dist/cjs/lib/touch.js +2 -2
  151. package/dist/cjs/lib/touch.js.map +1 -1
  152. package/dist/cjs/tokenized/index.js +232 -0
  153. package/dist/cjs/tokenized/index.js.map +1 -1
  154. package/dist/components/ActionSheet/ActionSheet.js +4 -4
  155. package/dist/components/ActionSheet/ActionSheet.js.map +1 -1
  156. package/dist/components/ActionSheet/ActionSheetDefaultIosCloseItem.d.ts +3 -0
  157. package/dist/components/ActionSheet/ActionSheetDefaultIosCloseItem.js +10 -0
  158. package/dist/components/ActionSheet/ActionSheetDefaultIosCloseItem.js.map +1 -0
  159. package/dist/components/ActionSheet/ActionSheetDropdown.js +7 -7
  160. package/dist/components/ActionSheet/ActionSheetDropdown.js.map +1 -1
  161. package/dist/components/ActionSheet/ActionSheetDropdownDesktop.js +3 -4
  162. package/dist/components/ActionSheet/ActionSheetDropdownDesktop.js.map +1 -1
  163. package/dist/components/ActionSheetItem/ActionSheetItem.d.ts +5 -1
  164. package/dist/components/ActionSheetItem/ActionSheetItem.js +16 -36
  165. package/dist/components/ActionSheetItem/ActionSheetItem.js.map +1 -1
  166. package/dist/components/AdaptivityProvider/AdaptivityProvider.d.ts +4 -4
  167. package/dist/components/AdaptivityProvider/AdaptivityProvider.js +2 -4
  168. package/dist/components/AdaptivityProvider/AdaptivityProvider.js.map +1 -1
  169. package/dist/components/Alert/Alert.js +12 -12
  170. package/dist/components/Alert/Alert.js.map +1 -1
  171. package/dist/components/AppRoot/AppRoot.js +2 -5
  172. package/dist/components/AppRoot/AppRoot.js.map +1 -1
  173. package/dist/components/Avatar/Avatar.js +4 -17
  174. package/dist/components/Avatar/Avatar.js.map +1 -1
  175. package/dist/components/Banner/Banner.js +41 -48
  176. package/dist/components/Banner/Banner.js.map +1 -1
  177. package/dist/components/ButtonGroup/ButtonGroup.d.ts +6 -2
  178. package/dist/components/ButtonGroup/ButtonGroup.js.map +1 -1
  179. package/dist/components/CalendarDay/CalendarDay.js +4 -21
  180. package/dist/components/CalendarDay/CalendarDay.js.map +1 -1
  181. package/dist/components/CardScroll/CardScroll.js +1 -3
  182. package/dist/components/CardScroll/CardScroll.js.map +1 -1
  183. package/dist/components/Chip/Chip.d.ts +12 -5
  184. package/dist/components/Chip/Chip.js.map +1 -1
  185. package/dist/components/ChipsInput/ChipsInput.d.ts +5 -26
  186. package/dist/components/ChipsInput/ChipsInput.js +14 -183
  187. package/dist/components/ChipsInput/ChipsInput.js.map +1 -1
  188. package/dist/components/ChipsInputBase/ChipsInputBase.d.ts +17 -0
  189. package/dist/components/ChipsInputBase/ChipsInputBase.js +188 -0
  190. package/dist/components/ChipsInputBase/ChipsInputBase.js.map +1 -0
  191. package/dist/components/ChipsSelect/ChipsSelect.d.ts +4 -4
  192. package/dist/components/ChipsSelect/ChipsSelect.js +42 -26
  193. package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
  194. package/dist/components/CustomSelect/CustomSelect.d.ts +1 -1
  195. package/dist/components/CustomSelect/CustomSelect.js +32 -31
  196. package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
  197. package/dist/components/DateInput/DateInput.d.ts +4 -2
  198. package/dist/components/DateInput/DateInput.js +4 -2
  199. package/dist/components/DateInput/DateInput.js.map +1 -1
  200. package/dist/components/DateRangeInput/DateRangeInput.d.ts +4 -2
  201. package/dist/components/DateRangeInput/DateRangeInput.js +4 -2
  202. package/dist/components/DateRangeInput/DateRangeInput.js.map +1 -1
  203. package/dist/components/DropdownIcon/DropdownIcon.d.ts +4 -2
  204. package/dist/components/DropdownIcon/DropdownIcon.js +15 -7
  205. package/dist/components/DropdownIcon/DropdownIcon.js.map +1 -1
  206. package/dist/components/FormField/FormField.d.ts +2 -1
  207. package/dist/components/FormField/FormField.js +4 -2
  208. package/dist/components/FormField/FormField.js.map +1 -1
  209. package/dist/components/FormLayoutGroup/FormLayoutGroup.d.ts +5 -1
  210. package/dist/components/FormLayoutGroup/FormLayoutGroup.js +9 -3
  211. package/dist/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
  212. package/dist/components/FormStatus/FormStatus.d.ts +1 -0
  213. package/dist/components/FormStatus/FormStatus.js +4 -4
  214. package/dist/components/FormStatus/FormStatus.js.map +1 -1
  215. package/dist/components/Header/Header.js +3 -10
  216. package/dist/components/Header/Header.js.map +1 -1
  217. package/dist/components/IconButton/IconButton.js +4 -3
  218. package/dist/components/IconButton/IconButton.js.map +1 -1
  219. package/dist/components/Input/Input.d.ts +1 -1
  220. package/dist/components/Input/Input.js +4 -2
  221. package/dist/components/Input/Input.js.map +1 -1
  222. package/dist/components/List/List.d.ts +2 -1
  223. package/dist/components/List/List.js.map +1 -1
  224. package/dist/components/ModalDismissButton/ModalDismissButton.js +1 -4
  225. package/dist/components/ModalDismissButton/ModalDismissButton.js.map +1 -1
  226. package/dist/components/ModalPage/ModalPage.d.ts +13 -1
  227. package/dist/components/ModalPage/ModalPage.js +12 -10
  228. package/dist/components/ModalPage/ModalPage.js.map +1 -1
  229. package/dist/components/ModalPageHeader/ModalPageHeader.js +3 -3
  230. package/dist/components/ModalPageHeader/ModalPageHeader.js.map +1 -1
  231. package/dist/components/ModalRoot/ModalRoot.js +4 -18
  232. package/dist/components/ModalRoot/ModalRoot.js.map +1 -1
  233. package/dist/components/ModalRoot/ModalRootDesktop.js +3 -11
  234. package/dist/components/ModalRoot/ModalRootDesktop.js.map +1 -1
  235. package/dist/components/NativeSelect/NativeSelect.d.ts +3 -2
  236. package/dist/components/NativeSelect/NativeSelect.js +4 -2
  237. package/dist/components/NativeSelect/NativeSelect.js.map +1 -1
  238. package/dist/components/Panel/Panel.js +4 -8
  239. package/dist/components/Panel/Panel.js.map +1 -1
  240. package/dist/components/PanelHeader/PanelHeader.js +2 -11
  241. package/dist/components/PanelHeader/PanelHeader.js.map +1 -1
  242. package/dist/components/PanelHeaderBack/PanelHeaderBack.js +2 -6
  243. package/dist/components/PanelHeaderBack/PanelHeaderBack.js.map +1 -1
  244. package/dist/components/PanelHeaderButton/PanelHeaderButton.js +2 -7
  245. package/dist/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
  246. package/dist/components/PanelHeaderClose/PanelHeaderClose.js +2 -2
  247. package/dist/components/PanelHeaderClose/PanelHeaderClose.js.map +1 -1
  248. package/dist/components/PanelHeaderContent/PanelHeaderContent.js +5 -5
  249. package/dist/components/PanelHeaderContent/PanelHeaderContent.js.map +1 -1
  250. package/dist/components/PanelHeaderContext/PanelHeaderContext.js +3 -7
  251. package/dist/components/PanelHeaderContext/PanelHeaderContext.js.map +1 -1
  252. package/dist/components/PanelHeaderEdit/PanelHeaderEdit.js +2 -2
  253. package/dist/components/PanelHeaderEdit/PanelHeaderEdit.js.map +1 -1
  254. package/dist/components/PanelHeaderSubmit/PanelHeaderSubmit.js +2 -2
  255. package/dist/components/PanelHeaderSubmit/PanelHeaderSubmit.js.map +1 -1
  256. package/dist/components/PromoBanner/PromoBanner.js +1 -4
  257. package/dist/components/PromoBanner/PromoBanner.js.map +1 -1
  258. package/dist/components/Search/Search.js +6 -8
  259. package/dist/components/Search/Search.js.map +1 -1
  260. package/dist/components/Select/Select.d.ts +1 -1
  261. package/dist/components/SelectMimicry/SelectMimicry.d.ts +2 -2
  262. package/dist/components/SelectMimicry/SelectMimicry.js +4 -2
  263. package/dist/components/SelectMimicry/SelectMimicry.js.map +1 -1
  264. package/dist/components/SimpleCell/SimpleCell.d.ts +1 -1
  265. package/dist/components/SliderSwitch/SliderSwitch.js +1 -4
  266. package/dist/components/SliderSwitch/SliderSwitch.js.map +1 -1
  267. package/dist/components/SliderSwitch/SliderSwitchButton.js +1 -5
  268. package/dist/components/SliderSwitch/SliderSwitchButton.js.map +1 -1
  269. package/dist/components/SubnavigationBar/SubnavigationBar.js +1 -4
  270. package/dist/components/SubnavigationBar/SubnavigationBar.js.map +1 -1
  271. package/dist/components/SubnavigationButton/SubnavigationButton.js +2 -5
  272. package/dist/components/SubnavigationButton/SubnavigationButton.js.map +1 -1
  273. package/dist/components/Tappable/Tappable.js +3 -10
  274. package/dist/components/Tappable/Tappable.js.map +1 -1
  275. package/dist/components/Textarea/Textarea.d.ts +3 -2
  276. package/dist/components/Textarea/Textarea.js +4 -2
  277. package/dist/components/Textarea/Textarea.js.map +1 -1
  278. package/dist/components/UsersStack/UsersStack.js +69 -28
  279. package/dist/components/UsersStack/UsersStack.js.map +1 -1
  280. package/dist/components/View/View.js +2 -7
  281. package/dist/components/View/View.js.map +1 -1
  282. package/dist/components/View/ViewInfinite.js +1 -10
  283. package/dist/components/View/ViewInfinite.js.map +1 -1
  284. package/dist/components.css +93 -15
  285. package/dist/components.css.map +1 -1
  286. package/dist/cssm/components/ActionSheet/ActionSheet.css +3 -1
  287. package/dist/cssm/components/ActionSheet/ActionSheet.js +4 -4
  288. package/dist/cssm/components/ActionSheet/ActionSheet.js.map +1 -1
  289. package/dist/cssm/components/ActionSheet/ActionSheetDefaultIosCloseItem.d.ts +3 -0
  290. package/dist/cssm/components/ActionSheet/ActionSheetDefaultIosCloseItem.js +10 -0
  291. package/dist/cssm/components/ActionSheet/ActionSheetDefaultIosCloseItem.js.map +1 -0
  292. package/dist/cssm/components/ActionSheet/ActionSheetDropdown.js +7 -7
  293. package/dist/cssm/components/ActionSheet/ActionSheetDropdown.js.map +1 -1
  294. package/dist/cssm/components/ActionSheet/ActionSheetDropdownDesktop.js +3 -4
  295. package/dist/cssm/components/ActionSheet/ActionSheetDropdownDesktop.js.map +1 -1
  296. package/dist/cssm/components/ActionSheetItem/ActionSheetItem.css +7 -1
  297. package/dist/cssm/components/ActionSheetItem/ActionSheetItem.d.ts +5 -1
  298. package/dist/cssm/components/ActionSheetItem/ActionSheetItem.js +16 -36
  299. package/dist/cssm/components/ActionSheetItem/ActionSheetItem.js.map +1 -1
  300. package/dist/cssm/components/AdaptivityProvider/AdaptivityProvider.d.ts +4 -4
  301. package/dist/cssm/components/AdaptivityProvider/AdaptivityProvider.js +2 -4
  302. package/dist/cssm/components/AdaptivityProvider/AdaptivityProvider.js.map +1 -1
  303. package/dist/cssm/components/Alert/Alert.css +7 -1
  304. package/dist/cssm/components/Alert/Alert.js +12 -12
  305. package/dist/cssm/components/Alert/Alert.js.map +1 -1
  306. package/dist/cssm/components/AppRoot/AppRoot.css +1 -1
  307. package/dist/cssm/components/AppRoot/AppRoot.js +2 -5
  308. package/dist/cssm/components/AppRoot/AppRoot.js.map +1 -1
  309. package/dist/cssm/components/Avatar/Avatar.js +4 -17
  310. package/dist/cssm/components/Avatar/Avatar.js.map +1 -1
  311. package/dist/cssm/components/Banner/Banner.js +41 -48
  312. package/dist/cssm/components/Banner/Banner.js.map +1 -1
  313. package/dist/cssm/components/ButtonGroup/ButtonGroup.d.ts +6 -2
  314. package/dist/cssm/components/ButtonGroup/ButtonGroup.js.map +1 -1
  315. package/dist/cssm/components/CalendarDay/CalendarDay.js +4 -21
  316. package/dist/cssm/components/CalendarDay/CalendarDay.js.map +1 -1
  317. package/dist/cssm/components/CardScroll/CardScroll.js +1 -3
  318. package/dist/cssm/components/CardScroll/CardScroll.js.map +1 -1
  319. package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.css +1 -1
  320. package/dist/cssm/components/Cell/CellDragger/CellDragger.css +1 -1
  321. package/dist/cssm/components/Chip/Chip.css +1 -1
  322. package/dist/cssm/components/Chip/Chip.d.ts +12 -5
  323. package/dist/cssm/components/Chip/Chip.js.map +1 -1
  324. package/dist/cssm/components/ChipsInput/ChipsInput.css +1 -1
  325. package/dist/cssm/components/ChipsInput/ChipsInput.d.ts +5 -26
  326. package/dist/cssm/components/ChipsInput/ChipsInput.js +14 -183
  327. package/dist/cssm/components/ChipsInput/ChipsInput.js.map +1 -1
  328. package/dist/cssm/components/ChipsInputBase/ChipsInputBase.css +1 -0
  329. package/dist/cssm/components/ChipsInputBase/ChipsInputBase.d.ts +17 -0
  330. package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js +189 -0
  331. package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js.map +1 -0
  332. package/dist/cssm/components/ChipsSelect/ChipsSelect.css +1 -1
  333. package/dist/cssm/components/ChipsSelect/ChipsSelect.d.ts +4 -4
  334. package/dist/cssm/components/ChipsSelect/ChipsSelect.js +42 -26
  335. package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
  336. package/dist/cssm/components/CustomSelect/CustomSelect.css +1 -1
  337. package/dist/cssm/components/CustomSelect/CustomSelect.d.ts +1 -1
  338. package/dist/cssm/components/CustomSelect/CustomSelect.js +32 -31
  339. package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
  340. package/dist/cssm/components/DateInput/DateInput.css +1 -1
  341. package/dist/cssm/components/DateInput/DateInput.d.ts +4 -2
  342. package/dist/cssm/components/DateInput/DateInput.js +4 -2
  343. package/dist/cssm/components/DateInput/DateInput.js.map +1 -1
  344. package/dist/cssm/components/DateRangeInput/DateRangeInput.css +1 -1
  345. package/dist/cssm/components/DateRangeInput/DateRangeInput.d.ts +4 -2
  346. package/dist/cssm/components/DateRangeInput/DateRangeInput.js +4 -2
  347. package/dist/cssm/components/DateRangeInput/DateRangeInput.js.map +1 -1
  348. package/dist/cssm/components/DropdownIcon/DropdownIcon.d.ts +4 -2
  349. package/dist/cssm/components/DropdownIcon/DropdownIcon.js +15 -8
  350. package/dist/cssm/components/DropdownIcon/DropdownIcon.js.map +1 -1
  351. package/dist/cssm/components/FormField/FormField.css +4 -4
  352. package/dist/cssm/components/FormField/FormField.d.ts +2 -1
  353. package/dist/cssm/components/FormField/FormField.js +4 -2
  354. package/dist/cssm/components/FormField/FormField.js.map +1 -1
  355. package/dist/cssm/components/FormItem/FormItem.css +1 -1
  356. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.css +1 -1
  357. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.d.ts +5 -1
  358. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js +9 -3
  359. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
  360. package/dist/cssm/components/FormStatus/FormStatus.css +3 -1
  361. package/dist/cssm/components/FormStatus/FormStatus.d.ts +1 -0
  362. package/dist/cssm/components/FormStatus/FormStatus.js +4 -4
  363. package/dist/cssm/components/FormStatus/FormStatus.js.map +1 -1
  364. package/dist/cssm/components/Header/Header.css +1 -1
  365. package/dist/cssm/components/Header/Header.js +3 -10
  366. package/dist/cssm/components/Header/Header.js.map +1 -1
  367. package/dist/cssm/components/IconButton/IconButton.js +4 -3
  368. package/dist/cssm/components/IconButton/IconButton.js.map +1 -1
  369. package/dist/cssm/components/Input/Input.css +1 -1
  370. package/dist/cssm/components/Input/Input.d.ts +1 -1
  371. package/dist/cssm/components/Input/Input.js +4 -2
  372. package/dist/cssm/components/Input/Input.js.map +1 -1
  373. package/dist/cssm/components/Link/Link.css +1 -1
  374. package/dist/cssm/components/List/List.d.ts +2 -1
  375. package/dist/cssm/components/List/List.js +1 -1
  376. package/dist/cssm/components/List/List.js.map +1 -1
  377. package/dist/cssm/components/ModalDismissButton/ModalDismissButton.css +1 -1
  378. package/dist/cssm/components/ModalDismissButton/ModalDismissButton.js +1 -4
  379. package/dist/cssm/components/ModalDismissButton/ModalDismissButton.js.map +1 -1
  380. package/dist/cssm/components/ModalPage/ModalPage.css +5 -1
  381. package/dist/cssm/components/ModalPage/ModalPage.d.ts +13 -1
  382. package/dist/cssm/components/ModalPage/ModalPage.js +12 -10
  383. package/dist/cssm/components/ModalPage/ModalPage.js.map +1 -1
  384. package/dist/cssm/components/ModalPageHeader/ModalPageHeader.css +1 -1
  385. package/dist/cssm/components/ModalPageHeader/ModalPageHeader.js +3 -3
  386. package/dist/cssm/components/ModalPageHeader/ModalPageHeader.js.map +1 -1
  387. package/dist/cssm/components/ModalRoot/ModalRoot.js +4 -18
  388. package/dist/cssm/components/ModalRoot/ModalRoot.js.map +1 -1
  389. package/dist/cssm/components/ModalRoot/ModalRootDesktop.js +3 -11
  390. package/dist/cssm/components/ModalRoot/ModalRootDesktop.js.map +1 -1
  391. package/dist/cssm/components/NativeSelect/NativeSelect.d.ts +3 -2
  392. package/dist/cssm/components/NativeSelect/NativeSelect.js +4 -2
  393. package/dist/cssm/components/NativeSelect/NativeSelect.js.map +1 -1
  394. package/dist/cssm/components/Panel/Panel.css +19 -1
  395. package/dist/cssm/components/Panel/Panel.js +4 -8
  396. package/dist/cssm/components/Panel/Panel.js.map +1 -1
  397. package/dist/cssm/components/PanelHeader/PanelHeader.css +9 -1
  398. package/dist/cssm/components/PanelHeader/PanelHeader.js +2 -11
  399. package/dist/cssm/components/PanelHeader/PanelHeader.js.map +1 -1
  400. package/dist/cssm/components/PanelHeaderBack/PanelHeaderBack.js +2 -6
  401. package/dist/cssm/components/PanelHeaderBack/PanelHeaderBack.js.map +1 -1
  402. package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.css +1 -1
  403. package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js +2 -7
  404. package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
  405. package/dist/cssm/components/PanelHeaderClose/PanelHeaderClose.js +2 -2
  406. package/dist/cssm/components/PanelHeaderClose/PanelHeaderClose.js.map +1 -1
  407. package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.css +5 -1
  408. package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.js +5 -5
  409. package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.js.map +1 -1
  410. package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.css +1 -1
  411. package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.js +3 -7
  412. package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.js.map +1 -1
  413. package/dist/cssm/components/PanelHeaderEdit/PanelHeaderEdit.js +2 -2
  414. package/dist/cssm/components/PanelHeaderEdit/PanelHeaderEdit.js.map +1 -1
  415. package/dist/cssm/components/PanelHeaderSubmit/PanelHeaderSubmit.js +2 -2
  416. package/dist/cssm/components/PanelHeaderSubmit/PanelHeaderSubmit.js.map +1 -1
  417. package/dist/cssm/components/PromoBanner/PromoBanner.css +3 -1
  418. package/dist/cssm/components/PromoBanner/PromoBanner.js +1 -4
  419. package/dist/cssm/components/PromoBanner/PromoBanner.js.map +1 -1
  420. package/dist/cssm/components/Search/Search.css +27 -1
  421. package/dist/cssm/components/Search/Search.js +6 -8
  422. package/dist/cssm/components/Search/Search.js.map +1 -1
  423. package/dist/cssm/components/Select/Select.css +1 -1
  424. package/dist/cssm/components/Select/Select.d.ts +1 -1
  425. package/dist/cssm/components/SelectMimicry/SelectMimicry.d.ts +2 -2
  426. package/dist/cssm/components/SelectMimicry/SelectMimicry.js +4 -2
  427. package/dist/cssm/components/SelectMimicry/SelectMimicry.js.map +1 -1
  428. package/dist/cssm/components/SimpleCell/SimpleCell.d.ts +1 -1
  429. package/dist/cssm/components/SliderSwitch/SliderSwitch.js +1 -4
  430. package/dist/cssm/components/SliderSwitch/SliderSwitch.js.map +1 -1
  431. package/dist/cssm/components/SliderSwitch/SliderSwitchButton.js +1 -5
  432. package/dist/cssm/components/SliderSwitch/SliderSwitchButton.js.map +1 -1
  433. package/dist/cssm/components/Spacing/Spacing.css +1 -1
  434. package/dist/cssm/components/SubnavigationBar/SubnavigationBar.css +1 -1
  435. package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js +1 -4
  436. package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js.map +1 -1
  437. package/dist/cssm/components/SubnavigationButton/SubnavigationButton.css +1 -1
  438. package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js +2 -5
  439. package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js.map +1 -1
  440. package/dist/cssm/components/TabsItem/TabsItem.css +1 -1
  441. package/dist/cssm/components/Tappable/Tappable.js +3 -10
  442. package/dist/cssm/components/Tappable/Tappable.js.map +1 -1
  443. package/dist/cssm/components/Textarea/Textarea.css +1 -1
  444. package/dist/cssm/components/Textarea/Textarea.d.ts +3 -2
  445. package/dist/cssm/components/Textarea/Textarea.js +4 -2
  446. package/dist/cssm/components/Textarea/Textarea.js.map +1 -1
  447. package/dist/cssm/components/Typography/Headline/Headline.css +1 -1
  448. package/dist/cssm/components/Typography/Text/Text.css +1 -1
  449. package/dist/cssm/components/UsersStack/UsersStack.css +1 -1
  450. package/dist/cssm/components/UsersStack/UsersStack.js +69 -28
  451. package/dist/cssm/components/UsersStack/UsersStack.js.map +1 -1
  452. package/dist/cssm/components/View/View.js +2 -7
  453. package/dist/cssm/components/View/View.js.map +1 -1
  454. package/dist/cssm/components/View/ViewInfinite.js +1 -10
  455. package/dist/cssm/components/View/ViewInfinite.js.map +1 -1
  456. package/dist/cssm/{components/ChipsInput → hooks}/useChipsInput.d.ts +4 -3
  457. package/dist/{components/ChipsInput → cssm/hooks}/useChipsInput.js +0 -0
  458. package/dist/cssm/hooks/useChipsInput.js.map +1 -0
  459. package/{.cache/ts/src/components/ChipsSelect → dist/cssm/hooks}/useChipsSelect.d.ts +4 -4
  460. package/dist/{components/ChipsSelect → cssm/hooks}/useChipsSelect.js +1 -1
  461. package/dist/cssm/hooks/useChipsSelect.js.map +1 -0
  462. package/dist/cssm/index.d.ts +3 -0
  463. package/dist/cssm/index.js +1 -0
  464. package/dist/cssm/index.js.map +1 -1
  465. package/dist/cssm/lib/animate.js +1 -1
  466. package/dist/cssm/lib/animate.js.map +1 -1
  467. package/dist/cssm/lib/platform.js +8 -3
  468. package/dist/cssm/lib/platform.js.map +1 -1
  469. package/dist/cssm/lib/testing.js +1 -1
  470. package/dist/cssm/lib/testing.js.map +1 -1
  471. package/dist/cssm/lib/touch.js +1 -1
  472. package/dist/cssm/lib/touch.js.map +1 -1
  473. package/dist/cssm/styles/components.css +93 -15
  474. package/dist/cssm/styles/themes.css +1 -1
  475. package/dist/cssm/styles/unstable.css +1 -1
  476. package/dist/cssm/tokenized/index.d.ts +56 -0
  477. package/dist/cssm/tokenized/index.js +29 -0
  478. package/dist/cssm/tokenized/index.js.map +1 -1
  479. package/dist/{components/ChipsInput → hooks}/useChipsInput.d.ts +4 -3
  480. package/dist/{cssm/components/ChipsInput → hooks}/useChipsInput.js +0 -0
  481. package/dist/hooks/useChipsInput.js.map +1 -0
  482. package/dist/{components/ChipsSelect → hooks}/useChipsSelect.d.ts +4 -4
  483. package/dist/{cssm/components/ChipsSelect → hooks}/useChipsSelect.js +1 -1
  484. package/dist/hooks/useChipsSelect.js.map +1 -0
  485. package/dist/index.d.ts +3 -0
  486. package/dist/index.js +1 -0
  487. package/dist/index.js.map +1 -1
  488. package/dist/lib/animate.js +1 -1
  489. package/dist/lib/animate.js.map +1 -1
  490. package/dist/lib/platform.js +8 -3
  491. package/dist/lib/platform.js.map +1 -1
  492. package/dist/lib/testing.js +1 -1
  493. package/dist/lib/testing.js.map +1 -1
  494. package/dist/lib/touch.js +1 -1
  495. package/dist/lib/touch.js.map +1 -1
  496. package/dist/tokenized/index.d.ts +56 -0
  497. package/dist/tokenized/index.js +29 -0
  498. package/dist/tokenized/index.js.map +1 -1
  499. package/dist/unstable.css +1 -1
  500. package/dist/unstable.css.map +1 -1
  501. package/dist/vkui.css +94 -16
  502. package/dist/vkui.css.map +1 -1
  503. package/package.json +9 -9
  504. package/src/components/ActionSheet/ActionSheet.css +31 -59
  505. package/src/components/ActionSheet/ActionSheet.tsx +4 -7
  506. package/src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx +12 -0
  507. package/src/components/ActionSheet/ActionSheetDropdown.tsx +9 -6
  508. package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx +4 -4
  509. package/src/components/ActionSheet/Readme.md +6 -30
  510. package/src/components/ActionSheetItem/ActionSheetItem.css +67 -120
  511. package/src/components/ActionSheetItem/ActionSheetItem.tsx +42 -71
  512. package/src/components/AdaptivityProvider/AdaptivityProvider.tsx +5 -5
  513. package/src/components/Alert/Alert.css +79 -79
  514. package/src/components/Alert/Alert.tsx +14 -14
  515. package/src/components/Alert/Readme.md +83 -104
  516. package/src/components/AppRoot/AppRoot.css +2 -1
  517. package/src/components/AppRoot/AppRoot.tsx +1 -4
  518. package/src/components/Avatar/Avatar.tsx +15 -17
  519. package/src/components/Avatar/Readme.md +3 -3
  520. package/src/components/Banner/Banner.tsx +58 -63
  521. package/src/components/ButtonGroup/ButtonGroup.tsx +6 -3
  522. package/src/components/ButtonGroup/Readme.md +13 -11
  523. package/src/components/Calendar/Readme.md +3 -0
  524. package/src/components/CalendarDay/CalendarDay.tsx +21 -20
  525. package/src/components/CalendarRange/Readme.md +3 -0
  526. package/src/components/CardScroll/CardScroll.tsx +1 -2
  527. package/src/components/Cell/CellCheckbox/CellCheckbox.css +2 -2
  528. package/src/components/Cell/CellDragger/CellDragger.css +1 -1
  529. package/src/components/Chip/Chip.css +1 -0
  530. package/src/components/Chip/Chip.tsx +14 -2
  531. package/src/components/ChipsInput/ChipsInput.css +0 -71
  532. package/src/components/ChipsInput/ChipsInput.tsx +20 -220
  533. package/src/components/ChipsInputBase/ChipsInputBase.css +73 -0
  534. package/src/components/ChipsInputBase/ChipsInputBase.tsx +206 -0
  535. package/src/components/ChipsSelect/ChipsSelect.css +8 -0
  536. package/src/components/ChipsSelect/ChipsSelect.tsx +47 -39
  537. package/src/components/CustomSelect/CustomSelect.css +1 -0
  538. package/src/components/CustomSelect/CustomSelect.tsx +2 -3
  539. package/src/components/CustomSelect/Readme.md +8 -2
  540. package/src/components/DateInput/DateInput.css +1 -1
  541. package/src/components/DateInput/DateInput.tsx +6 -3
  542. package/src/components/DateInput/Readme.md +13 -0
  543. package/src/components/DateRangeInput/DateRangeInput.css +1 -1
  544. package/src/components/DateRangeInput/DateRangeInput.tsx +6 -3
  545. package/src/components/DateRangeInput/Readme.md +13 -0
  546. package/src/components/DropdownIcon/DropdownIcon.tsx +22 -8
  547. package/src/components/Epic/Readme.md +10 -5
  548. package/src/components/FormField/FormField.css +58 -6
  549. package/src/components/FormField/FormField.tsx +3 -0
  550. package/src/components/FormItem/FormItem.css +5 -3
  551. package/src/components/FormLayoutGroup/FormLayoutGroup.css +35 -0
  552. package/src/components/FormLayoutGroup/FormLayoutGroup.tsx +13 -2
  553. package/src/components/FormLayoutGroup/Readme.md +58 -48
  554. package/src/components/FormStatus/FormStatus.css +8 -5
  555. package/src/components/FormStatus/FormStatus.tsx +4 -8
  556. package/src/components/FormStatus/Readme.md +4 -0
  557. package/src/components/Gallery/Readme.md +64 -18
  558. package/src/components/Header/Header.css +8 -12
  559. package/src/components/Header/Header.tsx +9 -8
  560. package/src/components/HorizontalCell/Readme.md +1 -1
  561. package/src/components/IconButton/IconButton.tsx +2 -2
  562. package/src/components/Input/Input.css +1 -1
  563. package/src/components/Input/Input.tsx +2 -0
  564. package/src/components/Link/Link.css +2 -1
  565. package/src/components/List/List.tsx +3 -4
  566. package/src/components/ModalDismissButton/ModalDismissButton.css +6 -6
  567. package/src/components/ModalDismissButton/ModalDismissButton.tsx +1 -5
  568. package/src/components/ModalDismissButton/Readme.md +1 -1
  569. package/src/components/ModalPage/ModalPage.css +69 -63
  570. package/src/components/ModalPage/ModalPage.tsx +24 -11
  571. package/src/components/ModalPageHeader/ModalPageHeader.css +9 -12
  572. package/src/components/ModalPageHeader/ModalPageHeader.tsx +3 -2
  573. package/src/components/ModalRoot/ModalRoot.tsx +24 -24
  574. package/src/components/ModalRoot/ModalRootDesktop.tsx +12 -14
  575. package/src/components/ModalRoot/Readme.md +8 -3
  576. package/src/components/NativeSelect/NativeSelect.tsx +5 -2
  577. package/src/components/Panel/Panel.css +52 -24
  578. package/src/components/Panel/Panel.tsx +7 -9
  579. package/src/components/PanelHeader/PanelHeader.css +28 -21
  580. package/src/components/PanelHeader/PanelHeader.tsx +11 -12
  581. package/src/components/PanelHeaderBack/PanelHeaderBack.tsx +6 -5
  582. package/src/components/PanelHeaderButton/PanelHeaderButton.css +8 -15
  583. package/src/components/PanelHeaderButton/PanelHeaderButton.tsx +6 -6
  584. package/src/components/PanelHeaderClose/PanelHeaderClose.tsx +2 -6
  585. package/src/components/PanelHeaderContent/PanelHeaderContent.css +17 -23
  586. package/src/components/PanelHeaderContent/PanelHeaderContent.tsx +11 -5
  587. package/src/components/PanelHeaderContext/PanelHeaderContext.css +9 -25
  588. package/src/components/PanelHeaderContext/PanelHeaderContext.tsx +11 -7
  589. package/src/components/PanelHeaderContext/Readme.md +85 -101
  590. package/src/components/PanelHeaderEdit/PanelHeaderEdit.tsx +2 -2
  591. package/src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx +2 -6
  592. package/src/components/PromoBanner/PromoBanner.css +10 -22
  593. package/src/components/PromoBanner/PromoBanner.tsx +1 -5
  594. package/src/components/RichTooltip/Readme.md +2 -2
  595. package/src/components/Search/Search.css +134 -48
  596. package/src/components/Search/Search.tsx +13 -8
  597. package/src/components/Select/Select.css +2 -2
  598. package/src/components/SelectMimicry/Readme.md +3 -3
  599. package/src/components/SelectMimicry/SelectMimicry.tsx +3 -1
  600. package/src/components/SliderSwitch/SliderSwitch.tsx +5 -5
  601. package/src/components/SliderSwitch/SliderSwitchButton.tsx +7 -7
  602. package/src/components/Snackbar/Readme.md +12 -3
  603. package/src/components/Spacing/Readme.md +20 -20
  604. package/src/components/Spacing/Spacing.css +5 -1
  605. package/src/components/SplitLayout/Readme.md +1 -1
  606. package/src/components/SubnavigationBar/SubnavigationBar.css +7 -19
  607. package/src/components/SubnavigationBar/SubnavigationBar.tsx +1 -8
  608. package/src/components/SubnavigationButton/SubnavigationButton.css +13 -0
  609. package/src/components/SubnavigationButton/SubnavigationButton.tsx +1 -4
  610. package/src/components/TabbarItem/Readme.md +6 -1
  611. package/src/components/Tabs/Readme.md +10 -2
  612. package/src/components/TabsItem/TabsItem.css +1 -1
  613. package/src/components/Tappable/Tappable.tsx +9 -11
  614. package/src/components/Textarea/Textarea.css +1 -1
  615. package/src/components/Textarea/Textarea.tsx +5 -2
  616. package/src/components/Tooltip/Readme.md +2 -2
  617. package/src/components/Touch/Readme.md +4 -4
  618. package/src/components/Typography/Headline/Headline.css +10 -0
  619. package/src/components/Typography/Text/Text.css +10 -0
  620. package/src/components/UsersStack/UsersStack.css +42 -0
  621. package/src/components/UsersStack/UsersStack.tsx +71 -15
  622. package/src/components/View/Readme.md +5 -5
  623. package/src/components/View/View.tsx +2 -9
  624. package/src/components/View/ViewInfinite.tsx +14 -14
  625. package/src/{components/ChipsInput → hooks}/useChipsInput.ts +5 -8
  626. package/src/{components/ChipsSelect → hooks}/useChipsSelect.ts +4 -4
  627. package/src/index.ts +3 -0
  628. package/src/lib/animate.ts +1 -1
  629. package/src/lib/platform.ts +12 -6
  630. package/src/lib/testing.ts +1 -1
  631. package/src/lib/touch.ts +1 -1
  632. package/src/styles/components.css +1 -0
  633. package/src/tokenized/index.ts +85 -0
  634. package/.cache/ts/src/components/UsersStack/masks.d.ts +0 -1
  635. package/dist/cjs/components/ChipsInput/useChipsInput.js.map +0 -1
  636. package/dist/cjs/components/ChipsSelect/useChipsSelect.js.map +0 -1
  637. package/dist/cjs/components/UsersStack/masks.js +0 -29
  638. package/dist/cjs/components/UsersStack/masks.js.map +0 -1
  639. package/dist/components/ChipsInput/useChipsInput.js.map +0 -1
  640. package/dist/components/ChipsSelect/useChipsSelect.js.map +0 -1
  641. package/dist/components/UsersStack/masks.d.ts +0 -1
  642. package/dist/components/UsersStack/masks.js +0 -20
  643. package/dist/components/UsersStack/masks.js.map +0 -1
  644. package/dist/cssm/components/ChipsInput/useChipsInput.js.map +0 -1
  645. package/dist/cssm/components/ChipsSelect/useChipsSelect.js.map +0 -1
  646. package/dist/cssm/components/DropdownIcon/DropdownIcon.css +0 -1
  647. package/dist/cssm/components/UsersStack/masks.d.ts +0 -1
  648. package/dist/cssm/components/UsersStack/masks.js +0 -20
  649. package/dist/cssm/components/UsersStack/masks.js.map +0 -1
  650. package/src/components/DropdownIcon/DropdownIcon.css +0 -3
  651. package/src/components/UsersStack/masks.tsx +0 -69
@@ -49,17 +49,8 @@ export var CalendarDay = /*#__PURE__*/React.memo(function (_ref) {
49
49
  });
50
50
  }
51
51
 
52
- return createScopedElement(Tappable // eslint-disable-next-line vkui/no-object-expression-in-arguments
53
- , {
54
- vkuiClass: classNames("CalendarDay", "CalendarDay--size-".concat(size), {
55
- "CalendarDay--today": today,
56
- "CalendarDay--selected": selected && !disabled,
57
- "CalendarDay--active": active && !disabled,
58
- "CalendarDay--selection-start": selectionStart,
59
- "CalendarDay--selection-end": selectionEnd,
60
- "CalendarDay--disabled": disabled,
61
- "CalendarDay--not-same-month": !sameMonth
62
- }),
52
+ return createScopedElement(Tappable, {
53
+ vkuiClass: classNames("CalendarDay", "CalendarDay--size-".concat(size), today && "CalendarDay--today", selected && !disabled && "CalendarDay--selected", active && !disabled && "CalendarDay--active", selectionStart && "CalendarDay--selection-start", selectionEnd && "CalendarDay--selection-end", disabled && "CalendarDay--disabled", !sameMonth && "CalendarDay--not-same-month"),
63
54
  hoverMode: active ? "CalendarDay--active-hover" : "CalendarDay--hover",
64
55
  hasActive: false,
65
56
  onClick: onClick,
@@ -76,17 +67,9 @@ export var CalendarDay = /*#__PURE__*/React.memo(function (_ref) {
76
67
  onEnter: handleEnter,
77
68
  onLeave: handleLeave
78
69
  }, createScopedElement("div", {
79
- // eslint-disable-next-line vkui/no-object-expression-in-arguments
80
- vkuiClass: classNames("CalendarDay__hinted", {
81
- "CalendarDay__hinted--active": hinted,
82
- "CalendarDay__hinted--selection-start": hintedSelectionStart,
83
- "CalendarDay__hinted--selection-end": hintedSelectionEnd
84
- })
70
+ vkuiClass: classNames("CalendarDay__hinted", hinted && "CalendarDay__hinted--active", hintedSelectionStart && "CalendarDay__hinted--selection-start", hintedSelectionEnd && "CalendarDay__hinted--selection-end")
85
71
  }, createScopedElement("div", {
86
- // eslint-disable-next-line vkui/no-object-expression-in-arguments
87
- vkuiClass: classNames("CalendarDay__inner", {
88
- "CalendarDay__inner--active": active && !disabled
89
- })
72
+ vkuiClass: classNames("CalendarDay__inner", active && !disabled && "CalendarDay__inner--active")
90
73
  }, createScopedElement("div", {
91
74
  vkuiClass: "CalendarDay__day-number"
92
75
  }, day.getDate()))));
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"names":["React","classNames","Tappable","ENABLE_KEYBOARD_INPUT_EVENT_NAME","LocaleProviderContext","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","locale","useContext","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","bubbles","focus","Intl","DateTimeFormat","weekday","year","month","format","getDate","displayName"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from \"../../hooks/useKeyboardInputTracker\";\nimport { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\nimport \"./CalendarDay.css\";\n\nexport interface CalendarDayProps {\n day: Date;\n today?: boolean;\n selected?: boolean;\n selectionStart?: boolean;\n selectionEnd?: boolean;\n hintedSelectionStart?: boolean;\n hintedSelectionEnd?: boolean;\n active?: boolean;\n hidden?: boolean;\n disabled?: boolean;\n focused?: boolean;\n hinted?: boolean;\n sameMonth?: boolean;\n size?: \"s\" | \"m\";\n onChange(value: Date): void;\n onEnter?(value: Date): void;\n onLeave?(value: Date): void;\n}\n\nexport const CalendarDay = React.memo(\n ({\n day,\n today,\n selected,\n onChange,\n hidden,\n disabled,\n active,\n selectionStart,\n selectionEnd,\n focused,\n onEnter,\n onLeave,\n hinted,\n hintedSelectionStart,\n hintedSelectionEnd,\n sameMonth,\n size,\n }: CalendarDayProps) => {\n const locale = React.useContext(LocaleProviderContext);\n const ref = React.useRef<HTMLElement>(null);\n const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n React.useEffect(() => {\n if (focused && ref.current) {\n ref.current.dispatchEvent(\n new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true })\n );\n ref.current.focus();\n }\n }, [focused]);\n\n if (hidden) {\n return <div vkuiClass=\"CalendarDay__hidden\"></div>;\n }\n\n return (\n <Tappable\n // eslint-disable-next-line vkui/no-object-expression-in-arguments\n vkuiClass={classNames(\"CalendarDay\", `CalendarDay--size-${size}`, {\n \"CalendarDay--today\": today,\n \"CalendarDay--selected\": selected && !disabled,\n \"CalendarDay--active\": active && !disabled,\n \"CalendarDay--selection-start\": selectionStart,\n \"CalendarDay--selection-end\": selectionEnd,\n \"CalendarDay--disabled\": disabled,\n \"CalendarDay--not-same-month\": !sameMonth,\n })}\n hoverMode={active ? \"CalendarDay--active-hover\" : \"CalendarDay--hover\"}\n hasActive={false}\n onClick={onClick}\n disabled={disabled}\n aria-label={new Intl.DateTimeFormat(locale, {\n weekday: \"long\",\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n }).format(day)}\n tabIndex={-1}\n getRootRef={ref}\n focusVisibleMode={active ? \"outside\" : \"inside\"}\n onEnter={handleEnter}\n onLeave={handleLeave}\n >\n <div\n // eslint-disable-next-line vkui/no-object-expression-in-arguments\n vkuiClass={classNames(\"CalendarDay__hinted\", {\n \"CalendarDay__hinted--active\": hinted,\n \"CalendarDay__hinted--selection-start\": hintedSelectionStart,\n \"CalendarDay__hinted--selection-end\": hintedSelectionEnd,\n })}\n >\n <div\n // eslint-disable-next-line vkui/no-object-expression-in-arguments\n vkuiClass={classNames(\"CalendarDay__inner\", {\n \"CalendarDay__inner--active\": active && !disabled,\n })}\n >\n <div vkuiClass=\"CalendarDay__day-number\">{day.getDate()}</div>\n </div>\n </div>\n </Tappable>\n );\n }\n);\n\nCalendarDay.displayName = \"CalendarDay\";\n"],"file":"CalendarDay.js"}
1
+ {"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"names":["React","classNames","Tappable","ENABLE_KEYBOARD_INPUT_EVENT_NAME","LocaleProviderContext","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","locale","useContext","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","bubbles","focus","Intl","DateTimeFormat","weekday","year","month","format","getDate","displayName"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from \"../../hooks/useKeyboardInputTracker\";\nimport { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\nimport \"./CalendarDay.css\";\n\nexport interface CalendarDayProps {\n day: Date;\n today?: boolean;\n selected?: boolean;\n selectionStart?: boolean;\n selectionEnd?: boolean;\n hintedSelectionStart?: boolean;\n hintedSelectionEnd?: boolean;\n active?: boolean;\n hidden?: boolean;\n disabled?: boolean;\n focused?: boolean;\n hinted?: boolean;\n sameMonth?: boolean;\n size?: \"s\" | \"m\";\n onChange(value: Date): void;\n onEnter?(value: Date): void;\n onLeave?(value: Date): void;\n}\n\nexport const CalendarDay = React.memo(\n ({\n day,\n today,\n selected,\n onChange,\n hidden,\n disabled,\n active,\n selectionStart,\n selectionEnd,\n focused,\n onEnter,\n onLeave,\n hinted,\n hintedSelectionStart,\n hintedSelectionEnd,\n sameMonth,\n size,\n }: CalendarDayProps) => {\n const locale = React.useContext(LocaleProviderContext);\n const ref = React.useRef<HTMLElement>(null);\n const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n React.useEffect(() => {\n if (focused && ref.current) {\n ref.current.dispatchEvent(\n new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true })\n );\n ref.current.focus();\n }\n }, [focused]);\n\n if (hidden) {\n return <div vkuiClass=\"CalendarDay__hidden\"></div>;\n }\n\n return (\n <Tappable\n vkuiClass={classNames(\n \"CalendarDay\",\n `CalendarDay--size-${size}`,\n today && \"CalendarDay--today\",\n selected && !disabled && \"CalendarDay--selected\",\n active && !disabled && \"CalendarDay--active\",\n selectionStart && \"CalendarDay--selection-start\",\n selectionEnd && \"CalendarDay--selection-end\",\n disabled && \"CalendarDay--disabled\",\n !sameMonth && \"CalendarDay--not-same-month\"\n )}\n hoverMode={active ? \"CalendarDay--active-hover\" : \"CalendarDay--hover\"}\n hasActive={false}\n onClick={onClick}\n disabled={disabled}\n aria-label={new Intl.DateTimeFormat(locale, {\n weekday: \"long\",\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n }).format(day)}\n tabIndex={-1}\n getRootRef={ref}\n focusVisibleMode={active ? \"outside\" : \"inside\"}\n onEnter={handleEnter}\n onLeave={handleLeave}\n >\n <div\n vkuiClass={classNames(\n \"CalendarDay__hinted\",\n hinted && \"CalendarDay__hinted--active\",\n hintedSelectionStart && \"CalendarDay__hinted--selection-start\",\n hintedSelectionEnd && \"CalendarDay__hinted--selection-end\"\n )}\n >\n <div\n vkuiClass={classNames(\n \"CalendarDay__inner\",\n active && !disabled && \"CalendarDay__inner--active\"\n )}\n >\n <div vkuiClass=\"CalendarDay__day-number\">{day.getDate()}</div>\n </div>\n </div>\n </Tappable>\n );\n }\n);\n\nCalendarDay.displayName = \"CalendarDay\";\n"],"file":"CalendarDay.js"}
@@ -1,5 +1,4 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
2
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
4
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
4
  var _excluded = ["children", "size", "showArrows", "withSpaces"];
@@ -84,8 +83,7 @@ export var CardScroll = function CardScroll(_ref) {
84
83
  }
85
84
 
86
85
  return createScopedElement("div", _extends({}, restProps, {
87
- // eslint-disable-next-line vkui/no-object-expression-in-arguments
88
- vkuiClass: classNames(getClassName("CardScroll", platform), "CardScroll--sizeX-".concat(sizeX), "CardScroll--".concat(size), _defineProperty({}, "CardScroll--withSpaces", withSpaces))
86
+ vkuiClass: classNames(getClassName("CardScroll", platform), "CardScroll--sizeX-".concat(sizeX), "CardScroll--".concat(size), withSpaces && "CardScroll--withSpaces")
89
87
  }), createScopedElement(HorizontalScroll, {
90
88
  getScrollToLeft: getScrollToLeft,
91
89
  getScrollToRight: getScrollToRight,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"names":["React","classNames","getClassName","useAdaptivity","usePlatform","HorizontalScroll","useDOM","CardScroll","children","size","showArrows","withSpaces","restProps","platform","sizeX","refContainer","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n HorizontalScroll,\n HorizontalScrollProps,\n} from \"../HorizontalScroll/HorizontalScroll\";\nimport { useDOM } from \"../../lib/dom\";\nimport \"./CardScroll.css\";\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n */\n size?: \"s\" | \"m\" | \"l\" | false;\n showArrows?: HorizontalScrollProps[\"showArrows\"];\n withSpaces?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n children,\n size = \"s\",\n showArrows = true,\n withSpaces = true,\n ...restProps\n}: CardScrollProps) => {\n const platform = usePlatform();\n const { sizeX } = useAdaptivity();\n\n const refContainer = React.useRef<HTMLDivElement>(null);\n const gapRef = React.useRef<HTMLDivElement>(null);\n\n const { window } = useDOM();\n\n function getScrollToLeft(offset: number): number {\n if (!refContainer.current || !gapRef.current) {\n return offset;\n }\n const containerWidth = refContainer.current.offsetWidth;\n const slideIndex = (\n [...refContainer.current.children] as HTMLElement[]\n ).findIndex(\n (el: HTMLElement) =>\n el.offsetLeft +\n el.offsetWidth +\n parseInt(window!.getComputedStyle(el).marginRight) -\n offset >=\n 0\n );\n\n if (slideIndex === -1) {\n return offset;\n }\n\n if (slideIndex === 0) {\n return 0;\n }\n\n const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n const scrollTo =\n slide.offsetLeft -\n (containerWidth - slide.offsetWidth) +\n gapRef.current.offsetWidth;\n\n if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n return 0;\n }\n\n return scrollTo;\n }\n\n function getScrollToRight(offset: number): number {\n if (!refContainer.current || !gapRef.current) {\n return offset;\n }\n\n const containerWidth = refContainer.current.offsetWidth;\n const slide = Array.prototype.find.call(\n refContainer.current.children,\n (el: HTMLElement) =>\n el.offsetLeft + el.offsetWidth - offset > containerWidth\n ) as HTMLElement;\n\n if (!slide) {\n return offset;\n }\n\n return slide.offsetLeft - gapRef.current.offsetWidth;\n }\n\n return (\n <div\n {...restProps}\n // eslint-disable-next-line vkui/no-object-expression-in-arguments\n vkuiClass={classNames(\n getClassName(\"CardScroll\", platform),\n `CardScroll--sizeX-${sizeX}`,\n `CardScroll--${size}`,\n { [\"CardScroll--withSpaces\"]: withSpaces }\n )}\n >\n <HorizontalScroll\n getScrollToLeft={getScrollToLeft}\n getScrollToRight={getScrollToRight}\n showArrows={showArrows}\n >\n <div vkuiClass=\"CardScroll__in\" ref={refContainer}>\n <span vkuiClass=\"CardScroll__gap\" ref={gapRef} />\n {children}\n <span vkuiClass=\"CardScroll__gap\" />\n </div>\n </HorizontalScroll>\n </div>\n );\n};\n"],"file":"CardScroll.js"}
1
+ {"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"names":["React","classNames","getClassName","useAdaptivity","usePlatform","HorizontalScroll","useDOM","CardScroll","children","size","showArrows","withSpaces","restProps","platform","sizeX","refContainer","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n HorizontalScroll,\n HorizontalScrollProps,\n} from \"../HorizontalScroll/HorizontalScroll\";\nimport { useDOM } from \"../../lib/dom\";\nimport \"./CardScroll.css\";\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n */\n size?: \"s\" | \"m\" | \"l\" | false;\n showArrows?: HorizontalScrollProps[\"showArrows\"];\n withSpaces?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n children,\n size = \"s\",\n showArrows = true,\n withSpaces = true,\n ...restProps\n}: CardScrollProps) => {\n const platform = usePlatform();\n const { sizeX } = useAdaptivity();\n\n const refContainer = React.useRef<HTMLDivElement>(null);\n const gapRef = React.useRef<HTMLDivElement>(null);\n\n const { window } = useDOM();\n\n function getScrollToLeft(offset: number): number {\n if (!refContainer.current || !gapRef.current) {\n return offset;\n }\n const containerWidth = refContainer.current.offsetWidth;\n const slideIndex = (\n [...refContainer.current.children] as HTMLElement[]\n ).findIndex(\n (el: HTMLElement) =>\n el.offsetLeft +\n el.offsetWidth +\n parseInt(window!.getComputedStyle(el).marginRight) -\n offset >=\n 0\n );\n\n if (slideIndex === -1) {\n return offset;\n }\n\n if (slideIndex === 0) {\n return 0;\n }\n\n const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n const scrollTo =\n slide.offsetLeft -\n (containerWidth - slide.offsetWidth) +\n gapRef.current.offsetWidth;\n\n if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n return 0;\n }\n\n return scrollTo;\n }\n\n function getScrollToRight(offset: number): number {\n if (!refContainer.current || !gapRef.current) {\n return offset;\n }\n\n const containerWidth = refContainer.current.offsetWidth;\n const slide = Array.prototype.find.call(\n refContainer.current.children,\n (el: HTMLElement) =>\n el.offsetLeft + el.offsetWidth - offset > containerWidth\n ) as HTMLElement;\n\n if (!slide) {\n return offset;\n }\n\n return slide.offsetLeft - gapRef.current.offsetWidth;\n }\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\n getClassName(\"CardScroll\", platform),\n `CardScroll--sizeX-${sizeX}`,\n `CardScroll--${size}`,\n withSpaces && \"CardScroll--withSpaces\"\n )}\n >\n <HorizontalScroll\n getScrollToLeft={getScrollToLeft}\n getScrollToRight={getScrollToRight}\n showArrows={showArrows}\n >\n <div vkuiClass=\"CardScroll__in\" ref={refContainer}>\n <span vkuiClass=\"CardScroll__gap\" ref={gapRef} />\n {children}\n <span vkuiClass=\"CardScroll__gap\" />\n </div>\n </HorizontalScroll>\n </div>\n );\n};\n"],"file":"CardScroll.js"}
@@ -1 +1 @@
1
- .vkuiCellCheckbox__icon{color:#b8c1cc;color:var(--icon_tertiary)}.vkuiCellCheckbox__icon,.vkuiCellCheckbox__input{display:none}.vkuiCellCheckbox__icon--on{color:#2688eb;color:var(--accent)}.vkuiCellCheckbox__input:checked~.vkuiCellCheckbox__icon--on,.vkuiCellCheckbox__input:not(:checked)~.vkuiCellCheckbox__icon--off{display:block}
1
+ .vkuiCellCheckbox__icon{color:#b8c1cc;color:var(--icon_tertiary,var(--vkui--color_icon_tertiary))}.vkuiCellCheckbox__icon,.vkuiCellCheckbox__input{display:none}.vkuiCellCheckbox__icon--on{color:#2688eb;color:var(--accent,var(--vkui--color_icon_accent))}.vkuiCellCheckbox__input:checked~.vkuiCellCheckbox__icon--on,.vkuiCellCheckbox__input:not(:checked)~.vkuiCellCheckbox__icon--off{display:block}
@@ -1 +1 @@
1
- .vkuiCellDragger{color:#99a2ad;color:var(--icon_secondary);cursor:ns-resize}
1
+ .vkuiCellDragger{color:#99a2ad;color:var(--icon_secondary,var(--vkui--color_icon_secondary));cursor:ns-resize}
@@ -1 +1 @@
1
- .vkuiChip{background:#fff;background:var(--background_content,var(--vkui--color_background_content));border:1px solid rgba(0,0,0,.08);border:var(--thin-border) solid var(--image_border,var(--vkui--color_image_border_alpha));border-radius:6px;box-sizing:border-box;display:inline-block;height:32px}.vkuiChip__in{align-items:center;display:flex;height:100%;padding:0 8px;position:relative}.vkuiChip--removable .vkuiChip__in{padding-right:0}.vkuiChip__content{color:#000;color:var(--text_primary,var(--vkui--color_text_primary));display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiChip__remove{align-content:center;align-items:center;background:transparent;border:none;border-radius:2px;box-sizing:border-box;color:#99a2ad;color:var(--icon_secondary,var(--vkui--color_icon_secondary));display:flex;flex-grow:0;flex-shrink:0;height:28px;justify-content:center;margin:-1px;padding:6px;position:relative;-webkit-transform:translateX(-1px);transform:translateX(-1px);width:28px}.vkuiChip__before{margin-right:6px}.vkuiChip__after{margin-left:6px}.vkuiChip--sizeY-compact{height:28px}
1
+ .vkuiChip{background:#fff;background:var(--background_content,var(--vkui--color_background_content));border:1px solid rgba(0,0,0,.08);border:var(--thin-border) solid var(--image_border,var(--vkui--color_image_border_alpha));border-radius:6px;box-sizing:border-box;display:inline-block;height:32px}.vkuiChip__in{align-items:center;display:flex;height:100%;padding:0 8px;position:relative}.vkuiChip--removable .vkuiChip__in{padding-right:0}.vkuiChip__content{color:#000;color:var(--text_primary,var(--vkui--color_text_primary));display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiChip__remove{align-content:center;align-items:center;background:transparent;border:none;border-radius:2px;box-sizing:border-box;color:#99a2ad;color:var(--icon_secondary,var(--vkui--color_icon_secondary));cursor:pointer;display:flex;flex-grow:0;flex-shrink:0;height:28px;justify-content:center;margin:-1px;padding:6px;position:relative;-webkit-transform:translateX(-1px);transform:translateX(-1px);width:28px}.vkuiChip__before{margin-right:6px}.vkuiChip__after{margin-left:6px}.vkuiChip--sizeY-compact{height:28px}
@@ -1,19 +1,26 @@
1
1
  import * as React from "react";
2
2
  import "./Chip.css";
3
- declare type ChipValue = string | number;
3
+ export declare type ChipValue = string | number;
4
+ export interface ChipOption {
5
+ value?: ChipValue;
6
+ label?: string;
7
+ [otherProp: string]: any;
8
+ }
4
9
  export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
5
10
  value: ChipValue;
6
- option?: {
7
- value?: ChipValue;
8
- };
11
+ option?: ChipOption;
9
12
  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;
10
13
  removable?: boolean;
11
14
  removeAriaLabel?: string;
12
15
  before?: React.ReactNode;
13
16
  after?: React.ReactNode;
14
17
  }
18
+ export interface RenderChip<T> extends ChipProps {
19
+ label: string;
20
+ option: T;
21
+ disabled: boolean;
22
+ }
15
23
  /**
16
24
  * @see https://vkcom.github.io/VKUI/#/Chip
17
25
  */
18
26
  export declare const Chip: ({ value, option, removable, onRemove, removeAriaLabel, before, after, children, ...restProps }: ChipProps) => JSX.Element;
19
- export {};
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Chip/Chip.tsx"],"names":["React","Icon16Cancel","getTitleFromChildren","hasReactNode","noop","classNames","Caption","Tappable","useAdaptivity","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","restProps","sizeY","onRemoveWrapper","useCallback","event","title"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,kBAA7B;AACA,SAASC,oBAAT,EAA+BC,YAA/B,EAA6CC,IAA7C;AACA,SAASC,UAAT;AACA,SAASC,OAAT;AACA,SAASC,QAAT;AACA,SAASC,aAAT;AACA;;AAcA;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAUH;AAAA,wBATfC,KASe;AAAA,MATfA,KASe,2BATP,EASO;AAAA,MARfC,MAQe,QARfA,MAQe;AAAA,4BAPfC,SAOe;AAAA,MAPfA,SAOe,+BAPH,IAOG;AAAA,2BANfC,QAMe;AAAA,MANfA,QAMe,8BANJT,IAMI;AAAA,kCALfU,eAKe;AAAA,MALfA,eAKe,qCALG,SAKH;AAAA,yBAJfC,MAIe;AAAA,MAJfA,MAIe,4BAJN,IAIM;AAAA,MAHfC,KAGe,QAHfA,KAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,MADZC,SACY;;AACf,uBAAkBV,aAAa,EAA/B;AAAA,MAAQW,KAAR,kBAAQA,KAAR;;AACA,MAAMC,eAAe,GAAGpB,KAAK,CAACqB,WAAN,CACtB,UAACC,KAAD,EAA6B;AAC3BT,IAAAA,QAAQ,CAACS,KAAD,EAAQZ,KAAR,CAAR;AACD,GAHqB,EAItB,CAACG,QAAD,EAAWH,KAAX,CAJsB,CAAxB;AAMA,MAAMa,KAAK,GAAGrB,oBAAoB,CAACe,QAAD,CAAlC;AAEA,SACE;AACE,IAAA,SAAS,EAAEZ,UAAU,CACnB,MADmB,EAEnBO,SAAS,IAAI,iBAFM,wBAGJO,KAHI,EAGI;AAHJ,KADvB;AAME,IAAA,IAAI,EAAC,QANP;AAOE,kBAAYI;AAPd,KAQML,SARN,GAUE;AAAK,IAAA,SAAS,EAAC,UAAf;AAA0B,IAAA,IAAI,EAAC;AAA/B,KACGf,YAAY,CAACY,MAAD,CAAZ,IAAwB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA+BA,MAA/B,CAD3B,EAEE,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC,eAAnB;AAAmC,IAAA,KAAK,EAAEQ,KAA1C;AAAiD,mBAAY;AAA7D,KACGN,QADH,CAFF,EAKGd,YAAY,CAACa,KAAD,CAAZ,IAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA8BA,KAA9B,CAL1B,EAOGJ,SAAS,IACR,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,QADZ;AAEE,IAAA,SAAS,EAAC,cAFZ;AAGE,IAAA,OAAO,EAAEQ,eAHX;AAIE,IAAA,QAAQ,EAAE,KAJZ;AAKE,IAAA,SAAS,EAAE,KALb;AAME,4BAAeN,eAAf,cAAkCS,KAAlC;AANF,KAQE,oBAAC,YAAD;AAAc,mBAAa;AAA3B,IARF,CARJ,CAVF,CADF;AAiCD,CArDM","sourcesContent":["import * as React from \"react\";\nimport { Icon16Cancel } from \"@vkontakte/icons\";\nimport { getTitleFromChildren, hasReactNode, noop } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./Chip.css\";\n\ntype ChipValue = string | number;\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n value: ChipValue;\n option?: { value?: ChipValue };\n onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n removable?: boolean;\n removeAriaLabel?: string;\n before?: React.ReactNode;\n after?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n value = \"\",\n option,\n removable = true,\n onRemove = noop,\n removeAriaLabel = \"Удалить\",\n before = null,\n after,\n children,\n ...restProps\n}: ChipProps) => {\n const { sizeY } = useAdaptivity();\n const onRemoveWrapper = React.useCallback(\n (event: React.MouseEvent) => {\n onRemove(event, value);\n },\n [onRemove, value]\n );\n const title = getTitleFromChildren(children);\n\n return (\n <div\n vkuiClass={classNames(\n \"Chip\",\n removable && \"Chip--removable\",\n `Chip--sizeY-${sizeY}` // TODO: v5 новая адаптивность\n )}\n role=\"option\"\n aria-label={title}\n {...restProps}\n >\n <div vkuiClass=\"Chip__in\" role=\"presentation\">\n {hasReactNode(before) && <div vkuiClass=\"Chip__before\">{before}</div>}\n <Caption vkuiClass=\"Chip__content\" title={title} aria-hidden=\"true\">\n {children}\n </Caption>\n {hasReactNode(after) && <div vkuiClass=\"Chip__after\">{after}</div>}\n\n {removable && (\n <Tappable\n Component=\"button\"\n vkuiClass=\"Chip__remove\"\n onClick={onRemoveWrapper}\n hasHover={false}\n hasActive={false}\n aria-label={`${removeAriaLabel} ${title}`}\n >\n <Icon16Cancel aria-hidden={true} />\n </Tappable>\n )}\n </div>\n </div>\n );\n};\n"],"file":"Chip.js"}
1
+ {"version":3,"sources":["../../../../src/components/Chip/Chip.tsx"],"names":["React","Icon16Cancel","getTitleFromChildren","hasReactNode","noop","classNames","Caption","Tappable","useAdaptivity","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","restProps","sizeY","onRemoveWrapper","useCallback","event","title"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,kBAA7B;AACA,SAASC,oBAAT,EAA+BC,YAA/B,EAA6CC,IAA7C;AACA,SAASC,UAAT;AACA,SAASC,OAAT;AACA,SAASC,QAAT;AACA,SAASC,aAAT;AACA;;AA0BA;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAUH;AAAA,wBATfC,KASe;AAAA,MATfA,KASe,2BATP,EASO;AAAA,MARfC,MAQe,QARfA,MAQe;AAAA,4BAPfC,SAOe;AAAA,MAPfA,SAOe,+BAPH,IAOG;AAAA,2BANfC,QAMe;AAAA,MANfA,QAMe,8BANJT,IAMI;AAAA,kCALfU,eAKe;AAAA,MALfA,eAKe,qCALG,SAKH;AAAA,yBAJfC,MAIe;AAAA,MAJfA,MAIe,4BAJN,IAIM;AAAA,MAHfC,KAGe,QAHfA,KAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,MADZC,SACY;;AACf,uBAAkBV,aAAa,EAA/B;AAAA,MAAQW,KAAR,kBAAQA,KAAR;;AACA,MAAMC,eAAe,GAAGpB,KAAK,CAACqB,WAAN,CACtB,UAACC,KAAD,EAA6B;AAC3BT,IAAAA,QAAQ,CAACS,KAAD,EAAQZ,KAAR,CAAR;AACD,GAHqB,EAItB,CAACG,QAAD,EAAWH,KAAX,CAJsB,CAAxB;AAMA,MAAMa,KAAK,GAAGrB,oBAAoB,CAACe,QAAD,CAAlC;AAEA,SACE;AACE,IAAA,SAAS,EAAEZ,UAAU,CACnB,MADmB,EAEnBO,SAAS,IAAI,iBAFM,wBAGJO,KAHI,EAGI;AAHJ,KADvB;AAME,IAAA,IAAI,EAAC,QANP;AAOE,kBAAYI;AAPd,KAQML,SARN,GAUE;AAAK,IAAA,SAAS,EAAC,UAAf;AAA0B,IAAA,IAAI,EAAC;AAA/B,KACGf,YAAY,CAACY,MAAD,CAAZ,IAAwB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA+BA,MAA/B,CAD3B,EAEE,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC,eAAnB;AAAmC,IAAA,KAAK,EAAEQ,KAA1C;AAAiD,mBAAY;AAA7D,KACGN,QADH,CAFF,EAKGd,YAAY,CAACa,KAAD,CAAZ,IAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA8BA,KAA9B,CAL1B,EAOGJ,SAAS,IACR,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,QADZ;AAEE,IAAA,SAAS,EAAC,cAFZ;AAGE,IAAA,OAAO,EAAEQ,eAHX;AAIE,IAAA,QAAQ,EAAE,KAJZ;AAKE,IAAA,SAAS,EAAE,KALb;AAME,4BAAeN,eAAf,cAAkCS,KAAlC;AANF,KAQE,oBAAC,YAAD;AAAc,mBAAa;AAA3B,IARF,CARJ,CAVF,CADF;AAiCD,CArDM","sourcesContent":["import * as React from \"react\";\nimport { Icon16Cancel } from \"@vkontakte/icons\";\nimport { getTitleFromChildren, hasReactNode, noop } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./Chip.css\";\n\nexport type ChipValue = string | number;\n\nexport interface ChipOption {\n value?: ChipValue;\n label?: string;\n [otherProp: string]: any;\n}\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n value: ChipValue;\n option?: ChipOption;\n onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n removable?: boolean;\n removeAriaLabel?: string;\n before?: React.ReactNode;\n after?: React.ReactNode;\n}\n\nexport interface RenderChip<T> extends ChipProps {\n label: string;\n option: T;\n disabled: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n value = \"\",\n option,\n removable = true,\n onRemove = noop,\n removeAriaLabel = \"Удалить\",\n before = null,\n after,\n children,\n ...restProps\n}: ChipProps) => {\n const { sizeY } = useAdaptivity();\n const onRemoveWrapper = React.useCallback(\n (event: React.MouseEvent) => {\n onRemove(event, value);\n },\n [onRemove, value]\n );\n const title = getTitleFromChildren(children);\n\n return (\n <div\n vkuiClass={classNames(\n \"Chip\",\n removable && \"Chip--removable\",\n `Chip--sizeY-${sizeY}` // TODO: v5 новая адаптивность\n )}\n role=\"option\"\n aria-label={title}\n {...restProps}\n >\n <div vkuiClass=\"Chip__in\" role=\"presentation\">\n {hasReactNode(before) && <div vkuiClass=\"Chip__before\">{before}</div>}\n <Caption vkuiClass=\"Chip__content\" title={title} aria-hidden=\"true\">\n {children}\n </Caption>\n {hasReactNode(after) && <div vkuiClass=\"Chip__after\">{after}</div>}\n\n {removable && (\n <Tappable\n Component=\"button\"\n vkuiClass=\"Chip__remove\"\n onClick={onRemoveWrapper}\n hasHover={false}\n hasActive={false}\n aria-label={`${removeAriaLabel} ${title}`}\n >\n <Icon16Cancel aria-hidden={true} />\n </Tappable>\n )}\n </div>\n </div>\n );\n};\n"],"file":"Chip.js"}
@@ -1 +1 @@
1
- .vkuiChipsInput{max-width:100%}.vkuiChipsInput__container{display:flex;flex-grow:1;flex-shrink:1;flex-wrap:wrap;max-width:100%;overflow:hidden;padding:3px;position:relative;z-index:2}.vkuiChipsInput__chip{margin:2px;max-width:100%}.vkuiChipsInput__input-container{display:flex;flex:1;flex-direction:column;margin:2px 2px 2px 10px}.vkuiChipsInput__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;box-shadow:none;color:#000;color:var(--text_primary,var(--vkui--color_text_primary));font-size:15px;line-height:26px;margin-bottom:2px;padding:0;position:relative;width:100%;z-index:2}.vkuiChipsInput__el:focus{min-width:64px}.vkuiChipsInput__el::-ms-clear{display:none}.vkuiChipsInput__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,.64)}.vkuiChipsInput__el::-webkit-input-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiChipsInput__el::-moz-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiChipsInput__el::-ms-input-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiChipsInput__el::placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiChipsInput__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiChipsInput__el:disabled::-moz-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiChipsInput__el:disabled::-ms-input-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiChipsInput__el:disabled::placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiChipsInput--sizeY-compact .vkuiChipsInput__container{padding:1px}
1
+ .vkuiChipsInput{max-width:100%}
@@ -1,32 +1,11 @@
1
- import * as React from "react";
2
- import { HasAlign, HasRef, HasRootRef } from "../../types";
1
+ /// <reference types="react" />
3
2
  import { FormFieldProps } from "../FormField/FormField";
4
- import { ChipProps } from "../Chip/Chip";
3
+ import { ChipOption } from "../Chip/Chip";
4
+ import { ChipsInputBaseProps } from "../ChipsInputBase/ChipsInputBase";
5
5
  import "./ChipsInput.css";
6
- export declare type ChipsInputValue = string | number;
7
- export interface ChipsInputOption {
8
- value?: ChipsInputValue;
9
- label?: string;
10
- [otherProp: string]: any;
6
+ export interface ChipsInputProps<Option extends ChipOption> extends ChipsInputBaseProps<Option>, FormFieldProps {
11
7
  }
12
- export interface RenderChip<Option extends ChipsInputOption> extends ChipProps {
13
- label: string;
14
- option: Option;
15
- disabled: boolean;
16
- }
17
- export interface ChipsInputProps<Option extends ChipsInputOption> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange">, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, FormFieldProps {
18
- value: Option[];
19
- inputValue?: string;
20
- onChange?: (o: Option[]) => void;
21
- onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;
22
- getOptionValue?: (o?: Option) => ChipsInputValue;
23
- getOptionLabel?: (o?: Option) => string;
24
- getNewOptionData?: (v?: ChipsInputValue, l?: string) => Option;
25
- renderChip?: (props?: RenderChip<Option>) => React.ReactNode;
26
- inputAriaLabel?: string;
27
- }
28
- export declare const chipsInputDefaultProps: ChipsInputProps<any>;
29
8
  /**
30
9
  * @see https://vkcom.github.io/VKUI/#/ChipsInput
31
10
  */
32
- export declare const ChipsInput: <Option extends ChipsInputOption>(props: ChipsInputProps<Option>) => JSX.Element;
11
+ export declare const ChipsInput: <Option extends ChipOption>({ style, className, getRootRef, before, after, status, ...restProps }: ChipsInputProps<Option>) => JSX.Element;
@@ -1,203 +1,34 @@
1
- import _typeof from "@babel/runtime/helpers/typeof";
2
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
- import _objectSpread from "@babel/runtime/helpers/objectSpread2";
4
- import _extends from "@babel/runtime/helpers/extends";
5
1
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
6
- var _excluded = ["disabled", "value", "label"],
7
- _excluded2 = ["style", "value", "onChange", "onInputChange", "onKeyDown", "onBlur", "onFocus", "children", "className", "inputValue", "getRef", "getRootRef", "placeholder", "getOptionValue", "getOptionLabel", "getNewOptionData", "renderChip", "before", "after", "inputAriaLabel"];
2
+ var _excluded = ["style", "className", "getRootRef", "before", "after", "status"];
8
3
  import { createScopedElement } from "../../lib/jsxRuntime";
9
- import * as React from "react";
10
4
  import { FormField } from "../FormField/FormField";
11
- import { classNames } from "../../lib/classNames";
12
- import { Chip } from "../Chip/Chip";
13
- import { noop } from "../../lib/utils";
14
- import { useChipsInput } from "./useChipsInput";
15
- import { useAdaptivity } from "../../hooks/useAdaptivity";
16
- import { prefixClass } from "../../lib/prefixClass";
17
- import { useExternRef } from "../../hooks/useExternRef";
5
+ import { ChipsInputBase } from "../ChipsInputBase/ChipsInputBase";
18
6
  import "./ChipsInput.css";
19
- export var chipsInputDefaultProps = {
20
- type: "text",
21
- onChange: noop,
22
- onInputChange: noop,
23
- onKeyDown: noop,
24
- onBlur: noop,
25
- onFocus: noop,
26
- value: [],
27
- inputValue: "",
28
- inputAriaLabel: "Введите ваше значение...",
29
- getOptionValue: function getOptionValue(option) {
30
- return option.value;
31
- },
32
- getOptionLabel: function getOptionLabel(option) {
33
- return option.label;
34
- },
35
- getNewOptionData: function getNewOptionData(_, label) {
36
- return {
37
- value: label,
38
- label: label
39
- };
40
- },
41
- renderChip: function renderChip(props) {
42
- if (!props) {
43
- return null;
44
- }
45
7
 
46
- var disabled = props.disabled,
47
- value = props.value,
48
- label = props.label,
49
- rest = _objectWithoutProperties(props, _excluded);
50
-
51
- return createScopedElement(Chip, _extends({
52
- value: value,
53
- removable: !disabled
54
- }, rest), label);
55
- }
56
- };
57
8
  /**
58
9
  * @see https://vkcom.github.io/VKUI/#/ChipsInput
59
10
  */
60
-
61
- export var ChipsInput = function ChipsInput(props) {
62
- var propsWithDefault = _objectSpread(_objectSpread({}, chipsInputDefaultProps), props);
63
-
64
- var style = propsWithDefault.style,
65
- value = propsWithDefault.value,
66
- onChange = propsWithDefault.onChange,
67
- onInputChange = propsWithDefault.onInputChange,
68
- onKeyDown = propsWithDefault.onKeyDown,
69
- onBlur = propsWithDefault.onBlur,
70
- onFocus = propsWithDefault.onFocus,
71
- children = propsWithDefault.children,
72
- className = propsWithDefault.className,
73
- inputValue = propsWithDefault.inputValue,
74
- getRef = propsWithDefault.getRef,
75
- getRootRef = propsWithDefault.getRootRef,
76
- placeholder = propsWithDefault.placeholder,
77
- getOptionValue = propsWithDefault.getOptionValue,
78
- getOptionLabel = propsWithDefault.getOptionLabel,
79
- getNewOptionData = propsWithDefault.getNewOptionData,
80
- renderChip = propsWithDefault.renderChip,
81
- before = propsWithDefault.before,
82
- after = propsWithDefault.after,
83
- inputAriaLabel = propsWithDefault.inputAriaLabel,
84
- restProps = _objectWithoutProperties(propsWithDefault, _excluded2);
85
-
86
- var _useAdaptivity = useAdaptivity(),
87
- sizeY = _useAdaptivity.sizeY;
88
-
89
- var _React$useState = React.useState(false),
90
- _React$useState2 = _slicedToArray(_React$useState, 2),
91
- focused = _React$useState2[0],
92
- setFocused = _React$useState2[1];
93
-
94
- var _useChipsInput = useChipsInput(propsWithDefault),
95
- fieldValue = _useChipsInput.fieldValue,
96
- addOptionFromInput = _useChipsInput.addOptionFromInput,
97
- removeOption = _useChipsInput.removeOption,
98
- selectedOptions = _useChipsInput.selectedOptions,
99
- handleInputChange = _useChipsInput.handleInputChange;
100
-
101
- var inputRef = useExternRef(getRef);
102
- var isDisabled = restProps.disabled || restProps.readOnly;
103
-
104
- var handleKeyDown = function handleKeyDown(e) {
105
- if (isDisabled) {
106
- e.preventDefault();
107
- return;
108
- }
109
-
110
- onKeyDown(e);
111
-
112
- if (e.key === "Backspace" && !e.defaultPrevented && !fieldValue && selectedOptions.length) {
113
- removeOption(getOptionValue(selectedOptions[selectedOptions.length - 1]));
114
- e.preventDefault();
115
- }
116
-
117
- if (e.key === "Enter" && !e.defaultPrevented && fieldValue) {
118
- addOptionFromInput();
119
- e.preventDefault();
120
- }
121
- };
122
-
123
- var handleBlur = function handleBlur(e) {
124
- if (focused) {
125
- setFocused(false);
126
- }
127
-
128
- onBlur(e);
129
- };
130
-
131
- var handleFocus = function handleFocus(e) {
132
- if (!focused) {
133
- setFocused(true);
134
- }
135
-
136
- onFocus(e);
137
- };
138
-
139
- var handleChipRemove = function handleChipRemove(_, value) {
140
- if (value !== undefined) {
141
- removeOption(value);
142
- }
143
- };
144
-
145
- var handleClick = function handleClick(e) {
146
- if (isDisabled) {
147
- e.preventDefault();
148
- return;
149
- }
150
-
151
- if ((inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) !== null && !focused) {
152
- inputRef.current.focus();
153
- }
154
- };
11
+ export var ChipsInput = function ChipsInput(_ref) {
12
+ var style = _ref.style,
13
+ className = _ref.className,
14
+ getRootRef = _ref.getRootRef,
15
+ before = _ref.before,
16
+ after = _ref.after,
17
+ status = _ref.status,
18
+ restProps = _objectWithoutProperties(_ref, _excluded);
155
19
 
156
20
  return createScopedElement(FormField, {
157
21
  getRootRef: getRootRef,
158
- vkuiClass: classNames("ChipsInput", "ChipsInput--sizeY-".concat(sizeY), focused && "ChipsInput--focused", !!selectedOptions.length && "ChipsInput--withChips"),
22
+ vkuiClass: "ChipsInput",
159
23
  className: className,
160
24
  style: style,
161
25
  disabled: restProps.disabled,
162
26
  before: before,
163
27
  after: after,
164
- onClick: handleClick,
165
28
  role: "application",
166
29
  "aria-disabled": restProps.disabled,
167
- "aria-readonly": restProps.readOnly
168
- }, createScopedElement("div", {
169
- vkuiClass: "ChipsInput__container",
170
- role: "presentation"
171
- }, selectedOptions.map(function (option) {
172
- var value = getOptionValue(option);
173
- var label = getOptionLabel(option);
174
- return createScopedElement(React.Fragment, {
175
- key: "".concat(_typeof(value), "-").concat(value)
176
- }, renderChip({
177
- option: option,
178
- value: value,
179
- label: label,
180
- onRemove: handleChipRemove,
181
- disabled: Boolean(restProps.disabled),
182
- className: prefixClass("ChipsInput__chip")
183
- }));
184
- }), createScopedElement("label", {
185
- vkuiClass: "ChipsInput__input-container",
186
- "aria-label": inputAriaLabel
187
- }, createScopedElement("input", _extends({
188
- ref: inputRef,
189
- value: fieldValue,
190
- autoCapitalize: "none",
191
- autoComplete: "off",
192
- autoCorrect: "off",
193
- spellCheck: false,
194
- "aria-autocomplete": "list",
195
- vkuiClass: "ChipsInput__el",
196
- onChange: handleInputChange,
197
- onKeyDown: handleKeyDown,
198
- onFocus: handleFocus,
199
- onBlur: handleBlur,
200
- placeholder: selectedOptions.length ? undefined : placeholder
201
- }, restProps)))));
30
+ "aria-readonly": restProps.readOnly,
31
+ status: status
32
+ }, createScopedElement(ChipsInputBase, restProps));
202
33
  };
203
34
  //# sourceMappingURL=ChipsInput.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"names":["React","FormField","classNames","Chip","noop","useChipsInput","useAdaptivity","prefixClass","useExternRef","chipsInputDefaultProps","type","onChange","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","ChipsInput","propsWithDefault","style","children","className","getRef","getRootRef","placeholder","before","after","restProps","sizeY","useState","focused","setFocused","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","map","onRemove","Boolean"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,SAAT;AACA,SAASC,UAAT;AACA,SAASC,IAAT;AACA,SAASC,IAAT;AACA,SAASC,aAAT;AACA,SAASC,aAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA;AAoCA,OAAO,IAAMC,sBAA4C,GAAG;AAC1DC,EAAAA,IAAI,EAAE,MADoD;AAE1DC,EAAAA,QAAQ,EAAEP,IAFgD;AAG1DQ,EAAAA,aAAa,EAAER,IAH2C;AAI1DS,EAAAA,SAAS,EAAET,IAJ+C;AAK1DU,EAAAA,MAAM,EAAEV,IALkD;AAM1DW,EAAAA,OAAO,EAAEX,IANiD;AAO1DY,EAAAA,KAAK,EAAE,EAPmD;AAQ1DC,EAAAA,UAAU,EAAE,EAR8C;AAS1DC,EAAAA,cAAc,EAAE,0BAT0C;AAU1DC,EAAAA,cAAc,EAAE,wBAACC,MAAD;AAAA,WAAYA,MAAM,CAACJ,KAAnB;AAAA,GAV0C;AAW1DK,EAAAA,cAAc,EAAE,wBAACD,MAAD;AAAA,WAAYA,MAAM,CAACE,KAAnB;AAAA,GAX0C;AAY1DC,EAAAA,gBAAgB,EAAE,0BAACC,CAAD,EAAIF,KAAJ;AAAA,WAAe;AAC/BN,MAAAA,KAAK,EAAEM,KADwB;AAE/BA,MAAAA,KAAK,EAALA;AAF+B,KAAf;AAAA,GAZwC;AAgB1DG,EAAAA,UAhB0D,sBAgB/CC,KAhB+C,EAgBxC;AAChB,QAAI,CAACA,KAAL,EAAY;AACV,aAAO,IAAP;AACD;;AAED,QAAQC,QAAR,GAA4CD,KAA5C,CAAQC,QAAR;AAAA,QAAkBX,KAAlB,GAA4CU,KAA5C,CAAkBV,KAAlB;AAAA,QAAyBM,KAAzB,GAA4CI,KAA5C,CAAyBJ,KAAzB;AAAA,QAAmCM,IAAnC,4BAA4CF,KAA5C;;AACA,WACE,oBAAC,IAAD;AAAM,MAAA,KAAK,EAAEV,KAAb;AAAoB,MAAA,SAAS,EAAE,CAACW;AAAhC,OAA8CC,IAA9C,GACGN,KADH,CADF;AAKD;AA3ByD,CAArD;AA8BP;AACA;AACA;;AACA,OAAO,IAAMO,UAAU,GAAG,SAAbA,UAAa,CACxBH,KADwB,EAErB;AACH,MAAMI,gBAAgB,mCAAQrB,sBAAR,GAAmCiB,KAAnC,CAAtB;;AACA,MACEK,KADF,GAsBID,gBAtBJ,CACEC,KADF;AAAA,MAEEf,KAFF,GAsBIc,gBAtBJ,CAEEd,KAFF;AAAA,MAGEL,QAHF,GAsBImB,gBAtBJ,CAGEnB,QAHF;AAAA,MAIEC,aAJF,GAsBIkB,gBAtBJ,CAIElB,aAJF;AAAA,MAKEC,SALF,GAsBIiB,gBAtBJ,CAKEjB,SALF;AAAA,MAMEC,MANF,GAsBIgB,gBAtBJ,CAMEhB,MANF;AAAA,MAOEC,OAPF,GAsBIe,gBAtBJ,CAOEf,OAPF;AAAA,MAQEiB,QARF,GAsBIF,gBAtBJ,CAQEE,QARF;AAAA,MASEC,SATF,GAsBIH,gBAtBJ,CASEG,SATF;AAAA,MAUEhB,UAVF,GAsBIa,gBAtBJ,CAUEb,UAVF;AAAA,MAWEiB,MAXF,GAsBIJ,gBAtBJ,CAWEI,MAXF;AAAA,MAYEC,UAZF,GAsBIL,gBAtBJ,CAYEK,UAZF;AAAA,MAaEC,WAbF,GAsBIN,gBAtBJ,CAaEM,WAbF;AAAA,MAcEjB,cAdF,GAsBIW,gBAtBJ,CAcEX,cAdF;AAAA,MAeEE,cAfF,GAsBIS,gBAtBJ,CAeET,cAfF;AAAA,MAgBEE,gBAhBF,GAsBIO,gBAtBJ,CAgBEP,gBAhBF;AAAA,MAiBEE,UAjBF,GAsBIK,gBAtBJ,CAiBEL,UAjBF;AAAA,MAkBEY,MAlBF,GAsBIP,gBAtBJ,CAkBEO,MAlBF;AAAA,MAmBEC,KAnBF,GAsBIR,gBAtBJ,CAmBEQ,KAnBF;AAAA,MAoBEpB,cApBF,GAsBIY,gBAtBJ,CAoBEZ,cApBF;AAAA,MAqBKqB,SArBL,4BAsBIT,gBAtBJ;;AAuBA,uBAAkBxB,aAAa,EAA/B;AAAA,MAAQkC,KAAR,kBAAQA,KAAR;;AAEA,wBAA8BxC,KAAK,CAACyC,QAAN,CAAe,KAAf,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACA,uBAMItC,aAAa,CAACyB,gBAAD,CANjB;AAAA,MACEc,UADF,kBACEA,UADF;AAAA,MAEEC,kBAFF,kBAEEA,kBAFF;AAAA,MAGEC,YAHF,kBAGEA,YAHF;AAAA,MAIEC,eAJF,kBAIEA,eAJF;AAAA,MAKEC,iBALF,kBAKEA,iBALF;;AAOA,MAAMC,QAAQ,GAAGzC,YAAY,CAAC0B,MAAD,CAA7B;AAEA,MAAMgB,UAAU,GAAGX,SAAS,CAACZ,QAAV,IAAsBY,SAAS,CAACY,QAAnD;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAA8C;AAClE,QAAIH,UAAJ,EAAgB;AACdG,MAAAA,CAAC,CAACC,cAAF;AACA;AACD;;AAEDzC,IAAAA,SAAS,CAAEwC,CAAF,CAAT;;AAEA,QACEA,CAAC,CAACE,GAAF,KAAU,WAAV,IACA,CAACF,CAAC,CAACG,gBADH,IAEA,CAACZ,UAFD,IAGAG,eAAe,CAACU,MAJlB,EAKE;AACAX,MAAAA,YAAY,CACV3B,cAAc,CAAE4B,eAAe,CAACA,eAAe,CAACU,MAAhB,GAAyB,CAA1B,CAAjB,CADJ,CAAZ;AAGAJ,MAAAA,CAAC,CAACC,cAAF;AACD;;AAED,QAAID,CAAC,CAACE,GAAF,KAAU,OAAV,IAAqB,CAACF,CAAC,CAACG,gBAAxB,IAA4CZ,UAAhD,EAA4D;AAC1DC,MAAAA,kBAAkB;AAClBQ,MAAAA,CAAC,CAACC,cAAF;AACD;AACF,GAxBD;;AA0BA,MAAMI,UAAU,GAAG,SAAbA,UAAa,CAACL,CAAD,EAA2C;AAC5D,QAAIX,OAAJ,EAAa;AACXC,MAAAA,UAAU,CAAC,KAAD,CAAV;AACD;;AACD7B,IAAAA,MAAM,CAAEuC,CAAF,CAAN;AACD,GALD;;AAOA,MAAMM,WAAW,GAAG,SAAdA,WAAc,CAACN,CAAD,EAA2C;AAC7D,QAAI,CAACX,OAAL,EAAc;AACZC,MAAAA,UAAU,CAAC,IAAD,CAAV;AACD;;AACD5B,IAAAA,OAAO,CAAEsC,CAAF,CAAP;AACD,GALD;;AAOA,MAAMO,gBAAgB,GAAG,SAAnBA,gBAAmB,CACvBpC,CADuB,EAEvBR,KAFuB,EAGpB;AACH,QAAIA,KAAK,KAAK6C,SAAd,EAAyB;AACvBf,MAAAA,YAAY,CAAC9B,KAAD,CAAZ;AACD;AACF,GAPD;;AASA,MAAM8C,WAAW,GAAG,SAAdA,WAAc,CAACT,CAAD,EAAyC;AAC3D,QAAIH,UAAJ,EAAgB;AACdG,MAAAA,CAAC,CAACC,cAAF;AACA;AACD;;AAED,QAAI,CAAAL,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEc,OAAV,MAAsB,IAAtB,IAA8B,CAACrB,OAAnC,EAA4C;AAC1CO,MAAAA,QAAQ,CAACc,OAAT,CAAiBC,KAAjB;AACD;AACF,GATD;;AAWA,SACE,oBAAC,SAAD;AACE,IAAA,UAAU,EAAE7B,UADd;AAEE,IAAA,SAAS,EAAEjC,UAAU,CACnB,YADmB,8BAEEsC,KAFF,GAGnBE,OAAO,IAAI,qBAHQ,EAInB,CAAC,CAACK,eAAe,CAACU,MAAlB,IAA4B,uBAJT,CAFvB;AAQE,IAAA,SAAS,EAAExB,SARb;AASE,IAAA,KAAK,EAAEF,KATT;AAUE,IAAA,QAAQ,EAAEQ,SAAS,CAACZ,QAVtB;AAWE,IAAA,MAAM,EAAEU,MAXV;AAYE,IAAA,KAAK,EAAEC,KAZT;AAaE,IAAA,OAAO,EAAEwB,WAbX;AAcE,IAAA,IAAI,EAAC,aAdP;AAeE,qBAAevB,SAAS,CAACZ,QAf3B;AAgBE,qBAAeY,SAAS,CAACY;AAhB3B,KAkBE;AAAK,IAAA,SAAS,EAAC,uBAAf;AAAuC,IAAA,IAAI,EAAC;AAA5C,KACGJ,eAAe,CAACkB,GAAhB,CAAoB,UAAC7C,MAAD,EAAoB;AACvC,QAAMJ,KAAK,GAAGG,cAAc,CAAEC,MAAF,CAA5B;AACA,QAAME,KAAK,GAAGD,cAAc,CAAED,MAAF,CAA5B;AAEA,WACE,oBAAC,KAAD,CAAO,QAAP;AAAgB,MAAA,GAAG,oBAAYJ,KAAZ,eAAqBA,KAArB;AAAnB,OACGS,UAAU,CAAE;AACXL,MAAAA,MAAM,EAANA,MADW;AAEXJ,MAAAA,KAAK,EAALA,KAFW;AAGXM,MAAAA,KAAK,EAALA,KAHW;AAIX4C,MAAAA,QAAQ,EAAEN,gBAJC;AAKXjC,MAAAA,QAAQ,EAAEwC,OAAO,CAAC5B,SAAS,CAACZ,QAAX,CALN;AAMXM,MAAAA,SAAS,EAAE1B,WAAW,CAAC,kBAAD;AANX,KAAF,CADb,CADF;AAYD,GAhBA,CADH,EAkBE;AACE,IAAA,SAAS,EAAC,6BADZ;AAEE,kBAAYW;AAFd,KAIE;AACE,IAAA,GAAG,EAAE+B,QADP;AAEE,IAAA,KAAK,EAAEL,UAFT;AAGE,IAAA,cAAc,EAAC,MAHjB;AAIE,IAAA,YAAY,EAAC,KAJf;AAKE,IAAA,WAAW,EAAC,KALd;AAME,IAAA,UAAU,EAAE,KANd;AAOE,yBAAkB,MAPpB;AAQE,IAAA,SAAS,EAAC,gBARZ;AASE,IAAA,QAAQ,EAAEI,iBATZ;AAUE,IAAA,SAAS,EAAEI,aAVb;AAWE,IAAA,OAAO,EAAEO,WAXX;AAYE,IAAA,MAAM,EAAED,UAZV;AAaE,IAAA,WAAW,EAAEX,eAAe,CAACU,MAAhB,GAAyBI,SAAzB,GAAqCzB;AAbpD,KAcMG,SAdN,EAJF,CAlBF,CAlBF,CADF;AA6DD,CAlKM","sourcesContent":["import * as React from \"react\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Chip, ChipProps } from \"../Chip/Chip\";\nimport { noop } from \"../../lib/utils\";\nimport { useChipsInput } from \"./useChipsInput\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport \"./ChipsInput.css\";\n\nexport type ChipsInputValue = string | number;\n\nexport interface ChipsInputOption {\n value?: ChipsInputValue;\n label?: string;\n [otherProp: string]: any;\n}\n\nexport interface RenderChip<Option extends ChipsInputOption> extends ChipProps {\n label: string;\n option: Option;\n disabled: boolean;\n}\n\nexport interface ChipsInputProps<Option extends ChipsInputOption>\n extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"value\" | \"onChange\"\n >,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasAlign,\n FormFieldProps {\n value: Option[];\n inputValue?: string;\n onChange?: (o: Option[]) => void;\n onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;\n getOptionValue?: (o?: Option) => ChipsInputValue;\n getOptionLabel?: (o?: Option) => string;\n getNewOptionData?: (v?: ChipsInputValue, l?: string) => Option;\n renderChip?: (props?: RenderChip<Option>) => React.ReactNode;\n inputAriaLabel?: string;\n}\n\nexport const chipsInputDefaultProps: ChipsInputProps<any> = {\n type: \"text\",\n onChange: noop,\n onInputChange: noop,\n onKeyDown: noop,\n onBlur: noop,\n onFocus: noop,\n value: [],\n inputValue: \"\",\n inputAriaLabel: \"Введите ваше значение...\",\n getOptionValue: (option) => option.value,\n getOptionLabel: (option) => option.label,\n getNewOptionData: (_, label) => ({\n value: label,\n label,\n }),\n renderChip(props) {\n if (!props) {\n return null;\n }\n\n const { disabled, value, label, ...rest } = props;\n return (\n <Chip value={value} removable={!disabled} {...rest}>\n {label}\n </Chip>\n );\n },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsInput\n */\nexport const ChipsInput = <Option extends ChipsInputOption>(\n props: ChipsInputProps<Option>\n) => {\n const propsWithDefault = { ...chipsInputDefaultProps, ...props };\n const {\n style,\n value,\n onChange,\n onInputChange,\n onKeyDown,\n onBlur,\n onFocus,\n children,\n className,\n inputValue,\n getRef,\n getRootRef,\n placeholder,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n renderChip,\n before,\n after,\n inputAriaLabel,\n ...restProps\n } = propsWithDefault;\n const { sizeY } = useAdaptivity();\n\n const [focused, setFocused] = React.useState(false);\n const {\n fieldValue,\n addOptionFromInput,\n removeOption,\n selectedOptions,\n handleInputChange,\n } = useChipsInput(propsWithDefault);\n const inputRef = useExternRef(getRef);\n\n const isDisabled = restProps.disabled || restProps.readOnly;\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (isDisabled) {\n e.preventDefault();\n return;\n }\n\n onKeyDown!(e);\n\n if (\n e.key === \"Backspace\" &&\n !e.defaultPrevented &&\n !fieldValue &&\n selectedOptions.length\n ) {\n removeOption(\n getOptionValue!(selectedOptions[selectedOptions.length - 1])\n );\n e.preventDefault();\n }\n\n if (e.key === \"Enter\" && !e.defaultPrevented && fieldValue) {\n addOptionFromInput();\n e.preventDefault();\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (focused) {\n setFocused(false);\n }\n onBlur!(e);\n };\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n setFocused(true);\n }\n onFocus!(e);\n };\n\n const handleChipRemove = (\n _: React.MouseEvent | undefined,\n value: ChipsInputValue | undefined\n ) => {\n if (value !== undefined) {\n removeOption(value);\n }\n };\n\n const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n if (isDisabled) {\n e.preventDefault();\n return;\n }\n\n if (inputRef?.current !== null && !focused) {\n inputRef.current.focus();\n }\n };\n\n return (\n <FormField\n getRootRef={getRootRef}\n vkuiClass={classNames(\n \"ChipsInput\",\n `ChipsInput--sizeY-${sizeY}`,\n focused && \"ChipsInput--focused\",\n !!selectedOptions.length && \"ChipsInput--withChips\"\n )}\n className={className}\n style={style}\n disabled={restProps.disabled}\n before={before}\n after={after}\n onClick={handleClick}\n role=\"application\"\n aria-disabled={restProps.disabled}\n aria-readonly={restProps.readOnly}\n >\n <div vkuiClass=\"ChipsInput__container\" role=\"presentation\">\n {selectedOptions.map((option: Option) => {\n const value = getOptionValue!(option);\n const label = getOptionLabel!(option);\n\n return (\n <React.Fragment key={`${typeof value}-${value}`}>\n {renderChip!({\n option,\n value,\n label,\n onRemove: handleChipRemove,\n disabled: Boolean(restProps.disabled),\n className: prefixClass(\"ChipsInput__chip\"),\n })}\n </React.Fragment>\n );\n })}\n <label\n vkuiClass=\"ChipsInput__input-container\"\n aria-label={inputAriaLabel}\n >\n <input\n ref={inputRef}\n value={fieldValue}\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n spellCheck={false}\n aria-autocomplete=\"list\"\n vkuiClass=\"ChipsInput__el\"\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n onBlur={handleBlur}\n placeholder={selectedOptions.length ? undefined : placeholder}\n {...restProps}\n />\n </label>\n </div>\n </FormField>\n );\n};\n"],"file":"ChipsInput.js"}
1
+ {"version":3,"sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"names":["FormField","ChipsInputBase","ChipsInput","style","className","getRootRef","before","after","status","restProps","disabled","readOnly"],"mappings":";;;AAAA,SAASA,SAAT;AAEA,SACEC,cADF;AAIA;;AAMA;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,OAQK;AAAA,MAP7BC,KAO6B,QAP7BA,KAO6B;AAAA,MAN7BC,SAM6B,QAN7BA,SAM6B;AAAA,MAL7BC,UAK6B,QAL7BA,UAK6B;AAAA,MAJ7BC,MAI6B,QAJ7BA,MAI6B;AAAA,MAH7BC,KAG6B,QAH7BA,KAG6B;AAAA,MAF7BC,MAE6B,QAF7BA,MAE6B;AAAA,MAD1BC,SAC0B;;AAC7B,SACE,oBAAC,SAAD;AACE,IAAA,UAAU,EAAEJ,UADd;AAEE,IAAA,SAAS,EAAC,YAFZ;AAGE,IAAA,SAAS,EAAED,SAHb;AAIE,IAAA,KAAK,EAAED,KAJT;AAKE,IAAA,QAAQ,EAAEM,SAAS,CAACC,QALtB;AAME,IAAA,MAAM,EAAEJ,MANV;AAOE,IAAA,KAAK,EAAEC,KAPT;AAQE,IAAA,IAAI,EAAC,aARP;AASE,qBAAeE,SAAS,CAACC,QAT3B;AAUE,qBAAeD,SAAS,CAACE,QAV3B;AAWE,IAAA,MAAM,EAAEH;AAXV,KAaE,oBAAC,cAAD,EAAoBC,SAApB,CAbF,CADF;AAiBD,CA1BM","sourcesContent":["import { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { ChipOption } from \"../Chip/Chip\";\nimport {\n ChipsInputBase,\n ChipsInputBaseProps,\n} from \"../ChipsInputBase/ChipsInputBase\";\nimport \"./ChipsInput.css\";\n\nexport interface ChipsInputProps<Option extends ChipOption>\n extends ChipsInputBaseProps<Option>,\n FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsInput\n */\nexport const ChipsInput = <Option extends ChipOption>({\n style,\n className,\n getRootRef,\n before,\n after,\n status,\n ...restProps\n}: ChipsInputProps<Option>) => {\n return (\n <FormField\n getRootRef={getRootRef}\n vkuiClass=\"ChipsInput\"\n className={className}\n style={style}\n disabled={restProps.disabled}\n before={before}\n after={after}\n role=\"application\"\n aria-disabled={restProps.disabled}\n aria-readonly={restProps.readOnly}\n status={status}\n >\n <ChipsInputBase {...restProps} />\n </FormField>\n );\n};\n"],"file":"ChipsInput.js"}
@@ -0,0 +1 @@
1
+ .vkuiChipsInputBase{display:flex;flex-grow:1;flex-shrink:1;flex-wrap:wrap;max-width:100%;overflow:hidden;padding:3px;position:relative;z-index:6}.vkuiChipsInputBase__chip{margin:2px;max-width:100%}.vkuiChipsInputBase__label{display:flex;flex:1;flex-direction:column;margin:2px 2px 2px 10px}.vkuiChipsInputBase__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;box-shadow:none;color:#000;color:var(--text_primary,var(--vkui--color_text_primary));font-size:15px;line-height:26px;margin-bottom:2px;padding:0;position:relative;width:100%;z-index:2}.vkuiChipsInputBase__el:focus{min-width:64px}.vkuiChipsInputBase__el::-ms-clear{display:none}.vkuiChipsInputBase__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,.64)}.vkuiChipsInputBase__el::-webkit-input-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiChipsInputBase__el::-moz-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiChipsInputBase__el::-ms-input-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiChipsInputBase__el::placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiChipsInputBase__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiChipsInputBase__el:disabled::-moz-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiChipsInputBase__el:disabled::-ms-input-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiChipsInputBase__el:disabled::placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiChipsInputBase__el[readonly]{cursor:default}.vkuiChipsInputBase--sizeY-compact{padding:1px}
@@ -0,0 +1,17 @@
1
+ import * as React from "react";
2
+ import { HasAlign, HasRef, HasRootRef } from "../../types";
3
+ import { ChipOption, ChipValue, RenderChip } from "../Chip/Chip";
4
+ import "./ChipsInputBase.css";
5
+ export interface ChipsInputBaseProps<Option extends ChipOption> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange">, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign {
6
+ value: Option[];
7
+ inputValue?: string;
8
+ onChange?: (o: Option[]) => void;
9
+ onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;
10
+ getOptionValue?: (o?: Option) => ChipValue;
11
+ getOptionLabel?: (o?: Option) => string;
12
+ getNewOptionData?: (v?: ChipValue, l?: string) => Option;
13
+ renderChip?: (props?: RenderChip<Option>) => React.ReactNode;
14
+ inputAriaLabel?: string;
15
+ }
16
+ export declare const chipsInputDefaultProps: ChipsInputBaseProps<any>;
17
+ export declare const ChipsInputBase: <Option extends ChipOption>(props: ChipsInputBaseProps<Option>) => JSX.Element;