@salutejs/plasma-new-hope 0.326.0-canary.2009.15430753944.0 → 0.326.0-canary.2011.15469479103.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (409) hide show
  1. package/cjs/components/Autocomplete/Autocomplete.css +6 -5
  2. package/cjs/components/Autocomplete/Autocomplete.js +2 -2
  3. package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
  4. package/cjs/components/Autocomplete/Autocomplete.styles.js +12 -6
  5. package/cjs/components/Autocomplete/Autocomplete.styles.js.map +1 -1
  6. package/cjs/components/Autocomplete/Autocomplete.styles_30e80h.css +5 -0
  7. package/cjs/components/Autocomplete/ui/SuggestionItem/SuggestionItem.styles.js +1 -1
  8. package/cjs/components/Autocomplete/ui/SuggestionItem/SuggestionItem.styles.js.map +1 -1
  9. package/cjs/components/Autocomplete/ui/SuggestionItem/{SuggestionItem.styles_lpdinw.css → SuggestionItem.styles_7wqokd.css} +1 -1
  10. package/cjs/components/Autocomplete/ui/VirtualList/VirtualList.css +2 -2
  11. package/cjs/components/Combobox/ComboboxNew/Combobox.css +61 -56
  12. package/cjs/components/Combobox/ComboboxNew/Combobox.js +13 -4
  13. package/cjs/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
  14. package/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +38 -37
  15. package/cjs/components/Combobox/ComboboxNew/Combobox.styles.js.map +1 -1
  16. package/cjs/components/Combobox/ComboboxNew/Combobox.styles_isfa46.css +7 -0
  17. package/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +8 -1
  18. package/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js.map +1 -1
  19. package/cjs/components/Combobox/ComboboxNew/FloatingPopover.js +9 -5
  20. package/cjs/components/Combobox/ComboboxNew/FloatingPopover.js.map +1 -1
  21. package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.css +18 -17
  22. package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +5 -5
  23. package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js.map +1 -1
  24. package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.js +2 -2
  25. package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.js.map +1 -1
  26. package/{es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles_1fy6e2z.css → cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles_80gotw.css} +2 -2
  27. package/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.css +56 -0
  28. package/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js +44 -0
  29. package/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js.map +1 -0
  30. package/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js +53 -0
  31. package/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js.map +1 -0
  32. package/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles_tjme4i.css +3 -0
  33. package/cjs/components/Combobox/ComboboxNew/ui/VirtualList/VirtualList.css +12 -12
  34. package/cjs/components/Combobox/ComboboxOld/Combobox.css +8 -7
  35. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +8 -7
  36. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +8 -7
  37. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +8 -7
  38. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +8 -7
  39. package/cjs/components/Dropdown/Dropdown.css +8 -7
  40. package/cjs/components/Dropdown/Dropdown.js +7 -5
  41. package/cjs/components/Dropdown/Dropdown.js.map +1 -1
  42. package/cjs/components/Dropdown/Dropdown.styles.js +17 -16
  43. package/cjs/components/Dropdown/Dropdown.styles.js.map +1 -1
  44. package/cjs/components/Dropdown/Dropdown.styles_zheit5.css +3 -0
  45. package/cjs/components/Dropdown/Dropdown.tokens.js.map +1 -1
  46. package/cjs/components/Dropdown/FloatingPopover.js +5 -4
  47. package/cjs/components/Dropdown/FloatingPopover.js.map +1 -1
  48. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.css +8 -7
  49. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +4 -4
  50. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
  51. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.css +6 -6
  52. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +3 -3
  53. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
  54. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1algi32.css +7 -0
  55. package/cjs/components/Pagination/Pagination.css +57 -52
  56. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +57 -52
  57. package/cjs/components/Popover/Popover.js +3 -0
  58. package/cjs/components/Popover/Popover.js.map +1 -1
  59. package/cjs/components/Select/FloatingPopover.js +9 -5
  60. package/cjs/components/Select/FloatingPopover.js.map +1 -1
  61. package/cjs/components/Select/Select.css +57 -52
  62. package/cjs/components/Select/Select.js +14 -5
  63. package/cjs/components/Select/Select.js.map +1 -1
  64. package/cjs/components/Select/Select.styles.js +17 -17
  65. package/cjs/components/Select/Select.styles.js.map +1 -1
  66. package/cjs/components/Select/Select.styles_bjoo18.css +3 -0
  67. package/cjs/components/Select/Select.tokens.js +9 -2
  68. package/cjs/components/Select/Select.tokens.js.map +1 -1
  69. package/cjs/components/Select/hooks/useKeyboardNavigation.js +2 -2
  70. package/cjs/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
  71. package/cjs/components/Select/ui/Inner/Inner.css +11 -10
  72. package/cjs/components/Select/ui/Inner/Inner.js +5 -5
  73. package/cjs/components/Select/ui/Inner/Inner.js.map +1 -1
  74. package/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js +4 -4
  75. package/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js.map +1 -1
  76. package/cjs/components/Select/ui/Inner/ui/Item/Item.styles_1qpfn0s.css +11 -0
  77. package/cjs/components/Select/ui/SelectAll/SelectAll.css +54 -0
  78. package/cjs/components/Select/ui/SelectAll/SelectAll.js +44 -0
  79. package/cjs/components/Select/ui/SelectAll/SelectAll.js.map +1 -0
  80. package/cjs/components/Select/ui/SelectAll/SelectAll.styles.js +53 -0
  81. package/cjs/components/Select/ui/SelectAll/SelectAll.styles.js.map +1 -0
  82. package/cjs/components/Select/ui/SelectAll/SelectAll.styles_ql2mqj.css +3 -0
  83. package/cjs/components/Select/ui/VirtualList/VirtualList.css +10 -10
  84. package/cjs/components/Table/Table.css +34 -29
  85. package/cjs/components/Table/ui/Cell/Cell.css +34 -29
  86. package/cjs/components/Table/ui/EditableCell/EditableCell.css +34 -29
  87. package/cjs/components/Table/ui/HeadCell/HeadCell.css +34 -29
  88. package/cjs/components/Table/ui/HeadCell/ui/Filter/Filter.css +34 -29
  89. package/cjs/index.css +54 -42
  90. package/emotion/cjs/components/Autocomplete/Autocomplete.js +2 -2
  91. package/emotion/cjs/components/Autocomplete/Autocomplete.styles.js +10 -6
  92. package/emotion/cjs/components/Autocomplete/ui/SuggestionItem/SuggestionItem.styles.js +5 -5
  93. package/emotion/cjs/components/Combobox/Combobox.template-doc.mdx +58 -0
  94. package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.js +12 -4
  95. package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +24 -23
  96. package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +10 -3
  97. package/emotion/cjs/components/Combobox/ComboboxNew/FloatingPopover.js +9 -5
  98. package/emotion/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +5 -5
  99. package/emotion/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.js +17 -17
  100. package/emotion/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js +39 -0
  101. package/emotion/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js +30 -0
  102. package/emotion/cjs/components/Combobox/ComboboxNew/ui/index.js +11 -0
  103. package/emotion/cjs/components/Dropdown/Dropdown.js +7 -5
  104. package/emotion/cjs/components/Dropdown/Dropdown.styles.js +13 -12
  105. package/emotion/cjs/components/Dropdown/Dropdown.tokens.js +2 -2
  106. package/emotion/cjs/components/Dropdown/FloatingPopover.js +5 -4
  107. package/emotion/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +4 -4
  108. package/emotion/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +11 -11
  109. package/emotion/cjs/components/Popover/Popover.js +3 -0
  110. package/emotion/cjs/components/Select/FloatingPopover.js +9 -5
  111. package/emotion/cjs/components/Select/Select.js +13 -5
  112. package/emotion/cjs/components/Select/Select.styles.js +11 -10
  113. package/emotion/cjs/components/Select/Select.template-doc.mdx +58 -0
  114. package/emotion/cjs/components/Select/Select.tokens.js +9 -2
  115. package/emotion/cjs/components/Select/hooks/useKeyboardNavigation.js +2 -2
  116. package/emotion/cjs/components/Select/ui/Inner/Inner.js +5 -5
  117. package/emotion/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js +14 -14
  118. package/emotion/cjs/components/Select/ui/SelectAll/SelectAll.js +39 -0
  119. package/emotion/cjs/components/Select/ui/SelectAll/SelectAll.styles.js +30 -0
  120. package/emotion/cjs/components/Select/ui/index.js +11 -0
  121. package/emotion/cjs/examples/plasma_b2c/components/Combobox/Combobox.config.js +15 -15
  122. package/emotion/cjs/examples/plasma_b2c/components/Combobox/Combobox.js +13 -2
  123. package/emotion/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +187 -0
  124. package/emotion/cjs/examples/plasma_b2c/components/Select/Select.config.js +24 -24
  125. package/emotion/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx +186 -0
  126. package/emotion/cjs/examples/plasma_b2c/components/Table/Table.config.js +5 -5
  127. package/emotion/cjs/examples/plasma_web/components/Combobox/Combobox.config.js +15 -15
  128. package/emotion/cjs/examples/plasma_web/components/Combobox/Combobox.js +12 -2
  129. package/emotion/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx +186 -0
  130. package/emotion/cjs/examples/plasma_web/components/Select/Select.config.js +24 -24
  131. package/emotion/cjs/examples/plasma_web/components/Select/Select.stories.tsx +186 -0
  132. package/emotion/cjs/examples/plasma_web/components/Table/Table.config.js +5 -5
  133. package/emotion/es/components/Autocomplete/Autocomplete.js +3 -3
  134. package/emotion/es/components/Autocomplete/Autocomplete.styles.js +9 -5
  135. package/emotion/es/components/Autocomplete/ui/SuggestionItem/SuggestionItem.styles.js +5 -5
  136. package/emotion/es/components/Combobox/Combobox.template-doc.mdx +58 -0
  137. package/emotion/es/components/Combobox/ComboboxNew/Combobox.js +14 -6
  138. package/emotion/es/components/Combobox/ComboboxNew/Combobox.styles.js +23 -22
  139. package/emotion/es/components/Combobox/ComboboxNew/Combobox.tokens.js +10 -3
  140. package/emotion/es/components/Combobox/ComboboxNew/FloatingPopover.js +9 -5
  141. package/emotion/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +6 -6
  142. package/emotion/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.js +17 -17
  143. package/emotion/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js +32 -0
  144. package/emotion/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js +23 -0
  145. package/emotion/es/components/Combobox/ComboboxNew/ui/index.js +2 -1
  146. package/emotion/es/components/Dropdown/Dropdown.js +8 -6
  147. package/emotion/es/components/Dropdown/Dropdown.styles.js +12 -11
  148. package/emotion/es/components/Dropdown/Dropdown.tokens.js +2 -2
  149. package/emotion/es/components/Dropdown/FloatingPopover.js +5 -4
  150. package/emotion/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +5 -5
  151. package/emotion/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +11 -11
  152. package/emotion/es/components/Popover/Popover.js +3 -0
  153. package/emotion/es/components/Select/FloatingPopover.js +9 -5
  154. package/emotion/es/components/Select/Select.js +15 -7
  155. package/emotion/es/components/Select/Select.styles.js +10 -9
  156. package/emotion/es/components/Select/Select.template-doc.mdx +58 -0
  157. package/emotion/es/components/Select/Select.tokens.js +9 -2
  158. package/emotion/es/components/Select/hooks/useKeyboardNavigation.js +2 -2
  159. package/emotion/es/components/Select/ui/Inner/Inner.js +6 -6
  160. package/emotion/es/components/Select/ui/Inner/ui/Item/Item.styles.js +14 -14
  161. package/emotion/es/components/Select/ui/SelectAll/SelectAll.js +32 -0
  162. package/emotion/es/components/Select/ui/SelectAll/SelectAll.styles.js +23 -0
  163. package/emotion/es/components/Select/ui/index.js +2 -1
  164. package/emotion/es/examples/plasma_b2c/components/Combobox/Combobox.config.js +15 -15
  165. package/emotion/es/examples/plasma_b2c/components/Combobox/Combobox.js +10 -2
  166. package/emotion/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +187 -0
  167. package/emotion/es/examples/plasma_b2c/components/Select/Select.config.js +24 -24
  168. package/emotion/es/examples/plasma_b2c/components/Select/Select.stories.tsx +186 -0
  169. package/emotion/es/examples/plasma_b2c/components/Table/Table.config.js +5 -5
  170. package/emotion/es/examples/plasma_web/components/Combobox/Combobox.config.js +15 -15
  171. package/emotion/es/examples/plasma_web/components/Combobox/Combobox.js +10 -3
  172. package/emotion/es/examples/plasma_web/components/Combobox/Combobox.stories.tsx +186 -0
  173. package/emotion/es/examples/plasma_web/components/Select/Select.config.js +24 -24
  174. package/emotion/es/examples/plasma_web/components/Select/Select.stories.tsx +186 -0
  175. package/emotion/es/examples/plasma_web/components/Table/Table.config.js +5 -5
  176. package/es/components/Autocomplete/Autocomplete.css +6 -5
  177. package/es/components/Autocomplete/Autocomplete.js +3 -3
  178. package/es/components/Autocomplete/Autocomplete.js.map +1 -1
  179. package/es/components/Autocomplete/Autocomplete.styles.js +12 -7
  180. package/es/components/Autocomplete/Autocomplete.styles.js.map +1 -1
  181. package/es/components/Autocomplete/Autocomplete.styles_30e80h.css +5 -0
  182. package/es/components/Autocomplete/ui/SuggestionItem/SuggestionItem.styles.js +1 -1
  183. package/es/components/Autocomplete/ui/SuggestionItem/SuggestionItem.styles.js.map +1 -1
  184. package/es/components/Autocomplete/ui/SuggestionItem/{SuggestionItem.styles_lpdinw.css → SuggestionItem.styles_7wqokd.css} +1 -1
  185. package/es/components/Autocomplete/ui/VirtualList/VirtualList.css +2 -2
  186. package/es/components/Combobox/ComboboxNew/Combobox.css +61 -56
  187. package/es/components/Combobox/ComboboxNew/Combobox.js +14 -5
  188. package/es/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
  189. package/es/components/Combobox/ComboboxNew/Combobox.styles.js +38 -38
  190. package/es/components/Combobox/ComboboxNew/Combobox.styles.js.map +1 -1
  191. package/es/components/Combobox/ComboboxNew/Combobox.styles_isfa46.css +7 -0
  192. package/es/components/Combobox/ComboboxNew/Combobox.tokens.js +8 -1
  193. package/es/components/Combobox/ComboboxNew/Combobox.tokens.js.map +1 -1
  194. package/es/components/Combobox/ComboboxNew/FloatingPopover.js +9 -5
  195. package/es/components/Combobox/ComboboxNew/FloatingPopover.js.map +1 -1
  196. package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.css +18 -17
  197. package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +6 -6
  198. package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js.map +1 -1
  199. package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.js +2 -2
  200. package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.js.map +1 -1
  201. package/{cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles_1fy6e2z.css → es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles_80gotw.css} +2 -2
  202. package/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.css +56 -0
  203. package/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js +36 -0
  204. package/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js.map +1 -0
  205. package/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js +47 -0
  206. package/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js.map +1 -0
  207. package/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles_tjme4i.css +3 -0
  208. package/es/components/Combobox/ComboboxNew/ui/VirtualList/VirtualList.css +12 -12
  209. package/es/components/Combobox/ComboboxOld/Combobox.css +8 -7
  210. package/es/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +8 -7
  211. package/es/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +8 -7
  212. package/es/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +8 -7
  213. package/es/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +8 -7
  214. package/es/components/Dropdown/Dropdown.css +8 -7
  215. package/es/components/Dropdown/Dropdown.js +8 -6
  216. package/es/components/Dropdown/Dropdown.js.map +1 -1
  217. package/es/components/Dropdown/Dropdown.styles.js +17 -17
  218. package/es/components/Dropdown/Dropdown.styles.js.map +1 -1
  219. package/es/components/Dropdown/Dropdown.styles_zheit5.css +3 -0
  220. package/es/components/Dropdown/Dropdown.tokens.js.map +1 -1
  221. package/es/components/Dropdown/FloatingPopover.js +5 -4
  222. package/es/components/Dropdown/FloatingPopover.js.map +1 -1
  223. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.css +8 -7
  224. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +5 -5
  225. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
  226. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.css +6 -6
  227. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +3 -3
  228. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
  229. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1algi32.css +7 -0
  230. package/es/components/Pagination/Pagination.css +57 -52
  231. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +57 -52
  232. package/es/components/Popover/Popover.js +3 -0
  233. package/es/components/Popover/Popover.js.map +1 -1
  234. package/es/components/Select/FloatingPopover.js +9 -5
  235. package/es/components/Select/FloatingPopover.js.map +1 -1
  236. package/es/components/Select/Select.css +57 -52
  237. package/es/components/Select/Select.js +15 -6
  238. package/es/components/Select/Select.js.map +1 -1
  239. package/es/components/Select/Select.styles.js +17 -18
  240. package/es/components/Select/Select.styles.js.map +1 -1
  241. package/es/components/Select/Select.styles_bjoo18.css +3 -0
  242. package/es/components/Select/Select.tokens.js +9 -2
  243. package/es/components/Select/Select.tokens.js.map +1 -1
  244. package/es/components/Select/hooks/useKeyboardNavigation.js +2 -2
  245. package/es/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
  246. package/es/components/Select/ui/Inner/Inner.css +11 -10
  247. package/es/components/Select/ui/Inner/Inner.js +6 -6
  248. package/es/components/Select/ui/Inner/Inner.js.map +1 -1
  249. package/es/components/Select/ui/Inner/ui/Item/Item.styles.js +4 -4
  250. package/es/components/Select/ui/Inner/ui/Item/Item.styles.js.map +1 -1
  251. package/es/components/Select/ui/Inner/ui/Item/Item.styles_1qpfn0s.css +11 -0
  252. package/es/components/Select/ui/SelectAll/SelectAll.css +54 -0
  253. package/es/components/Select/ui/SelectAll/SelectAll.js +36 -0
  254. package/es/components/Select/ui/SelectAll/SelectAll.js.map +1 -0
  255. package/es/components/Select/ui/SelectAll/SelectAll.styles.js +47 -0
  256. package/es/components/Select/ui/SelectAll/SelectAll.styles.js.map +1 -0
  257. package/es/components/Select/ui/SelectAll/SelectAll.styles_ql2mqj.css +3 -0
  258. package/es/components/Select/ui/VirtualList/VirtualList.css +10 -10
  259. package/es/components/Table/Table.css +34 -29
  260. package/es/components/Table/ui/Cell/Cell.css +34 -29
  261. package/es/components/Table/ui/EditableCell/EditableCell.css +34 -29
  262. package/es/components/Table/ui/HeadCell/HeadCell.css +34 -29
  263. package/es/components/Table/ui/HeadCell/ui/Filter/Filter.css +34 -29
  264. package/es/index.css +54 -42
  265. package/package.json +5 -5
  266. package/styled-components/cjs/components/Autocomplete/Autocomplete.js +2 -2
  267. package/styled-components/cjs/components/Autocomplete/Autocomplete.styles.js +9 -6
  268. package/styled-components/cjs/components/Autocomplete/ui/SuggestionItem/SuggestionItem.styles.js +3 -3
  269. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +58 -0
  270. package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js +12 -4
  271. package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +21 -21
  272. package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +10 -3
  273. package/styled-components/cjs/components/Combobox/ComboboxNew/FloatingPopover.js +9 -5
  274. package/styled-components/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +5 -5
  275. package/styled-components/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.js +5 -5
  276. package/styled-components/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js +39 -0
  277. package/styled-components/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js +27 -0
  278. package/styled-components/cjs/components/Combobox/ComboboxNew/ui/index.js +11 -0
  279. package/styled-components/cjs/components/Dropdown/Dropdown.js +7 -5
  280. package/styled-components/cjs/components/Dropdown/Dropdown.styles.js +9 -9
  281. package/styled-components/cjs/components/Dropdown/Dropdown.tokens.js +2 -2
  282. package/styled-components/cjs/components/Dropdown/FloatingPopover.js +5 -4
  283. package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +4 -4
  284. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +5 -5
  285. package/styled-components/cjs/components/Popover/Popover.js +3 -0
  286. package/styled-components/cjs/components/Select/FloatingPopover.js +9 -5
  287. package/styled-components/cjs/components/Select/Select.js +13 -5
  288. package/styled-components/cjs/components/Select/Select.styles.js +8 -8
  289. package/styled-components/cjs/components/Select/Select.template-doc.mdx +58 -0
  290. package/styled-components/cjs/components/Select/Select.tokens.js +9 -2
  291. package/styled-components/cjs/components/Select/hooks/useKeyboardNavigation.js +2 -2
  292. package/styled-components/cjs/components/Select/ui/Inner/Inner.js +5 -5
  293. package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js +3 -3
  294. package/styled-components/cjs/components/Select/ui/SelectAll/SelectAll.js +39 -0
  295. package/styled-components/cjs/components/Select/ui/SelectAll/SelectAll.styles.js +27 -0
  296. package/styled-components/cjs/components/Select/ui/index.js +11 -0
  297. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.config.js +8 -8
  298. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.js +13 -2
  299. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +187 -0
  300. package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.config.js +14 -14
  301. package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx +186 -0
  302. package/styled-components/cjs/examples/plasma_b2c/components/Table/Table.config.js +3 -3
  303. package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.config.js +8 -8
  304. package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.js +12 -2
  305. package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx +186 -0
  306. package/styled-components/cjs/examples/plasma_web/components/Select/Select.config.js +14 -14
  307. package/styled-components/cjs/examples/plasma_web/components/Select/Select.stories.tsx +186 -0
  308. package/styled-components/cjs/examples/plasma_web/components/Table/Table.config.js +3 -3
  309. package/styled-components/es/components/Autocomplete/Autocomplete.js +3 -3
  310. package/styled-components/es/components/Autocomplete/Autocomplete.styles.js +8 -5
  311. package/styled-components/es/components/Autocomplete/ui/SuggestionItem/SuggestionItem.styles.js +3 -3
  312. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +58 -0
  313. package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js +14 -6
  314. package/styled-components/es/components/Combobox/ComboboxNew/Combobox.styles.js +20 -20
  315. package/styled-components/es/components/Combobox/ComboboxNew/Combobox.tokens.js +10 -3
  316. package/styled-components/es/components/Combobox/ComboboxNew/FloatingPopover.js +9 -5
  317. package/styled-components/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +6 -6
  318. package/styled-components/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.js +5 -5
  319. package/styled-components/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js +32 -0
  320. package/styled-components/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js +20 -0
  321. package/styled-components/es/components/Combobox/ComboboxNew/ui/index.js +2 -1
  322. package/styled-components/es/components/Dropdown/Dropdown.js +8 -6
  323. package/styled-components/es/components/Dropdown/Dropdown.styles.js +8 -8
  324. package/styled-components/es/components/Dropdown/Dropdown.tokens.js +2 -2
  325. package/styled-components/es/components/Dropdown/FloatingPopover.js +5 -4
  326. package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +5 -5
  327. package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +5 -5
  328. package/styled-components/es/components/Popover/Popover.js +3 -0
  329. package/styled-components/es/components/Select/FloatingPopover.js +9 -5
  330. package/styled-components/es/components/Select/Select.js +15 -7
  331. package/styled-components/es/components/Select/Select.styles.js +7 -7
  332. package/styled-components/es/components/Select/Select.template-doc.mdx +58 -0
  333. package/styled-components/es/components/Select/Select.tokens.js +9 -2
  334. package/styled-components/es/components/Select/hooks/useKeyboardNavigation.js +2 -2
  335. package/styled-components/es/components/Select/ui/Inner/Inner.js +6 -6
  336. package/styled-components/es/components/Select/ui/Inner/ui/Item/Item.styles.js +3 -3
  337. package/styled-components/es/components/Select/ui/SelectAll/SelectAll.js +32 -0
  338. package/styled-components/es/components/Select/ui/SelectAll/SelectAll.styles.js +20 -0
  339. package/styled-components/es/components/Select/ui/index.js +2 -1
  340. package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.config.js +8 -8
  341. package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.js +10 -2
  342. package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +187 -0
  343. package/styled-components/es/examples/plasma_b2c/components/Select/Select.config.js +14 -14
  344. package/styled-components/es/examples/plasma_b2c/components/Select/Select.stories.tsx +186 -0
  345. package/styled-components/es/examples/plasma_b2c/components/Table/Table.config.js +3 -3
  346. package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.config.js +8 -8
  347. package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.js +10 -3
  348. package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.stories.tsx +186 -0
  349. package/styled-components/es/examples/plasma_web/components/Select/Select.config.js +14 -14
  350. package/styled-components/es/examples/plasma_web/components/Select/Select.stories.tsx +186 -0
  351. package/styled-components/es/examples/plasma_web/components/Table/Table.config.js +3 -3
  352. package/types/components/Autocomplete/Autocomplete.d.ts.map +1 -1
  353. package/types/components/Autocomplete/Autocomplete.styles.d.ts +1 -0
  354. package/types/components/Autocomplete/Autocomplete.styles.d.ts.map +1 -1
  355. package/types/components/Combobox/ComboboxNew/Combobox.d.ts.map +1 -1
  356. package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts +3 -2
  357. package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts.map +1 -1
  358. package/types/components/Combobox/ComboboxNew/Combobox.tokens.d.ts +7 -0
  359. package/types/components/Combobox/ComboboxNew/Combobox.tokens.d.ts.map +1 -1
  360. package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +12 -1
  361. package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
  362. package/types/components/Combobox/ComboboxNew/FloatingPopover.d.ts.map +1 -1
  363. package/types/components/Combobox/ComboboxNew/ui/Inner/Inner.d.ts.map +1 -1
  364. package/types/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.d.ts.map +1 -1
  365. package/types/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.d.ts +7 -0
  366. package/types/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.d.ts.map +1 -0
  367. package/types/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.d.ts +10 -0
  368. package/types/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.d.ts.map +1 -0
  369. package/types/components/Combobox/ComboboxNew/ui/index.d.ts +1 -0
  370. package/types/components/Combobox/ComboboxNew/ui/index.d.ts.map +1 -1
  371. package/types/components/Dropdown/Dropdown.d.ts.map +1 -1
  372. package/types/components/Dropdown/Dropdown.styles.d.ts +3 -2
  373. package/types/components/Dropdown/Dropdown.styles.d.ts.map +1 -1
  374. package/types/components/Dropdown/Dropdown.types.d.ts +1 -1
  375. package/types/components/Dropdown/Dropdown.types.d.ts.map +1 -1
  376. package/types/components/Dropdown/FloatingPopover.d.ts.map +1 -1
  377. package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts.map +1 -1
  378. package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts +3 -0
  379. package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts.map +1 -1
  380. package/types/components/Popover/Popover.d.ts.map +1 -1
  381. package/types/components/Select/FloatingPopover.d.ts.map +1 -1
  382. package/types/components/Select/Select.d.ts.map +1 -1
  383. package/types/components/Select/Select.styles.d.ts +3 -2
  384. package/types/components/Select/Select.styles.d.ts.map +1 -1
  385. package/types/components/Select/Select.tokens.d.ts +7 -0
  386. package/types/components/Select/Select.tokens.d.ts.map +1 -1
  387. package/types/components/Select/Select.types.d.ts +13 -1
  388. package/types/components/Select/Select.types.d.ts.map +1 -1
  389. package/types/components/Select/ui/Inner/Inner.d.ts.map +1 -1
  390. package/types/components/Select/ui/SelectAll/SelectAll.d.ts +7 -0
  391. package/types/components/Select/ui/SelectAll/SelectAll.d.ts.map +1 -0
  392. package/types/components/Select/ui/SelectAll/SelectAll.styles.d.ts +10 -0
  393. package/types/components/Select/ui/SelectAll/SelectAll.styles.d.ts.map +1 -0
  394. package/types/components/Select/ui/index.d.ts +1 -0
  395. package/types/components/Select/ui/index.d.ts.map +1 -1
  396. package/types/components/Table/ui/HeadCell/ui/Filter/Filter.styles.d.ts +3 -0
  397. package/types/components/Table/ui/HeadCell/ui/Filter/Filter.styles.d.ts.map +1 -1
  398. package/cjs/components/Autocomplete/Autocomplete.styles_1qe8z2l.css +0 -4
  399. package/cjs/components/Combobox/ComboboxNew/Combobox.styles_5uhl12.css +0 -6
  400. package/cjs/components/Dropdown/Dropdown.styles_1ao2kug.css +0 -2
  401. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1lp7sqa.css +0 -7
  402. package/cjs/components/Select/Select.styles_11cghkj.css +0 -2
  403. package/cjs/components/Select/ui/Inner/ui/Item/Item.styles_ir8fmi.css +0 -11
  404. package/es/components/Autocomplete/Autocomplete.styles_1qe8z2l.css +0 -4
  405. package/es/components/Combobox/ComboboxNew/Combobox.styles_5uhl12.css +0 -6
  406. package/es/components/Dropdown/Dropdown.styles_1ao2kug.css +0 -2
  407. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1lp7sqa.css +0 -7
  408. package/es/components/Select/Select.styles_11cghkj.css +0 -2
  409. package/es/components/Select/ui/Inner/ui/Item/Item.styles_ir8fmi.css +0 -11
@@ -436,6 +436,64 @@ type Items = Array<{
436
436
  }
437
437
  ```
438
438
  </TabItem>
439
+ <TabItem value="selectAll" label="Выбрать всё">
440
+ Работа с кнопкой "Выбрать всё" осуществляется через свойство `selectAllOptions` только в режиме `multiple`:
441
+ ```tsx
442
+ type SelectAllProps = {
443
+ checked?: boolean;
444
+ indeterminate?: boolean;
445
+ label?: string;
446
+ onClick?: () => void;
447
+ sticky?: boolean;
448
+ };
449
+ ```
450
+ Вся логика выбора элементов и взаимодействия с компонентом лежит на стороне пользователя.
451
+
452
+ ```tsx live
453
+ import React, { useState } from 'react';
454
+ import { Select } from '@salutejs/{{ package }}';
455
+
456
+ export function App() {
457
+ const [checked, setChecked] = useState(false);
458
+
459
+ const items = [
460
+ {
461
+ value: 'north_america',
462
+ label: 'Северная Америка',
463
+ },
464
+ {
465
+ value: 'south_america',
466
+ label: 'Южная Америка',
467
+ items: [
468
+ {
469
+ value: 'brazil',
470
+ label: 'Бразилия',
471
+ },
472
+ {
473
+ value: 'argentina',
474
+ label: 'Аргентина',
475
+ },
476
+ ],
477
+ },
478
+ ];
479
+
480
+ return (
481
+ <div style={{ display: "flex", gap: "30px", height: "300px" }}>
482
+ <Combobox
483
+ label="Label"
484
+ placeholder="Placeholder"
485
+ items={items}
486
+ multiple
487
+ selectAllOptions={{
488
+ checked,
489
+ onClick: () => setChecked(prev => !prev)
490
+ }}
491
+ />
492
+ </div>
493
+ );
494
+ }
495
+ ```
496
+ </TabItem>
439
497
  </Tabs>
440
498
 
441
499
  ## Использование с React Hook Form и нативной формой
@@ -22,10 +22,10 @@ import { classes } from "./Combobox.tokens";
22
22
  import { FloatingPopover } from "./FloatingPopover";
23
23
  import { useKeyNavigation, getItemByFocused } from "./hooks/useKeyboardNavigation";
24
24
  import { initialItemsTransform, updateAncestors, updateDescendants, updateSingleAncestors, filterItems, getItemId, getRemovedElement } from "./utils";
25
- import { Inner, StyledTextField, VirtualList } from "./ui";
25
+ import { Inner, StyledTextField, VirtualList, SelectAll } from "./ui";
26
26
  import { pathReducer, focusedPathReducer } from "./reducers";
27
27
  import { getPathMap, getTreeMaps } from "./hooks/getPathMaps";
28
- import { Ul, base, StyledArrow, IconArrowWrapper, StyledEmptyState, StyledLeftHelper } from "./Combobox.styles";
28
+ import { Ul, base, StyledArrow, IconArrowWrapper, StyledEmptyState, StyledLeftHelper, ListWrapper } from "./Combobox.styles";
29
29
  import { base as viewCSS } from "./variations/_view/base";
30
30
  import { base as sizeCSS } from "./variations/_size/base";
31
31
  import { SelectNative } from "./ui/SelectNative/SelectNative";
@@ -521,7 +521,8 @@ export var comboboxRoot = function comboboxRoot(Root) {
521
521
  _onEnterDisabled: true // Пропс для отключения обработчика Enter внутри Textfield
522
522
  }));
523
523
  },
524
- zIndex: zIndex
524
+ zIndex: zIndex,
525
+ isInner: false
525
526
  }, /*#__PURE__*/React.createElement(Root, {
526
527
  size: size,
527
528
  view: view,
@@ -529,12 +530,13 @@ export var comboboxRoot = function comboboxRoot(Root) {
529
530
  disabled: disabled,
530
531
  readOnly: readOnly,
531
532
  name: name
533
+ }, /*#__PURE__*/React.createElement(ListWrapper, {
534
+ listWidth: listWidth
532
535
  }, /*#__PURE__*/React.createElement(Ul, {
533
536
  role: "tree",
534
537
  id: "".concat(treeId, "_tree_level_1"),
535
538
  "aria-multiselectable": Boolean(multiple),
536
539
  listMaxHeight: listMaxHeight || listHeight,
537
- listWidth: listWidth,
538
540
  ref: targetRef,
539
541
  virtual: virtual,
540
542
  listOverflow: listOverflow,
@@ -543,7 +545,13 @@ export var comboboxRoot = function comboboxRoot(Root) {
543
545
  className: classes.emptyStateWrapper,
544
546
  size: size,
545
547
  description: emptyStateDescription || 'Ничего не найдено'
546
- }) : /*#__PURE__*/React.createElement(React.Fragment, null, virtual ? /*#__PURE__*/React.createElement(VirtualList, {
548
+ }) : /*#__PURE__*/React.createElement(React.Fragment, null, props.multiple && props.selectAllOptions &&
549
+ /*#__PURE__*/
550
+ // TODO: #2004
551
+ React.createElement(SelectAll, {
552
+ selectAllOptions: props.selectAllOptions,
553
+ variant: variant
554
+ }), virtual ? /*#__PURE__*/React.createElement(VirtualList, {
547
555
  items: filteredItems,
548
556
  listMaxHeight: listMaxHeight || listHeight,
549
557
  onScroll: onScroll
@@ -557,7 +565,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
557
565
  index: index,
558
566
  listWidth: listWidth
559
567
  });
560
- })), afterList))))));
568
+ })), afterList)))))));
561
569
  });
562
570
  };
563
571
  export var comboboxConfig = {
@@ -6,12 +6,15 @@ import { component, mergeConfig } from "../../../engines";
6
6
  import { tokens, constants, classes } from "./Combobox.tokens";
7
7
  var mergedConfig = /*#__PURE__*/mergeConfig(emptyStateConfig);
8
8
  var EmptyState = /*#__PURE__*/component(mergedConfig);
9
- export var Ul = /*#__PURE__*/styled.ul.withConfig({
9
+ export var ListWrapper = /*#__PURE__*/styled.div.withConfig({
10
10
  componentId: "plasma-new-hope__sc-2kddkg-0"
11
- })(["background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";max-height:", ";overflow-y:", ";border:var(", ") solid var(", ");margin:", ";padding:var(", ") 0;.", "{box-shadow:none;}"], constants.background, constants.boxShadow, tokens.borderRadius, function (_ref) {
11
+ })(["width:", ";padding:calc(var(", ") + var(", ",0rem));border-radius:var(", ");box-sizing:border-box;background:var(", ");box-shadow:", ",inset 0 0 0 var(", ",0rem) var(", ",transparent);"], function (_ref) {
12
12
  var listWidth = _ref.listWidth;
13
13
  return listWidth || '100%';
14
- }, function (_ref2) {
14
+ }, tokens.padding, tokens.dropdownBorderWidth, tokens.borderRadius, constants.background, constants.boxShadow, tokens.dropdownBorderWidth, tokens.dropdownBorderColor);
15
+ export var Ul = /*#__PURE__*/styled.ul.withConfig({
16
+ componentId: "plasma-new-hope__sc-2kddkg-1"
17
+ })(["max-height:", ";overflow-y:", ";border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));margin:0;padding:0;.", "{box-shadow:none;}"], function (_ref2) {
15
18
  var virtual = _ref2.virtual,
16
19
  listMaxHeight = _ref2.listMaxHeight;
17
20
  return virtual ? 'auto' : listMaxHeight || 'auto';
@@ -19,17 +22,14 @@ export var Ul = /*#__PURE__*/styled.ul.withConfig({
19
22
  var virtual = _ref3.virtual,
20
23
  listOverflow = _ref3.listOverflow;
21
24
  return virtual ? 'visible' : listOverflow || 'visible';
22
- }, tokens.dropdownBorderWidth, tokens.dropdownBorderColor, function (_ref4) {
23
- var isInnerUl = _ref4.isInnerUl;
24
- return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0 0 0") : "var(".concat(tokens.margin, ") 0 0 0");
25
- }, tokens.padding, classes.emptyStateWrapper);
25
+ }, tokens.borderRadius, tokens.dropdownBorderWidth, classes.emptyStateWrapper);
26
26
  export var IconArrowWrapper = /*#__PURE__*/styled.div.withConfig({
27
- componentId: "plasma-new-hope__sc-2kddkg-1"
28
- })(["line-height:0;color:var(", ");cursor:", ";.", "{transform:rotate(-180deg);}&:hover,&:active{color:", ";}"], tokens.disclosureIconColor, function (_ref5) {
29
- var disabled = _ref5.disabled;
27
+ componentId: "plasma-new-hope__sc-2kddkg-2"
28
+ })(["line-height:0;color:var(", ");cursor:", ";.", "{transform:rotate(-180deg);}&:hover,&:active{color:", ";}"], tokens.disclosureIconColor, function (_ref4) {
29
+ var disabled = _ref4.disabled;
30
30
  return disabled ? 'inherit' : 'pointer';
31
- }, classes.arrowInverse, function (_ref6) {
32
- var disabled = _ref6.disabled;
31
+ }, classes.arrowInverse, function (_ref5) {
32
+ var disabled = _ref5.disabled;
33
33
  return disabled ? "var(".concat(tokens.disclosureIconColor, ")") : "var(".concat(tokens.disclosureIconColorHover, ")");
34
34
  });
35
35
 
@@ -39,20 +39,20 @@ export var sizeMap = {
39
39
  s: '1.5rem'
40
40
  };
41
41
  export var StyledArrow = /*#__PURE__*/styled(IconDisclosureDownCentered).withConfig({
42
- componentId: "plasma-new-hope__sc-2kddkg-2"
43
- })(["width:", ";height:", ";"], function (_ref7) {
42
+ componentId: "plasma-new-hope__sc-2kddkg-3"
43
+ })(["width:", ";height:", ";"], function (_ref6) {
44
+ var _ref6$size = _ref6.size,
45
+ size = _ref6$size === void 0 ? 'xs' : _ref6$size;
46
+ return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
47
+ }, function (_ref7) {
44
48
  var _ref7$size = _ref7.size,
45
49
  size = _ref7$size === void 0 ? 'xs' : _ref7$size;
46
50
  return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
47
- }, function (_ref8) {
48
- var _ref8$size = _ref8.size,
49
- size = _ref8$size === void 0 ? 'xs' : _ref8$size;
50
- return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
51
51
  });
52
52
  export var base = /*#__PURE__*/css([""]);
53
53
  export var StyledEmptyState = /*#__PURE__*/styled(EmptyState).withConfig({
54
- componentId: "plasma-new-hope__sc-2kddkg-3"
54
+ componentId: "plasma-new-hope__sc-2kddkg-4"
55
55
  })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], emptyStateTokens.borderRadius, tokens.textFieldBorderRadius, emptyStateTokens.padding, tokens.emptyStatePadding, emptyStateTokens.fontFamily, tokens.textFieldFontFamily, emptyStateTokens.fontSize, tokens.textFieldFontSize, emptyStateTokens.fontStyle, tokens.textFieldFontStyle, emptyStateTokens.fontWeight, tokens.textFieldFontWeight, emptyStateTokens.fontLetterSpacing, tokens.textFieldLetterSpacing, emptyStateTokens.fontLineHeight, tokens.textFieldLineHeight);
56
56
  export var StyledLeftHelper = /*#__PURE__*/styled.span.withConfig({
57
- componentId: "plasma-new-hope__sc-2kddkg-4"
57
+ componentId: "plasma-new-hope__sc-2kddkg-5"
58
58
  })(["margin:0;padding:0;"]);
@@ -217,14 +217,21 @@ export var tokens = {
217
217
  disclosureIconColor: '--plasma-combobox-disclosure-icon-color',
218
218
  disclosureIconColorHover: '--plasma-combobox-disclosure-icon-color-hover',
219
219
  disclosureIconSize: '--plasma-select-disclosure-icon-size',
220
- disclosureIconMargin: '--plasma-select-disclosure-icon-margin'
220
+ disclosureIconMargin: '--plasma-select-disclosure-icon-margin',
221
+ dividerMarginTop: '--plasma-combobox-divider-margin-top',
222
+ dividerMarginTopTight: '--plasma-combobox-divider-margin-top-tight',
223
+ dividerMarginRight: '--plasma-combobox-divider-margin-right',
224
+ dividerMarginBottom: '--plasma-combobox-divider-margin-bottom',
225
+ dividerMarginBottomTight: '--plasma-combobox-divider-margin-bottom-tight',
226
+ dividerMarginLeft: '--plasma-combobox-divider-margin-left',
227
+ dividerColor: '--plasma-combobox-divider-color'
221
228
  };
222
229
  export var constants = {
223
230
  focusColor: '--surface-accent',
224
231
  focusSize: '0.0625rem',
225
232
  background: '--surface-solid-card',
226
233
  boxShadow: '0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04)',
227
- itemBackground: '--plasma-colors-transparent',
234
+ itemBackground: '--surface-clear',
228
235
  textfieldTargetColor: '--text-primary',
229
236
  textfieldOuterLabelColor: '--text-primary',
230
237
  textfieldInnerLabelColor: '--text-secondary',
@@ -238,5 +245,5 @@ export var constants = {
238
245
  fontLetterSpacing: '--plasma-typo-body-xs-letter-spacing',
239
246
  fontLineHeight: '--plasma-typo-body-xs-line-height',
240
247
  cellTitleColor: '--text-primary',
241
- cellBackgroundColor: '--plasma-colors-transparent'
248
+ cellBackgroundColor: '--surface-clear'
242
249
  };
@@ -7,6 +7,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
7
7
  import { flip, shift, size, useFloating, FloatingPortal, offset as offsetMiddleware, autoUpdate } from '@floating-ui/react';
8
8
  import React, { forwardRef } from 'react';
9
9
  import { safeUseId } from '@salutejs/plasma-core';
10
+ // TODO: #2003
11
+ var LIST_PADDING = 2;
10
12
  var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
11
13
  var target = _ref.target,
12
14
  children = _ref.children,
@@ -15,9 +17,8 @@ var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
15
17
  placement = _ref.placement,
16
18
  portal = _ref.portal,
17
19
  listWidth = _ref.listWidth,
18
- _ref$offset = _ref.offset,
19
- offset = _ref$offset === void 0 ? 0 : _ref$offset,
20
- zIndex = _ref.zIndex;
20
+ zIndex = _ref.zIndex,
21
+ isInner = _ref.isInner;
21
22
  var _useFloating = useFloating({
22
23
  whileElementsMounted: function whileElementsMounted(referenceEl, floatingEl, update) {
23
24
  return autoUpdate(referenceEl, floatingEl, update, {
@@ -28,14 +29,17 @@ var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
28
29
  },
29
30
  placement: placement,
30
31
  open: opened,
31
- middleware: [offsetMiddleware(offset), flip({
32
+ middleware: [offsetMiddleware({
33
+ mainAxis: isInner ? LIST_PADDING * 2 : 0,
34
+ alignmentAxis: isInner ? -LIST_PADDING : 0
35
+ }), flip({
32
36
  fallbackAxisSideDirection: 'end'
33
37
  }), shift(), size({
34
38
  apply: function apply(_ref2) {
35
39
  var rects = _ref2.rects,
36
40
  elements = _ref2.elements;
37
41
  Object.assign(elements.floating.style, {
38
- width: listWidth || "".concat(rects.reference.width, "px")
42
+ width: listWidth || "".concat(isInner ? rects.reference.width + LIST_PADDING * 2 : rects.reference.width, "px")
39
43
  });
40
44
  }
41
45
  })]
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { safeUseId } from '@salutejs/plasma-core';
3
3
  import { FloatingPopover } from "../../FloatingPopover";
4
4
  import { isEmpty } from "../../../../../utils";
5
- import { Ul } from "../../Combobox.styles";
5
+ import { Ul, ListWrapper } from "../../Combobox.styles";
6
6
  import { Item } from "./ui";
7
7
  export var Inner = function Inner(_ref) {
8
8
  var item = _ref.item,
@@ -35,7 +35,6 @@ export var Inner = function Inner(_ref) {
35
35
  placement: (item === null || item === void 0 ? void 0 : item.placement) || 'right-start',
36
36
  opened: isCurrentListOpen,
37
37
  onToggle: handleToggle,
38
- offset: 2,
39
38
  target: /*#__PURE__*/React.createElement(Item, {
40
39
  item: item,
41
40
  path: path,
@@ -45,12 +44,13 @@ export var Inner = function Inner(_ref) {
45
44
  ariaExpanded: isCurrentListOpen,
46
45
  ariaLevel: nextLevel,
47
46
  ariaLabel: item.label
48
- })
47
+ }),
48
+ isInner: true
49
+ }, /*#__PURE__*/React.createElement(ListWrapper, {
50
+ listWidth: listWidth
49
51
  }, /*#__PURE__*/React.createElement(Ul, {
50
52
  role: "group",
51
53
  id: listId,
52
- isInnerUl: true,
53
- listWidth: listWidth,
54
54
  virtual: false
55
55
  }, (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.map(function (innerItem, innerIndex) {
56
56
  return /*#__PURE__*/React.createElement(Inner, {
@@ -62,7 +62,7 @@ export var Inner = function Inner(_ref) {
62
62
  index: innerIndex,
63
63
  listWidth: listWidth
64
64
  });
65
- })));
65
+ }))));
66
66
  }
67
67
  return /*#__PURE__*/React.createElement(Item, {
68
68
  item: item,
@@ -75,16 +75,16 @@ export var StyledText = /*#__PURE__*/styled.div.withConfig({
75
75
  })(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
76
76
  export var Wrapper = /*#__PURE__*/styled.li.withConfig({
77
77
  componentId: "plasma-new-hope__sc-1n1xg1s-11"
78
- })(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");color:var(--text-primary);border-radius:var(", ");user-select:none;border-right:2px solid transparent;border-left:2px solid transparent;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], tokens.itemHeight, function (_ref7) {
78
+ })(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");color:var(--text-primary);border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], tokens.itemHeight, function (_ref7) {
79
79
  var variant = _ref7.variant;
80
80
  return "var(".concat(variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding, ")");
81
- }, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, constants.itemBackground, tokens.borderRadius, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({
82
- outlineSize: '0.0625rem',
81
+ }, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, constants.itemBackground, tokens.borderRadius, tokens.dropdownBorderWidth, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({
82
+ outlineSize: '0',
83
83
  outlineOffset: '0',
84
84
  outlineColor: /*#__PURE__*/"var(".concat(constants.focusColor, ")"),
85
- outlineRadius: /*#__PURE__*/"var(".concat(tokens.itemBorderRadius, ")"),
85
+ outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.borderRadius, ") - 0.125rem - var(").concat(tokens.dropdownBorderWidth, ", 0rem))"),
86
86
  hasTransition: false,
87
- customFocusRules: /*#__PURE__*/"\n &.".concat(classes.dropdownItemIsFocused, ":before {\n outline: none;\n box-shadow: 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n }\n ")
87
+ customFocusRules: /*#__PURE__*/"\n &.".concat(classes.dropdownItemIsFocused, ":before {\n outline: none;\n box-shadow: inset 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n }\n ")
88
88
  }));
89
89
  export var StyledCheckboxWrapper = /*#__PURE__*/styled.span.withConfig({
90
90
  componentId: "plasma-new-hope__sc-1n1xg1s-12"
@@ -0,0 +1,32 @@
1
+ import React from 'react';
2
+ import { IconWrapper, StyledCell, StyledCheckbox, StyledCheckboxWrapper, StyledWrapper, Wrapper as ItemWrapper } from "../Inner/ui/Item/Item.styles";
3
+ import { Divider, Wrapper, DividerWrapper } from "./SelectAll.styles";
4
+ export var SelectAll = function SelectAll(_ref) {
5
+ var variant = _ref.variant,
6
+ selectAllOptions = _ref.selectAllOptions;
7
+ return /*#__PURE__*/React.createElement(Wrapper, {
8
+ variant: variant,
9
+ onClick: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.onClick,
10
+ sticky: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.sticky
11
+ }, /*#__PURE__*/React.createElement(ItemWrapper, {
12
+ variant: variant
13
+ }, /*#__PURE__*/React.createElement(IconWrapper, {
14
+ variant: variant
15
+ }, /*#__PURE__*/React.createElement(StyledCheckboxWrapper, {
16
+ onClick: function onClick(e) {
17
+ return e.preventDefault();
18
+ }
19
+ }, /*#__PURE__*/React.createElement(StyledCheckbox, {
20
+ checked: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.checked,
21
+ indeterminate: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.indeterminate,
22
+ appearance: "default"
23
+ }))), /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell
24
+ // TODO: #1548
25
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
26
+ // @ts-ignore
27
+ , {
28
+ title: /*#__PURE__*/React.createElement("span", null, (selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.label) || 'Выбрать всё')
29
+ }))), /*#__PURE__*/React.createElement(DividerWrapper, null, /*#__PURE__*/React.createElement(Divider, {
30
+ variant: variant
31
+ })));
32
+ };
@@ -0,0 +1,20 @@
1
+ import styled from 'styled-components';
2
+ import { tokens, constants } from "../../Combobox.tokens";
3
+ export var Wrapper = /*#__PURE__*/styled.div.withConfig({
4
+ componentId: "plasma-new-hope__sc-10t9fym-0"
5
+ })(["position:", ";z-index:10;top:0;display:flex;flex-direction:column;background:var(", ");margin-bottom:", ";border-top-left-radius:calc(var(", ") - 0.125rem - var(", ",0rem));border-top-right-radius:calc(var(", ") - 0.125rem - var(", ",0rem));"], function (_ref) {
6
+ var sticky = _ref.sticky;
7
+ return sticky ? 'sticky' : 'static';
8
+ }, constants.background, function (_ref2) {
9
+ var variant = _ref2.variant;
10
+ return "var(".concat(variant === 'tight' ? tokens.dividerMarginBottomTight : tokens.dividerMarginBottom, ")");
11
+ }, tokens.borderRadius, tokens.dropdownBorderWidth, tokens.borderRadius, tokens.dropdownBorderWidth);
12
+ export var DividerWrapper = /*#__PURE__*/styled.div.withConfig({
13
+ componentId: "plasma-new-hope__sc-10t9fym-1"
14
+ })(["background:var(", ");"], constants.background);
15
+ export var Divider = /*#__PURE__*/styled.div.withConfig({
16
+ componentId: "plasma-new-hope__sc-10t9fym-2"
17
+ })(["height:0.0625rem;margin-top:", ";margin-right:var(", ");margin-left:var(", ");background:var(", ");"], function (_ref3) {
18
+ var variant = _ref3.variant;
19
+ return "var(".concat(variant === 'tight' ? tokens.dividerMarginTopTight : tokens.dividerMarginTop, ")");
20
+ }, tokens.dividerMarginRight, tokens.dividerMarginLeft, tokens.dividerColor);
@@ -1,3 +1,4 @@
1
1
  export * from "./Inner/Inner";
2
2
  export * from "./Target/Target";
3
- export * from "./VirtualList/VirtualList";
3
+ export * from "./VirtualList/VirtualList";
4
+ export * from "./SelectAll/SelectAll";
@@ -17,7 +17,7 @@ import { focusedPathReducer } from "./reducers/focusedPathReducer";
17
17
  import { DropdownInner } from "./ui";
18
18
  import { base as viewCSS } from "./variations/_view/base";
19
19
  import { base as sizeCSS } from "./variations/_size/base";
20
- import { Ul, base } from "./Dropdown.styles";
20
+ import { Ul, base, ListWrapper } from "./Dropdown.styles";
21
21
  import { childrenWithProps, getItemByFocused, getItemId, getPlacement } from "./utils";
22
22
  import { classes } from "./Dropdown.tokens";
23
23
  import { useKeyNavigation } from "./hooks/useKeyboardNavigation";
@@ -168,7 +168,8 @@ export var dropdownRoot = function dropdownRoot(Root) {
168
168
  onKeyDown: onKeyDown,
169
169
  onContextMenu: openByRightClick ? onContextMenu : undefined
170
170
  }),
171
- zIndex: zIndex
171
+ zIndex: zIndex,
172
+ isInner: false
172
173
  }, /*#__PURE__*/React.createElement(Root, _extends({
173
174
  className: cx(className, classes.dropdownRoot),
174
175
  ref: ref,
@@ -177,13 +178,14 @@ export var dropdownRoot = function dropdownRoot(Root) {
177
178
  style: {
178
179
  display: 'inline-block'
179
180
  }
180
- }, rest), /*#__PURE__*/React.createElement(Ul, {
181
+ }, rest), /*#__PURE__*/React.createElement(ListWrapper, {
182
+ listWidth: listWidth
183
+ }, /*#__PURE__*/React.createElement(Ul, {
181
184
  ref: targetRef,
182
185
  id: "".concat(treeId, "_tree_level_1"),
183
186
  role: "tree",
184
187
  listOverflow: listOverflow,
185
- listMaxHeight: listMaxHeight || listHeight,
186
- listWidth: listWidth
188
+ listMaxHeight: listMaxHeight || listHeight
187
189
  }, beforeList, items.map(function (item, index) {
188
190
  return /*#__PURE__*/React.createElement(DropdownInner, {
189
191
  key: "".concat(index, "/0"),
@@ -197,7 +199,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
197
199
  listMaxHeight: listMaxHeight || listHeight,
198
200
  listWidth: listWidth
199
201
  });
200
- }), afterList))));
202
+ }), afterList)))));
201
203
  });
202
204
  };
203
205
  export var dropdownConfig = {
@@ -2,19 +2,19 @@ import styled from 'styled-components';
2
2
  import { css } from 'styled-components';
3
3
  import { getCorrectHeight } from "./utils";
4
4
  import { tokens, constants } from "./Dropdown.tokens";
5
- export var Ul = /*#__PURE__*/styled.ul.withConfig({
5
+ export var ListWrapper = /*#__PURE__*/styled.div.withConfig({
6
6
  componentId: "plasma-new-hope__sc-13ezpo5-0"
7
- })(["box-sizing:border-box;width:", ";max-height:", ";margin:", ";padding:var(", ") 0;overflow-y:", ";background:var(", ");box-shadow:", ";border-radius:var(", ");border:var(", ") solid var(", ");"], function (_ref) {
7
+ })(["width:", ";padding:calc(var(", ") + var(", ",0rem));border-radius:var(", ");box-sizing:border-box;background:var(", ");box-shadow:", ",inset 0 0 0 var(", ",0) var(", ",transparent);"], function (_ref) {
8
8
  var listWidth = _ref.listWidth;
9
9
  return listWidth || "var(".concat(tokens.width, ")");
10
- }, function (_ref2) {
10
+ }, tokens.padding, tokens.borderWidth, tokens.borderRadius, constants.background, constants.boxShadow, tokens.borderWidth, tokens.borderColor);
11
+ export var Ul = /*#__PURE__*/styled.ul.withConfig({
12
+ componentId: "plasma-new-hope__sc-13ezpo5-1"
13
+ })(["max-height:", ";overflow-y:", ";border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));margin:0;padding:0;"], function (_ref2) {
11
14
  var listMaxHeight = _ref2.listMaxHeight;
12
15
  return listMaxHeight ? getCorrectHeight(listMaxHeight) : 'auto';
13
16
  }, function (_ref3) {
14
- var isInnerUl = _ref3.isInnerUl;
15
- return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0.125rem 0") : 0;
16
- }, tokens.padding, function (_ref4) {
17
- var listOverflow = _ref4.listOverflow;
17
+ var listOverflow = _ref3.listOverflow;
18
18
  return listOverflow || 'visible';
19
- }, constants.background, constants.boxShadow, tokens.borderRadius, tokens.borderWidth, tokens.borderColor);
19
+ }, tokens.borderRadius, tokens.borderWidth);
20
20
  export var base = /*#__PURE__*/css([""]);
@@ -163,8 +163,8 @@ export var constants = {
163
163
  background: '--surface-solid-card-brightness',
164
164
  boxShadow: '0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04)',
165
165
  disclosureIconColor: '--text-secondary',
166
- itemBackground: '--plasma-colors-transparent',
166
+ itemBackground: '--surface-clear',
167
167
  opacity: '0.4',
168
168
  cellTitleColor: '--text-primary',
169
- cellBackgroundColor: '--plasma-colors-transparent'
169
+ cellBackgroundColor: '--surface-clear'
170
170
  };
@@ -7,6 +7,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
7
7
  import { flip, shift, useFloating, FloatingPortal, offset as offsetMiddleware, autoPlacement, autoUpdate } from '@floating-ui/react';
8
8
  import React, { forwardRef } from 'react';
9
9
  import { safeUseId } from '@salutejs/plasma-core';
10
+ // TODO: #2003
11
+ var LIST_PADDING = 2;
10
12
  var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
11
13
  var target = _ref.target,
12
14
  children = _ref.children,
@@ -14,8 +16,7 @@ var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
14
16
  onToggle = _ref.onToggle,
15
17
  placement = _ref.placement,
16
18
  portal = _ref.portal,
17
- _ref$offset = _ref.offset,
18
- offset = _ref$offset === void 0 ? [0, 0] : _ref$offset,
19
+ offset = _ref.offset,
19
20
  isInner = _ref.isInner,
20
21
  trigger = _ref.trigger,
21
22
  zIndex = _ref.zIndex;
@@ -30,8 +31,8 @@ var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
30
31
  placement: placement === 'auto' ? undefined : placement,
31
32
  open: opened,
32
33
  middleware: [placement === 'auto' && autoPlacement(), offsetMiddleware({
33
- mainAxis: offset[1],
34
- crossAxis: offset[0]
34
+ mainAxis: (offset === null || offset === void 0 ? void 0 : offset[1]) || (isInner ? LIST_PADDING * 2 : 0),
35
+ crossAxis: (offset === null || offset === void 0 ? void 0 : offset[0]) || (isInner ? -LIST_PADDING : 0)
35
36
  }), flip({
36
37
  fallbackAxisSideDirection: 'end'
37
38
  }), shift()]
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { safeUseId } from '@salutejs/plasma-core';
3
3
  import { DropdownItem } from "../DropdownItem/DropdownItem";
4
- import { Ul } from "../../Dropdown.styles";
4
+ import { Ul, ListWrapper } from "../../Dropdown.styles";
5
5
  import { FloatingPopover } from "../../FloatingPopover";
6
6
  import { getPlacement } from "../../utils";
7
7
  var DropdownInner = function DropdownInner(_ref) {
@@ -49,13 +49,13 @@ var DropdownInner = function DropdownInner(_ref) {
49
49
  ariaLabel: item.label
50
50
  }),
51
51
  isInner: true
52
+ }, /*#__PURE__*/React.createElement(ListWrapper, {
53
+ listWidth: listWidth
52
54
  }, /*#__PURE__*/React.createElement(Ul, {
53
55
  id: listId,
54
56
  role: "group",
55
- isInnerUl: true,
56
57
  listMaxHeight: listMaxHeight,
57
- listOverflow: listOverflow,
58
- listWidth: listWidth
58
+ listOverflow: listOverflow
59
59
  }, item.items.map(function (innerItem, innerIndex) {
60
60
  return /*#__PURE__*/React.createElement(DropdownInner, {
61
61
  key: "".concat(innerIndex, "/").concat(currentLevel),
@@ -69,7 +69,7 @@ var DropdownInner = function DropdownInner(_ref) {
69
69
  listOverflow: listOverflow,
70
70
  listWidth: listWidth
71
71
  });
72
- })));
72
+ }))));
73
73
  }
74
74
  return /*#__PURE__*/React.createElement(DropdownItem, {
75
75
  item: item,
@@ -44,19 +44,19 @@ export var Divider = /*#__PURE__*/styled.div.withConfig({
44
44
  }, tokens.dividerMarginLeft, tokens.dividerColor);
45
45
  export var Wrapper = /*#__PURE__*/styled.li.withConfig({
46
46
  componentId: "plasma-new-hope__sc-hs0ek1-5"
47
- })(["display:flex;align-items:center;gap:", ";min-height:var(", ");margin:var(", ",0 calc(0.125rem + var(", ",0rem)));box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");border-radius:var( ", ",calc(var(", ") - 0.125rem - var(", ",0rem)) );user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], function (_ref5) {
47
+ })(["display:flex;align-items:center;gap:", ";min-height:var(", ");margin:var(", ",0);box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");border-radius:var( ", ",calc(var(", ") - 0.125rem - var(", ",0rem)) );user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], function (_ref5) {
48
48
  var variant = _ref5.variant;
49
49
  return "var(".concat(variant === 'tight' ? tokens.itemGapTight : tokens.itemGap, ")");
50
- }, tokens.itemHeight, tokens.itemMargin, tokens.borderWidth, function (_ref6) {
50
+ }, tokens.itemHeight, tokens.itemMargin, function (_ref6) {
51
51
  var variant = _ref6.variant;
52
52
  return "var(".concat(variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding, ")");
53
53
  }, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, constants.itemBackground, tokens.itemBorderRadius, tokens.borderRadius, tokens.borderWidth, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({
54
- outlineSize: '0.0625rem',
54
+ outlineSize: '0',
55
55
  outlineOffset: '0',
56
56
  outlineColor: /*#__PURE__*/"var(".concat(constants.focusColor, ")"),
57
- outlineRadius: /*#__PURE__*/"var(".concat(tokens.itemBorderRadius, ")"),
57
+ outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.borderRadius, ") - 0.125rem - var(").concat(tokens.borderWidth, ", 0rem))"),
58
58
  hasTransition: false,
59
- customFocusRules: /*#__PURE__*/"\n &.".concat(classes.dropdownItemIsFocused, ":before {\n outline: none;\n box-shadow: 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n }\n ")
59
+ customFocusRules: /*#__PURE__*/"\n &.".concat(classes.dropdownItemIsFocused, ":before {\n outline: none;\n box-shadow: inset 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n }\n ")
60
60
  }));
61
61
  export var RenderItemWrapper = /*#__PURE__*/styled.div.withConfig({
62
62
  componentId: "plasma-new-hope__sc-hs0ek1-6"
@@ -184,6 +184,9 @@ export var popoverRoot = function popoverRoot(Root) {
184
184
  if (typeof frame !== 'string' && frame && frame.current) {
185
185
  portal = frame.current;
186
186
  }
187
+ if (typeof frame === 'string' && frame) {
188
+ portal = document.getElementById(frame);
189
+ }
187
190
  if (!usePortal && /*#__PURE__*/isValidElement(target)) {
188
191
  portal = rootRef.current;
189
192
  }