@salutejs/plasma-new-hope 0.231.0-canary.1603.12468946891.0 → 0.231.0-canary.1657.12468366213.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (290) hide show
  1. package/cjs/components/Autocomplete/Autocomplete.css +4 -4
  2. package/cjs/components/Combobox/ComboboxNew/Combobox.css +4 -4
  3. package/cjs/components/Combobox/ComboboxOld/Combobox.css +4 -4
  4. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +4 -4
  5. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +4 -4
  6. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +4 -4
  7. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +4 -4
  8. package/cjs/components/DatePicker/RangeDate/RangeDate.css +4 -4
  9. package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +4 -4
  10. package/cjs/components/DatePicker/SingleDate/SingleDate.css +4 -4
  11. package/cjs/components/Dropdown/Dropdown.css +4 -4
  12. package/cjs/components/Dropdown/ui/DropdownOld/DropdownOld.css +4 -4
  13. package/cjs/components/Flow/Flow.css +1 -0
  14. package/cjs/components/Flow/Flow.js +58 -0
  15. package/cjs/components/Flow/Flow.js.map +1 -0
  16. package/cjs/components/Flow/Flow.styles.js +9 -0
  17. package/cjs/components/Flow/Flow.styles.js.map +1 -0
  18. package/cjs/components/Flow/Flow.styles_1xdoipm.css +1 -0
  19. package/cjs/components/Pagination/Pagination.css +4 -4
  20. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +4 -4
  21. package/cjs/components/Popover/Popover.css +4 -4
  22. package/cjs/components/Popover/Popover.js +5 -9
  23. package/cjs/components/Popover/Popover.js.map +1 -1
  24. package/cjs/components/Popover/Popover.styles.js +7 -7
  25. package/cjs/components/Popover/Popover.styles.js.map +1 -1
  26. package/cjs/components/Popover/{Popover.styles_gh4xvw.css → Popover.styles_mzmbre.css} +2 -2
  27. package/cjs/components/Popover/Popover.tokens.js +1 -2
  28. package/cjs/components/Popover/Popover.tokens.js.map +1 -1
  29. package/cjs/components/Portal/Portal.js +1 -1
  30. package/cjs/components/Portal/Portal.js.map +1 -1
  31. package/cjs/components/Range/Range.css +4 -4
  32. package/cjs/components/Select/Select.css +4 -4
  33. package/cjs/components/Select/ui/Target/Target.css +4 -4
  34. package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +4 -4
  35. package/cjs/components/Slider/Slider.css +4 -4
  36. package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +4 -4
  37. package/cjs/components/TextArea/ui/Hint/Hint.css +4 -4
  38. package/cjs/components/TextField/ui/Hint/Hint.css +4 -4
  39. package/cjs/index.css +6 -10
  40. package/cjs/index.js +3 -4
  41. package/cjs/index.js.map +1 -1
  42. package/emotion/cjs/components/Flow/Flow.js +66 -0
  43. package/emotion/cjs/components/Flow/Flow.styles.js +17 -0
  44. package/emotion/cjs/components/Flow/Flow.types.js +5 -0
  45. package/emotion/cjs/components/Flow/index.js +18 -0
  46. package/emotion/cjs/components/Popover/Popover.js +6 -10
  47. package/emotion/cjs/components/Popover/Popover.styles.js +16 -8
  48. package/emotion/cjs/components/Popover/Popover.template-doc.mdx +43 -128
  49. package/emotion/cjs/components/Popover/Popover.tokens.js +1 -2
  50. package/emotion/cjs/components/Portal/Portal.js +1 -1
  51. package/emotion/cjs/components/_Icon/index.js +1 -8
  52. package/emotion/cjs/examples/plasma_b2c/components/Flow/Flow.config.js +10 -0
  53. package/emotion/cjs/examples/plasma_b2c/components/Flow/Flow.js +11 -0
  54. package/emotion/cjs/examples/plasma_b2c/components/Flow/Flow.stories.tsx +114 -0
  55. package/emotion/cjs/index.js +11 -11
  56. package/emotion/es/components/Flow/Flow.js +57 -0
  57. package/emotion/es/components/Flow/Flow.styles.js +11 -0
  58. package/emotion/es/components/Flow/Flow.types.js +1 -0
  59. package/emotion/es/components/Flow/index.js +1 -0
  60. package/emotion/es/components/Popover/Popover.js +7 -11
  61. package/emotion/es/components/Popover/Popover.styles.js +16 -8
  62. package/emotion/es/components/Popover/Popover.template-doc.mdx +43 -128
  63. package/emotion/es/components/Popover/Popover.tokens.js +1 -2
  64. package/emotion/es/components/Portal/Portal.js +1 -1
  65. package/emotion/es/components/_Icon/index.js +1 -2
  66. package/emotion/es/examples/plasma_b2c/components/Flow/Flow.config.js +4 -0
  67. package/emotion/es/examples/plasma_b2c/components/Flow/Flow.js +5 -0
  68. package/emotion/es/examples/plasma_b2c/components/Flow/Flow.stories.tsx +114 -0
  69. package/emotion/es/index.js +1 -1
  70. package/es/components/Autocomplete/Autocomplete.css +4 -4
  71. package/es/components/Combobox/ComboboxNew/Combobox.css +4 -4
  72. package/es/components/Combobox/ComboboxOld/Combobox.css +4 -4
  73. package/es/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +4 -4
  74. package/es/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +4 -4
  75. package/es/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +4 -4
  76. package/es/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +4 -4
  77. package/es/components/DatePicker/RangeDate/RangeDate.css +4 -4
  78. package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +4 -4
  79. package/es/components/DatePicker/SingleDate/SingleDate.css +4 -4
  80. package/es/components/Dropdown/Dropdown.css +4 -4
  81. package/es/components/Dropdown/ui/DropdownOld/DropdownOld.css +4 -4
  82. package/es/components/Flow/Flow.css +1 -0
  83. package/es/components/Flow/Flow.js +53 -0
  84. package/es/components/Flow/Flow.js.map +1 -0
  85. package/es/components/Flow/Flow.styles.js +5 -0
  86. package/es/components/Flow/Flow.styles.js.map +1 -0
  87. package/es/components/Flow/Flow.styles_1xdoipm.css +1 -0
  88. package/es/components/Pagination/Pagination.css +4 -4
  89. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +4 -4
  90. package/es/components/Popover/Popover.css +4 -4
  91. package/es/components/Popover/Popover.js +7 -11
  92. package/es/components/Popover/Popover.js.map +1 -1
  93. package/es/components/Popover/Popover.styles.js +7 -7
  94. package/es/components/Popover/Popover.styles.js.map +1 -1
  95. package/es/components/Popover/{Popover.styles_gh4xvw.css → Popover.styles_mzmbre.css} +2 -2
  96. package/es/components/Popover/Popover.tokens.js +1 -2
  97. package/es/components/Popover/Popover.tokens.js.map +1 -1
  98. package/es/components/Portal/Portal.js +1 -1
  99. package/es/components/Portal/Portal.js.map +1 -1
  100. package/es/components/Range/Range.css +4 -4
  101. package/es/components/Select/Select.css +4 -4
  102. package/es/components/Select/ui/Target/Target.css +4 -4
  103. package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +4 -4
  104. package/es/components/Slider/Slider.css +4 -4
  105. package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +4 -4
  106. package/es/components/TextArea/ui/Hint/Hint.css +4 -4
  107. package/es/components/TextField/ui/Hint/Hint.css +4 -4
  108. package/es/index.css +6 -10
  109. package/es/index.js +1 -2
  110. package/es/index.js.map +1 -1
  111. package/package.json +2 -3
  112. package/styled-components/cjs/components/ElasticGrid/ElasticGrid.js +5 -0
  113. package/styled-components/cjs/components/ElasticGrid/index.js +5 -0
  114. package/styled-components/cjs/components/Flow/Flow.js +66 -0
  115. package/styled-components/cjs/components/Flow/Flow.styles.js +8 -0
  116. package/styled-components/cjs/components/Flow/Flow.types.js +5 -0
  117. package/styled-components/cjs/components/Flow/index.js +18 -0
  118. package/styled-components/cjs/components/Popover/Popover.js +6 -10
  119. package/styled-components/cjs/components/Popover/Popover.styles.js +4 -4
  120. package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +43 -128
  121. package/styled-components/cjs/components/Popover/Popover.tokens.js +1 -2
  122. package/styled-components/cjs/components/Portal/Portal.js +1 -1
  123. package/styled-components/cjs/components/_Icon/index.js +1 -8
  124. package/styled-components/cjs/examples/plasma_b2c/components/Flow/Flow.config.js +10 -0
  125. package/styled-components/cjs/examples/plasma_b2c/components/Flow/Flow.js +11 -0
  126. package/styled-components/cjs/examples/plasma_b2c/components/Flow/Flow.stories.tsx +114 -0
  127. package/styled-components/cjs/index.js +11 -11
  128. package/styled-components/es/components/ElasticGrid/ElasticGrid.js +1 -0
  129. package/styled-components/es/components/ElasticGrid/index.js +1 -0
  130. package/styled-components/es/components/Flow/Flow.js +57 -0
  131. package/styled-components/es/components/Flow/Flow.styles.js +2 -0
  132. package/styled-components/es/components/Flow/Flow.types.js +1 -0
  133. package/styled-components/es/components/Flow/index.js +1 -0
  134. package/styled-components/es/components/Popover/Popover.js +7 -11
  135. package/styled-components/es/components/Popover/Popover.styles.js +4 -4
  136. package/styled-components/es/components/Popover/Popover.template-doc.mdx +43 -128
  137. package/styled-components/es/components/Popover/Popover.tokens.js +1 -2
  138. package/styled-components/es/components/Portal/Portal.js +1 -1
  139. package/styled-components/es/components/_Icon/index.js +1 -2
  140. package/styled-components/es/examples/plasma_b2c/components/Flow/Flow.config.js +4 -0
  141. package/styled-components/es/examples/plasma_b2c/components/Flow/Flow.js +5 -0
  142. package/styled-components/es/examples/plasma_b2c/components/Flow/Flow.stories.tsx +114 -0
  143. package/styled-components/es/index.js +1 -1
  144. package/types/components/ElasticGrid/ElasticGrid.d.ts +2 -0
  145. package/types/components/ElasticGrid/ElasticGrid.d.ts.map +1 -0
  146. package/types/components/ElasticGrid/index.d.ts +2 -0
  147. package/types/components/ElasticGrid/index.d.ts.map +1 -0
  148. package/types/components/Flow/Flow.d.ts +13 -0
  149. package/types/components/Flow/Flow.d.ts.map +1 -0
  150. package/types/components/Flow/Flow.styles.d.ts +2 -0
  151. package/types/components/Flow/Flow.styles.d.ts.map +1 -0
  152. package/types/components/Flow/Flow.types.d.ts +35 -0
  153. package/types/components/Flow/Flow.types.d.ts.map +1 -0
  154. package/types/components/Flow/index.d.ts +2 -0
  155. package/types/components/Flow/index.d.ts.map +1 -0
  156. package/types/components/Popover/Popover.d.ts.map +1 -1
  157. package/types/components/Popover/Popover.styles.d.ts +1 -1
  158. package/types/components/Popover/Popover.styles.d.ts.map +1 -1
  159. package/types/components/Popover/Popover.tokens.d.ts +0 -1
  160. package/types/components/Popover/Popover.tokens.d.ts.map +1 -1
  161. package/types/components/Popover/Popover.types.d.ts +4 -4
  162. package/types/components/Popover/Popover.types.d.ts.map +1 -1
  163. package/types/components/Portal/Portal.types.d.ts +1 -1
  164. package/types/components/Portal/Portal.types.d.ts.map +1 -1
  165. package/types/components/_Icon/index.d.ts +0 -1
  166. package/types/components/_Icon/index.d.ts.map +1 -1
  167. package/types/examples/plasma_b2c/components/Flow/Flow.config.d.ts +5 -0
  168. package/types/examples/plasma_b2c/components/Flow/Flow.config.d.ts.map +1 -0
  169. package/types/examples/plasma_b2c/components/Flow/Flow.d.ts +3 -0
  170. package/types/examples/plasma_b2c/components/Flow/Flow.d.ts.map +1 -0
  171. package/types/index.d.ts +1 -1
  172. package/types/index.d.ts.map +1 -1
  173. package/cjs/components/Tree/Tree.css +0 -7
  174. package/cjs/components/Tree/Tree.js +0 -99
  175. package/cjs/components/Tree/Tree.js.map +0 -1
  176. package/cjs/components/Tree/Tree.styles.js +0 -43
  177. package/cjs/components/Tree/Tree.styles.js.map +0 -1
  178. package/cjs/components/Tree/Tree.styles_1mwgczn.css +0 -5
  179. package/cjs/components/Tree/Tree.tokens.js +0 -43
  180. package/cjs/components/Tree/Tree.tokens.js.map +0 -1
  181. package/cjs/components/Tree/utils/sizeToIconSize.js +0 -11
  182. package/cjs/components/Tree/utils/sizeToIconSize.js.map +0 -1
  183. package/cjs/components/_Icon/Icon.assets/Folder.js +0 -25
  184. package/cjs/components/_Icon/Icon.assets/Folder.js.map +0 -1
  185. package/cjs/components/_Icon/Icons/IconFolder.js +0 -23
  186. package/cjs/components/_Icon/Icons/IconFolder.js.map +0 -1
  187. package/emotion/cjs/components/Tree/Tree.js +0 -100
  188. package/emotion/cjs/components/Tree/Tree.styles.js +0 -38
  189. package/emotion/cjs/components/Tree/Tree.template-doc.mdx +0 -103
  190. package/emotion/cjs/components/Tree/Tree.tokens.js +0 -41
  191. package/emotion/cjs/components/Tree/index.js +0 -19
  192. package/emotion/cjs/components/Tree/utils/index.js +0 -12
  193. package/emotion/cjs/components/Tree/utils/sizeToIconSize.js +0 -10
  194. package/emotion/cjs/components/_Icon/Icon.assets/Folder.js +0 -24
  195. package/emotion/cjs/components/_Icon/Icons/IconFolder.js +0 -22
  196. package/emotion/cjs/examples/plasma_b2c/components/Tree/Tree.config.js +0 -25
  197. package/emotion/cjs/examples/plasma_b2c/components/Tree/Tree.js +0 -13
  198. package/emotion/cjs/examples/plasma_b2c/components/Tree/Tree.stories.tsx +0 -117
  199. package/emotion/cjs/examples/plasma_web/components/Tree/Tree.config.js +0 -25
  200. package/emotion/cjs/examples/plasma_web/components/Tree/Tree.js +0 -13
  201. package/emotion/cjs/examples/plasma_web/components/Tree/Tree.stories.tsx +0 -117
  202. package/emotion/es/components/Tree/Tree.js +0 -91
  203. package/emotion/es/components/Tree/Tree.styles.js +0 -31
  204. package/emotion/es/components/Tree/Tree.template-doc.mdx +0 -103
  205. package/emotion/es/components/Tree/Tree.tokens.js +0 -35
  206. package/emotion/es/components/Tree/index.js +0 -2
  207. package/emotion/es/components/Tree/utils/index.js +0 -1
  208. package/emotion/es/components/Tree/utils/sizeToIconSize.js +0 -4
  209. package/emotion/es/components/_Icon/Icon.assets/Folder.js +0 -17
  210. package/emotion/es/components/_Icon/Icons/IconFolder.js +0 -15
  211. package/emotion/es/examples/plasma_b2c/components/Tree/Tree.config.js +0 -19
  212. package/emotion/es/examples/plasma_b2c/components/Tree/Tree.js +0 -8
  213. package/emotion/es/examples/plasma_b2c/components/Tree/Tree.stories.tsx +0 -117
  214. package/emotion/es/examples/plasma_web/components/Tree/Tree.config.js +0 -19
  215. package/emotion/es/examples/plasma_web/components/Tree/Tree.js +0 -8
  216. package/emotion/es/examples/plasma_web/components/Tree/Tree.stories.tsx +0 -117
  217. package/es/components/Tree/Tree.css +0 -7
  218. package/es/components/Tree/Tree.js +0 -94
  219. package/es/components/Tree/Tree.js.map +0 -1
  220. package/es/components/Tree/Tree.styles.js +0 -35
  221. package/es/components/Tree/Tree.styles.js.map +0 -1
  222. package/es/components/Tree/Tree.styles_1mwgczn.css +0 -5
  223. package/es/components/Tree/Tree.tokens.js +0 -38
  224. package/es/components/Tree/Tree.tokens.js.map +0 -1
  225. package/es/components/Tree/utils/sizeToIconSize.js +0 -7
  226. package/es/components/Tree/utils/sizeToIconSize.js.map +0 -1
  227. package/es/components/_Icon/Icon.assets/Folder.js +0 -21
  228. package/es/components/_Icon/Icon.assets/Folder.js.map +0 -1
  229. package/es/components/_Icon/Icons/IconFolder.js +0 -19
  230. package/es/components/_Icon/Icons/IconFolder.js.map +0 -1
  231. package/styled-components/cjs/components/Tree/Tree.js +0 -100
  232. package/styled-components/cjs/components/Tree/Tree.styles.js +0 -26
  233. package/styled-components/cjs/components/Tree/Tree.template-doc.mdx +0 -103
  234. package/styled-components/cjs/components/Tree/Tree.tokens.js +0 -41
  235. package/styled-components/cjs/components/Tree/index.js +0 -19
  236. package/styled-components/cjs/components/Tree/utils/index.js +0 -12
  237. package/styled-components/cjs/components/Tree/utils/sizeToIconSize.js +0 -10
  238. package/styled-components/cjs/components/_Icon/Icon.assets/Folder.js +0 -24
  239. package/styled-components/cjs/components/_Icon/Icons/IconFolder.js +0 -22
  240. package/styled-components/cjs/examples/plasma_b2c/components/Tree/Tree.config.js +0 -25
  241. package/styled-components/cjs/examples/plasma_b2c/components/Tree/Tree.js +0 -13
  242. package/styled-components/cjs/examples/plasma_b2c/components/Tree/Tree.stories.tsx +0 -117
  243. package/styled-components/cjs/examples/plasma_web/components/Tree/Tree.config.js +0 -25
  244. package/styled-components/cjs/examples/plasma_web/components/Tree/Tree.js +0 -13
  245. package/styled-components/cjs/examples/plasma_web/components/Tree/Tree.stories.tsx +0 -117
  246. package/styled-components/es/components/Tree/Tree.js +0 -91
  247. package/styled-components/es/components/Tree/Tree.styles.js +0 -18
  248. package/styled-components/es/components/Tree/Tree.template-doc.mdx +0 -103
  249. package/styled-components/es/components/Tree/Tree.tokens.js +0 -35
  250. package/styled-components/es/components/Tree/index.js +0 -2
  251. package/styled-components/es/components/Tree/utils/index.js +0 -1
  252. package/styled-components/es/components/Tree/utils/sizeToIconSize.js +0 -4
  253. package/styled-components/es/components/_Icon/Icon.assets/Folder.js +0 -17
  254. package/styled-components/es/components/_Icon/Icons/IconFolder.js +0 -15
  255. package/styled-components/es/examples/plasma_b2c/components/Tree/Tree.config.js +0 -19
  256. package/styled-components/es/examples/plasma_b2c/components/Tree/Tree.js +0 -8
  257. package/styled-components/es/examples/plasma_b2c/components/Tree/Tree.stories.tsx +0 -117
  258. package/styled-components/es/examples/plasma_web/components/Tree/Tree.config.js +0 -19
  259. package/styled-components/es/examples/plasma_web/components/Tree/Tree.js +0 -8
  260. package/styled-components/es/examples/plasma_web/components/Tree/Tree.stories.tsx +0 -117
  261. package/types/components/Tree/Tree.d.ts +0 -20
  262. package/types/components/Tree/Tree.d.ts.map +0 -1
  263. package/types/components/Tree/Tree.styles.d.ts +0 -7
  264. package/types/components/Tree/Tree.styles.d.ts.map +0 -1
  265. package/types/components/Tree/Tree.tokens.d.ts +0 -36
  266. package/types/components/Tree/Tree.tokens.d.ts.map +0 -1
  267. package/types/components/Tree/Tree.types.d.ts +0 -154
  268. package/types/components/Tree/Tree.types.d.ts.map +0 -1
  269. package/types/components/Tree/index.d.ts +0 -3
  270. package/types/components/Tree/index.d.ts.map +0 -1
  271. package/types/components/Tree/utils/index.d.ts +0 -2
  272. package/types/components/Tree/utils/index.d.ts.map +0 -1
  273. package/types/components/Tree/utils/sizeToIconSize.d.ts +0 -2
  274. package/types/components/Tree/utils/sizeToIconSize.d.ts.map +0 -1
  275. package/types/components/_Icon/Icon.assets/Folder.d.ts +0 -4
  276. package/types/components/_Icon/Icon.assets/Folder.d.ts.map +0 -1
  277. package/types/components/_Icon/Icons/IconFolder.d.ts +0 -4
  278. package/types/components/_Icon/Icons/IconFolder.d.ts.map +0 -1
  279. package/types/examples/plasma_b2c/components/Tree/Tree.config.d.ts +0 -18
  280. package/types/examples/plasma_b2c/components/Tree/Tree.config.d.ts.map +0 -1
  281. package/types/examples/plasma_b2c/components/Tree/Tree.d.ts +0 -13
  282. package/types/examples/plasma_b2c/components/Tree/Tree.d.ts.map +0 -1
  283. package/types/examples/plasma_web/components/Tree/Tree.config.d.ts +0 -18
  284. package/types/examples/plasma_web/components/Tree/Tree.config.d.ts.map +0 -1
  285. package/types/examples/plasma_web/components/Tree/Tree.d.ts +0 -13
  286. package/types/examples/plasma_web/components/Tree/Tree.d.ts.map +0 -1
  287. /package/emotion/cjs/components/{Tree/Tree.types.js → ElasticGrid/ElasticGrid.js} +0 -0
  288. /package/{styled-components/cjs/components/Tree/Tree.types.js → emotion/cjs/components/ElasticGrid/index.js} +0 -0
  289. /package/emotion/es/components/{Tree/Tree.types.js → ElasticGrid/ElasticGrid.js} +0 -0
  290. /package/{styled-components/es/components/Tree/Tree.types.js → emotion/es/components/ElasticGrid/index.js} +0 -0
@@ -0,0 +1,114 @@
1
+ import React, { ComponentProps } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import styled from 'styled-components';
4
+
5
+ import { WithTheme } from '../../../_helpers';
6
+
7
+ import { Flow } from './Flow';
8
+
9
+ const orientations = ['vertical', 'horizontal'];
10
+ const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround'];
11
+ const alignments = ['start', 'center', 'end'];
12
+
13
+ const widths = [100, 32, 171, 74, 179, 55];
14
+ const heights = [10, 50, 45, 33, 14, 55];
15
+
16
+ const Item = styled.div`
17
+ padding: 0.5rem 1rem;
18
+ border-radius: 0.5rem;
19
+ background: #aab1e9;
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ `;
24
+
25
+ const meta: Meta<typeof Flow> = {
26
+ title: 'b2c/Data Display/Flow',
27
+ component: Flow,
28
+ decorators: [WithTheme],
29
+ argTypes: {
30
+ itemsCount: {
31
+ control: {
32
+ type: 'number',
33
+ },
34
+ },
35
+ height: {
36
+ control: {
37
+ type: 'text',
38
+ },
39
+ if: { arg: 'orientation', eq: 'vertical' },
40
+ },
41
+ orientation: {
42
+ options: orientations,
43
+ control: {
44
+ type: 'select',
45
+ },
46
+ },
47
+ arrangement: {
48
+ options: arrangements,
49
+ control: {
50
+ type: 'select',
51
+ },
52
+ },
53
+ alignment: {
54
+ options: alignments,
55
+ control: {
56
+ type: 'select',
57
+ },
58
+ },
59
+ mainAxisGap: {
60
+ control: {
61
+ type: 'text',
62
+ },
63
+ },
64
+ crossAxisGap: {
65
+ control: {
66
+ type: 'text',
67
+ },
68
+ },
69
+ itemsPerLine: {
70
+ control: {
71
+ type: 'number',
72
+ },
73
+ },
74
+ minColWidth: {
75
+ control: {
76
+ type: 'text',
77
+ },
78
+ },
79
+ },
80
+ };
81
+
82
+ export default meta;
83
+
84
+ type Story = StoryObj<typeof Flow>;
85
+
86
+ export const Default: Story = {
87
+ args: {
88
+ height: '13rem',
89
+ orientation: 'horizontal',
90
+ arrangement: 'start',
91
+ alignment: 'start',
92
+ mainAxisGap: '0',
93
+ crossAxisGap: '0',
94
+ minColWidth: 'auto',
95
+ itemsCount: 6,
96
+ },
97
+ render: ({ itemsCount, height, ...args }: ComponentProps<typeof Flow>) => {
98
+ return (
99
+ <Flow {...args} style={{ maxWidth: '28rem', height: height || 'auto' }}>
100
+ {new Array(itemsCount).fill(null).map((width, index) => (
101
+ <Item
102
+ key={index}
103
+ style={{
104
+ minWidth: widths[index % widths.length],
105
+ minHeight: heights[index % heights.length],
106
+ }}
107
+ >
108
+ {index + 1}
109
+ </Item>
110
+ ))}
111
+ </Flow>
112
+ );
113
+ },
114
+ };
@@ -135,6 +135,17 @@ Object.keys(_Cell).forEach(function (key) {
135
135
  }
136
136
  });
137
137
  });
138
+ var _Flow = /*#__PURE__*/require("./components/Flow");
139
+ Object.keys(_Flow).forEach(function (key) {
140
+ if (key === "default" || key === "__esModule") return;
141
+ if (key in exports && exports[key] === _Flow[key]) return;
142
+ Object.defineProperty(exports, key, {
143
+ enumerable: true,
144
+ get: function get() {
145
+ return _Flow[key];
146
+ }
147
+ });
148
+ });
138
149
  var _Link = /*#__PURE__*/require("./components/Link");
139
150
  Object.keys(_Link).forEach(function (key) {
140
151
  if (key === "default" || key === "__esModule") return;
@@ -718,17 +729,6 @@ Object.keys(_Dropzone).forEach(function (key) {
718
729
  }
719
730
  });
720
731
  });
721
- var _Tree = /*#__PURE__*/require("./components/Tree");
722
- Object.keys(_Tree).forEach(function (key) {
723
- if (key === "default" || key === "__esModule") return;
724
- if (key in exports && exports[key] === _Tree[key]) return;
725
- Object.defineProperty(exports, key, {
726
- enumerable: true,
727
- get: function get() {
728
- return _Tree[key];
729
- }
730
- });
731
- });
732
732
  var _Rating = /*#__PURE__*/require("./components/Rating");
733
733
  Object.keys(_Rating).forEach(function (key) {
734
734
  if (key === "default" || key === "__esModule") return;
@@ -0,0 +1,57 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ var _excluded = ["children", "className", "style", "orientation", "arrangement", "alignment", "mainAxisGap", "crossAxisGap", "minColWidth", "itemsPerLine"];
3
+ 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); }
4
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
7
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
8
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
9
+ 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; }
10
+ 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; }
11
+ import React, { forwardRef } from 'react';
12
+ import cls from 'classnames';
13
+ import { base } from './Flow.styles';
14
+ export var flowRoot = function flowRoot(Root) {
15
+ return /*#__PURE__*/forwardRef(function (_ref, ref) {
16
+ var children = _ref.children,
17
+ className = _ref.className,
18
+ style = _ref.style,
19
+ _ref$orientation = _ref.orientation,
20
+ orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
21
+ arrangement = _ref.arrangement,
22
+ alignment = _ref.alignment,
23
+ _ref$mainAxisGap = _ref.mainAxisGap,
24
+ mainAxisGap = _ref$mainAxisGap === void 0 ? '0' : _ref$mainAxisGap,
25
+ _ref$crossAxisGap = _ref.crossAxisGap,
26
+ crossAxisGap = _ref$crossAxisGap === void 0 ? '0' : _ref$crossAxisGap,
27
+ _ref$minColWidth = _ref.minColWidth,
28
+ minColWidth = _ref$minColWidth === void 0 ? 'auto' : _ref$minColWidth,
29
+ itemsPerLine = _ref.itemsPerLine,
30
+ rest = _objectWithoutProperties(_ref, _excluded);
31
+ var hasMinWidth = Boolean(minColWidth && minColWidth !== 'auto');
32
+ var needGrid = Boolean(Number(itemsPerLine) > 0 || hasMinWidth);
33
+ return /*#__PURE__*/React.createElement(Root, _extends({
34
+ ref: ref,
35
+ className: cls(className, {
36
+ vertical: orientation === 'vertical',
37
+ grid: needGrid,
38
+ elastic: hasMinWidth
39
+ }),
40
+ style: _objectSpread(_objectSpread({}, style), {}, {
41
+ '--plasma-private-gap': "".concat(mainAxisGap, " ").concat(crossAxisGap),
42
+ '--plasma-private-items': String(itemsPerLine),
43
+ '--plasma-private-min-width': String(minColWidth)
44
+ }),
45
+ "data-arrangement": arrangement,
46
+ "data-alignment": alignment
47
+ }, rest), children);
48
+ });
49
+ };
50
+ export var flowConfig = {
51
+ name: 'Flow',
52
+ tag: 'div',
53
+ layout: flowRoot,
54
+ base: base,
55
+ defaults: {},
56
+ variations: {}
57
+ };
@@ -0,0 +1,2 @@
1
+ import { css } from 'styled-components';
2
+ export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--plasma-private-gap);border-radius:0.5rem;&.vertical{flex-direction:column;}&.grid{display:grid;grid-template-columns:repeat(var(--plasma-private-items),auto);grid-auto-flow:row;&.elastic{grid-template-columns:repeat(auto-fill,minmax(var(--plasma-private-min-width),auto));grid-auto-flow:row;}&:not(.vertical){&[data-arrangement='start']{justify-items:start;}&[data-arrangement='center']{justify-items:center;}&[data-arrangement='end']{justify-items:end;}&[data-arrangement='spaceBetween']{justify-content:space-between;}&[data-arrangement='spaceAround']{justify-content:space-around;}&[data-alignment='start']{align-items:start;}&[data-alignment='center']{align-items:center;}&[data-alignment='end']{align-items:end;}}&.vertical{grid-template-columns:auto;grid-template-rows:repeat(var(--plasma-private-items),auto);grid-auto-flow:column;&[data-arrangement='start']{align-items:start;}&[data-arrangement='center']{align-items:center;}&[data-arrangement='end']{align-items:end;}&[data-arrangement='spaceBetween']{align-content:space-between;align-items:normal;}&[data-arrangement='spaceAround']{align-content:space-around;align-items:normal;}&[data-alignment='start']{justify-items:start;}&[data-alignment='center']{justify-items:center;}&[data-alignment='end']{justify-items:end;}}}&:not(&.grid){&[data-arrangement='start']{justify-content:start;}&[data-arrangement='center']{justify-content:center;}&[data-arrangement='end']{justify-content:end;}&[data-arrangement='spaceBetween']{justify-content:space-between;}&[data-arrangement='spaceAround']{justify-content:space-around;}&[data-alignment='start']{align-items:start;}&[data-alignment='center']{align-items:center;}&[data-alignment='end']{align-items:end;}}"]);
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export { flowRoot, flowConfig } from './Flow';
@@ -1,3 +1,4 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
1
2
  var _excluded = ["target", "children", "isOpen", "opened", "trigger", "hasArrow", "frame", "className", "placement", "offset", "zIndex", "isFocusTrapped", "closeOnEsc", "preventOverflow", "usePortal", "view", "onToggle", "closeOnOverlayClick"];
2
3
  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
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -5,7 +6,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
5
6
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
7
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
7
8
  function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
8
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
9
9
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
10
10
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
11
11
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -14,7 +14,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
14
14
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
15
15
  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; }
16
16
  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; }
17
- import React, { useRef, useCallback, useEffect, useState, forwardRef, isValidElement } from 'react';
17
+ import React, { useRef, useCallback, useEffect, useState, forwardRef } from 'react';
18
18
  import { usePopper } from 'react-popper';
19
19
  import { useForkRef } from '@salutejs/plasma-core';
20
20
  import { useFocusTrap } from '../../hooks';
@@ -74,7 +74,6 @@ export var popoverRoot = function popoverRoot(Root) {
74
74
  var _useState3 = useState(false),
75
75
  _useState4 = _slicedToArray(_useState3, 2),
76
76
  forceRender = _useState4[1];
77
- var portalContainer = _typeof(target) === 'object' && target !== null && 'current' in target && target.current || undefined;
78
77
  var isAutoArray = Array.isArray(placement);
79
78
  var isAuto = isAutoArray || placement.startsWith('auto');
80
79
  var initialStyles = {
@@ -174,7 +173,7 @@ export var popoverRoot = function popoverRoot(Root) {
174
173
  if (typeof frame !== 'string' && frame && frame.current) {
175
174
  portal = frame.current;
176
175
  }
177
- if (!usePortal && /*#__PURE__*/isValidElement(target)) {
176
+ if (!usePortal) {
178
177
  portal = rootRef.current;
179
178
  }
180
179
  if (!portal) {
@@ -208,11 +207,8 @@ export var popoverRoot = function popoverRoot(Root) {
208
207
  */
209
208
  Promise.resolve().then(forceUpdate);
210
209
  }, [innerIsOpen, children, forceUpdate]);
211
- return /*#__PURE__*/React.createElement(Portal, {
212
- container: portalContainer,
213
- disabled: /*#__PURE__*/isValidElement(target)
214
- }, /*#__PURE__*/React.createElement(StyledWrapper, {
215
- className: cx(classes.wrapper, ! /*#__PURE__*/isValidElement(target) && classes.targetAsRef),
210
+ return /*#__PURE__*/React.createElement(StyledWrapper, {
211
+ className: classes.wrapper,
216
212
  onMouseEnter: onMouseEnter,
217
213
  onMouseLeave: onMouseLeave
218
214
  }, /*#__PURE__*/React.createElement(StyledRoot, {
@@ -221,7 +217,7 @@ export var popoverRoot = function popoverRoot(Root) {
221
217
  onFocus: onFocus,
222
218
  onBlur: onBlur,
223
219
  className: cx(className, classes.target)
224
- }, /*#__PURE__*/isValidElement(target) && target), children && portalRef.current && /*#__PURE__*/React.createElement(Portal, {
220
+ }, target), children && portalRef.current && /*#__PURE__*/React.createElement(Portal, {
225
221
  container: portalRef.current
226
222
  }, /*#__PURE__*/React.createElement(Root, _extends({
227
223
  view: view,
@@ -237,7 +233,7 @@ export var popoverRoot = function popoverRoot(Root) {
237
233
  className: classes.arrow,
238
234
  ref: setArrowElement,
239
235
  style: styles.arrow
240
- }, attributes.arrow)), children)))));
236
+ }, attributes.arrow)), children))));
241
237
  });
242
238
  };
243
239
  export var popoverConfig = {
@@ -1,12 +1,12 @@
1
1
  import styled from 'styled-components';
2
2
  import { DEFAULT_Z_INDEX } from '../Popup/utils';
3
3
  import { classes, tokens } from './Popover.tokens';
4
- export var StyledRoot = /*#__PURE__*/styled.div.withConfig({
5
- componentId: "plasma-new-hope__sc-tnpyex-0"
6
- })(["display:inline-flex;box-sizing:border-box;position:relative;"]);
7
4
  export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
5
+ componentId: "plasma-new-hope__sc-tnpyex-0"
6
+ })(["display:inline-block;"]);
7
+ export var StyledRoot = /*#__PURE__*/styled.div.withConfig({
8
8
  componentId: "plasma-new-hope__sc-tnpyex-1"
9
- })(["display:inline-block;&.", "{position:absolute;top:0;left:0;width:100%;height:100%;", "{width:100%;height:100%;display:block;}}"], classes.targetAsRef, StyledRoot);
9
+ })(["display:inline-flex;box-sizing:border-box;position:relative;"]);
10
10
  export var StyledArrow = /*#__PURE__*/styled.div.withConfig({
11
11
  componentId: "plasma-new-hope__sc-tnpyex-2"
12
12
  })(["width:var(", ");height:var(", ");&::before{position:absolute;width:var(", ");height:var(", ");mask-image:var(", ");background:var(", ");content:'';transform:rotate(0deg);}"], /*#__PURE__*/String(tokens.arrowMaskWidth), /*#__PURE__*/String(tokens.arrowMaskHeight), /*#__PURE__*/String(tokens.arrowMaskWidth), /*#__PURE__*/String(tokens.arrowMaskHeight), /*#__PURE__*/String(tokens.arrowMaskImage), /*#__PURE__*/String(tokens.arrowBackground));
@@ -4,136 +4,51 @@ title: Popover
4
4
  ---
5
5
 
6
6
  import { PropsTable, Description } from '@site/src/components';
7
- import Tabs from '@theme/Tabs';
8
- import TabItem from '@theme/TabItem';
9
7
 
10
8
  # Popover
11
9
  <Description name="Popover" />
12
10
  <PropsTable name="Popover" />
13
11
 
14
- :::info
15
- `target` может быть как ReactNode, так и RefObject:
16
- :::
17
-
18
- <Tabs>
19
- <TabItem value="reactNode" label="React Node" default>
20
- ```tsx live
21
- import React from 'react';
22
- import styled from "styled-components";
23
- import { surfaceSolidTertiary } from "@salutejs/{{ vertical }}/tokens";
24
- import { Popover, Button } from '@salutejs/{{ package }}';
25
-
26
- export function App() {
27
- const [isOpen, setIsOpen] = React.useState(false);
28
-
29
- const StyledContent = styled.div`
30
- background: ${surfaceSolidTertiary};
31
- padding: 1rem;
32
-
33
- display: flex;
34
- flex-direction: column;
35
- align-items: center;
36
- `;
37
-
38
- return (
39
- <section style=\{{width: '20rem', height: '15rem'}}>
40
- <Popover
41
- opened={isOpen}
42
- onToggle={(is) => setIsOpen(is)}
43
- role="presentation"
44
- id="popover"
45
- target={<Button>Target</Button>}
46
- offset={[0, 6]}
47
- placement='bottom'
48
- trigger='click'
49
- hasArrow
50
- closeOnOverlayClick
51
- closeOnEsc
52
- isFocusTrapped
53
- >
54
- <StyledContent>
55
- <>Content</>
56
- <Button onClick={() => setIsOpen(false)}>close</Button>
57
- </StyledContent>
58
- </Popover>
59
- </section>
60
- );
61
- }
62
- ```
63
- </TabItem>
64
- <TabItem value="refObject" label="RefObject">
65
- ```tsx live
66
- import React, { useRef, useState } from 'react';
67
- import styled from "styled-components";
68
- import { surfaceSolidTertiary } from "@salutejs/{{ vertical }}/tokens";
69
- import { Popover, Button } from '@salutejs/{{ package }}';
70
-
71
- export function App() {
72
- const [isOpen, setIsOpen] = useState(false);
73
-
74
- const targetRef = useRef<HTMLButtonElement | null>(null);
75
- const targetRef2 = useRef<HTMLButtonElement | null>(null);
76
- const targetRef3 = useRef<HTMLButtonElement | null>(null);
77
-
78
- const refs = [targetRef, targetRef2, targetRef3];
79
-
80
- const [currRefIndex, setCurrentRefIndex] = useState(0);
81
- const [currentRef, setCurrentRef] = useState(targetRef);
82
-
83
- const changeRef = () => {
84
- let ind = currRefIndex + 1;
85
-
86
- if (ind > refs.length - 1) {
87
- setCurrentRefIndex(0);
88
- ind = 0;
89
- }
90
-
91
- setCurrentRefIndex(ind);
92
- setCurrentRef(refs[ind]);
93
- };
94
-
95
- const StyledContent = styled.div`
96
- background: ${surfaceSolidTertiary};
97
- padding: 1rem;
98
-
99
- display: flex;
100
- flex-direction: column;
101
- align-items: center;
102
- `;
103
-
104
- return (
105
- <>
106
- <Button ref={targetRef}>Target 0</Button>
107
- <Button style=\{{ margin: '0 5rem' }} onClick={changeRef}>
108
- Change targetAsRef to Target {currRefIndex + 1 > refs.length - 1 ? 0 : currRefIndex + 1}
109
- </Button>
110
- <Button ref={targetRef2}>Target 1</Button>
111
- <Popover
112
- opened={isOpen}
113
- onToggle={(is) => setIsOpen(is)}
114
- role="presentation"
115
- id="popover"
116
- target={currentRef}
117
- offset={[0, 6]}
118
- placement='bottom'
119
- trigger='click'
120
- hasArrow
121
- closeOnOverlayClick
122
- closeOnEsc
123
- isFocusTrapped
124
- >
125
- <StyledContent>
126
- <>Content</>
127
- <Button onClick={() => setIsOpen(false)}>Close</Button>
128
- </StyledContent>
129
- </Popover>
130
-
131
- <div style=\{{ padding: '5rem' }}>Current Target: {currRefIndex}</div>
132
- <Button ref={targetRef3}>Target 2</Button>
133
- </>
134
- );
135
- }
136
- ```
137
- </TabItem>
138
- </Tabs>
139
-
12
+ ```tsx live
13
+ import React from 'react';
14
+ import styled from "styled-components";
15
+ import { surfaceSolidTertiary } from "@salutejs/{{ vertical }}/tokens";
16
+ import { Popover, Button } from '@salutejs/{{ package }}';
17
+
18
+ export function App() {
19
+ const [isOpen, setIsOpen] = React.useState(false);
20
+
21
+ const StyledContent = styled.div`
22
+ background: ${surfaceSolidTertiary};
23
+ padding: 1rem;
24
+
25
+ display: flex;
26
+ flex-direction: column;
27
+ align-items: center;
28
+ `;
29
+
30
+ return (
31
+ <section style=\{{width: '20rem', height: '15rem'}}>
32
+ <Popover
33
+ opened={isOpen}
34
+ onToggle={(is) => setIsOpen(is)}
35
+ role="presentation"
36
+ id="popover"
37
+ target={<Button>Target</Button>}
38
+ offset={[0, 6]}
39
+ hasArrow
40
+ placement='bottom'
41
+ trigger='click'
42
+ closeOnOverlayClick
43
+ closeOnEsc
44
+ isFocusTrapped
45
+ >
46
+ <StyledContent>
47
+ <>Content</>
48
+ <Button onClick={() => setIsOpen(false)}>close</Button>
49
+ </StyledContent>
50
+ </Popover>
51
+ </section>
52
+ );
53
+ }
54
+ ```
@@ -2,8 +2,7 @@ export var classes = {
2
2
  wrapper: 'popover-wrapper',
3
3
  root: 'popover-root',
4
4
  target: 'popover-target',
5
- arrow: 'popover-arrow',
6
- targetAsRef: 'popover-target-as-ref'
5
+ arrow: 'popover-arrow'
7
6
  };
8
7
  export var tokens = {
9
8
  arrowMaskWidth: '--plasma-popover-arrow-mask-width',
@@ -14,5 +14,5 @@ export var Portal = function Portal(_ref) {
14
14
  return null;
15
15
  }
16
16
  var portalContainer = typeof container === 'function' ? container() : container;
17
- return /*#__PURE__*/React.createElement(React.Fragment, null, (disabled || !portalContainer) && children, !disabled && portalContainer && /*#__PURE__*/ReactDOM.createPortal(children, portalContainer));
17
+ return /*#__PURE__*/React.createElement(React.Fragment, null, disabled && children, !disabled && /*#__PURE__*/ReactDOM.createPortal(children, portalContainer));
18
18
  };
@@ -34,5 +34,4 @@ export { IconStarHalfFill24 } from './Icons/Icon.24/IconStarHalfFill';
34
34
  export { IconStarOutline24 } from './Icons/Icon.24/IconStarOutline';
35
35
  export { IconStarFill36 } from './Icons/Icon.36/IconStarFill';
36
36
  export { IconStarHalfFill36 } from './Icons/Icon.36/IconStarHalfFill';
37
- export { IconStarOutline36 } from './Icons/Icon.36/IconStarOutline';
38
- export { IconFolder } from './Icons/IconFolder';
37
+ export { IconStarOutline36 } from './Icons/Icon.36/IconStarOutline';
@@ -0,0 +1,4 @@
1
+ export var config = {
2
+ defaults: {},
3
+ variations: {}
4
+ };
@@ -0,0 +1,5 @@
1
+ import { flowConfig } from '../../../../components/Flow';
2
+ import { component, mergeConfig } from '../../../../engines';
3
+ import { config } from './Flow.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(flowConfig, config);
5
+ export var Flow = /*#__PURE__*/component(mergedConfig);
@@ -0,0 +1,114 @@
1
+ import React, { ComponentProps } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import styled from 'styled-components';
4
+
5
+ import { WithTheme } from '../../../_helpers';
6
+
7
+ import { Flow } from './Flow';
8
+
9
+ const orientations = ['vertical', 'horizontal'];
10
+ const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround'];
11
+ const alignments = ['start', 'center', 'end'];
12
+
13
+ const widths = [100, 32, 171, 74, 179, 55];
14
+ const heights = [10, 50, 45, 33, 14, 55];
15
+
16
+ const Item = styled.div`
17
+ padding: 0.5rem 1rem;
18
+ border-radius: 0.5rem;
19
+ background: #aab1e9;
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ `;
24
+
25
+ const meta: Meta<typeof Flow> = {
26
+ title: 'b2c/Data Display/Flow',
27
+ component: Flow,
28
+ decorators: [WithTheme],
29
+ argTypes: {
30
+ itemsCount: {
31
+ control: {
32
+ type: 'number',
33
+ },
34
+ },
35
+ height: {
36
+ control: {
37
+ type: 'text',
38
+ },
39
+ if: { arg: 'orientation', eq: 'vertical' },
40
+ },
41
+ orientation: {
42
+ options: orientations,
43
+ control: {
44
+ type: 'select',
45
+ },
46
+ },
47
+ arrangement: {
48
+ options: arrangements,
49
+ control: {
50
+ type: 'select',
51
+ },
52
+ },
53
+ alignment: {
54
+ options: alignments,
55
+ control: {
56
+ type: 'select',
57
+ },
58
+ },
59
+ mainAxisGap: {
60
+ control: {
61
+ type: 'text',
62
+ },
63
+ },
64
+ crossAxisGap: {
65
+ control: {
66
+ type: 'text',
67
+ },
68
+ },
69
+ itemsPerLine: {
70
+ control: {
71
+ type: 'number',
72
+ },
73
+ },
74
+ minColWidth: {
75
+ control: {
76
+ type: 'text',
77
+ },
78
+ },
79
+ },
80
+ };
81
+
82
+ export default meta;
83
+
84
+ type Story = StoryObj<typeof Flow>;
85
+
86
+ export const Default: Story = {
87
+ args: {
88
+ height: '13rem',
89
+ orientation: 'horizontal',
90
+ arrangement: 'start',
91
+ alignment: 'start',
92
+ mainAxisGap: '0',
93
+ crossAxisGap: '0',
94
+ minColWidth: 'auto',
95
+ itemsCount: 6,
96
+ },
97
+ render: ({ itemsCount, height, ...args }: ComponentProps<typeof Flow>) => {
98
+ return (
99
+ <Flow {...args} style={{ maxWidth: '28rem', height: height || 'auto' }}>
100
+ {new Array(itemsCount).fill(null).map((width, index) => (
101
+ <Item
102
+ key={index}
103
+ style={{
104
+ minWidth: widths[index % widths.length],
105
+ minHeight: heights[index % heights.length],
106
+ }}
107
+ >
108
+ {index + 1}
109
+ </Item>
110
+ ))}
111
+ </Flow>
112
+ );
113
+ },
114
+ };