@salutejs/plasma-new-hope 0.78.0-canary.1185.8915022482.0 → 0.78.0-canary.1195.8913931601.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (448) hide show
  1. package/cjs/components/Combobox/Combobox.css +7 -17
  2. package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +6 -15
  3. package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +2 -2
  4. package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +6 -15
  5. package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +2 -2
  6. package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +6 -15
  7. package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +2 -2
  8. package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +6 -15
  9. package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +2 -2
  10. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.css +23 -4
  11. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js +10 -81
  12. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js.map +1 -1
  13. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +9 -21
  14. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js.map +1 -1
  15. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_936wgl.css +1 -0
  16. package/cjs/components/Dropdown/Dropdown.css +2 -25
  17. package/cjs/components/Dropdown/Dropdown.js +54 -138
  18. package/cjs/components/Dropdown/Dropdown.js.map +1 -1
  19. package/cjs/components/Dropdown/Dropdown.styles.js +7 -40
  20. package/cjs/components/Dropdown/Dropdown.styles.js.map +1 -1
  21. package/cjs/components/Dropdown/Dropdown.styles_1daxhqh.css +2 -0
  22. package/cjs/components/Dropdown/Dropdown.tokens.js +23 -26
  23. package/cjs/components/Dropdown/Dropdown.tokens.js.map +1 -1
  24. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.css +4 -7
  25. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +100 -79
  26. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
  27. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +5 -90
  28. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
  29. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1juhjtq.css +4 -0
  30. package/cjs/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_size/base.js +1 -1
  31. package/cjs/components/Dropdown/ui/DropdownItem/variations/_size/base.js.map +1 -0
  32. package/cjs/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_view/base.js +1 -1
  33. package/cjs/components/Dropdown/ui/DropdownItem/variations/_view/base.js.map +1 -0
  34. package/cjs/components/Dropdown/utils/index.js +0 -16
  35. package/cjs/components/Dropdown/utils/index.js.map +1 -1
  36. package/cjs/components/IconButton/IconButton.css +25 -0
  37. package/cjs/components/IconButton/IconButton.js +84 -0
  38. package/cjs/components/IconButton/IconButton.js.map +1 -0
  39. package/cjs/components/IconButton/IconButton.styles.js +25 -0
  40. package/cjs/components/IconButton/IconButton.styles.js.map +1 -0
  41. package/cjs/components/IconButton/IconButton.styles_12iyaye.css +2 -0
  42. package/cjs/components/IconButton/IconButton.tokens.js +36 -0
  43. package/cjs/components/IconButton/IconButton.tokens.js.map +1 -0
  44. package/cjs/components/IconButton/variations/_disabled/base.js +9 -0
  45. package/cjs/components/IconButton/variations/_disabled/base.js.map +1 -0
  46. package/cjs/components/IconButton/variations/_focused/base.js +9 -0
  47. package/cjs/components/IconButton/variations/_focused/base.js.map +1 -0
  48. package/cjs/components/IconButton/variations/_size/base.js +9 -0
  49. package/cjs/components/IconButton/variations/_size/base.js.map +1 -0
  50. package/cjs/components/IconButton/variations/_size/base_x642ct.css +1 -0
  51. package/cjs/components/IconButton/variations/_view/base.js +9 -0
  52. package/cjs/components/IconButton/variations/_view/base.js.map +1 -0
  53. package/cjs/components/IconButton/variations/_view/base_x642ct.css +1 -0
  54. package/cjs/components/Pagination/Pagination.css +7 -14
  55. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +7 -14
  56. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +1 -1
  57. package/cjs/components/Select/Select.css +7 -14
  58. package/cjs/components/Select/ui/SelectDivider/SelectDivider.css +6 -15
  59. package/cjs/components/Select/ui/SelectDivider/SelectDivider.js +2 -2
  60. package/cjs/components/Select/ui/SelectFooter/SelectFooter.css +6 -15
  61. package/cjs/components/Select/ui/SelectFooter/SelectFooter.js +2 -2
  62. package/cjs/components/Select/ui/SelectGroup/SelectGroup.css +6 -15
  63. package/cjs/components/Select/ui/SelectGroup/SelectGroup.js +2 -2
  64. package/cjs/components/Select/ui/SelectHeader/SelectHeader.css +6 -15
  65. package/cjs/components/Select/ui/SelectHeader/SelectHeader.js +2 -2
  66. package/cjs/components/Select/ui/SelectItem/SelectItem.css +7 -16
  67. package/cjs/components/Select/ui/SelectItem/SelectItem.js +3 -3
  68. package/cjs/components/Select/ui/SelectItem/SelectItem.js.map +1 -1
  69. package/cjs/components/Select/ui/SelectItem/SelectItem.styles.js +2 -2
  70. package/cjs/components/Select/ui/SelectItem/SelectItem.styles.js.map +1 -1
  71. package/cjs/components/Select/ui/SelectItem/{SelectItem.styles_vk39mp.css → SelectItem.styles_6h17aw.css} +1 -1
  72. package/cjs/components/_Icon/Icon.assets/DisclosureRight.js +2 -1
  73. package/cjs/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
  74. package/cjs/index.css +11 -18
  75. package/cjs/index.js +8 -8
  76. package/es/components/Combobox/Combobox.css +7 -17
  77. package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +6 -15
  78. package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +2 -2
  79. package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +6 -15
  80. package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +2 -2
  81. package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +6 -15
  82. package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +2 -2
  83. package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +6 -15
  84. package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +2 -2
  85. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.css +23 -4
  86. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js +11 -82
  87. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js.map +1 -1
  88. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +10 -19
  89. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js.map +1 -1
  90. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_936wgl.css +1 -0
  91. package/es/components/Dropdown/Dropdown.css +2 -25
  92. package/es/components/Dropdown/Dropdown.js +60 -144
  93. package/es/components/Dropdown/Dropdown.js.map +1 -1
  94. package/es/components/Dropdown/Dropdown.styles.js +7 -39
  95. package/es/components/Dropdown/Dropdown.styles.js.map +1 -1
  96. package/es/components/Dropdown/Dropdown.styles_1daxhqh.css +2 -0
  97. package/es/components/Dropdown/Dropdown.tokens.js +23 -26
  98. package/es/components/Dropdown/Dropdown.tokens.js.map +1 -1
  99. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.css +4 -7
  100. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +100 -80
  101. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
  102. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +5 -89
  103. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
  104. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1juhjtq.css +4 -0
  105. package/es/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_size/base.js +1 -1
  106. package/es/components/Dropdown/ui/DropdownItem/variations/_size/base.js.map +1 -0
  107. package/es/components/Dropdown/ui/DropdownItem/variations/_size/base_x642ct.css +1 -0
  108. package/es/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_view/base.js +1 -1
  109. package/es/components/Dropdown/ui/DropdownItem/variations/_view/base.js.map +1 -0
  110. package/es/components/Dropdown/ui/DropdownItem/variations/_view/base_x642ct.css +1 -0
  111. package/es/components/Dropdown/utils/index.js +2 -16
  112. package/es/components/Dropdown/utils/index.js.map +1 -1
  113. package/es/components/IconButton/IconButton.css +25 -0
  114. package/es/components/IconButton/IconButton.js +79 -0
  115. package/es/components/IconButton/IconButton.js.map +1 -0
  116. package/es/components/IconButton/IconButton.styles.js +20 -0
  117. package/es/components/IconButton/IconButton.styles.js.map +1 -0
  118. package/es/components/IconButton/IconButton.styles_12iyaye.css +2 -0
  119. package/es/components/IconButton/IconButton.tokens.js +31 -0
  120. package/es/components/IconButton/IconButton.tokens.js.map +1 -0
  121. package/es/components/IconButton/variations/_disabled/base.js +5 -0
  122. package/es/components/IconButton/variations/_disabled/base.js.map +1 -0
  123. package/es/components/IconButton/variations/_disabled/base_x642ct.css +1 -0
  124. package/es/components/IconButton/variations/_focused/base.js +5 -0
  125. package/es/components/IconButton/variations/_focused/base.js.map +1 -0
  126. package/es/components/IconButton/variations/_focused/base_x642ct.css +1 -0
  127. package/es/components/IconButton/variations/_size/base.js +5 -0
  128. package/es/components/IconButton/variations/_size/base.js.map +1 -0
  129. package/es/components/IconButton/variations/_size/base_x642ct.css +1 -0
  130. package/es/components/IconButton/variations/_view/base.js +5 -0
  131. package/es/components/IconButton/variations/_view/base.js.map +1 -0
  132. package/es/components/IconButton/variations/_view/base_x642ct.css +1 -0
  133. package/es/components/Pagination/Pagination.css +7 -14
  134. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +7 -14
  135. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +1 -1
  136. package/es/components/Select/Select.css +7 -14
  137. package/es/components/Select/ui/SelectDivider/SelectDivider.css +6 -15
  138. package/es/components/Select/ui/SelectDivider/SelectDivider.js +2 -2
  139. package/es/components/Select/ui/SelectFooter/SelectFooter.css +6 -15
  140. package/es/components/Select/ui/SelectFooter/SelectFooter.js +2 -2
  141. package/es/components/Select/ui/SelectGroup/SelectGroup.css +6 -15
  142. package/es/components/Select/ui/SelectGroup/SelectGroup.js +2 -2
  143. package/es/components/Select/ui/SelectHeader/SelectHeader.css +6 -15
  144. package/es/components/Select/ui/SelectHeader/SelectHeader.js +2 -2
  145. package/es/components/Select/ui/SelectItem/SelectItem.css +7 -16
  146. package/es/components/Select/ui/SelectItem/SelectItem.js +3 -3
  147. package/es/components/Select/ui/SelectItem/SelectItem.js.map +1 -1
  148. package/es/components/Select/ui/SelectItem/SelectItem.styles.js +2 -2
  149. package/es/components/Select/ui/SelectItem/SelectItem.styles.js.map +1 -1
  150. package/es/components/Select/ui/SelectItem/{SelectItem.styles_vk39mp.css → SelectItem.styles_6h17aw.css} +1 -1
  151. package/es/components/_Icon/Icon.assets/DisclosureRight.js +2 -1
  152. package/es/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
  153. package/es/index.css +11 -18
  154. package/es/index.js +3 -4
  155. package/es/index.js.map +1 -1
  156. package/package.json +2 -2
  157. package/styled-components/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js +2 -91
  158. package/styled-components/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +7 -27
  159. package/styled-components/cjs/components/Dropdown/Dropdown.js +54 -140
  160. package/styled-components/cjs/components/Dropdown/Dropdown.styles.js +7 -22
  161. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +80 -0
  162. package/styled-components/cjs/components/Dropdown/Dropdown.tokens.js +23 -26
  163. package/styled-components/cjs/components/Dropdown/index.js +1 -9
  164. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +105 -77
  165. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +18 -83
  166. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json +19 -0
  167. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json +9 -0
  168. package/styled-components/cjs/components/Dropdown/ui/index.js +5 -19
  169. package/styled-components/cjs/components/Dropdown/utils/index.js +1 -15
  170. package/styled-components/cjs/components/Dropdown/variations/_size/tokens.json +9 -1
  171. package/styled-components/cjs/components/Dropdown/variations/_view/tokens.json +1 -1
  172. package/styled-components/cjs/components/IconButton/IconButton.js +86 -0
  173. package/styled-components/cjs/components/IconButton/IconButton.styles.js +19 -0
  174. package/styled-components/cjs/components/IconButton/IconButton.tokens.js +34 -0
  175. package/styled-components/cjs/components/IconButton/index.js +31 -0
  176. package/styled-components/cjs/components/IconButton/variations/_disabled/base.js +8 -0
  177. package/styled-components/cjs/components/IconButton/variations/_disabled/tokens.json +1 -0
  178. package/styled-components/cjs/components/IconButton/variations/_focused/base.js +8 -0
  179. package/styled-components/cjs/components/IconButton/variations/_focused/tokens.json +1 -0
  180. package/styled-components/cjs/components/IconButton/variations/_size/base.js +8 -0
  181. package/styled-components/cjs/components/IconButton/variations/_size/tokens.json +1 -0
  182. package/styled-components/cjs/components/IconButton/variations/_view/base.js +8 -0
  183. package/styled-components/cjs/components/IconButton/variations/_view/tokens.json +1 -0
  184. package/styled-components/cjs/components/Select/ui/SelectItem/SelectItem.js +1 -1
  185. package/styled-components/cjs/components/Select/ui/SelectItem/SelectItem.styles.js +1 -1
  186. package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureRight.js +2 -1
  187. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js +27 -0
  188. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.js +13 -0
  189. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx +194 -0
  190. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js +27 -0
  191. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.js +13 -0
  192. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx +195 -0
  193. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.config.js +46 -0
  194. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.js +11 -0
  195. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +65 -0
  196. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js +27 -0
  197. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.js +13 -0
  198. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx +195 -0
  199. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js +27 -0
  200. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.js +13 -0
  201. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx +195 -0
  202. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.config.js +46 -0
  203. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.js +11 -0
  204. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +65 -0
  205. package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.config.js +22 -0
  206. package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.js +21 -0
  207. package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.stories.tsx +277 -0
  208. package/styled-components/cjs/index.js +11 -0
  209. package/styled-components/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js +3 -90
  210. package/styled-components/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +6 -23
  211. package/styled-components/es/components/Dropdown/Dropdown.js +55 -142
  212. package/styled-components/es/components/Dropdown/Dropdown.styles.js +5 -18
  213. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +80 -0
  214. package/styled-components/es/components/Dropdown/Dropdown.tokens.js +23 -26
  215. package/styled-components/es/components/Dropdown/index.js +0 -1
  216. package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +107 -78
  217. package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +14 -80
  218. package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json +19 -0
  219. package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json +9 -0
  220. package/styled-components/es/components/Dropdown/ui/index.js +1 -3
  221. package/styled-components/es/components/Dropdown/utils/index.js +1 -15
  222. package/styled-components/es/components/Dropdown/variations/_size/tokens.json +9 -1
  223. package/styled-components/es/components/Dropdown/variations/_view/tokens.json +1 -1
  224. package/styled-components/es/components/IconButton/IconButton.js +77 -0
  225. package/styled-components/es/components/IconButton/IconButton.styles.js +11 -0
  226. package/styled-components/es/components/IconButton/IconButton.tokens.js +28 -0
  227. package/styled-components/es/components/IconButton/index.js +2 -0
  228. package/styled-components/es/components/IconButton/variations/_disabled/base.js +2 -0
  229. package/styled-components/es/components/IconButton/variations/_disabled/tokens.json +1 -0
  230. package/styled-components/es/components/IconButton/variations/_focused/base.js +2 -0
  231. package/styled-components/es/components/IconButton/variations/_focused/tokens.json +1 -0
  232. package/styled-components/es/components/IconButton/variations/_size/base.js +2 -0
  233. package/styled-components/es/components/IconButton/variations/_size/tokens.json +1 -0
  234. package/styled-components/es/components/IconButton/variations/_view/base.js +2 -0
  235. package/styled-components/es/components/IconButton/variations/_view/tokens.json +1 -0
  236. package/styled-components/es/components/Select/ui/SelectItem/SelectItem.js +2 -2
  237. package/styled-components/es/components/Select/ui/SelectItem/SelectItem.styles.js +1 -1
  238. package/styled-components/es/components/_Icon/Icon.assets/DisclosureRight.js +2 -1
  239. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js +21 -0
  240. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.js +7 -0
  241. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx +194 -0
  242. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js +21 -0
  243. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.js +7 -0
  244. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx +195 -0
  245. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.config.js +40 -0
  246. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.js +5 -0
  247. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +65 -0
  248. package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js +21 -0
  249. package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.js +7 -0
  250. package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx +195 -0
  251. package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js +21 -0
  252. package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.js +7 -0
  253. package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx +195 -0
  254. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.config.js +40 -0
  255. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.js +5 -0
  256. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +65 -0
  257. package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.config.js +16 -0
  258. package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.js +15 -0
  259. package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.stories.tsx +277 -0
  260. package/styled-components/es/index.js +1 -0
  261. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.d.ts +13 -15
  262. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.d.ts.map +1 -1
  263. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.d.ts +1 -5
  264. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.d.ts.map +1 -1
  265. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.type.d.ts +2 -59
  266. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.type.d.ts.map +1 -1
  267. package/types/components/Dropdown/Dropdown.d.ts +4 -4
  268. package/types/components/Dropdown/Dropdown.d.ts.map +1 -1
  269. package/types/components/Dropdown/Dropdown.styles.d.ts +1 -8
  270. package/types/components/Dropdown/Dropdown.styles.d.ts.map +1 -1
  271. package/types/components/Dropdown/Dropdown.tokens.d.ts +22 -24
  272. package/types/components/Dropdown/Dropdown.tokens.d.ts.map +1 -1
  273. package/types/components/Dropdown/Dropdown.types.d.ts +40 -64
  274. package/types/components/Dropdown/Dropdown.types.d.ts.map +1 -1
  275. package/types/components/Dropdown/index.d.ts +1 -3
  276. package/types/components/Dropdown/index.d.ts.map +1 -1
  277. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts +56 -2
  278. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts.map +1 -1
  279. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts +2 -5
  280. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts.map +1 -1
  281. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts +38 -44
  282. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts.map +1 -1
  283. package/types/components/Dropdown/ui/DropdownItem/variations/_size/base.d.ts.map +1 -0
  284. package/types/components/Dropdown/ui/DropdownItem/variations/_view/base.d.ts.map +1 -0
  285. package/types/components/Dropdown/ui/index.d.ts +1 -3
  286. package/types/components/Dropdown/ui/index.d.ts.map +1 -1
  287. package/types/components/Dropdown/utils/index.d.ts +2 -5
  288. package/types/components/Dropdown/utils/index.d.ts.map +1 -1
  289. package/types/components/IconButton/IconButton.d.ts +30 -0
  290. package/types/components/IconButton/IconButton.d.ts.map +1 -0
  291. package/types/components/IconButton/IconButton.styles.d.ts +4 -0
  292. package/types/components/IconButton/IconButton.styles.d.ts.map +1 -0
  293. package/types/components/IconButton/IconButton.tokens.d.ts +29 -0
  294. package/types/components/IconButton/IconButton.tokens.d.ts.map +1 -0
  295. package/types/components/IconButton/IconButton.types.d.ts +13 -0
  296. package/types/components/IconButton/IconButton.types.d.ts.map +1 -0
  297. package/types/components/IconButton/index.d.ts +4 -0
  298. package/types/components/IconButton/index.d.ts.map +1 -0
  299. package/types/components/IconButton/variations/_disabled/base.d.ts +2 -0
  300. package/types/components/IconButton/variations/_disabled/base.d.ts.map +1 -0
  301. package/types/components/IconButton/variations/_focused/base.d.ts +2 -0
  302. package/types/components/IconButton/variations/_focused/base.d.ts.map +1 -0
  303. package/types/components/IconButton/variations/_size/base.d.ts +2 -0
  304. package/types/components/IconButton/variations/_size/base.d.ts.map +1 -0
  305. package/types/components/IconButton/variations/_view/base.d.ts +2 -0
  306. package/types/components/IconButton/variations/_view/base.d.ts.map +1 -0
  307. package/types/components/Select/ui/SelectItem/SelectItem.d.ts +2 -2
  308. package/types/components/Select/ui/SelectItem/SelectItem.d.ts.map +1 -1
  309. package/types/components/Select/ui/SelectItem/SelectItem.type.d.ts +2 -2
  310. package/types/components/Select/utils/index.d.ts +1 -1
  311. package/types/components/_Icon/Icon.assets/DisclosureRight.d.ts.map +1 -1
  312. package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.d.ts.map +1 -0
  313. package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.d.ts +30 -0
  314. package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.d.ts.map +1 -0
  315. package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.d.ts +18 -0
  316. package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.d.ts.map +1 -0
  317. package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.d.ts +30 -0
  318. package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.d.ts.map +1 -0
  319. package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts +39 -0
  320. package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts.map +1 -0
  321. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +33 -0
  322. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -0
  323. package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.d.ts +18 -0
  324. package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.d.ts.map +1 -0
  325. package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.d.ts +30 -0
  326. package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.d.ts.map +1 -0
  327. package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.d.ts +18 -0
  328. package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.d.ts.map +1 -0
  329. package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.d.ts +30 -0
  330. package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.d.ts.map +1 -0
  331. package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts +39 -0
  332. package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts.map +1 -0
  333. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +33 -0
  334. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -0
  335. package/types/examples/sds_engineer/components/Dropdown/Dropdown.config.d.ts +15 -0
  336. package/types/examples/sds_engineer/components/Dropdown/Dropdown.config.d.ts.map +1 -0
  337. package/types/examples/sds_engineer/components/Dropdown/Dropdown.d.ts +51 -0
  338. package/types/examples/sds_engineer/components/Dropdown/Dropdown.d.ts.map +1 -0
  339. package/types/index.d.ts +1 -0
  340. package/types/index.d.ts.map +1 -1
  341. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_s4sk53.css +0 -4
  342. package/cjs/components/Combobox/utils/index.js +0 -23
  343. package/cjs/components/Combobox/utils/index.js.map +0 -1
  344. package/cjs/components/Dropdown/Dropdown.styles_1tihqkp.css +0 -3
  345. package/cjs/components/Dropdown/hooks/useHashMaps.js +0 -31
  346. package/cjs/components/Dropdown/hooks/useHashMaps.js.map +0 -1
  347. package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +0 -200
  348. package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js.map +0 -1
  349. package/cjs/components/Dropdown/reducers/focusedPathReducer.js +0 -37
  350. package/cjs/components/Dropdown/reducers/focusedPathReducer.js.map +0 -1
  351. package/cjs/components/Dropdown/reducers/pathReducer.js +0 -41
  352. package/cjs/components/Dropdown/reducers/pathReducer.js.map +0 -1
  353. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +0 -119
  354. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +0 -1
  355. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1o4szyu.css +0 -5
  356. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +0 -30
  357. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js.map +0 -1
  358. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles_12e50g5.css +0 -4
  359. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.css +0 -4
  360. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +0 -112
  361. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js.map +0 -1
  362. package/cjs/components/Dropdown/ui/DropdownItemOld/variations/_size/base.js.map +0 -1
  363. package/cjs/components/Dropdown/ui/DropdownItemOld/variations/_view/base.js.map +0 -1
  364. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_s4sk53.css +0 -4
  365. package/es/components/Combobox/utils/index.js +0 -19
  366. package/es/components/Combobox/utils/index.js.map +0 -1
  367. package/es/components/Dropdown/Dropdown.styles_1tihqkp.css +0 -3
  368. package/es/components/Dropdown/hooks/useHashMaps.js +0 -27
  369. package/es/components/Dropdown/hooks/useHashMaps.js.map +0 -1
  370. package/es/components/Dropdown/hooks/useKeyboardNavigation.js +0 -196
  371. package/es/components/Dropdown/hooks/useKeyboardNavigation.js.map +0 -1
  372. package/es/components/Dropdown/reducers/focusedPathReducer.js +0 -33
  373. package/es/components/Dropdown/reducers/focusedPathReducer.js.map +0 -1
  374. package/es/components/Dropdown/reducers/pathReducer.js +0 -37
  375. package/es/components/Dropdown/reducers/pathReducer.js.map +0 -1
  376. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +0 -115
  377. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +0 -1
  378. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1o4szyu.css +0 -5
  379. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +0 -23
  380. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js.map +0 -1
  381. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles_12e50g5.css +0 -4
  382. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.css +0 -4
  383. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +0 -107
  384. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js.map +0 -1
  385. package/es/components/Dropdown/ui/DropdownItemOld/variations/_size/base.js.map +0 -1
  386. package/es/components/Dropdown/ui/DropdownItemOld/variations/_view/base.js.map +0 -1
  387. package/styled-components/cjs/components/Combobox/utils/index.js +0 -23
  388. package/styled-components/cjs/components/Dropdown/hooks/useHashMaps.js +0 -29
  389. package/styled-components/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +0 -199
  390. package/styled-components/cjs/components/Dropdown/reducers/focusedPathReducer.js +0 -40
  391. package/styled-components/cjs/components/Dropdown/reducers/pathReducer.js +0 -44
  392. package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +0 -114
  393. package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +0 -33
  394. package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.js +0 -5
  395. package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +0 -119
  396. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +0 -25
  397. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.js +0 -11
  398. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +0 -294
  399. package/styled-components/es/components/Combobox/utils/index.js +0 -15
  400. package/styled-components/es/components/Dropdown/hooks/useHashMaps.js +0 -23
  401. package/styled-components/es/components/Dropdown/hooks/useKeyboardNavigation.js +0 -193
  402. package/styled-components/es/components/Dropdown/reducers/focusedPathReducer.js +0 -34
  403. package/styled-components/es/components/Dropdown/reducers/pathReducer.js +0 -38
  404. package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +0 -108
  405. package/styled-components/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +0 -25
  406. package/styled-components/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.js +0 -1
  407. package/styled-components/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +0 -111
  408. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +0 -19
  409. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.js +0 -5
  410. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +0 -294
  411. package/types/components/Combobox/utils/index.d.ts +0 -4
  412. package/types/components/Combobox/utils/index.d.ts.map +0 -1
  413. package/types/components/Dropdown/hooks/useHashMaps.d.ts +0 -6
  414. package/types/components/Dropdown/hooks/useHashMaps.d.ts.map +0 -1
  415. package/types/components/Dropdown/hooks/useKeyboardNavigation.d.ts +0 -23
  416. package/types/components/Dropdown/hooks/useKeyboardNavigation.d.ts.map +0 -1
  417. package/types/components/Dropdown/reducers/focusedPathReducer.d.ts +0 -16
  418. package/types/components/Dropdown/reducers/focusedPathReducer.d.ts.map +0 -1
  419. package/types/components/Dropdown/reducers/pathReducer.d.ts +0 -20
  420. package/types/components/Dropdown/reducers/pathReducer.d.ts.map +0 -1
  421. package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts +0 -5
  422. package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts.map +0 -1
  423. package/types/components/Dropdown/ui/DropdownInner/DropdownInner.type.d.ts +0 -26
  424. package/types/components/Dropdown/ui/DropdownInner/DropdownInner.type.d.ts.map +0 -1
  425. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.d.ts +0 -7
  426. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.d.ts.map +0 -1
  427. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.d.ts +0 -60
  428. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.d.ts.map +0 -1
  429. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.d.ts +0 -58
  430. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.d.ts.map +0 -1
  431. package/types/components/Dropdown/ui/DropdownItemOld/variations/_size/base.d.ts.map +0 -1
  432. package/types/components/Dropdown/ui/DropdownItemOld/variations/_view/base.d.ts.map +0 -1
  433. package/types/examples/plasma_b2c/components/Dropdown/Dropdown.config.d.ts.map +0 -1
  434. package/types/examples/plasma_b2c/components/Dropdown/Dropdown.d.ts +0 -13
  435. package/types/examples/plasma_b2c/components/Dropdown/Dropdown.d.ts.map +0 -1
  436. /package/cjs/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_size/base_x642ct.css +0 -0
  437. /package/cjs/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_view/base_x642ct.css +0 -0
  438. /package/{es/components/Dropdown/ui/DropdownItemOld/variations/_size → cjs/components/IconButton/variations/_disabled}/base_x642ct.css +0 -0
  439. /package/{es/components/Dropdown/ui/DropdownItemOld/variations/_view → cjs/components/IconButton/variations/_focused}/base_x642ct.css +0 -0
  440. /package/styled-components/cjs/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_size/base.js +0 -0
  441. /package/styled-components/cjs/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_view/base.js +0 -0
  442. /package/styled-components/cjs/components/{Dropdown/ui/DropdownInner/DropdownInner.type.js → IconButton/IconButton.types.js} +0 -0
  443. /package/styled-components/es/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_size/base.js +0 -0
  444. /package/styled-components/es/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_view/base.js +0 -0
  445. /package/styled-components/es/components/{Dropdown/ui/DropdownInner/DropdownInner.type.js → IconButton/IconButton.types.js} +0 -0
  446. /package/types/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_size/base.d.ts +0 -0
  447. /package/types/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_view/base.d.ts +0 -0
  448. /package/types/examples/plasma_b2c/components/Dropdown/{Dropdown.config.d.ts → Normal/Dropdown.config.d.ts} +0 -0
@@ -1,91 +1,25 @@
1
+ var _templateObject;
2
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
+ import { css } from 'styled-components';
1
4
  import styled from 'styled-components';
2
5
  import { classes, tokens } from '../../Dropdown.tokens';
3
6
  import { addFocus, applyEllipsis } from '../../../../mixins';
4
7
  export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
5
8
  componentId: "plasma-new-hope__sc-hs0ek1-0"
6
- })(["display:inline-flex;"]);
9
+ })(["display:inline-flex;min-width:var(", ");color:var(", ");"], tokens.itemContentLeftWidth, tokens.itemContentLeftColor);
7
10
  export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
8
11
  componentId: "plasma-new-hope__sc-hs0ek1-1"
9
- })(["margin-left:auto;display:inline-flex;"]);
10
- export var DisclosureIconWrapper = /*#__PURE__*/styled.div.withConfig({
11
- componentId: "plasma-new-hope__sc-hs0ek1-2"
12
- })(["line-height:0;color:var(", ");"], tokens.disclosureIconColor);
12
+ })(["margin-left:auto;display:inline-flex;min-width:var(", ");color:var(", ");"], tokens.itemContentRightWidth, tokens.itemContentRightColor);
13
13
  export var StyledText = /*#__PURE__*/styled.div.withConfig({
14
- componentId: "plasma-new-hope__sc-hs0ek1-3"
15
- })(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
16
-
17
- // TODO: Remove baseContent after refactoring a Select component
18
- // export const baseContent = `
19
- // box-sizing: content-box;
20
- // display: flex;
21
- // align-items: center;
22
- // user-select: none;
23
- //
24
- // :focus {
25
- // outline: none;
26
- // }
27
- //
28
- // ${addFocus({
29
- // outlineSize: '0.0625rem',
30
- // outlineOffset: '0',
31
- // outlineColor: `var(${tokens.focusColor})`,
32
- // outlineRadius: `var(${tokens.itemBorderRadius})`,
33
- // hasTransition: false,
34
- // customFocusRules: `
35
- // &.${classes.dropdownItemIsFocused}:before {
36
- // outline: none;
37
- // box-shadow: 0 0 0 0.0625rem var(${tokens.focusColor});
38
- // }
39
- // `,
40
- // })};
41
- //
42
- // width: 100%;
43
- //
44
- // font-family: var(${tokens.itemFontFamily});
45
- // font-size: var(${tokens.itemFontSize});
46
- // font-style: var(${tokens.itemFontStyle});
47
- // font-weight: var(${tokens.itemFontWeightBold});
48
- // letter-spacing: var(${tokens.itemFontLetterSpacing});
49
- // line-height: var(${tokens.itemFontLineHeight});
50
- //
51
- // background: var(${tokens.itemBackground});
52
- // color: var(${tokens.itemColor});
53
- // border-radius: var(${tokens.itemBorderRadius});
54
- //
55
- // padding: var(${tokens.itemPaddingTop}) var(${tokens.itemPaddingRight}) var(${tokens.itemPaddingBottom}) var(${
56
- // tokens.itemPaddingLeft
57
- // });
58
- //
59
- // margin: 0;
60
- //
61
- // &:hover:not(.${classes.dropdownItemIsDisabled}) {
62
- // cursor: pointer;
63
- // background: var(${tokens.itemBackgroundHover});
64
- // }
65
- //
66
- // &.${classes.dropdownItemIsActive} {
67
- // background: var(${tokens.itemBackgroundHover});
68
- // }
69
- //
70
- // &.${classes.dropdownItemIsDisabled} {
71
- // opacity: var(${tokens.disabledOpacity});
72
- // cursor: not-allowed;
73
- // }
74
- // `;
14
+ componentId: "plasma-new-hope__sc-hs0ek1-2"
15
+ })(["", ";"], /*#__PURE__*/applyEllipsis());
75
16
 
76
- export var Wrapper = /*#__PURE__*/styled.li.withConfig({
77
- componentId: "plasma-new-hope__sc-hs0ek1-4"
78
- })(["display:flex;align-items:center;margin:0;box-sizing:content-box;padding-top:", ";padding-right:var(", ");padding-bottom:", ";padding-left:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(", ");border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], function (_ref) {
79
- var variant = _ref.variant;
80
- return "var(".concat(variant === 'tight' ? tokens.itemPaddingTopTight : tokens.itemPaddingTop, ")");
81
- }, tokens.itemPaddingRight, function (_ref2) {
82
- var variant = _ref2.variant;
83
- return "var(".concat(variant === 'tight' ? tokens.itemPaddingBottomTight : tokens.itemPaddingBottom, ")");
84
- }, tokens.itemPaddingLeft, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.itemBackground, tokens.itemColor, tokens.itemBorderRadius, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, tokens.disabledOpacity, /*#__PURE__*/addFocus({
17
+ // INFO: Для возможности переиспользования стилей в других компонентах
18
+ export var baseContent = /*#__PURE__*/"\n box-sizing: content-box;\n display: flex;\n align-items: center;\n user-select: none;\n\n :focus {\n outline: none;\n }\n\n ".concat(addFocus({
85
19
  outlineSize: '0.0625rem',
86
20
  outlineOffset: '0',
87
- outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")"),
88
- outlineRadius: /*#__PURE__*/"var(".concat(tokens.itemBorderRadius, ")"),
89
- hasTransition: false,
90
- customFocusRules: /*#__PURE__*/"\n &.".concat(classes.dropdownItemIsFocused, ":before {\n outline: none;\n box-shadow: 0 0 0 0.0625rem var(").concat(tokens.focusColor, ");\n }\n ")
91
- }));
21
+ outlineColor: "var(".concat(tokens.focusColor, ")"),
22
+ outlineRadius: "var(".concat(tokens.itemBorderRadius, ")"),
23
+ hasTransition: false
24
+ }), ";\n\n width: 100%;\n\n font-family: var(").concat(tokens.itemFontFamily, ");\n font-size: var(").concat(tokens.itemFontSize, ");\n font-style: var(").concat(tokens.itemFontStyle, ");\n font-weight: var(").concat(tokens.itemFontWeightBold, ");\n letter-spacing: var(").concat(tokens.itemFontLetterSpacing, ");\n line-height: var(").concat(tokens.itemFontLineHeight, ");\n\n background: var(").concat(tokens.itemBackground, ");\n color: var(").concat(tokens.itemColor, ");\n border-radius: var(").concat(tokens.itemBorderRadius, ");\n\n width: var(").concat(tokens.itemWidth, ");\n height: var(").concat(tokens.itemHeight, ");\n\n padding: var(").concat(tokens.itemPaddingTop, ") var(").concat(tokens.itemPaddingRight, ") var(").concat(tokens.itemPaddingBottom, ")\n var(").concat(tokens.itemPaddingLeft, ");\n\n margin: var(").concat(tokens.itemMarginTop, ") var(").concat(tokens.itemMarginRight, ") var(").concat(tokens.itemMarginBottom, ")\n var(").concat(tokens.itemMarginLeft, ");\n\n &:hover:not(.").concat(classes.dropdownItemIsDisabled, ") {\n cursor: pointer;\n background: var(").concat(tokens.itemBackgroundHover, ");\n }\n\n &.").concat(String(classes.dropdownItemIsSelected), " {\n color: var(").concat(tokens.itemColorSelected, ");\n background: var(").concat(tokens.itemBackgroundSelected, ");\n\n &:hover:not(.").concat(classes.dropdownItemIsDisabled, ") {\n background: var(").concat(tokens.itemBackgroundSelectedHover, ");\n }\n }\n\n &.").concat(classes.dropdownItemIsDisabled, " {\n opacity: var(").concat(tokens.disabledOpacity, ");\n cursor: not-allowed;\n }\n");
25
+ export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ";\n"])), baseContent);
@@ -0,0 +1,19 @@
1
+ [
2
+ "--plasma-dropdown-item-width",
3
+ "--plasma-dropdown-item-height",
4
+ "--plasma-dropdown-item-padding-top",
5
+ "--plasma-dropdown-item-padding-right",
6
+ "--plasma-dropdown-item-padding-bottom",
7
+ "--plasma-dropdown-item-padding-left",
8
+ "--plasma-dropdown-item-margin-top",
9
+ "--plasma-dropdown-item-margin-right",
10
+ "--plasma-dropdown-item-margin-bottom",
11
+ "--plasma-dropdown-item-margin-left",
12
+ "--plasma-dropdown-item-border-radius",
13
+ "--plasma-dropdown-item-font-family",
14
+ "--plasma-dropdown-item-font-size",
15
+ "--plasma-dropdown-item-font-style",
16
+ "--plasma-dropdown-item-letter-spacing",
17
+ "--plasma-dropdown-item-line-height",
18
+ "--plasma-dropdown-item-font-weight"
19
+ ]
@@ -0,0 +1,9 @@
1
+ [
2
+ "--plasma-dropdown-item-background",
3
+ "--plasma-dropdown-item-color",
4
+ "--plasma-dropdown-item-background-hover",
5
+ "--plasma-dropdown-item-background-selected",
6
+ "--plasma-dropdown-item-color-selected",
7
+ "--plasma-dropdown-item-background-selected-hover",
8
+ "--plasma-dropdown-item-color-selected-hover"
9
+ ]
@@ -2,6 +2,4 @@ export { dropdownDividerRoot, dropdownDividerConfig } from './DropdownDivider/Dr
2
2
  export { dropdownFooterRoot, dropdownFooterConfig } from './DropdownFooter/DropdownFooter';
3
3
  export { dropdownGroupRoot, dropdownGroupConfig } from './DropdownGroup/DropdownGroup';
4
4
  export { dropdownHeaderRoot, dropdownHeaderConfig } from './DropdownHeader/DropdownHeader';
5
- export { DropdownItem } from './DropdownItem/DropdownItem';
6
- export { DropdownInner } from './DropdownInner/DropdownInner';
7
- export { dropdownItemOldRoot, dropdownItemOldConfig } from './DropdownItemOld/DropdownItemOld';
5
+ export { dropdownItemRoot, dropdownItemConfig } from './DropdownItem/DropdownItem';
@@ -1,5 +1,5 @@
1
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
- import React, { Children, cloneElement, isValidElement } from 'react';
2
+ import React, { cloneElement, isValidElement } from 'react';
3
3
  export var getPlacement = function getPlacement(placement) {
4
4
  return "".concat(placement, "-start");
5
5
  };
@@ -15,20 +15,6 @@ export var getPlacements = function getPlacements(placements) {
15
15
  return getPlacement(placement);
16
16
  });
17
17
  };
18
- export var getCorrectHeight = function getCorrectHeight(listHeight) {
19
- if (Number.isNaN(Number(listHeight))) {
20
- return listHeight.toString();
21
- }
22
- return "".concat(listHeight, "rem");
23
- };
24
- export var childrenWithProps = function childrenWithProps(children, additionalProps) {
25
- return Children.map(children, function (child) {
26
- if ( /*#__PURE__*/React.isValidElement(child)) {
27
- return /*#__PURE__*/React.cloneElement(child, additionalProps);
28
- }
29
- return child;
30
- });
31
- };
32
18
  var isReactObject = function isReactObject(element) {
33
19
  return _typeof(element) === 'object' || typeof element === 'function';
34
20
  };
@@ -1 +1,9 @@
1
- []
1
+ [
2
+ " --plasma-dropdown-width",
3
+ " --plasma-dropdown-height",
4
+ " --plasma-dropdown-border-radius",
5
+ " --plasma-dropdown-padding-top",
6
+ " --plasma-dropdown-padding-right",
7
+ " --plasma-dropdown-padding-bottom",
8
+ " --plasma-dropdown-padding-left"
9
+ ]
@@ -1 +1 @@
1
- []
1
+ ["--plasma-dropdown-background", "--plasma-dropdown-box-shadow"]
@@ -0,0 +1,77 @@
1
+ var _excluded = ["children", "view", "size", "icon", "isLoading", "loader", "pin", "disabled", "focused", "outlined", "className", "style"];
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
+ 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
+ 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; }
5
+ import React, { forwardRef } from 'react';
6
+ import { cx } from '../../utils';
7
+ import { base, IconButtonStyled } from './IconButton.styles';
8
+ import { classes } from './IconButton.tokens';
9
+ import { base as viewCSS } from './variations/_view/base';
10
+ import { base as sizeCSS } from './variations/_size/base';
11
+ import { base as disabledCSS } from './variations/_disabled/base';
12
+ import { base as focusedCSS } from './variations/_focused/base';
13
+ export var iconButtonRoot = function iconButtonRoot(Root) {
14
+ return /*#__PURE__*/forwardRef(function (props, ref) {
15
+ var children = props.children,
16
+ view = props.view,
17
+ size = props.size,
18
+ icon = props.icon,
19
+ isLoading = props.isLoading,
20
+ loader = props.loader,
21
+ pin = props.pin,
22
+ disabled = props.disabled,
23
+ focused = props.focused,
24
+ outlined = props.outlined,
25
+ className = props.className,
26
+ style = props.style,
27
+ rest = _objectWithoutProperties(props, _excluded);
28
+ return /*#__PURE__*/React.createElement(Root, {
29
+ view: view,
30
+ size: size,
31
+ focused: focused,
32
+ disabled: disabled,
33
+ className: classes.iconButtonItem
34
+ }, /*#__PURE__*/React.createElement(IconButtonStyled, _extends({
35
+ view: view,
36
+ size: size,
37
+ loader: loader,
38
+ isLoading: isLoading,
39
+ pin: pin,
40
+ disabled: disabled,
41
+ focused: focused,
42
+ outlined: outlined,
43
+ ref: ref,
44
+ square: true // Временное решение
45
+ ,
46
+ stretching: "fixed" // Не работает не понятное почему
47
+ ,
48
+ className: cx(className),
49
+ style: style
50
+ }, rest), icon || children));
51
+ });
52
+ };
53
+ export var iconButtonConfig = {
54
+ name: 'Button',
55
+ tag: 'div',
56
+ layout: iconButtonRoot,
57
+ base: base,
58
+ variations: {
59
+ view: {
60
+ css: viewCSS
61
+ },
62
+ size: {
63
+ css: sizeCSS
64
+ },
65
+ disabled: {
66
+ css: disabledCSS,
67
+ attrs: true
68
+ },
69
+ focused: {
70
+ css: focusedCSS
71
+ }
72
+ },
73
+ defaults: {
74
+ view: 'secondary',
75
+ size: 'm'
76
+ }
77
+ };
@@ -0,0 +1,11 @@
1
+ import styled from 'styled-components';
2
+ import { css } from 'styled-components';
3
+ import { component, mergeConfig } from '../../engines';
4
+ import { buttonConfig, buttonTokens } from '../Button';
5
+ import { tokens, classes } from './IconButton.tokens';
6
+ var mergedConfig = /*#__PURE__*/mergeConfig(buttonConfig);
7
+ var Button = /*#__PURE__*/component(mergedConfig);
8
+ export var base = /*#__PURE__*/css(["&&.", "{display:inline-flex;}"], classes.iconButtonItem);
9
+ export var IconButtonStyled = /*#__PURE__*/styled(Button).withConfig({
10
+ componentId: "plasma-new-hope__sc-bil9m7-0"
11
+ })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], buttonTokens.buttonColor, tokens.iconButtonColor, buttonTokens.buttonBackgroundColor, tokens.iconButtonBackgroundColor, buttonTokens.buttonColorHover, tokens.iconButtonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.iconButtonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.iconButtonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.iconButtonBackgroundColorActive, buttonTokens.buttonFontFamily, tokens.iconButtonFontFamily, buttonTokens.buttonFontSize, tokens.iconButtonFontSize, buttonTokens.buttonFontStyle, tokens.iconButtonFontStyle, buttonTokens.buttonFontWeight, tokens.iconButtonFontWeight, buttonTokens.buttonLetterSpacing, tokens.iconButtonLetterSpacing, buttonTokens.buttonLineHeight, tokens.iconButtonLineHeight, buttonTokens.buttonWidth, tokens.iconButtonWidth, buttonTokens.buttonHeight, tokens.iconButtonHeight, buttonTokens.buttonRadius, tokens.iconButtonRadius, buttonTokens.buttonDisabledOpacity, tokens.iconButtonDisabledOpacity, buttonTokens.buttonFocusColor, tokens.iconButtonFocusColor, buttonTokens.buttonSpinnerSize, tokens.iconButtonSpinnerSize, buttonTokens.buttonSpinnerColor, tokens.iconButtonSpinnerColor);
@@ -0,0 +1,28 @@
1
+ export var classes = {
2
+ iconButtonItem: 'icon-button-item'
3
+ };
4
+ export var tokens = {
5
+ iconButtonColor: '--plasma-icon-button-color',
6
+ iconButtonBackgroundColor: '--plasma-icon-button-background-color',
7
+ iconButtonColorHover: '--plasma-icon-button-color-hover',
8
+ iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
9
+ iconButtonColorActive: '--plasma-icon-button-color-active',
10
+ iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',
11
+ iconButtonScaleHover: '--plasma-icon-button-scale-hover',
12
+ iconButtonScaleActive: '---plasma-icon-button-scale-active',
13
+ iconButtonHeight: '--plasma-icon-button-height',
14
+ iconButtonWidth: '--plasma-icon-button-width',
15
+ iconButtonPadding: '--plasma-icon-button-padding',
16
+ iconButtonRadius: '--plasma-icon-button-radius',
17
+ iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',
18
+ iconButtonFontFamily: '--plasma-icon-button-font-family',
19
+ iconButtonFontSize: '--plasma-icon-button-font-size',
20
+ iconButtonFontStyle: '--plasma-icon-button-font-style',
21
+ iconButtonFontWeight: '--plasma-icon-button-font-weight',
22
+ iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',
23
+ iconButtonLineHeight: '--plasma-icon-button-line-height',
24
+ iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',
25
+ iconButtonFocusColor: '--plasma-icon-button-focus-color',
26
+ iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',
27
+ iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
28
+ };
@@ -0,0 +1,2 @@
1
+ export { iconButtonRoot, iconButtonConfig } from './IconButton';
2
+ export { tokens as iconButtonTokens, classes as iconButtonClasses } from './IconButton.tokens';
@@ -0,0 +1,2 @@
1
+ import { css } from 'styled-components';
2
+ export var base = /*#__PURE__*/css([""]);
@@ -0,0 +1,2 @@
1
+ import { css } from 'styled-components';
2
+ export var base = /*#__PURE__*/css([""]);
@@ -0,0 +1,2 @@
1
+ import { css } from 'styled-components';
2
+ export var base = /*#__PURE__*/css([""]);
@@ -0,0 +1,2 @@
1
+ import { css } from 'styled-components';
2
+ export var base = /*#__PURE__*/css([""]);
@@ -1,8 +1,8 @@
1
- import { dropdownItemOldRoot } from '../../../Dropdown';
1
+ import { dropdownItemRoot } from '../../../Dropdown';
2
2
  import { base as viewCSS } from './variations/_view/base';
3
3
  import { base as sizeCSS } from './variations/_size/base';
4
4
  import { base } from './SelectItem.styles';
5
- export var selectItemRoot = dropdownItemOldRoot;
5
+ export var selectItemRoot = dropdownItemRoot;
6
6
  export var selectItemConfig = {
7
7
  name: 'SelectItem',
8
8
  tag: 'div',
@@ -1,7 +1,7 @@
1
1
  import { css } from 'styled-components';
2
2
  import { tokens } from '../../Select.tokens';
3
3
  import { dropdownTokens } from '../../../Dropdown';
4
- import { baseContent as dropdownItemBase } from '../../../Dropdown/ui/DropdownItemOld/DropdownItem.styles';
4
+ import { baseContent as dropdownItemBase } from '../../../Dropdown/ui/DropdownItem/DropdownItem.styles';
5
5
 
6
6
  // NOTE: Необходимое переопределение токенов из компонента DropdownItem т.к. используются его части
7
7
  export var mappingOverride = /*#__PURE__*/"\n ".concat(dropdownTokens.itemBackground, ": var(").concat(tokens.itemBackground, ");\n ").concat(dropdownTokens.itemColor, ": var(").concat(tokens.itemColor, ");\n ").concat(dropdownTokens.itemBackgroundHover, ": var(").concat(tokens.itemBackgroundHover, ");\n ").concat(dropdownTokens.itemBackgroundSelected, ": var(").concat(tokens.itemBackgroundSelected, ");\n ").concat(dropdownTokens.itemColorSelected, ": var(").concat(tokens.itemColorSelected, ");\n ").concat(dropdownTokens.itemBackgroundSelectedHover, ": var(").concat(tokens.itemBackgroundSelectedHover, ");\n ").concat(dropdownTokens.itemColorSelectedHover, ": var(").concat(tokens.itemColorSelectedHover, ");\n ").concat(dropdownTokens.itemContentLeftColor, ": var(").concat(tokens.itemContentLeftColor, ");\n ").concat(dropdownTokens.itemContentRightColor, ": var(").concat(tokens.itemContentRightColor, ");\n ").concat(dropdownTokens.disabledOpacity, ": var(").concat(tokens.disabledOpacity, ");\n ").concat(dropdownTokens.focusColor, ": var(").concat(tokens.focusColor, ");\n ").concat(dropdownTokens.itemWidth, ": var(").concat(tokens.itemWidth, ");\n ").concat(dropdownTokens.itemHeight, ": var(").concat(tokens.itemHeight, ");\n ").concat(dropdownTokens.itemBorderRadius, ": var(").concat(tokens.itemBorderRadius, ");\n ").concat(dropdownTokens.itemPaddingTop, ": var(").concat(tokens.itemPaddingTop, ");\n ").concat(dropdownTokens.itemPaddingRight, ": var(").concat(tokens.itemPaddingRight, ");\n ").concat(dropdownTokens.itemPaddingBottom, ": var(").concat(tokens.itemPaddingBottom, ");\n ").concat(dropdownTokens.itemPaddingLeft, ": var(").concat(tokens.itemPaddingLeft, ");\n ").concat(dropdownTokens.itemMarginTop, ": var(").concat(tokens.itemMarginTop, ");\n ").concat(dropdownTokens.itemMarginRight, ": var(").concat(tokens.itemMarginRight, ");\n ").concat(dropdownTokens.itemMarginBottom, ": var(").concat(tokens.itemMarginBottom, ");\n ").concat(dropdownTokens.itemMarginLeft, ": var(").concat(tokens.itemMarginLeft, ");\n ").concat(dropdownTokens.itemFontFamily, ": var(").concat(tokens.itemFontFamily, ");\n ").concat(dropdownTokens.itemFontSize, ": var(").concat(tokens.itemFontSize, ");\n ").concat(dropdownTokens.itemFontStyle, ": var(").concat(tokens.itemFontStyle, ");\n ").concat(dropdownTokens.itemFontWeightBold, ": var(").concat(tokens.itemFontWeightBold, ");\n ").concat(dropdownTokens.itemFontLetterSpacing, ": var(").concat(tokens.itemFontLetterSpacing, ");\n ").concat(dropdownTokens.itemFontLineHeight, ": var(").concat(tokens.itemFontLineHeight, ");\n ").concat(dropdownTokens.itemContentLeftWidth, ": var(").concat(tokens.itemContentLeftWidth, ");\n ").concat(dropdownTokens.itemContentRightWidth, ": var(").concat(tokens.itemContentRightWidth, ");\n");
@@ -11,7 +11,8 @@ export var DisclosureRight = function DisclosureRight(props) {
11
11
  fillRule: "evenodd",
12
12
  clipRule: "evenodd",
13
13
  d: "M9.883 4.707a1 1 0 011.414-1.414L16.004 8l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 8 9.883 4.707z",
14
- fill: "currentColor"
14
+ fill: "currentColor",
15
+ fillOpacity: 0.56
15
16
  })));
16
17
  }
17
18
  return /*#__PURE__*/React.createElement("svg", _extends({
@@ -0,0 +1,21 @@
1
+ import { css } from 'styled-components';
2
+ import { dropdownTokens } from '../../../../../components/Dropdown';
3
+ var dropdownSizeCommon = /*#__PURE__*/"\n ".concat(dropdownTokens.width, ": 12.5rem;\n ").concat(dropdownTokens.height, ": auto;\n ").concat(dropdownTokens.borderRadius, ": 0.5rem;\n ").concat(dropdownTokens.paddingTop, ": 0.125rem;\n ").concat(dropdownTokens.paddingRight, ": 0.0625rem;\n ").concat(dropdownTokens.paddingBottom, ": 0.125rem;\n ").concat(dropdownTokens.paddingLeft, ": 0.125rem;\n");
4
+ var dropdownItemSizeCommon = /*#__PURE__*/"\n ".concat(dropdownTokens.itemWidth, ": auto;\n ").concat(dropdownTokens.itemHeight, ": auto;\n ").concat(dropdownTokens.itemMarginTop, ": 0;\n ").concat(dropdownTokens.itemMarginRight, ": 0;\n ").concat(dropdownTokens.itemMarginBottom, ": 0;\n ").concat(dropdownTokens.itemMarginLeft, ": 0;\n");
5
+ export var config = {
6
+ defaults: {
7
+ view: 'default',
8
+ size: 'm'
9
+ },
10
+ variations: {
11
+ size: {
12
+ xs: /*#__PURE__*/css(["", ";", ";", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
13
+ s: /*#__PURE__*/css(["", ";", ";", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
14
+ m: /*#__PURE__*/css(["", ";", ";", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
15
+ l: /*#__PURE__*/css(["", ";", ";", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
16
+ },
17
+ view: {
18
+ "default": /*#__PURE__*/css(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
19
+ }
20
+ }
21
+ };
@@ -0,0 +1,7 @@
1
+ import { dropdownConfig, dropdownItemConfig } from '../../../../../components/Dropdown';
2
+ import { component, mergeConfig } from '../../../../../engines';
3
+ import { config } from './Dropdown.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(dropdownConfig, config);
5
+ export var Dropdown = /*#__PURE__*/component(mergedConfig);
6
+ var mergedItemConfig = /*#__PURE__*/mergeConfig(dropdownItemConfig);
7
+ export var DropdownItem = /*#__PURE__*/component(mergedItemConfig);
@@ -0,0 +1,194 @@
1
+ import React, { useState } from 'react';
2
+ import type { ComponentProps } from 'react';
3
+ import type { Meta, StoryObj } from '@storybook/react';
4
+ import { action } from '@storybook/addon-actions';
5
+ import styled from 'styled-components';
6
+
7
+ import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
8
+ import { mergeConfig } from '../../../../../engines';
9
+ import { dropdownConfig } from '../../../../../components/Dropdown';
10
+ import { Button } from '../../Button/Button';
11
+ import { Radiobox } from '../../Radiobox/Radiobox';
12
+ import { Checkbox } from '../../Checkbox/Checkbox';
13
+ import type { DropdownPlacement, DropdownTrigger } from '../../../../../components/Dropdown/Dropdown.types';
14
+
15
+ import { Dropdown, DropdownItem } from './Dropdown';
16
+ import { config } from './Dropdown.config';
17
+
18
+ const placements: Array<DropdownPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
19
+ const triggers: Array<DropdownTrigger> = ['click', 'hover'];
20
+
21
+ type StoryDropdownPropsCustom = {
22
+ skidding?: number;
23
+ distance?: number;
24
+ };
25
+
26
+ type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
27
+
28
+ const meta: Meta<StoryDropdownProps> = {
29
+ title: 'plasma_b2c/Dropdown',
30
+ decorators: [WithTheme],
31
+ component: Dropdown,
32
+ argTypes: {
33
+ placement: {
34
+ options: placements,
35
+ control: {
36
+ type: 'select',
37
+ },
38
+ },
39
+ trigger: {
40
+ options: triggers,
41
+ control: {
42
+ type: 'select',
43
+ },
44
+ },
45
+ ...argTypesFromConfig(mergeConfig(dropdownConfig, config)),
46
+ },
47
+ args: {
48
+ placement: 'bottom',
49
+ trigger: 'click',
50
+ closeOnOverlayClick: false,
51
+ closeOnEsc: true,
52
+ isFocusTrapped: true,
53
+ skidding: 0,
54
+ distance: 0,
55
+ },
56
+ };
57
+
58
+ export default meta;
59
+
60
+ const onSelect = action('onSelect');
61
+ const onClick = action('onClick');
62
+ const onChange = action('onChange');
63
+
64
+ const getDropdownItems = (slug: string, elemCount: number) =>
65
+ [...Array(elemCount).keys()].map((num) => ({
66
+ value: `${slug}_${num}`,
67
+ child: `${slug} ${num}`,
68
+ }));
69
+
70
+ const StyledRadiobox = styled(Radiobox)`
71
+ margin-right: 0.5rem;
72
+ `;
73
+
74
+ const StyledCheckbox = styled(Checkbox)`
75
+ margin-left: auto;
76
+ `;
77
+
78
+ const StyledDisclosureRightIcon = styled.div`
79
+ width: 1.25rem;
80
+ height: 1.25rem;
81
+ margin-left: auto;
82
+ `;
83
+
84
+ const DisclosureRightIcon = (props) => (
85
+ <StyledDisclosureRightIcon>
86
+ <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
87
+ <path
88
+ d="M9.883 8.707a1 1 0 011.414-1.414L16.004 12l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 12 9.883 8.707z"
89
+ fill="currentColor"
90
+ />
91
+ </svg>
92
+ </StyledDisclosureRightIcon>
93
+ );
94
+
95
+ const StoryNormal = (args: StoryDropdownProps) => {
96
+ const [selected, setSelected] = useState('');
97
+ const [isOpen, setIsOpen] = useState(false);
98
+ const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
99
+
100
+ const { skidding, distance, placement, ...rest } = args;
101
+
102
+ const onMainClose = () => {
103
+ setIsOpen(false);
104
+ setIsOpenDropdown2(false);
105
+ };
106
+
107
+ const onMainToggle = (openValue: boolean) => {
108
+ setIsOpen(openValue);
109
+
110
+ if (!openValue) {
111
+ onMainClose();
112
+ }
113
+ };
114
+
115
+ const handleSelect = (value: string, text: string) => {
116
+ setSelected(value);
117
+ onSelect(value, text);
118
+ setIsOpen(false);
119
+ };
120
+
121
+ return (
122
+ <div>
123
+ <h3>This is header</h3>
124
+ <Dropdown
125
+ target={<Button>Target</Button>}
126
+ isOpen={isOpen}
127
+ onToggle={onMainToggle}
128
+ offset={[Number(skidding), Number(distance)]}
129
+ placement={placement}
130
+ {...rest}
131
+ >
132
+ {getDropdownItems('item', 6).map((item) => (
133
+ <DropdownItem
134
+ key={item.value}
135
+ isSelected={Boolean(item.value === selected)}
136
+ onSelect={() => handleSelect(item.value, item.child)}
137
+ onClick={onClick}
138
+ value={item.value}
139
+ >
140
+ {item.child}
141
+ </DropdownItem>
142
+ ))}
143
+ <Dropdown
144
+ target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
145
+ onToggle={(is) => setIsOpenDropdown2(is)}
146
+ isOpen={isOpenDropdown2}
147
+ offset={[0, 0]}
148
+ {...rest}
149
+ >
150
+ <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
151
+ {getDropdownItems('nested', 4).map((item) => (
152
+ <DropdownItem
153
+ key={item.value}
154
+ isSelected={Boolean(item.value === selected)}
155
+ onSelect={() => handleSelect(item.value, item.child)}
156
+ onClick={onClick}
157
+ value={item.value}
158
+ >
159
+ {item.child}
160
+ </DropdownItem>
161
+ ))}
162
+ <DropdownItem
163
+ contentLeft={StyledRadiobox}
164
+ name="radio"
165
+ value="1"
166
+ onChange={onChange}
167
+ text="Radiobox 1"
168
+ />
169
+ <DropdownItem
170
+ contentLeft={StyledRadiobox}
171
+ name="radio"
172
+ value="2"
173
+ onChange={onChange}
174
+ text="Radiobox 2"
175
+ />
176
+ </Dropdown>
177
+
178
+ <DropdownItem
179
+ isSelected={selected === 'disabled'}
180
+ onSelect={() => handleSelect('disabled', 'disabled')}
181
+ onClick={onClick}
182
+ value="disabled"
183
+ disabled
184
+ >
185
+ disabled
186
+ </DropdownItem>
187
+ </Dropdown>
188
+ </div>
189
+ );
190
+ };
191
+
192
+ export const Normal: StoryObj<StoryDropdownProps> = {
193
+ render: (args) => <StoryNormal {...args} />,
194
+ };