@salutejs/plasma-new-hope 0.78.0-canary.1203.8970261959.0 → 0.79.0-canary.1195.9053577477.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (518) hide show
  1. package/cjs/components/Button/Button.styles.js +1 -0
  2. package/cjs/components/Button/Button.styles.js.map +1 -1
  3. package/cjs/components/Calendar/Calendar.types.js.map +1 -1
  4. package/cjs/components/Calendar/CalendarBase/CalendarBase.js +1 -3
  5. package/cjs/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
  6. package/cjs/components/Calendar/hooks/useDays.js +3 -6
  7. package/cjs/components/Calendar/hooks/useDays.js.map +1 -1
  8. package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +1 -2
  9. package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js.map +1 -1
  10. package/cjs/components/Combobox/Combobox.css +20 -7
  11. package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +18 -6
  12. package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +2 -2
  13. package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +18 -6
  14. package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +2 -2
  15. package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +18 -6
  16. package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +2 -2
  17. package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +18 -6
  18. package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +2 -2
  19. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.css +4 -23
  20. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js +81 -10
  21. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js.map +1 -1
  22. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +21 -9
  23. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js.map +1 -1
  24. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_s4sk53.css +4 -0
  25. package/cjs/components/Combobox/utils/index.js +23 -0
  26. package/cjs/components/Combobox/utils/index.js.map +1 -0
  27. package/cjs/components/Drawer/Drawer.js +1 -0
  28. package/cjs/components/Drawer/Drawer.js.map +1 -1
  29. package/cjs/components/Dropdown/Dropdown.css +28 -2
  30. package/cjs/components/Dropdown/Dropdown.js +141 -54
  31. package/cjs/components/Dropdown/Dropdown.js.map +1 -1
  32. package/cjs/components/Dropdown/Dropdown.styles.js +40 -7
  33. package/cjs/components/Dropdown/Dropdown.styles.js.map +1 -1
  34. package/cjs/components/Dropdown/Dropdown.styles_1tihqkp.css +3 -0
  35. package/cjs/components/Dropdown/Dropdown.tokens.js +26 -23
  36. package/cjs/components/Dropdown/Dropdown.tokens.js.map +1 -1
  37. package/cjs/components/Dropdown/hooks/useHashMaps.js +34 -0
  38. package/cjs/components/Dropdown/hooks/useHashMaps.js.map +1 -0
  39. package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +247 -0
  40. package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js.map +1 -0
  41. package/cjs/components/Dropdown/reducers/focusedPathReducer.js +37 -0
  42. package/cjs/components/Dropdown/reducers/focusedPathReducer.js.map +1 -0
  43. package/cjs/components/Dropdown/reducers/pathReducer.js +41 -0
  44. package/cjs/components/Dropdown/reducers/pathReducer.js.map +1 -0
  45. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +125 -0
  46. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -0
  47. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.css +7 -4
  48. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +79 -100
  49. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
  50. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +31 -5
  51. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
  52. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1o4szyu.css +5 -0
  53. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +30 -0
  54. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js.map +1 -0
  55. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles_12e50g5.css +4 -0
  56. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.css +4 -0
  57. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +112 -0
  58. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js.map +1 -0
  59. package/cjs/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_size/base.js +1 -1
  60. package/cjs/components/Dropdown/ui/DropdownItemOld/variations/_size/base.js.map +1 -0
  61. package/cjs/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_view/base.js +1 -1
  62. package/cjs/components/Dropdown/ui/DropdownItemOld/variations/_view/base.js.map +1 -0
  63. package/cjs/components/Dropdown/ui/DropdownOld/Dropdown.styles.js +29 -0
  64. package/cjs/components/Dropdown/ui/DropdownOld/Dropdown.styles.js.map +1 -0
  65. package/cjs/components/Dropdown/ui/DropdownOld/Dropdown.styles_3w3l45.css +2 -0
  66. package/cjs/components/Dropdown/ui/DropdownOld/DropdownOld.css +7 -0
  67. package/cjs/components/Dropdown/ui/DropdownOld/DropdownOld.js +99 -0
  68. package/cjs/components/Dropdown/ui/DropdownOld/DropdownOld.js.map +1 -0
  69. package/cjs/components/Dropdown/ui/DropdownOld/DropdownOld.tokens.js +115 -0
  70. package/cjs/components/Dropdown/ui/DropdownOld/DropdownOld.tokens.js.map +1 -0
  71. package/cjs/components/Dropdown/ui/DropdownOld/utils/index.js +23 -0
  72. package/cjs/components/Dropdown/ui/DropdownOld/utils/index.js.map +1 -0
  73. package/cjs/components/Dropdown/ui/DropdownOld/variations/_size/base.js +9 -0
  74. package/cjs/components/Dropdown/ui/DropdownOld/variations/_size/base.js.map +1 -0
  75. package/cjs/components/Dropdown/ui/DropdownOld/variations/_view/base.js +9 -0
  76. package/cjs/components/Dropdown/ui/DropdownOld/variations/_view/base.js.map +1 -0
  77. package/cjs/components/Dropdown/utils/index.js +16 -0
  78. package/cjs/components/Dropdown/utils/index.js.map +1 -1
  79. package/cjs/components/IconButton/IconButton.css +24 -0
  80. package/cjs/components/IconButton/IconButton.js +50 -0
  81. package/cjs/components/IconButton/IconButton.js.map +1 -0
  82. package/cjs/components/IconButton/IconButton.styles.js +16 -0
  83. package/cjs/components/IconButton/IconButton.styles.js.map +1 -0
  84. package/cjs/components/IconButton/IconButton.styles_1hknr37.css +1 -0
  85. package/cjs/components/IconButton/IconButton.tokens.js +32 -0
  86. package/cjs/components/IconButton/IconButton.tokens.js.map +1 -0
  87. package/cjs/components/Pagination/Pagination.css +17 -7
  88. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +17 -7
  89. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +1 -1
  90. package/cjs/components/Select/Select.css +17 -7
  91. package/cjs/components/Select/ui/SelectDivider/SelectDivider.css +18 -6
  92. package/cjs/components/Select/ui/SelectDivider/SelectDivider.js +2 -2
  93. package/cjs/components/Select/ui/SelectFooter/SelectFooter.css +18 -6
  94. package/cjs/components/Select/ui/SelectFooter/SelectFooter.js +2 -2
  95. package/cjs/components/Select/ui/SelectGroup/SelectGroup.css +18 -6
  96. package/cjs/components/Select/ui/SelectGroup/SelectGroup.js +2 -2
  97. package/cjs/components/Select/ui/SelectHeader/SelectHeader.css +18 -6
  98. package/cjs/components/Select/ui/SelectHeader/SelectHeader.js +2 -2
  99. package/cjs/components/Select/ui/SelectItem/SelectItem.css +19 -7
  100. package/cjs/components/Select/ui/SelectItem/SelectItem.js +3 -3
  101. package/cjs/components/Select/ui/SelectItem/SelectItem.js.map +1 -1
  102. package/cjs/components/Select/ui/SelectItem/SelectItem.styles.js +2 -2
  103. package/cjs/components/Select/ui/SelectItem/SelectItem.styles.js.map +1 -1
  104. package/cjs/components/Select/ui/SelectItem/{SelectItem.styles_6h17aw.css → SelectItem.styles_vk39mp.css} +1 -1
  105. package/cjs/components/_Icon/Icon.assets/DisclosureRight.js +1 -2
  106. package/cjs/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
  107. package/cjs/index.css +23 -8
  108. package/cjs/index.js +18 -2
  109. package/cjs/index.js.map +1 -1
  110. package/es/components/Button/Button.styles.js +1 -0
  111. package/es/components/Button/Button.styles.js.map +1 -1
  112. package/es/components/Calendar/Calendar.types.js.map +1 -1
  113. package/es/components/Calendar/CalendarBase/CalendarBase.js +1 -3
  114. package/es/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
  115. package/es/components/Calendar/hooks/useDays.js +3 -6
  116. package/es/components/Calendar/hooks/useDays.js.map +1 -1
  117. package/es/components/Calendar/ui/CalendarDays/CalendarDays.js +1 -2
  118. package/es/components/Calendar/ui/CalendarDays/CalendarDays.js.map +1 -1
  119. package/es/components/Combobox/Combobox.css +20 -7
  120. package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +18 -6
  121. package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +2 -2
  122. package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +18 -6
  123. package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +2 -2
  124. package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +18 -6
  125. package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +2 -2
  126. package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +18 -6
  127. package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +2 -2
  128. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.css +4 -23
  129. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js +82 -11
  130. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js.map +1 -1
  131. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +19 -10
  132. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js.map +1 -1
  133. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_s4sk53.css +4 -0
  134. package/es/components/Combobox/utils/index.js +19 -0
  135. package/es/components/Combobox/utils/index.js.map +1 -0
  136. package/es/components/Drawer/Drawer.js +1 -0
  137. package/es/components/Drawer/Drawer.js.map +1 -1
  138. package/es/components/Dropdown/Dropdown.css +28 -2
  139. package/es/components/Dropdown/Dropdown.js +147 -60
  140. package/es/components/Dropdown/Dropdown.js.map +1 -1
  141. package/es/components/Dropdown/Dropdown.styles.js +39 -7
  142. package/es/components/Dropdown/Dropdown.styles.js.map +1 -1
  143. package/es/components/Dropdown/Dropdown.styles_1tihqkp.css +3 -0
  144. package/es/components/Dropdown/Dropdown.tokens.js +26 -23
  145. package/es/components/Dropdown/Dropdown.tokens.js.map +1 -1
  146. package/es/components/Dropdown/hooks/useHashMaps.js +30 -0
  147. package/es/components/Dropdown/hooks/useHashMaps.js.map +1 -0
  148. package/es/components/Dropdown/hooks/useKeyboardNavigation.js +242 -0
  149. package/es/components/Dropdown/hooks/useKeyboardNavigation.js.map +1 -0
  150. package/es/components/Dropdown/reducers/focusedPathReducer.js +33 -0
  151. package/es/components/Dropdown/reducers/focusedPathReducer.js.map +1 -0
  152. package/es/components/Dropdown/reducers/pathReducer.js +37 -0
  153. package/es/components/Dropdown/reducers/pathReducer.js.map +1 -0
  154. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +121 -0
  155. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -0
  156. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.css +7 -4
  157. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +80 -100
  158. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
  159. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +30 -5
  160. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
  161. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1o4szyu.css +5 -0
  162. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +23 -0
  163. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js.map +1 -0
  164. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles_12e50g5.css +4 -0
  165. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.css +4 -0
  166. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +107 -0
  167. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js.map +1 -0
  168. package/es/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_size/base.js +1 -1
  169. package/es/components/Dropdown/ui/DropdownItemOld/variations/_size/base.js.map +1 -0
  170. package/es/components/Dropdown/ui/DropdownItemOld/variations/_size/base_x642ct.css +1 -0
  171. package/es/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_view/base.js +1 -1
  172. package/es/components/Dropdown/ui/DropdownItemOld/variations/_view/base.js.map +1 -0
  173. package/es/components/Dropdown/ui/DropdownItemOld/variations/_view/base_x642ct.css +1 -0
  174. package/es/components/Dropdown/ui/DropdownOld/Dropdown.styles.js +24 -0
  175. package/es/components/Dropdown/ui/DropdownOld/Dropdown.styles.js.map +1 -0
  176. package/es/components/Dropdown/ui/DropdownOld/Dropdown.styles_3w3l45.css +2 -0
  177. package/es/components/Dropdown/ui/DropdownOld/DropdownOld.css +7 -0
  178. package/es/components/Dropdown/ui/DropdownOld/DropdownOld.js +94 -0
  179. package/es/components/Dropdown/ui/DropdownOld/DropdownOld.js.map +1 -0
  180. package/es/components/Dropdown/ui/DropdownOld/DropdownOld.tokens.js +111 -0
  181. package/es/components/Dropdown/ui/DropdownOld/DropdownOld.tokens.js.map +1 -0
  182. package/es/components/Dropdown/ui/DropdownOld/utils/index.js +18 -0
  183. package/es/components/Dropdown/ui/DropdownOld/utils/index.js.map +1 -0
  184. package/es/components/Dropdown/ui/DropdownOld/variations/_size/base.js +5 -0
  185. package/es/components/Dropdown/ui/DropdownOld/variations/_size/base.js.map +1 -0
  186. package/es/components/Dropdown/ui/DropdownOld/variations/_size/base_x642ct.css +1 -0
  187. package/es/components/Dropdown/ui/DropdownOld/variations/_view/base.js +5 -0
  188. package/es/components/Dropdown/ui/DropdownOld/variations/_view/base.js.map +1 -0
  189. package/es/components/Dropdown/ui/DropdownOld/variations/_view/base_x642ct.css +1 -0
  190. package/es/components/Dropdown/utils/index.js +16 -2
  191. package/es/components/Dropdown/utils/index.js.map +1 -1
  192. package/es/components/IconButton/IconButton.css +24 -0
  193. package/es/components/IconButton/IconButton.js +45 -0
  194. package/es/components/IconButton/IconButton.js.map +1 -0
  195. package/es/components/IconButton/IconButton.styles.js +12 -0
  196. package/es/components/IconButton/IconButton.styles.js.map +1 -0
  197. package/es/components/IconButton/IconButton.styles_1hknr37.css +1 -0
  198. package/es/components/IconButton/IconButton.tokens.js +28 -0
  199. package/es/components/IconButton/IconButton.tokens.js.map +1 -0
  200. package/es/components/Pagination/Pagination.css +17 -7
  201. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +17 -7
  202. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +1 -1
  203. package/es/components/Select/Select.css +17 -7
  204. package/es/components/Select/ui/SelectDivider/SelectDivider.css +18 -6
  205. package/es/components/Select/ui/SelectDivider/SelectDivider.js +2 -2
  206. package/es/components/Select/ui/SelectFooter/SelectFooter.css +18 -6
  207. package/es/components/Select/ui/SelectFooter/SelectFooter.js +2 -2
  208. package/es/components/Select/ui/SelectGroup/SelectGroup.css +18 -6
  209. package/es/components/Select/ui/SelectGroup/SelectGroup.js +2 -2
  210. package/es/components/Select/ui/SelectHeader/SelectHeader.css +18 -6
  211. package/es/components/Select/ui/SelectHeader/SelectHeader.js +2 -2
  212. package/es/components/Select/ui/SelectItem/SelectItem.css +19 -7
  213. package/es/components/Select/ui/SelectItem/SelectItem.js +3 -3
  214. package/es/components/Select/ui/SelectItem/SelectItem.js.map +1 -1
  215. package/es/components/Select/ui/SelectItem/SelectItem.styles.js +2 -2
  216. package/es/components/Select/ui/SelectItem/SelectItem.styles.js.map +1 -1
  217. package/es/components/Select/ui/SelectItem/{SelectItem.styles_6h17aw.css → SelectItem.styles_vk39mp.css} +1 -1
  218. package/es/components/_Icon/Icon.assets/DisclosureRight.js +1 -2
  219. package/es/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
  220. package/es/index.css +23 -8
  221. package/es/index.js +8 -1
  222. package/es/index.js.map +1 -1
  223. package/package.json +2 -2
  224. package/styled-components/cjs/components/Button/Button.styles.js +10 -2
  225. package/styled-components/cjs/components/Calendar/CalendarBase/CalendarBase.js +1 -3
  226. package/styled-components/cjs/components/Calendar/hooks/useDays.js +3 -6
  227. package/styled-components/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +1 -2
  228. package/styled-components/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js +91 -2
  229. package/styled-components/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +27 -7
  230. package/styled-components/cjs/components/Combobox/utils/index.js +23 -0
  231. package/styled-components/cjs/components/Dropdown/Dropdown.js +140 -54
  232. package/styled-components/cjs/components/Dropdown/Dropdown.styles.js +22 -7
  233. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +325 -66
  234. package/styled-components/cjs/components/Dropdown/Dropdown.tokens.js +26 -23
  235. package/styled-components/cjs/components/Dropdown/hooks/useHashMaps.js +32 -0
  236. package/styled-components/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +249 -0
  237. package/styled-components/cjs/components/Dropdown/index.js +9 -1
  238. package/styled-components/cjs/components/Dropdown/reducers/focusedPathReducer.js +40 -0
  239. package/styled-components/cjs/components/Dropdown/reducers/pathReducer.js +44 -0
  240. package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +117 -0
  241. package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.type.js +5 -0
  242. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +77 -105
  243. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +24 -19
  244. package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +33 -0
  245. package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.js +5 -0
  246. package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +119 -0
  247. package/styled-components/cjs/components/Dropdown/ui/DropdownOld/Dropdown.styles.js +19 -0
  248. package/styled-components/cjs/components/Dropdown/ui/DropdownOld/Dropdown.types.js +5 -0
  249. package/styled-components/cjs/components/Dropdown/ui/DropdownOld/DropdownOld.js +101 -0
  250. package/styled-components/cjs/components/Dropdown/ui/DropdownOld/DropdownOld.tokens.js +118 -0
  251. package/styled-components/cjs/components/Dropdown/ui/DropdownOld/utils/index.js +21 -0
  252. package/styled-components/cjs/components/Dropdown/ui/DropdownOld/variations/_size/base.js +8 -0
  253. package/styled-components/cjs/components/Dropdown/ui/DropdownOld/variations/_size/tokens.json +1 -0
  254. package/styled-components/cjs/components/Dropdown/ui/DropdownOld/variations/_view/base.js +8 -0
  255. package/styled-components/cjs/components/Dropdown/ui/DropdownOld/variations/_view/tokens.json +1 -0
  256. package/styled-components/cjs/components/Dropdown/ui/index.js +39 -5
  257. package/styled-components/cjs/components/Dropdown/utils/index.js +15 -1
  258. package/styled-components/cjs/components/Dropdown/variations/_size/tokens.json +1 -9
  259. package/styled-components/cjs/components/Dropdown/variations/_view/tokens.json +1 -1
  260. package/styled-components/cjs/components/IconButton/IconButton.js +47 -0
  261. package/styled-components/cjs/components/IconButton/IconButton.styles.js +13 -0
  262. package/styled-components/cjs/components/IconButton/IconButton.tokens.js +31 -0
  263. package/styled-components/cjs/components/IconButton/index.js +25 -0
  264. package/styled-components/cjs/components/Select/ui/SelectItem/SelectItem.js +1 -1
  265. package/styled-components/cjs/components/Select/ui/SelectItem/SelectItem.styles.js +1 -1
  266. package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureRight.js +1 -2
  267. package/styled-components/cjs/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +6 -18
  268. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +25 -0
  269. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.js +11 -0
  270. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +292 -0
  271. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.config.js +45 -0
  272. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.js +11 -0
  273. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +71 -0
  274. package/styled-components/cjs/examples/plasma_web/components/Calendar/Calendar.stories.tsx +6 -18
  275. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.config.js +25 -0
  276. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.js +11 -0
  277. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +292 -0
  278. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.config.js +45 -0
  279. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.js +11 -0
  280. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +71 -0
  281. package/styled-components/cjs/examples/sds_engineer/components/Calendar/Calendar.stories.tsx +6 -18
  282. package/styled-components/cjs/index.js +11 -0
  283. package/styled-components/es/components/Button/Button.styles.js +10 -2
  284. package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js +1 -3
  285. package/styled-components/es/components/Calendar/hooks/useDays.js +3 -6
  286. package/styled-components/es/components/Calendar/ui/CalendarDays/CalendarDays.js +1 -2
  287. package/styled-components/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js +90 -3
  288. package/styled-components/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +23 -6
  289. package/styled-components/es/components/Combobox/utils/index.js +15 -0
  290. package/styled-components/es/components/Dropdown/Dropdown.js +142 -55
  291. package/styled-components/es/components/Dropdown/Dropdown.styles.js +18 -5
  292. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +325 -66
  293. package/styled-components/es/components/Dropdown/Dropdown.tokens.js +26 -23
  294. package/styled-components/es/components/Dropdown/hooks/useHashMaps.js +26 -0
  295. package/styled-components/es/components/Dropdown/hooks/useKeyboardNavigation.js +243 -0
  296. package/styled-components/es/components/Dropdown/index.js +1 -0
  297. package/styled-components/es/components/Dropdown/reducers/focusedPathReducer.js +34 -0
  298. package/styled-components/es/components/Dropdown/reducers/pathReducer.js +38 -0
  299. package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +111 -0
  300. package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.type.js +1 -0
  301. package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +78 -107
  302. package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +21 -15
  303. package/styled-components/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +25 -0
  304. package/styled-components/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.js +1 -0
  305. package/styled-components/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +111 -0
  306. package/styled-components/es/components/Dropdown/ui/DropdownOld/Dropdown.styles.js +13 -0
  307. package/styled-components/es/components/Dropdown/ui/DropdownOld/Dropdown.types.js +1 -0
  308. package/styled-components/es/components/Dropdown/ui/DropdownOld/DropdownOld.js +92 -0
  309. package/styled-components/es/components/Dropdown/ui/DropdownOld/DropdownOld.tokens.js +112 -0
  310. package/styled-components/es/components/Dropdown/ui/DropdownOld/utils/index.js +15 -0
  311. package/styled-components/es/components/Dropdown/ui/DropdownOld/variations/_size/base.js +2 -0
  312. package/styled-components/es/components/Dropdown/ui/DropdownOld/variations/_size/tokens.json +1 -0
  313. package/styled-components/es/components/Dropdown/ui/DropdownOld/variations/_view/base.js +2 -0
  314. package/styled-components/es/components/Dropdown/ui/DropdownOld/variations/_view/tokens.json +1 -0
  315. package/styled-components/es/components/Dropdown/ui/index.js +5 -1
  316. package/styled-components/es/components/Dropdown/utils/index.js +15 -1
  317. package/styled-components/es/components/Dropdown/variations/_size/tokens.json +1 -9
  318. package/styled-components/es/components/Dropdown/variations/_view/tokens.json +1 -1
  319. package/styled-components/es/components/IconButton/IconButton.js +41 -0
  320. package/styled-components/es/components/IconButton/IconButton.styles.js +8 -0
  321. package/styled-components/es/components/IconButton/IconButton.tokens.js +25 -0
  322. package/styled-components/es/components/IconButton/index.js +2 -0
  323. package/styled-components/es/components/Select/ui/SelectItem/SelectItem.js +2 -2
  324. package/styled-components/es/components/Select/ui/SelectItem/SelectItem.styles.js +1 -1
  325. package/styled-components/es/components/_Icon/Icon.assets/DisclosureRight.js +1 -2
  326. package/styled-components/es/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +6 -18
  327. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +19 -0
  328. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.js +5 -0
  329. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +292 -0
  330. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.config.js +39 -0
  331. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.js +5 -0
  332. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +71 -0
  333. package/styled-components/es/examples/plasma_web/components/Calendar/Calendar.stories.tsx +6 -18
  334. package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.config.js +19 -0
  335. package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.js +5 -0
  336. package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +292 -0
  337. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.config.js +39 -0
  338. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.js +5 -0
  339. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +71 -0
  340. package/styled-components/es/examples/sds_engineer/components/Calendar/Calendar.stories.tsx +6 -18
  341. package/styled-components/es/index.js +1 -0
  342. package/types/components/Button/Button.styles.d.ts +1 -0
  343. package/types/components/Button/Button.styles.d.ts.map +1 -1
  344. package/types/components/Calendar/Calendar.types.d.ts +0 -4
  345. package/types/components/Calendar/Calendar.types.d.ts.map +1 -1
  346. package/types/components/Calendar/CalendarBase/CalendarBase.d.ts.map +1 -1
  347. package/types/components/Calendar/hooks/useDays.d.ts +1 -1
  348. package/types/components/Calendar/hooks/useDays.d.ts.map +1 -1
  349. package/types/components/Calendar/ui/CalendarDays/CalendarDays.d.ts.map +1 -1
  350. package/types/components/Calendar/ui/CalendarDays/CalendarDays.types.d.ts +0 -1
  351. package/types/components/Calendar/ui/CalendarDays/CalendarDays.types.d.ts.map +1 -1
  352. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.d.ts +15 -13
  353. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.d.ts.map +1 -1
  354. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.d.ts +5 -1
  355. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.d.ts.map +1 -1
  356. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.type.d.ts +59 -2
  357. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.type.d.ts.map +1 -1
  358. package/types/components/Combobox/utils/index.d.ts +4 -0
  359. package/types/components/Combobox/utils/index.d.ts.map +1 -0
  360. package/types/components/Dropdown/Dropdown.d.ts +4 -4
  361. package/types/components/Dropdown/Dropdown.d.ts.map +1 -1
  362. package/types/components/Dropdown/Dropdown.styles.d.ts +8 -1
  363. package/types/components/Dropdown/Dropdown.styles.d.ts.map +1 -1
  364. package/types/components/Dropdown/Dropdown.tokens.d.ts +24 -22
  365. package/types/components/Dropdown/Dropdown.tokens.d.ts.map +1 -1
  366. package/types/components/Dropdown/Dropdown.types.d.ts +64 -40
  367. package/types/components/Dropdown/Dropdown.types.d.ts.map +1 -1
  368. package/types/components/Dropdown/hooks/useHashMaps.d.ts +6 -0
  369. package/types/components/Dropdown/hooks/useHashMaps.d.ts.map +1 -0
  370. package/types/components/Dropdown/hooks/useKeyboardNavigation.d.ts +37 -0
  371. package/types/components/Dropdown/hooks/useKeyboardNavigation.d.ts.map +1 -0
  372. package/types/components/Dropdown/index.d.ts +3 -1
  373. package/types/components/Dropdown/index.d.ts.map +1 -1
  374. package/types/components/Dropdown/reducers/focusedPathReducer.d.ts +16 -0
  375. package/types/components/Dropdown/reducers/focusedPathReducer.d.ts.map +1 -0
  376. package/types/components/Dropdown/reducers/pathReducer.d.ts +20 -0
  377. package/types/components/Dropdown/reducers/pathReducer.d.ts.map +1 -0
  378. package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts +5 -0
  379. package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts.map +1 -0
  380. package/types/components/Dropdown/ui/DropdownInner/DropdownInner.type.d.ts +26 -0
  381. package/types/components/Dropdown/ui/DropdownInner/DropdownInner.type.d.ts.map +1 -0
  382. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts +2 -56
  383. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts.map +1 -1
  384. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts +5 -2
  385. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts.map +1 -1
  386. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts +44 -38
  387. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts.map +1 -1
  388. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.d.ts +7 -0
  389. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.d.ts.map +1 -0
  390. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.d.ts +60 -0
  391. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.d.ts.map +1 -0
  392. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.d.ts +58 -0
  393. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.d.ts.map +1 -0
  394. package/types/components/Dropdown/ui/DropdownItemOld/variations/_size/base.d.ts.map +1 -0
  395. package/types/components/Dropdown/ui/DropdownItemOld/variations/_view/base.d.ts.map +1 -0
  396. package/types/components/Dropdown/ui/DropdownOld/Dropdown.styles.d.ts +8 -0
  397. package/types/components/Dropdown/ui/DropdownOld/Dropdown.styles.d.ts.map +1 -0
  398. package/types/components/Dropdown/ui/DropdownOld/Dropdown.types.d.ts +76 -0
  399. package/types/components/Dropdown/ui/DropdownOld/Dropdown.types.d.ts.map +1 -0
  400. package/types/components/Dropdown/ui/DropdownOld/DropdownOld.d.ts +26 -0
  401. package/types/components/Dropdown/ui/DropdownOld/DropdownOld.d.ts.map +1 -0
  402. package/types/components/Dropdown/ui/DropdownOld/DropdownOld.tokens.d.ts +113 -0
  403. package/types/components/Dropdown/ui/DropdownOld/DropdownOld.tokens.d.ts.map +1 -0
  404. package/types/components/Dropdown/ui/DropdownOld/utils/index.d.ts +4 -0
  405. package/types/components/Dropdown/ui/DropdownOld/utils/index.d.ts.map +1 -0
  406. package/types/components/Dropdown/ui/DropdownOld/variations/_size/base.d.ts +2 -0
  407. package/types/components/Dropdown/ui/DropdownOld/variations/_size/base.d.ts.map +1 -0
  408. package/types/components/Dropdown/ui/DropdownOld/variations/_view/base.d.ts +2 -0
  409. package/types/components/Dropdown/ui/DropdownOld/variations/_view/base.d.ts.map +1 -0
  410. package/types/components/Dropdown/ui/index.d.ts +5 -1
  411. package/types/components/Dropdown/ui/index.d.ts.map +1 -1
  412. package/types/components/Dropdown/utils/index.d.ts +5 -2
  413. package/types/components/Dropdown/utils/index.d.ts.map +1 -1
  414. package/types/components/IconButton/IconButton.d.ts +35 -0
  415. package/types/components/IconButton/IconButton.d.ts.map +1 -0
  416. package/types/components/IconButton/IconButton.styles.d.ts +3 -0
  417. package/types/components/IconButton/IconButton.styles.d.ts.map +1 -0
  418. package/types/components/IconButton/IconButton.tokens.d.ts +26 -0
  419. package/types/components/IconButton/IconButton.tokens.d.ts.map +1 -0
  420. package/types/components/IconButton/index.d.ts +3 -0
  421. package/types/components/IconButton/index.d.ts.map +1 -0
  422. package/types/components/Select/ui/SelectItem/SelectItem.d.ts +2 -2
  423. package/types/components/Select/ui/SelectItem/SelectItem.d.ts.map +1 -1
  424. package/types/components/Select/ui/SelectItem/SelectItem.type.d.ts +2 -2
  425. package/types/components/Select/utils/index.d.ts +1 -1
  426. package/types/components/_Icon/Icon.assets/DisclosureRight.d.ts.map +1 -1
  427. package/types/examples/plasma_b2c/components/Dropdown/Dropdown.config.d.ts.map +1 -0
  428. package/types/examples/plasma_b2c/components/Dropdown/Dropdown.d.ts +13 -0
  429. package/types/examples/plasma_b2c/components/Dropdown/Dropdown.d.ts.map +1 -0
  430. package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts +38 -0
  431. package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts.map +1 -0
  432. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +32 -0
  433. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -0
  434. package/types/examples/plasma_web/components/Dropdown/Dropdown.config.d.ts.map +1 -0
  435. package/types/examples/plasma_web/components/Dropdown/Dropdown.d.ts +13 -0
  436. package/types/examples/plasma_web/components/Dropdown/Dropdown.d.ts.map +1 -0
  437. package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts +38 -0
  438. package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts.map +1 -0
  439. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +32 -0
  440. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -0
  441. package/types/index.d.ts +1 -0
  442. package/types/index.d.ts.map +1 -1
  443. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_936wgl.css +0 -1
  444. package/cjs/components/Dropdown/Dropdown.styles_1daxhqh.css +0 -2
  445. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1juhjtq.css +0 -4
  446. package/cjs/components/Dropdown/ui/DropdownItem/variations/_size/base.js.map +0 -1
  447. package/cjs/components/Dropdown/ui/DropdownItem/variations/_view/base.js.map +0 -1
  448. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_936wgl.css +0 -1
  449. package/es/components/Dropdown/Dropdown.styles_1daxhqh.css +0 -2
  450. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1juhjtq.css +0 -4
  451. package/es/components/Dropdown/ui/DropdownItem/variations/_size/base.js.map +0 -1
  452. package/es/components/Dropdown/ui/DropdownItem/variations/_view/base.js.map +0 -1
  453. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json +0 -19
  454. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json +0 -9
  455. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js +0 -27
  456. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.js +0 -13
  457. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx +0 -194
  458. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js +0 -27
  459. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.js +0 -13
  460. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx +0 -195
  461. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js +0 -27
  462. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.js +0 -13
  463. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx +0 -195
  464. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js +0 -27
  465. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.js +0 -13
  466. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx +0 -195
  467. package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.config.js +0 -22
  468. package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.js +0 -21
  469. package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.stories.tsx +0 -277
  470. package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json +0 -19
  471. package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json +0 -9
  472. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js +0 -21
  473. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.js +0 -7
  474. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx +0 -194
  475. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js +0 -21
  476. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.js +0 -7
  477. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx +0 -195
  478. package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js +0 -21
  479. package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.js +0 -7
  480. package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx +0 -195
  481. package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js +0 -21
  482. package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.js +0 -7
  483. package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx +0 -195
  484. package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.config.js +0 -16
  485. package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.js +0 -15
  486. package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.stories.tsx +0 -277
  487. package/types/components/Dropdown/ui/DropdownItem/variations/_size/base.d.ts.map +0 -1
  488. package/types/components/Dropdown/ui/DropdownItem/variations/_view/base.d.ts.map +0 -1
  489. package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.d.ts.map +0 -1
  490. package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.d.ts +0 -30
  491. package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.d.ts.map +0 -1
  492. package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.d.ts.map +0 -1
  493. package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.d.ts +0 -30
  494. package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.d.ts.map +0 -1
  495. package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.d.ts +0 -18
  496. package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.d.ts.map +0 -1
  497. package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.d.ts +0 -30
  498. package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.d.ts.map +0 -1
  499. package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.d.ts +0 -18
  500. package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.d.ts.map +0 -1
  501. package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.d.ts +0 -30
  502. package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.d.ts.map +0 -1
  503. package/types/examples/sds_engineer/components/Dropdown/Dropdown.config.d.ts +0 -15
  504. package/types/examples/sds_engineer/components/Dropdown/Dropdown.config.d.ts.map +0 -1
  505. package/types/examples/sds_engineer/components/Dropdown/Dropdown.d.ts +0 -51
  506. package/types/examples/sds_engineer/components/Dropdown/Dropdown.d.ts.map +0 -1
  507. /package/cjs/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_size/base_x642ct.css +0 -0
  508. /package/cjs/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_view/base_x642ct.css +0 -0
  509. /package/{es/components/Dropdown/ui/DropdownItem → cjs/components/Dropdown/ui/DropdownOld}/variations/_size/base_x642ct.css +0 -0
  510. /package/{es/components/Dropdown/ui/DropdownItem → cjs/components/Dropdown/ui/DropdownOld}/variations/_view/base_x642ct.css +0 -0
  511. /package/styled-components/cjs/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_size/base.js +0 -0
  512. /package/styled-components/cjs/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_view/base.js +0 -0
  513. /package/styled-components/es/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_size/base.js +0 -0
  514. /package/styled-components/es/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_view/base.js +0 -0
  515. /package/types/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_size/base.d.ts +0 -0
  516. /package/types/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_view/base.d.ts +0 -0
  517. /package/types/examples/plasma_b2c/components/Dropdown/{Normal/Dropdown.config.d.ts → Dropdown.config.d.ts} +0 -0
  518. /package/types/examples/{plasma_b2c/components/Dropdown/Tight → plasma_web/components/Dropdown}/Dropdown.config.d.ts +0 -0
@@ -1,82 +1,169 @@
1
- var _excluded = ["id", "target", "children", "hasArrow", "role", "view", "size", "frame", "onToggle", "isFocusTrapped", "isOpen", "placement", "trigger", "offset", "preventOverflow", "closeOnOverlayClick", "closeOnEsc"];
1
+ var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow"];
2
2
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
+ 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."); }
5
+ 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); }
6
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
7
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
8
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
3
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; }
4
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; }
5
- import React, { forwardRef, useRef } from 'react';
6
- import { useFocusTrap, useForkRef, useUniqId } from '@salutejs/plasma-core';
11
+ import React, { forwardRef, useReducer } from 'react';
12
+ import { cx } from '../../utils';
13
+ import { pathReducer } from './reducers/pathReducer';
14
+ import { focusedPathReducer } from './reducers/focusedPathReducer';
15
+ import { DropdownInner } from './ui';
7
16
  import { base as viewCSS } from './variations/_view/base';
8
17
  import { base as sizeCSS } from './variations/_size/base';
9
- import { StyledDropdown, StyledPopover } from './Dropdown.styles';
10
- import { getPlacements } from './utils';
18
+ import { Ul, StyledPopover, base } from './Dropdown.styles';
19
+ import { getPlacements, childrenWithProps } from './utils';
20
+ import { classes } from './Dropdown.tokens';
21
+ import { useKeyNavigation } from './hooks/useKeyboardNavigation';
22
+ import { useHashMaps } from './hooks/useHashMaps';
23
+
11
24
  /**
12
- * Выпадающий список без внешнего контроля видимости.
25
+ * Выпадающий список.
13
26
  */
14
27
  export var dropdownRoot = function dropdownRoot(Root) {
15
- return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
16
- var id = _ref.id,
17
- target = _ref.target,
28
+ return /*#__PURE__*/forwardRef(function (_ref, ref) {
29
+ var items = _ref.items,
18
30
  children = _ref.children,
19
- hasArrow = _ref.hasArrow,
20
- role = _ref.role,
21
- view = _ref.view,
22
- size = _ref.size,
23
- frame = _ref.frame,
24
- _onToggle = _ref.onToggle,
25
- _ref$isFocusTrapped = _ref.isFocusTrapped,
26
- isFocusTrapped = _ref$isFocusTrapped === void 0 ? true : _ref$isFocusTrapped,
27
- _ref$isOpen = _ref.isOpen,
28
- isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
29
31
  _ref$placement = _ref.placement,
30
- placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
31
- _ref$trigger = _ref.trigger,
32
- trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
32
+ placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
33
33
  _ref$offset = _ref.offset,
34
- offset = _ref$offset === void 0 ? [0, 6] : _ref$offset,
35
- _ref$preventOverflow = _ref.preventOverflow,
36
- preventOverflow = _ref$preventOverflow === void 0 ? false : _ref$preventOverflow,
34
+ offset = _ref$offset === void 0 ? [0, 0] : _ref$offset,
37
35
  _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
38
- closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? false : _ref$closeOnOverlayCl,
39
- _ref$closeOnEsc = _ref.closeOnEsc,
40
- closeOnEsc = _ref$closeOnEsc === void 0 ? false : _ref$closeOnEsc,
36
+ closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
37
+ onToggle = _ref.onToggle,
38
+ size = _ref.size,
39
+ view = _ref.view,
40
+ _ref$itemRole = _ref.itemRole,
41
+ itemRole = _ref$itemRole === void 0 ? 'treeitem' : _ref$itemRole,
42
+ className = _ref.className,
43
+ listWidth = _ref.listWidth,
44
+ listHeight = _ref.listHeight,
45
+ listOverflow = _ref.listOverflow,
46
+ _ref$closeOnSelect = _ref.closeOnSelect,
47
+ closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
48
+ onHover = _ref.onHover,
49
+ onItemSelect = _ref.onItemSelect,
50
+ onItemClick = _ref.onItemClick,
51
+ _ref$trigger = _ref.trigger,
52
+ trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
53
+ _ref$variant = _ref.variant,
54
+ variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
55
+ _ref$hasArrow = _ref.hasArrow,
56
+ hasArrow = _ref$hasArrow === void 0 ? true : _ref$hasArrow,
41
57
  rest = _objectWithoutProperties(_ref, _excluded);
42
- var uniqId = useUniqId();
43
- var innerId = id || uniqId;
44
- var rootRef = useRef(null);
45
- var dropdownRef = useRef(null);
46
- var handleRef = useForkRef(rootRef, outerRootRef);
47
- var trapRef = useFocusTrap(isOpen && isFocusTrapped);
48
- var dropdownForkRef = useForkRef(dropdownRef, trapRef);
49
- return /*#__PURE__*/React.createElement(StyledPopover, {
50
- role: role,
51
- isOpen: isOpen,
58
+ var _useReducer = useReducer(pathReducer, []),
59
+ _useReducer2 = _slicedToArray(_useReducer, 2),
60
+ path = _useReducer2[0],
61
+ dispatchPath = _useReducer2[1];
62
+ var _useReducer3 = useReducer(focusedPathReducer, []),
63
+ _useReducer4 = _slicedToArray(_useReducer3, 2),
64
+ focusedPath = _useReducer4[0],
65
+ dispatchFocusedPath = _useReducer4[1];
66
+ var _useHashMaps = useHashMaps(items),
67
+ _useHashMaps2 = _slicedToArray(_useHashMaps, 2),
68
+ pathMap = _useHashMaps2[0],
69
+ focusedToValueMap = _useHashMaps2[1];
70
+ var handleGlobalToggle = function handleGlobalToggle(opened, event) {
71
+ if (opened) {
72
+ dispatchPath({
73
+ type: 'opened_first_level'
74
+ });
75
+ } else {
76
+ dispatchFocusedPath({
77
+ type: 'reset'
78
+ });
79
+ dispatchPath({
80
+ type: 'reset'
81
+ });
82
+ }
83
+ if (onToggle) {
84
+ onToggle(opened, event);
85
+ }
86
+ };
87
+ var _useKeyNavigation = useKeyNavigation({
88
+ focusedPath: focusedPath,
89
+ dispatchFocusedPath: dispatchFocusedPath,
90
+ path: path,
91
+ dispatchPath: dispatchPath,
92
+ pathMap: pathMap,
93
+ focusedToValueMap: focusedToValueMap,
94
+ handleGlobalToggle: handleGlobalToggle,
95
+ closeOnSelect: closeOnSelect,
96
+ onItemSelect: onItemSelect,
97
+ onItemClick: onItemClick
98
+ }),
99
+ onKeyDown = _useKeyNavigation.onKeyDown;
100
+ var isCurrentListOpen = Boolean(path[0]);
101
+ var getActiveDescendant = function getActiveDescendant() {
102
+ var _focusedToValueMap$ge;
103
+ var focusedPathAsString = focusedPath.reduce(function (acc, n) {
104
+ return "".concat(acc, "/").concat(n);
105
+ }, '').replace(/^(\/)/, '');
106
+ return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
107
+ };
108
+ return /*#__PURE__*/React.createElement(Root, _extends({
109
+ className: cx(className, classes.dropdownRoot),
110
+ ref: ref,
111
+ view: view,
112
+ size: size,
113
+ items: items
114
+ }, rest), /*#__PURE__*/React.createElement(StyledPopover, {
115
+ isOpen: isCurrentListOpen,
52
116
  usePortal: false,
53
- onToggle: function onToggle(is, event) {
54
- return _onToggle === null || _onToggle === void 0 ? void 0 : _onToggle(is, event);
55
- },
56
- id: innerId,
57
- ref: dropdownForkRef,
58
- target: target,
117
+ onToggle: handleGlobalToggle,
59
118
  offset: offset,
60
- preventOverflow: preventOverflow,
61
- hasArrow: hasArrow,
62
119
  placement: getPlacements(placement),
63
120
  trigger: trigger,
64
121
  closeOnOverlayClick: closeOnOverlayClick,
65
- closeOnEsc: closeOnEsc,
66
- isFocusTrapped: isFocusTrapped,
67
- frame: frame
68
- }, /*#__PURE__*/React.createElement(Root, _extends({
69
- ref: handleRef,
70
- view: view,
71
- size: size
72
- }, rest), /*#__PURE__*/React.createElement(StyledDropdown, null, children)));
122
+ isFocusTrapped: false,
123
+ target: childrenWithProps(children, {
124
+ role: 'combobox',
125
+ 'aria-controls': 'tree_level_1',
126
+ 'aria-expanded': isCurrentListOpen,
127
+ 'aria-activedescendant': getActiveDescendant(),
128
+ onKeyDown: onKeyDown
129
+ }),
130
+ preventOverflow: false
131
+ }, /*#__PURE__*/React.createElement(Ul, {
132
+ listHeight: listHeight,
133
+ listOverflow: listOverflow,
134
+ role: "tree",
135
+ id: "tree_level_1",
136
+ listWidth: listWidth
137
+ }, items.map(function (item, index) {
138
+ return /*#__PURE__*/React.createElement(DropdownInner, {
139
+ key: "".concat(index, "/0"),
140
+ item: item,
141
+ currentLevel: 0,
142
+ focusedPath: focusedPath,
143
+ trigger: trigger,
144
+ path: path,
145
+ dispatchPath: dispatchPath,
146
+ index: index,
147
+ itemRole: itemRole,
148
+ listHeight: listHeight,
149
+ listOverflow: listOverflow,
150
+ handleGlobalToggle: handleGlobalToggle,
151
+ closeOnSelect: closeOnSelect,
152
+ onHover: onHover,
153
+ onItemSelect: onItemSelect,
154
+ onItemClick: onItemClick,
155
+ listWidth: listWidth,
156
+ variant: variant,
157
+ hasArrow: hasArrow
158
+ });
159
+ }))));
73
160
  });
74
161
  };
75
162
  export var dropdownConfig = {
76
163
  name: 'Dropdown',
77
164
  tag: 'div',
78
165
  layout: dropdownRoot,
79
- base: '',
166
+ base: base,
80
167
  variations: {
81
168
  view: {
82
169
  css: viewCSS
@@ -1,13 +1,26 @@
1
1
  import styled from 'styled-components';
2
+ import { css } from 'styled-components';
2
3
  import { component } from '../../engines';
3
4
  import { popoverConfig, popoverClasses } from '../Popover';
5
+ import { getCorrectHeight } from './utils';
4
6
  import { tokens } from './Dropdown.tokens';
5
-
6
- // issue #823
7
7
  var Popover = /*#__PURE__*/component(popoverConfig);
8
8
  export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
9
9
  componentId: "plasma-new-hope__sc-13ezpo5-0"
10
- })([".", "{display:block;}"], /*#__PURE__*/String(popoverClasses.target));
11
- export var StyledDropdown = /*#__PURE__*/styled.div.withConfig({
10
+ })([".", ",.", "{display:block;}"], /*#__PURE__*/String(popoverClasses.wrapper), /*#__PURE__*/String(popoverClasses.target));
11
+ export var Ul = /*#__PURE__*/styled.ul.withConfig({
12
12
  componentId: "plasma-new-hope__sc-13ezpo5-1"
13
- })(["box-sizing:border-box;background:var(", ");box-shadow:var(", ");border-radius:var(", ");width:var(", ");height:var(", ");padding:var(", ") var(", ") var(", ") var(", ");"], tokens.background, tokens.boxShadow, tokens.borderRadius, tokens.width, tokens.height, tokens.paddingTop, tokens.paddingRight, tokens.paddingBottom, tokens.paddingLeft);
13
+ })(["box-sizing:border-box;background:var(", ");box-shadow:var(", ");border-radius:var(", ");width:", ";height:", ";overflow:", ";margin:", ";padding:var(", ");"], tokens.background, tokens.boxShadow, tokens.borderRadius, function (_ref) {
14
+ var listWidth = _ref.listWidth;
15
+ return listWidth || "var(".concat(tokens.width, ")");
16
+ }, function (_ref2) {
17
+ var listHeight = _ref2.listHeight;
18
+ return listHeight ? getCorrectHeight(listHeight) : 'auto';
19
+ }, function (_ref3) {
20
+ var listOverflow = _ref3.listOverflow;
21
+ return listOverflow || 'initial';
22
+ }, function (_ref4) {
23
+ var isInnerUl = _ref4.isInnerUl;
24
+ return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0 0 var(").concat(tokens.padding, ")") : 0;
25
+ }, tokens.padding);
26
+ export var base = /*#__PURE__*/css(["display:inline-block;"]);
@@ -3,78 +3,337 @@ id: dropdown
3
3
  title: Dropdown
4
4
  ---
5
5
 
6
- import { PropsTable, Description } from '@site/src/components';
6
+ import { PropsTable, Description, StorybookLink } from '@site/src/components';
7
+ import Tabs from '@theme/Tabs';
8
+ import TabItem from '@theme/TabItem';
7
9
 
8
10
  # Dropdown
9
- Набор компонентов для создания выпадающих списков.
11
+ Выпадающий многоуровневый список.
12
+
13
+ <StorybookLink name="Dropdown" />
10
14
 
11
15
  <Description name="Dropdown" />
12
- <PropsTable name="Dropdown" exclude={['css']} />
16
+ <PropsTable name="Dropdown" />
13
17
 
14
- # DropdownItem
18
+ ## Использование
19
+ Обязательным параметром является только массив `items`. Внутри items может быть такой же вложенный массив items. Формат следующий:
15
20
 
16
- <Description name="DropdownItem" />
17
- <PropsTable name="DropdownItem" exclude={['css']} />
21
+ ```tsx
22
+ type Items = Array<{
23
+ /**
24
+ * Значение у item
25
+ */
26
+ value: string | number;
27
+ /**
28
+ * Метка-подпись к item
29
+ */
30
+ label: string;
31
+ /**
32
+ * Список дочерних items.
33
+ */
34
+ items?: Items;
35
+ /**
36
+ * Item не активен
37
+ */
38
+ disabled?: boolean;
39
+ /**
40
+ * Слот для контента слева
41
+ */
42
+ contentLeft?: ReactNode;
43
+ /**
44
+ * Слот для контента справа
45
+ */
46
+ contentRight?: ReactNode;
47
+ /**
48
+ * Выбранный item.
49
+ * @deprecated использовать ContentLeft || ContentRight
50
+ */
51
+ isActive?: boolean;
52
+ /**
53
+ * Кастомный цвет текста
54
+ * @deprecated
55
+ */
56
+ color?: string;
57
+ /**
58
+ * Айтем не активен
59
+ * @deprecated использовать disabled
60
+ */
61
+ isDisabled?: boolean;
62
+ }>;
63
+ ```
18
64
 
19
- ## Использование
65
+ ## Примеры
66
+
67
+ <Tabs>
68
+ <TabItem value="default" label="Default" default>
69
+ ```tsx live
70
+ import React from 'react';
71
+ import { Button, Dropdown } from '@salutejs/plasma-web';
20
72
 
21
- ```tsx live
22
- import React, { useState } from 'react';
23
- import { Dropdown, DropdownItem } from '@salutejs/{{ package }}';
24
- import { surfaceSolidSecondary } from '@salutejs/{{ theme }}';
25
-
26
- export function App() {
27
- const [selected, setSelected] = useState('');
28
- const [isOpen, setIsOpen] = useState(false);
29
-
30
- const handleSelect = (value: string, text: string) => {
31
- setSelected(value);
32
- setIsOpen(false);
33
- };
34
-
35
- const getDropdownItems = (slug: string, elemCount: number) =>
36
- [...Array(elemCount).keys()].map((num) => ({
37
- value: `${slug}_${num}`,
38
- child: `${slug} ${num}`,
39
- }));
40
-
41
- return (
42
- <div style=\{{height: "400px", background: surfaceSolidSecondary, padding: "1rem" }}>
43
- <Dropdown
44
- target={<Button>Target</Button>}
45
- isOpen={isOpen}
46
- onToggle={() => {
47
- setIsOpen(!isOpen);
48
- }}
49
- offset={[10, 15]}
50
- view="primary"
51
- size="m"
52
- placement="right"
53
- trigger="click"
54
- closeOnOverlayClick={false}
55
- closeOnEsc
56
- isFocusTrapped
57
- >
58
- {getDropdownItems('item', 6).map((item) => (
59
- <DropdownItem
60
- key={item.value}
61
- isSelected={Boolean(item.value === selected)}
62
- onSelect={() => handleSelect(item.value, item.child)}
63
- value={item.value}
64
- >
65
- {item.child}
66
- </DropdownItem>
67
- ))}
68
- <DropdownItem
69
- isSelected={selected === 'disabled'}
70
- onSelect={() => handleSelect('disabled', 'disabled')}
71
- value="disabled"
72
- disabled
73
+ export function App() {
74
+ const items = [
75
+ {
76
+ value: 'north_america',
77
+ label: 'Северная Америка',
78
+ },
79
+ {
80
+ value: 'south_america',
81
+ label: 'Южная Америка',
82
+ items: [
83
+ {
84
+ value: 'brazil',
85
+ label: 'Бразилия',
86
+ items: [
87
+ {
88
+ value: 'rio_de_janeiro',
89
+ label: 'Рио-де-Жанейро',
90
+ },
91
+ {
92
+ value: 'sao_paulo',
93
+ label: 'Сан-Паулу',
94
+ },
95
+ ],
96
+ },
97
+ {
98
+ value: 'argentina',
99
+ label: 'Аргентина',
100
+ },
101
+ ],
102
+ },
103
+ ];
104
+
105
+
106
+ return (
107
+ <div style={{ height:"300px" }}>
108
+ <Dropdown
109
+ items={items}
73
110
  >
74
- disabled
75
- </DropdownItem>
76
- </Dropdown>
77
- </div>
78
- );
79
- }
80
- ```
111
+ <Button text="Список стран" />
112
+ </Dropdown>
113
+ </div>
114
+ );
115
+ }
116
+ ```
117
+ </TabItem>
118
+
119
+ <TabItem value="size" label="Size">
120
+ Размер `Dropdown` задается с помощью свойства `size`.<br />
121
+ Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`.
122
+
123
+ ```tsx live
124
+ import React from 'react';
125
+ import { Button, Dropdown } from '@salutejs/plasma-web';
126
+
127
+ export function App() {
128
+ const items = [
129
+ {
130
+ value: 'north_america',
131
+ label: 'Северная Америка',
132
+ },
133
+ {
134
+ value: 'south_america',
135
+ label: 'Южная Америка',
136
+ items: [
137
+ {
138
+ value: 'brazil',
139
+ label: 'Бразилия',
140
+ items: [
141
+ {
142
+ value: 'rio_de_janeiro',
143
+ label: 'Рио-де-Жанейро',
144
+ },
145
+ {
146
+ value: 'sao_paulo',
147
+ label: 'Сан-Паулу',
148
+ },
149
+ ],
150
+ },
151
+ {
152
+ value: 'argentina',
153
+ label: 'Аргентина',
154
+ },
155
+ ],
156
+ },
157
+ ];
158
+
159
+ return (
160
+ <div style={{ height: "300px", display: "flex", gap: "50px" }}>
161
+ <Dropdown
162
+ items={items}
163
+ size="l"
164
+ >
165
+ <Button text="Список стран" />
166
+ </Dropdown>
167
+
168
+ <Dropdown
169
+ items={items}
170
+ size="m" // default
171
+ >
172
+ <Button text="Список стран" />
173
+ </Dropdown>
174
+
175
+ <Dropdown
176
+ items={items}
177
+ size="s"
178
+ >
179
+ <Button text="Список стран" />
180
+ </Dropdown>
181
+
182
+ <Dropdown
183
+ items={items}
184
+ size="xs"
185
+ >
186
+ <Button text="Список стран" />
187
+ </Dropdown>
188
+ </div>
189
+ );
190
+ }
191
+ ```
192
+ </TabItem>
193
+
194
+ <TabItem value="placement" label="Placement">
195
+ Параметр `placement` принимает либо строку: `"top"`, `"right"`, `"bottom"`, `"left"`, `"auto"`, либо массив этих же значений, например: `["top", "bottom"]`.<br />
196
+ Default value для placement - `"bottom"`.
197
+
198
+ ```tsx live
199
+ import React from 'react';
200
+ import { Button, Dropdown } from '@salutejs/plasma-web';
201
+
202
+ export function App() {
203
+ const items = [
204
+ {
205
+ value: 'north_america',
206
+ label: 'Северная Америка',
207
+ },
208
+ {
209
+ value: 'south_america',
210
+ label: 'Южная Америка',
211
+ items: [
212
+ {
213
+ value: 'brazil',
214
+ label: 'Бразилия',
215
+ items: [
216
+ {
217
+ value: 'rio_de_janeiro',
218
+ label: 'Рио-де-Жанейро',
219
+ },
220
+ {
221
+ value: 'sao_paulo',
222
+ label: 'Сан-Паулу',
223
+ },
224
+ ],
225
+ },
226
+ {
227
+ value: 'argentina',
228
+ label: 'Аргентина',
229
+ },
230
+ ],
231
+ },
232
+ ];
233
+
234
+ return (
235
+ <div style={{ height: "300px", display: "flex", gap: "50px" }}>
236
+ <Dropdown
237
+ items={items}
238
+ >
239
+ <Button text="Список стран" />
240
+ </Dropdown>
241
+
242
+ <Dropdown
243
+ items={items}
244
+ placement="right"
245
+ >
246
+ <Button text="Список стран" />
247
+ </Dropdown>
248
+
249
+ <Dropdown
250
+ items={items}
251
+ placement="left"
252
+ >
253
+ <Button text="Список стран" />
254
+ </Dropdown>
255
+
256
+ <Dropdown
257
+ items={items}
258
+ placement={['top', 'bottom']}
259
+ >
260
+ <Button text="Список стран" />
261
+ </Dropdown>
262
+ </div>
263
+ );
264
+ }
265
+ ```
266
+ </TabItem>
267
+
268
+ <TabItem value="trigger" label="Trigger">
269
+ Параметр `trigger` принимает строку: `"click"` или `"hover"`.<br />
270
+ Default value - `"click"`.<br />
271
+ Для примера показано значение `"hover"`.
272
+
273
+ ```tsx live
274
+ import React from 'react';
275
+ import { Button, Dropdown } from '@salutejs/plasma-web';
276
+
277
+ export function App() {
278
+ const items = [
279
+ {
280
+ value: 'north_america',
281
+ label: 'Северная Америка',
282
+ },
283
+ {
284
+ value: 'south_america',
285
+ label: 'Южная Америка',
286
+ items: [
287
+ {
288
+ value: 'brazil',
289
+ label: 'Бразилия',
290
+ items: [
291
+ {
292
+ value: 'rio_de_janeiro',
293
+ label: 'Рио-де-Жанейро',
294
+ },
295
+ {
296
+ value: 'sao_paulo',
297
+ label: 'Сан-Паулу',
298
+ },
299
+ ],
300
+ },
301
+ {
302
+ value: 'argentina',
303
+ label: 'Аргентина',
304
+ },
305
+ ],
306
+ },
307
+ ];
308
+
309
+
310
+ return (
311
+ <div style={{ height:"300px" }}>
312
+ <Dropdown
313
+ items={items}
314
+ trigger="hover"
315
+ >
316
+ <Button text="Список стран" />
317
+ </Dropdown>
318
+ </div>
319
+ );
320
+ }
321
+ ```
322
+ </TabItem>
323
+ </Tabs>
324
+
325
+ ## Клавиатурная навигация
326
+
327
+ Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) и частично [TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
328
+
329
+ - `Tab` - закрывает дропдаун. Перемещает фокус на следующий элемент на странице;
330
+ - `Enter` - открывает/закрывает дропдаун. Если на элементе - выбирает его;
331
+ - `Space` - открывает/закрывает дропдаун. Если на элементе - выбирает его;
332
+ - `Home` - открывает дропдаун и перемещает фокус на первый элемент;
333
+ - `End` - открывает дропдаун и перемещает фокус на последний элемент;
334
+ - `PageUp` - перемещает фокус на 10 элементов выше либо в начало списка;
335
+ - `PageDown` - перемещает фокус на 10 элементов ниже либо в конце списка;
336
+ - `ArrowUp` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
337
+ - `ArrowDown` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
338
+ - `ArrowRight` - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент;
339
+ - `ArrowLeft` - закрывает текущий список и перемещает фокус на предыдущий;