@salutejs/plasma-new-hope 0.83.0-canary.1213.9176450261.0 → 0.84.0-canary.1194.9208145301.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (490) hide show
  1. package/cjs/components/Button/Button.css +6 -9
  2. package/cjs/components/Button/Button.js +2 -16
  3. package/cjs/components/Button/Button.js.map +1 -1
  4. package/cjs/components/Button/Button.styles.js +10 -31
  5. package/cjs/components/Button/Button.styles.js.map +1 -1
  6. package/cjs/components/Button/Button.styles_uqvh6u.css +5 -0
  7. package/cjs/components/Button/Button.tokens.js +0 -5
  8. package/cjs/components/Button/Button.tokens.js.map +1 -1
  9. package/cjs/components/Button/variations/_stretching/base.js +1 -1
  10. package/cjs/components/Button/variations/_stretching/base.js.map +1 -1
  11. package/{es/components/Button/variations/_stretching/base_hy8dc.css → cjs/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
  12. package/cjs/components/ButtonGroup/ButtonGroup.css +2 -2
  13. package/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  14. package/cjs/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  15. package/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -1
  16. package/cjs/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  17. package/{es/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → cjs/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
  18. package/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  19. package/cjs/components/ButtonGroup/variations/_view/base.js.map +1 -1
  20. package/cjs/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
  21. package/cjs/components/Combobox/hooks/useFocusController.js +1 -0
  22. package/cjs/components/Combobox/hooks/useFocusController.js.map +1 -1
  23. package/cjs/components/Drawer/Drawer.css +6 -9
  24. package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  25. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  26. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  27. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  28. package/cjs/components/IconButton/IconButton.css +7 -10
  29. package/cjs/components/IconButton/IconButton.styles.js +1 -1
  30. package/cjs/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  31. package/cjs/components/Notification/Notification.css +6 -9
  32. package/cjs/components/Notification/NotificationsProvider.css +6 -9
  33. package/cjs/components/Pagination/Pagination.css +8 -11
  34. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  35. package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  36. package/cjs/components/Select/Select.css +6 -9
  37. package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  38. package/cjs/components/Slider/Slider.css +69 -0
  39. package/cjs/components/Slider/Slider.js +48 -0
  40. package/cjs/components/Slider/Slider.js.map +1 -0
  41. package/cjs/components/Slider/Slider.tokens.js +79 -0
  42. package/cjs/components/Slider/Slider.tokens.js.map +1 -0
  43. package/cjs/components/Slider/components/Double/Double.css +62 -0
  44. package/cjs/components/Slider/components/Double/Double.js +306 -0
  45. package/cjs/components/Slider/components/Double/Double.js.map +1 -0
  46. package/cjs/components/Slider/components/Double/Double.styles.js +61 -0
  47. package/cjs/components/Slider/components/Double/Double.styles.js.map +1 -0
  48. package/cjs/components/Slider/components/Double/Double.styles_1jhda4u.css +7 -0
  49. package/cjs/components/Slider/components/Single/Single.css +16 -0
  50. package/cjs/components/Slider/components/Single/Single.js +164 -0
  51. package/cjs/components/Slider/components/Single/Single.js.map +1 -0
  52. package/cjs/components/Slider/components/Single/Single.styles.js +45 -0
  53. package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -0
  54. package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
  55. package/cjs/components/Slider/components/SliderBase/SliderBase.css +4 -0
  56. package/cjs/components/Slider/components/SliderBase/SliderBase.js +82 -0
  57. package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +1 -0
  58. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +33 -0
  59. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -0
  60. package/cjs/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +4 -0
  61. package/cjs/components/Slider/ui/Handler/Handler.css +4 -0
  62. package/cjs/components/Slider/ui/Handler/Handler.js +168 -0
  63. package/cjs/components/Slider/ui/Handler/Handler.js.map +1 -0
  64. package/cjs/components/Slider/ui/Handler/Handler.styles.js +21 -0
  65. package/cjs/components/Slider/ui/Handler/Handler.styles.js.map +1 -0
  66. package/cjs/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
  67. package/cjs/components/Slider/ui/Thumb/Thumb.css +1 -0
  68. package/cjs/components/Slider/ui/Thumb/Thumb.js +31 -0
  69. package/cjs/components/Slider/ui/Thumb/Thumb.js.map +1 -0
  70. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +15 -0
  71. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -0
  72. package/cjs/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
  73. package/cjs/components/Slider/utils/index.js +56 -0
  74. package/cjs/components/Slider/utils/index.js.map +1 -0
  75. package/cjs/components/Slider/variations/_disabled/base.js +9 -0
  76. package/cjs/components/Slider/variations/_disabled/base.js.map +1 -0
  77. package/cjs/components/Slider/variations/_disabled/base_x642ct.css +1 -0
  78. package/cjs/components/Slider/variations/_size/base.js +9 -0
  79. package/cjs/components/Slider/variations/_size/base.js.map +1 -0
  80. package/cjs/components/Slider/variations/_size/base_x642ct.css +1 -0
  81. package/cjs/components/Slider/variations/_view/base.js +9 -0
  82. package/cjs/components/Slider/variations/_view/base.js.map +1 -0
  83. package/cjs/components/Slider/variations/_view/base_x642ct.css +1 -0
  84. package/cjs/components/TextField/TextField.js +12 -3
  85. package/cjs/components/TextField/TextField.js.map +1 -1
  86. package/cjs/components/Toast/Toast.css +6 -9
  87. package/cjs/components/Toast/ToastController.css +6 -9
  88. package/cjs/engines/common.js +4 -0
  89. package/cjs/engines/common.js.map +1 -1
  90. package/cjs/engines/index.js.map +1 -1
  91. package/cjs/hooks/useIsomorphicLayoutEffect.js +15 -0
  92. package/cjs/hooks/useIsomorphicLayoutEffect.js.map +1 -0
  93. package/cjs/index.css +34 -12
  94. package/cjs/index.js +14 -0
  95. package/cjs/index.js.map +1 -1
  96. package/cjs/utils/canUseDOM.js +12 -0
  97. package/cjs/utils/canUseDOM.js.map +1 -0
  98. package/cjs/utils/index.js.map +1 -1
  99. package/es/components/Button/Button.css +6 -9
  100. package/es/components/Button/Button.js +3 -17
  101. package/es/components/Button/Button.js.map +1 -1
  102. package/es/components/Button/Button.styles.js +11 -29
  103. package/es/components/Button/Button.styles.js.map +1 -1
  104. package/es/components/Button/Button.styles_uqvh6u.css +5 -0
  105. package/es/components/Button/Button.tokens.js +0 -5
  106. package/es/components/Button/Button.tokens.js.map +1 -1
  107. package/es/components/Button/variations/_stretching/base.js +1 -1
  108. package/es/components/Button/variations/_stretching/base.js.map +1 -1
  109. package/{cjs/components/Button/variations/_stretching/base_hy8dc.css → es/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
  110. package/es/components/ButtonGroup/ButtonGroup.css +2 -2
  111. package/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  112. package/es/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  113. package/es/components/ButtonGroup/variations/_orientation/base.js +1 -1
  114. package/es/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  115. package/{cjs/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → es/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
  116. package/es/components/ButtonGroup/variations/_view/base.js +1 -1
  117. package/es/components/ButtonGroup/variations/_view/base.js.map +1 -1
  118. package/es/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
  119. package/es/components/Combobox/hooks/useFocusController.js +1 -0
  120. package/es/components/Combobox/hooks/useFocusController.js.map +1 -1
  121. package/es/components/Drawer/Drawer.css +6 -9
  122. package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  123. package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  124. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  125. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  126. package/es/components/IconButton/IconButton.css +7 -10
  127. package/es/components/IconButton/IconButton.styles.js +1 -1
  128. package/es/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  129. package/es/components/Notification/Notification.css +6 -9
  130. package/es/components/Notification/NotificationsProvider.css +6 -9
  131. package/es/components/Pagination/Pagination.css +8 -11
  132. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  133. package/es/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  134. package/es/components/Select/Select.css +6 -9
  135. package/es/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  136. package/es/components/Slider/Slider.css +69 -0
  137. package/es/components/Slider/Slider.js +43 -0
  138. package/es/components/Slider/Slider.js.map +1 -0
  139. package/es/components/Slider/Slider.tokens.js +74 -0
  140. package/es/components/Slider/Slider.tokens.js.map +1 -0
  141. package/es/components/Slider/components/Double/Double.css +62 -0
  142. package/es/components/Slider/components/Double/Double.js +302 -0
  143. package/es/components/Slider/components/Double/Double.js.map +1 -0
  144. package/es/components/Slider/components/Double/Double.styles.js +51 -0
  145. package/es/components/Slider/components/Double/Double.styles.js.map +1 -0
  146. package/es/components/Slider/components/Double/Double.styles_1jhda4u.css +7 -0
  147. package/es/components/Slider/components/Single/Single.css +16 -0
  148. package/es/components/Slider/components/Single/Single.js +160 -0
  149. package/es/components/Slider/components/Single/Single.js.map +1 -0
  150. package/es/components/Slider/components/Single/Single.styles.js +36 -0
  151. package/es/components/Slider/components/Single/Single.styles.js.map +1 -0
  152. package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
  153. package/es/components/Slider/components/SliderBase/SliderBase.css +4 -0
  154. package/es/components/Slider/components/SliderBase/SliderBase.js +78 -0
  155. package/es/components/Slider/components/SliderBase/SliderBase.js.map +1 -0
  156. package/es/components/Slider/components/SliderBase/SliderBase.styles.js +26 -0
  157. package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -0
  158. package/es/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +4 -0
  159. package/es/components/Slider/ui/Handler/Handler.css +4 -0
  160. package/es/components/Slider/ui/Handler/Handler.js +164 -0
  161. package/es/components/Slider/ui/Handler/Handler.js.map +1 -0
  162. package/es/components/Slider/ui/Handler/Handler.styles.js +16 -0
  163. package/es/components/Slider/ui/Handler/Handler.styles.js.map +1 -0
  164. package/es/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
  165. package/es/components/Slider/ui/Thumb/Thumb.css +1 -0
  166. package/es/components/Slider/ui/Thumb/Thumb.js +27 -0
  167. package/es/components/Slider/ui/Thumb/Thumb.js.map +1 -0
  168. package/es/components/Slider/ui/Thumb/Thumb.styles.js +11 -0
  169. package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -0
  170. package/es/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
  171. package/es/components/Slider/utils/index.js +50 -0
  172. package/es/components/Slider/utils/index.js.map +1 -0
  173. package/es/components/Slider/variations/_disabled/base.js +5 -0
  174. package/es/components/Slider/variations/_disabled/base.js.map +1 -0
  175. package/es/components/Slider/variations/_disabled/base_x642ct.css +1 -0
  176. package/es/components/Slider/variations/_size/base.js +5 -0
  177. package/es/components/Slider/variations/_size/base.js.map +1 -0
  178. package/es/components/Slider/variations/_size/base_x642ct.css +1 -0
  179. package/es/components/Slider/variations/_view/base.js +5 -0
  180. package/es/components/Slider/variations/_view/base.js.map +1 -0
  181. package/es/components/Slider/variations/_view/base_x642ct.css +1 -0
  182. package/es/components/TextField/TextField.js +12 -3
  183. package/es/components/TextField/TextField.js.map +1 -1
  184. package/es/components/Toast/Toast.css +6 -9
  185. package/es/components/Toast/ToastController.css +6 -9
  186. package/es/engines/common.js +4 -0
  187. package/es/engines/common.js.map +1 -1
  188. package/es/engines/index.js.map +1 -1
  189. package/es/hooks/useIsomorphicLayoutEffect.js +11 -0
  190. package/es/hooks/useIsomorphicLayoutEffect.js.map +1 -0
  191. package/es/index.css +34 -12
  192. package/es/index.js +8 -0
  193. package/es/index.js.map +1 -1
  194. package/es/utils/canUseDOM.js +8 -0
  195. package/es/utils/canUseDOM.js.map +1 -0
  196. package/es/utils/index.js.map +1 -1
  197. package/package.json +3 -2
  198. package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +3 -1
  199. package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
  200. package/styled-components/cjs/components/Button/Button.js +2 -16
  201. package/styled-components/cjs/components/Button/Button.styles.js +12 -20
  202. package/styled-components/cjs/components/Button/Button.template-doc.mdx +8 -51
  203. package/styled-components/cjs/components/Button/Button.tokens.js +0 -5
  204. package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
  205. package/styled-components/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  206. package/styled-components/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -2
  207. package/styled-components/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  208. package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +68 -0
  209. package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  210. package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
  211. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
  212. package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
  213. package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +57 -0
  214. package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
  215. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +262 -261
  216. package/styled-components/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  217. package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +156 -0
  218. package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
  219. package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
  220. package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +85 -33
  221. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +1 -2
  222. package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +130 -0
  223. package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
  224. package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +70 -74
  225. package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +33 -0
  226. package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +2 -1
  227. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
  228. package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  229. package/styled-components/cjs/components/Slider/Slider.js +47 -0
  230. package/styled-components/cjs/components/Slider/Slider.tokens.js +77 -0
  231. package/styled-components/cjs/components/Slider/Slider.types.js +5 -0
  232. package/styled-components/cjs/components/Slider/components/Double/Double.js +318 -0
  233. package/styled-components/cjs/components/Slider/components/Double/Double.styles.js +36 -0
  234. package/styled-components/cjs/components/Slider/components/Double/Double.types.js +5 -0
  235. package/styled-components/cjs/components/Slider/components/Single/Single.js +176 -0
  236. package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +27 -0
  237. package/styled-components/cjs/components/Slider/components/Single/Single.types.js +5 -0
  238. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +83 -0
  239. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +21 -0
  240. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.types.js +5 -0
  241. package/styled-components/cjs/components/Slider/components/index.js +27 -0
  242. package/styled-components/cjs/components/Slider/index.js +32 -0
  243. package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +177 -0
  244. package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +15 -0
  245. package/styled-components/cjs/components/Slider/ui/Handler/Handler.types.js +5 -0
  246. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +32 -0
  247. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +18 -0
  248. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.types.js +5 -0
  249. package/styled-components/cjs/components/Slider/ui/index.js +63 -0
  250. package/styled-components/cjs/components/Slider/utils/index.js +55 -0
  251. package/styled-components/cjs/components/Slider/variations/_disabled/base.js +8 -0
  252. package/styled-components/cjs/components/Slider/variations/_disabled/tokens.json +4 -0
  253. package/styled-components/cjs/components/Slider/variations/_size/base.js +8 -0
  254. package/styled-components/cjs/components/Slider/variations/_size/tokens.json +0 -0
  255. package/styled-components/cjs/components/Slider/variations/_view/base.js +8 -0
  256. package/styled-components/cjs/components/Slider/variations/_view/tokens.json +0 -0
  257. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
  258. package/styled-components/cjs/components/TextField/TextField.js +12 -3
  259. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
  260. package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +120 -0
  261. package/styled-components/cjs/engines/common.js +4 -0
  262. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  263. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  264. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  265. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  266. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +29 -0
  267. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.js +16 -0
  268. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +169 -0
  269. package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
  270. package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  271. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  272. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  273. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +29 -0
  274. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.js +16 -0
  275. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +168 -0
  276. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
  277. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  278. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  279. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  280. package/styled-components/cjs/hooks/index.js +8 -1
  281. package/styled-components/cjs/hooks/useIsomorphicLayoutEffect.js +12 -0
  282. package/styled-components/cjs/index.js +11 -0
  283. package/styled-components/cjs/utils/canUseDOM.js +11 -0
  284. package/styled-components/cjs/utils/index.js +7 -0
  285. package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +3 -1
  286. package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
  287. package/styled-components/es/components/Button/Button.js +3 -17
  288. package/styled-components/es/components/Button/Button.styles.js +11 -19
  289. package/styled-components/es/components/Button/Button.template-doc.mdx +8 -51
  290. package/styled-components/es/components/Button/Button.tokens.js +0 -5
  291. package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
  292. package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  293. package/styled-components/es/components/ButtonGroup/variations/_orientation/base.js +2 -3
  294. package/styled-components/es/components/ButtonGroup/variations/_view/base.js +1 -1
  295. package/styled-components/es/components/Cell/Cell.template-doc.mdx +68 -0
  296. package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  297. package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
  298. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
  299. package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
  300. package/styled-components/es/components/Divider/Divider.template-docs.mdx +57 -0
  301. package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
  302. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +262 -261
  303. package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  304. package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +156 -0
  305. package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
  306. package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
  307. package/styled-components/es/components/Modal/Modal.template-doc.mdx +85 -33
  308. package/styled-components/es/components/Notification/Notification.template-doc.mdx +1 -2
  309. package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +130 -0
  310. package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
  311. package/styled-components/es/components/Popup/Popup.template-doc.mdx +70 -74
  312. package/styled-components/es/components/Progress/Progress.template-doc.mdx +33 -0
  313. package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +2 -1
  314. package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
  315. package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  316. package/styled-components/es/components/Slider/Slider.js +38 -0
  317. package/styled-components/es/components/Slider/Slider.tokens.js +71 -0
  318. package/styled-components/es/components/Slider/Slider.types.js +1 -0
  319. package/styled-components/es/components/Slider/components/Double/Double.js +310 -0
  320. package/styled-components/es/components/Slider/components/Double/Double.styles.js +29 -0
  321. package/styled-components/es/components/Slider/components/Double/Double.types.js +1 -0
  322. package/styled-components/es/components/Slider/components/Single/Single.js +168 -0
  323. package/styled-components/es/components/Slider/components/Single/Single.styles.js +20 -0
  324. package/styled-components/es/components/Slider/components/Single/Single.types.js +1 -0
  325. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +74 -0
  326. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +14 -0
  327. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.types.js +1 -0
  328. package/styled-components/es/components/Slider/components/index.js +3 -0
  329. package/styled-components/es/components/Slider/index.js +3 -0
  330. package/styled-components/es/components/Slider/ui/Handler/Handler.js +168 -0
  331. package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +8 -0
  332. package/styled-components/es/components/Slider/ui/Handler/Handler.types.js +1 -0
  333. package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +25 -0
  334. package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +11 -0
  335. package/styled-components/es/components/Slider/ui/Thumb/Thumb.types.js +1 -0
  336. package/styled-components/es/components/Slider/ui/index.js +5 -0
  337. package/styled-components/es/components/Slider/utils/index.js +47 -0
  338. package/styled-components/es/components/Slider/variations/_disabled/base.js +2 -0
  339. package/styled-components/es/components/Slider/variations/_disabled/tokens.json +4 -0
  340. package/styled-components/es/components/Slider/variations/_size/base.js +2 -0
  341. package/styled-components/es/components/Slider/variations/_size/tokens.json +0 -0
  342. package/styled-components/es/components/Slider/variations/_view/base.js +2 -0
  343. package/styled-components/es/components/Slider/variations/_view/tokens.json +0 -0
  344. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
  345. package/styled-components/es/components/TextField/TextField.js +12 -3
  346. package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
  347. package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +120 -0
  348. package/styled-components/es/engines/common.js +4 -0
  349. package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  350. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  351. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  352. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  353. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +23 -0
  354. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.js +10 -0
  355. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +169 -0
  356. package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
  357. package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  358. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  359. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  360. package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +23 -0
  361. package/styled-components/es/examples/plasma_web/components/Slider/Slider.js +10 -0
  362. package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +168 -0
  363. package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
  364. package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  365. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  366. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  367. package/styled-components/es/hooks/index.js +2 -1
  368. package/styled-components/es/hooks/useIsomorphicLayoutEffect.js +7 -0
  369. package/styled-components/es/index.js +2 -1
  370. package/styled-components/es/utils/canUseDOM.js +5 -0
  371. package/styled-components/es/utils/index.js +1 -0
  372. package/types/components/Button/Button.d.ts.map +1 -1
  373. package/types/components/Button/Button.styles.d.ts +1 -5
  374. package/types/components/Button/Button.styles.d.ts.map +1 -1
  375. package/types/components/Button/Button.tokens.d.ts +0 -5
  376. package/types/components/Button/Button.tokens.d.ts.map +1 -1
  377. package/types/components/Button/Button.types.d.ts +4 -16
  378. package/types/components/Button/Button.types.d.ts.map +1 -1
  379. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts +0 -1
  380. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts.map +1 -1
  381. package/types/components/ButtonGroup/variations/_orientation/base.d.ts.map +1 -1
  382. package/types/components/ButtonGroup/variations/_view/base.d.ts.map +1 -1
  383. package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts.map +1 -1
  384. package/types/components/Notification/Notification.styles.d.ts +1 -43
  385. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  386. package/types/components/Pagination/Pagination.styles.d.ts +2 -86
  387. package/types/components/Pagination/Pagination.styles.d.ts.map +1 -1
  388. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts +1 -43
  389. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts.map +1 -1
  390. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts +1 -43
  391. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts.map +1 -1
  392. package/types/components/Slider/Slider.d.ts +27 -0
  393. package/types/components/Slider/Slider.d.ts.map +1 -0
  394. package/types/components/Slider/Slider.tokens.d.ts +72 -0
  395. package/types/components/Slider/Slider.tokens.d.ts.map +1 -0
  396. package/types/components/Slider/Slider.types.d.ts +3 -0
  397. package/types/components/Slider/Slider.types.d.ts.map +1 -0
  398. package/types/components/Slider/components/Double/Double.d.ts +4 -0
  399. package/types/components/Slider/components/Double/Double.d.ts.map +1 -0
  400. package/types/components/Slider/components/Double/Double.styles.d.ts +43 -0
  401. package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -0
  402. package/types/components/Slider/components/Double/Double.types.d.ts +65 -0
  403. package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -0
  404. package/types/components/Slider/components/Single/Single.d.ts +4 -0
  405. package/types/components/Slider/components/Single/Single.d.ts.map +1 -0
  406. package/types/components/Slider/components/Single/Single.styles.d.ts +8 -0
  407. package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -0
  408. package/types/components/Slider/components/Single/Single.types.d.ts +55 -0
  409. package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -0
  410. package/types/components/Slider/components/SliderBase/SliderBase.d.ts +4 -0
  411. package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -0
  412. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +6 -0
  413. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -0
  414. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +45 -0
  415. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -0
  416. package/types/components/Slider/components/index.d.ts +6 -0
  417. package/types/components/Slider/components/index.d.ts.map +1 -0
  418. package/types/components/Slider/index.d.ts +6 -0
  419. package/types/components/Slider/index.d.ts.map +1 -0
  420. package/types/components/Slider/ui/Handler/Handler.d.ts +9 -0
  421. package/types/components/Slider/ui/Handler/Handler.d.ts.map +1 -0
  422. package/types/components/Slider/ui/Handler/Handler.styles.d.ts +4 -0
  423. package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +1 -0
  424. package/types/components/Slider/ui/Handler/Handler.types.d.ts +24 -0
  425. package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -0
  426. package/types/components/Slider/ui/Thumb/Thumb.d.ts +4 -0
  427. package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -0
  428. package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts +5 -0
  429. package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -0
  430. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +12 -0
  431. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -0
  432. package/types/components/Slider/ui/index.d.ts +6 -0
  433. package/types/components/Slider/ui/index.d.ts.map +1 -0
  434. package/types/components/Slider/utils/index.d.ts +33 -0
  435. package/types/components/Slider/utils/index.d.ts.map +1 -0
  436. package/types/components/Slider/variations/_disabled/base.d.ts +2 -0
  437. package/types/components/Slider/variations/_disabled/base.d.ts.map +1 -0
  438. package/types/components/Slider/variations/_size/base.d.ts +2 -0
  439. package/types/components/Slider/variations/_size/base.d.ts.map +1 -0
  440. package/types/components/Slider/variations/_view/base.d.ts +2 -0
  441. package/types/components/Slider/variations/_view/base.d.ts.map +1 -0
  442. package/types/components/TextField/TextField.d.ts.map +1 -1
  443. package/types/components/Toast/Toast.styles.d.ts +1 -43
  444. package/types/components/Toast/Toast.styles.d.ts.map +1 -1
  445. package/types/components/Toast/utils.d.ts +1 -43
  446. package/types/components/Toast/utils.d.ts.map +1 -1
  447. package/types/engines/common.d.ts +3 -3
  448. package/types/engines/common.d.ts.map +1 -1
  449. package/types/engines/index.d.ts +1 -1
  450. package/types/engines/index.d.ts.map +1 -1
  451. package/types/engines/types.d.ts +4 -0
  452. package/types/engines/types.d.ts.map +1 -1
  453. package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
  454. package/types/examples/plasma_b2c/components/Button/Button.d.ts +1 -43
  455. package/types/examples/plasma_b2c/components/Button/Button.d.ts.map +1 -1
  456. package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  457. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +1 -43
  458. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -1
  459. package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts +22 -0
  460. package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -0
  461. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +21 -0
  462. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -0
  463. package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
  464. package/types/examples/plasma_web/components/Button/Button.d.ts +1 -43
  465. package/types/examples/plasma_web/components/Button/Button.d.ts.map +1 -1
  466. package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  467. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +1 -43
  468. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -1
  469. package/types/examples/plasma_web/components/Slider/Slider.config.d.ts +22 -0
  470. package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -0
  471. package/types/examples/plasma_web/components/Slider/Slider.d.ts +21 -0
  472. package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -0
  473. package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
  474. package/types/examples/sds_engineer/components/Button/Button.d.ts +1 -43
  475. package/types/examples/sds_engineer/components/Button/Button.d.ts.map +1 -1
  476. package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  477. package/types/hooks/index.d.ts +1 -0
  478. package/types/hooks/index.d.ts.map +1 -1
  479. package/types/hooks/useIsomorphicLayoutEffect.d.ts +6 -0
  480. package/types/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -0
  481. package/types/index.d.ts +1 -0
  482. package/types/index.d.ts.map +1 -1
  483. package/types/utils/canUseDOM.d.ts +6 -0
  484. package/types/utils/canUseDOM.d.ts.map +1 -0
  485. package/types/utils/index.d.ts +1 -0
  486. package/types/utils/index.d.ts.map +1 -1
  487. package/cjs/components/Button/Button.styles_nedem1.css +0 -8
  488. package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
  489. package/es/components/Button/Button.styles_nedem1.css +0 -8
  490. package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
@@ -3,20 +3,21 @@ id: dropdown
3
3
  title: Dropdown
4
4
  ---
5
5
 
6
- import { PropsTable, Description, StorybookLink } from '@site/src/components';
6
+ import { PropsTable, Description } from '@site/src/components';
7
7
  import Tabs from '@theme/Tabs';
8
8
  import TabItem from '@theme/TabItem';
9
9
 
10
10
  # Dropdown
11
11
  Выпадающий многоуровневый список.
12
12
 
13
- <StorybookLink name="Dropdown" />
14
-
15
13
  <Description name="Dropdown" />
16
14
  <PropsTable name="Dropdown" />
17
15
 
18
16
  ## Использование
19
- Обязательным параметром является только массив `items`. Внутри items может быть такой же вложенный массив items. Формат следующий:
17
+ Обязательным параметром является только массив `items`.
18
+ Внутри items может быть такой же вложенный массив items.
19
+
20
+ Формат следующий:
20
21
 
21
22
  ```tsx
22
23
  type Items = Array<{
@@ -68,272 +69,272 @@ type Items = Array<{
68
69
  <TabItem value="default" label="Default" default>
69
70
  ```tsx live
70
71
  import React from 'react';
71
- import { Button, Dropdown } from '@salutejs/plasma-web';
72
-
73
- export function App() {
74
- const items = [
75
- {
76
- value: 'north_america',
77
- label: 'Северная Америка',
78
- },
79
- {
80
- value: 'south_america',
81
- label: 'Южная Америка',
82
- items: [
83
- {
84
- value: 'brazil',
85
- label: 'Бразилия',
86
- items: [
87
- {
88
- value: 'rio_de_janeiro',
89
- label: 'Рио-де-Жанейро',
90
- },
91
- {
92
- value: 'sao_paulo',
93
- label: 'Сан-Паулу',
94
- },
95
- ],
96
- },
97
- {
98
- value: 'argentina',
99
- label: 'Аргентина',
100
- },
101
- ],
102
- },
103
- ];
104
-
105
-
106
- return (
107
- <div style={{ height:"300px" }}>
108
- <Dropdown
109
- items={items}
110
- >
111
- <Button text="Список стран" />
112
- </Dropdown>
113
- </div>
114
- );
115
- }
116
- ```
117
- </TabItem>
118
-
119
- <TabItem value="size" label="Size">
120
- Размер `Dropdown` задается с помощью свойства `size`.<br />
121
- Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`.
122
-
123
- ```tsx live
124
- import React from 'react';
125
- import { Button, Dropdown } from '@salutejs/plasma-web';
126
-
127
- export function App() {
128
- const items = [
129
- {
130
- value: 'north_america',
131
- label: 'Северная Америка',
132
- },
133
- {
134
- value: 'south_america',
135
- label: 'Южная Америка',
136
- items: [
137
- {
138
- value: 'brazil',
139
- label: 'Бразилия',
140
- items: [
141
- {
142
- value: 'rio_de_janeiro',
143
- label: 'Рио-де-Жанейро',
144
- },
145
- {
146
- value: 'sao_paulo',
147
- label: 'Сан-Паулу',
148
- },
149
- ],
150
- },
151
- {
152
- value: 'argentina',
153
- label: 'Аргентина',
154
- },
155
- ],
156
- },
157
- ];
158
-
159
- return (
160
- <div style={{ height: "300px", display: "flex", gap: "50px" }}>
161
- <Dropdown
162
- items={items}
163
- size="l"
164
- >
165
- <Button text="Список стран" />
166
- </Dropdown>
167
-
168
- <Dropdown
169
- items={items}
170
- size="m" // default
171
- >
172
- <Button text="Список стран" />
173
- </Dropdown>
174
-
175
- <Dropdown
176
- items={items}
177
- size="s"
178
- >
179
- <Button text="Список стран" />
180
- </Dropdown>
181
-
182
- <Dropdown
183
- items={items}
184
- size="xs"
185
- >
186
- <Button text="Список стран" />
187
- </Dropdown>
188
- </div>
189
- );
190
- }
191
- ```
192
- </TabItem>
193
-
194
- <TabItem value="placement" label="Placement">
195
- Параметр `placement` принимает либо строку: `"top"`, `"right"`, `"bottom"`, `"left"`, `"auto"`, либо массив этих же значений, например: `["top", "bottom"]`.<br />
196
- Default value для placement - `"bottom"`.
197
-
198
- ```tsx live
199
- import React from 'react';
200
- import { Button, Dropdown } from '@salutejs/plasma-web';
201
-
202
- export function App() {
203
- const items = [
204
- {
205
- value: 'north_america',
206
- label: 'Северная Америка',
207
- },
208
- {
209
- value: 'south_america',
210
- label: 'Южная Америка',
211
- items: [
212
- {
213
- value: 'brazil',
214
- label: 'Бразилия',
215
- items: [
216
- {
217
- value: 'rio_de_janeiro',
218
- label: 'Рио-де-Жанейро',
219
- },
220
- {
221
- value: 'sao_paulo',
222
- label: 'Сан-Паулу',
223
- },
224
- ],
225
- },
226
- {
227
- value: 'argentina',
228
- label: 'Аргентина',
229
- },
230
- ],
231
- },
232
- ];
233
-
234
- return (
235
- <div style={{ height: "300px", display: "flex", gap: "50px" }}>
236
- <Dropdown
237
- items={items}
238
- >
239
- <Button text="Список стран" />
240
- </Dropdown>
241
-
242
- <Dropdown
243
- items={items}
244
- placement="right"
245
- >
246
- <Button text="Список стран" />
247
- </Dropdown>
248
-
249
- <Dropdown
250
- items={items}
251
- placement="left"
252
- >
253
- <Button text="Список стран" />
254
- </Dropdown>
255
-
256
- <Dropdown
257
- items={items}
258
- placement={['top', 'bottom']}
259
- >
260
- <Button text="Список стран" />
261
- </Dropdown>
262
- </div>
263
- );
264
- }
265
- ```
266
- </TabItem>
267
-
268
- <TabItem value="trigger" label="Trigger">
269
- Параметр `trigger` принимает строку: `"click"` или `"hover"`.<br />
270
- Default value - `"click"`.<br />
271
- Для примера показано значение `"hover"`.
272
-
273
- ```tsx live
274
- import React from 'react';
275
- import { Button, Dropdown } from '@salutejs/plasma-web';
72
+ import { Button, Dropdown } from '@salutejs/{{ package }}';
276
73
 
277
74
  export function App() {
278
- const items = [
279
- {
280
- value: 'north_america',
281
- label: 'Северная Америка',
282
- },
283
- {
284
- value: 'south_america',
285
- label: 'Южная Америка',
286
- items: [
287
- {
288
- value: 'brazil',
289
- label: 'Бразилия',
290
- items: [
291
- {
292
- value: 'rio_de_janeiro',
293
- label: 'Рио-де-Жанейро',
294
- },
295
- {
296
- value: 'sao_paulo',
297
- label: 'Сан-Паулу',
298
- },
299
- ],
300
- },
301
- {
302
- value: 'argentina',
303
- label: 'Аргентина',
304
- },
305
- ],
306
- },
307
- ];
308
-
309
-
310
- return (
311
- <div style={{ height:"300px" }}>
312
- <Dropdown
313
- items={items}
314
- trigger="hover"
315
- >
316
- <Button text="Список стран" />
317
- </Dropdown>
318
- </div>
319
- );
320
- }
321
- ```
322
- </TabItem>
75
+ const items = [
76
+ {
77
+ value: 'north_america',
78
+ label: 'Северная Америка',
79
+ },
80
+ {
81
+ value: 'south_america',
82
+ label: 'Южная Америка',
83
+ items: [
84
+ {
85
+ value: 'brazil',
86
+ label: 'Бразилия',
87
+ items: [
88
+ {
89
+ value: 'rio_de_janeiro',
90
+ label: 'Рио-де-Жанейро',
91
+ },
92
+ {
93
+ value: 'sao_paulo',
94
+ label: 'Сан-Паулу',
95
+ },
96
+ ],
97
+ },
98
+ {
99
+ value: 'argentina',
100
+ label: 'Аргентина',
101
+ },
102
+ ],
103
+ },
104
+ ];
105
+
106
+
107
+ return (
108
+ <div style=\{{ height:"300px" }}>
109
+ <Dropdown
110
+ items={items}
111
+ >
112
+ <Button text="Список стран" />
113
+ </Dropdown>
114
+ </div>
115
+ );
116
+ }
117
+ ```
118
+ </TabItem>
119
+
120
+ <TabItem value="size" label="Size">
121
+ Размер `Dropdown` задается с помощью свойства `size`.<br />
122
+ Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`.
123
+
124
+ ```tsx live
125
+ import React from 'react';
126
+ import { Button, Dropdown } from '@salutejs/{{ package }}';
127
+
128
+ export function App() {
129
+ const items = [
130
+ {
131
+ value: 'north_america',
132
+ label: 'Северная Америка',
133
+ },
134
+ {
135
+ value: 'south_america',
136
+ label: 'Южная Америка',
137
+ items: [
138
+ {
139
+ value: 'brazil',
140
+ label: 'Бразилия',
141
+ items: [
142
+ {
143
+ value: 'rio_de_janeiro',
144
+ label: 'Рио-де-Жанейро',
145
+ },
146
+ {
147
+ value: 'sao_paulo',
148
+ label: 'Сан-Паулу',
149
+ },
150
+ ],
151
+ },
152
+ {
153
+ value: 'argentina',
154
+ label: 'Аргентина',
155
+ },
156
+ ],
157
+ },
158
+ ];
159
+
160
+ return (
161
+ <div style=\{{ height: "300px", display: "flex", gap: "50px" }}>
162
+ <Dropdown
163
+ items={items}
164
+ size="l"
165
+ >
166
+ <Button text="Список стран" />
167
+ </Dropdown>
168
+
169
+ <Dropdown
170
+ items={items}
171
+ size="m" // default
172
+ >
173
+ <Button text="Список стран" />
174
+ </Dropdown>
175
+
176
+ <Dropdown
177
+ items={items}
178
+ size="s"
179
+ >
180
+ <Button text="Список стран" />
181
+ </Dropdown>
182
+
183
+ <Dropdown
184
+ items={items}
185
+ size="xs"
186
+ >
187
+ <Button text="Список стран" />
188
+ </Dropdown>
189
+ </div>
190
+ );
191
+ }
192
+ ```
193
+ </TabItem>
194
+
195
+ <TabItem value="placement" label="Placement">
196
+ Параметр `placement` принимает либо строку: `"top"`, `"right"`, `"bottom"`, `"left"`, `"auto"`, либо массив этих же значений, например: `["top", "bottom"]`.<br />
197
+ Default value для placement - `"bottom"`.
198
+
199
+ ```tsx live
200
+ import React from 'react';
201
+ import { Button, Dropdown } from '@salutejs/{{ package }}';
202
+
203
+ export function App() {
204
+ const items = [
205
+ {
206
+ value: 'north_america',
207
+ label: 'Северная Америка',
208
+ },
209
+ {
210
+ value: 'south_america',
211
+ label: 'Южная Америка',
212
+ items: [
213
+ {
214
+ value: 'brazil',
215
+ label: 'Бразилия',
216
+ items: [
217
+ {
218
+ value: 'rio_de_janeiro',
219
+ label: 'Рио-де-Жанейро',
220
+ },
221
+ {
222
+ value: 'sao_paulo',
223
+ label: 'Сан-Паулу',
224
+ },
225
+ ],
226
+ },
227
+ {
228
+ value: 'argentina',
229
+ label: 'Аргентина',
230
+ },
231
+ ],
232
+ },
233
+ ];
234
+
235
+ return (
236
+ <div style=\{{ height: "300px", display: "flex", gap: "50px" }}>
237
+ <Dropdown
238
+ items={items}
239
+ >
240
+ <Button text="Список стран" />
241
+ </Dropdown>
242
+
243
+ <Dropdown
244
+ items={items}
245
+ placement="right"
246
+ >
247
+ <Button text="Список стран" />
248
+ </Dropdown>
249
+
250
+ <Dropdown
251
+ items={items}
252
+ placement="left"
253
+ >
254
+ <Button text="Список стран" />
255
+ </Dropdown>
256
+
257
+ <Dropdown
258
+ items={items}
259
+ placement={['top', 'bottom']}
260
+ >
261
+ <Button text="Список стран" />
262
+ </Dropdown>
263
+ </div>
264
+ );
265
+ }
266
+ ```
267
+ </TabItem>
268
+
269
+ <TabItem value="trigger" label="Trigger">
270
+ Параметр `trigger` принимает строку: `"click"` или `"hover"`.<br />
271
+ Default value - `"click"`.<br />
272
+ Для примера показано значение `"hover"`.
273
+
274
+ ```tsx live
275
+ import React from 'react';
276
+ import { Button, Dropdown } from '@salutejs/{{ package }}';
277
+
278
+ export function App() {
279
+ const items = [
280
+ {
281
+ value: 'north_america',
282
+ label: 'Северная Америка',
283
+ },
284
+ {
285
+ value: 'south_america',
286
+ label: 'Южная Америка',
287
+ items: [
288
+ {
289
+ value: 'brazil',
290
+ label: 'Бразилия',
291
+ items: [
292
+ {
293
+ value: 'rio_de_janeiro',
294
+ label: 'Рио-де-Жанейро',
295
+ },
296
+ {
297
+ value: 'sao_paulo',
298
+ label: 'Сан-Паулу',
299
+ },
300
+ ],
301
+ },
302
+ {
303
+ value: 'argentina',
304
+ label: 'Аргентина',
305
+ },
306
+ ],
307
+ },
308
+ ];
309
+
310
+
311
+ return (
312
+ <div style=\{{ height:"300px" }}>
313
+ <Dropdown
314
+ items={items}
315
+ trigger="hover"
316
+ >
317
+ <Button text="Список стран" />
318
+ </Dropdown>
319
+ </div>
320
+ );
321
+ }
322
+ ```
323
+ </TabItem>
323
324
  </Tabs>
324
325
 
325
326
  ## Клавиатурная навигация
326
327
 
327
328
  Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) и частично [TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
328
329
 
329
- - `Tab` - закрывает дропдаун. Перемещает фокус на следующий элемент на странице;
330
- - `Enter` - открывает/закрывает дропдаун. Если на элементе - выбирает его;
331
- - `Space` - открывает/закрывает дропдаун. Если на элементе - выбирает его;
332
- - `Home` - открывает дропдаун и перемещает фокус на первый элемент;
333
- - `End` - открывает дропдаун и перемещает фокус на последний элемент;
330
+ - `Tab` - закрывает dropdown. Перемещает фокус на следующий элемент на странице;
331
+ - `Enter` - открывает/закрывает dropdown. Если на элементе - выбирает его;
332
+ - `Space` - открывает/закрывает dropdown. Если на элементе - выбирает его;
333
+ - `Home` - открывает dropdown и перемещает фокус на первый элемент;
334
+ - `End` - открывает dropdown и перемещает фокус на последний элемент;
334
335
  - `PageUp` - перемещает фокус на 10 элементов выше либо в начало списка;
335
336
  - `PageDown` - перемещает фокус на 10 элементов ниже либо в конце списка;
336
- - `ArrowUp` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
337
- - `ArrowDown` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
337
+ - `ArrowUp` - открывает dropdown и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
338
+ - `ArrowDown` - открывает dropdown и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
338
339
  - `ArrowRight` - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент;
339
340
  - `ArrowLeft` - закрывает текущий список и перемещает фокус на предыдущий;
@@ -1,4 +1,4 @@
1
- var _excluded = ["arrow", "iconSize", "value"];
1
+ var _excluded = ["arrow", "iconSize"];
2
2
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
3
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
4
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -22,7 +22,6 @@ export var headerArrowRoot = function headerArrowRoot(Root) {
22
22
  var arrow = props.arrow,
23
23
  _props$iconSize = props.iconSize,
24
24
  iconSize = _props$iconSize === void 0 ? 's' : _props$iconSize,
25
- value = props.value,
26
25
  rest = _objectWithoutProperties(props, _excluded);
27
26
  var minimizeClass = arrow === 'minimize' ? classes.headerArrowIconMinimize : undefined;
28
27
  return /*#__PURE__*/React.createElement(Root, {
@@ -31,8 +30,7 @@ export var headerArrowRoot = function headerArrowRoot(Root) {
31
30
  view: "clear",
32
31
  size: "s",
33
32
  tabIndex: -1,
34
- className: classes.headerArrow,
35
- value: String(value)
33
+ className: classes.headerArrow
36
34
  }, rest), /*#__PURE__*/React.createElement(IconChevronLeft, _extends({
37
35
  size: iconSize,
38
36
  sizeCustomProperty: tokens.headerArrowIconSize,