@bundle-stats/ui 4.22.3 → 4.23.0-beta.10

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 (395) hide show
  1. package/lib/app/app.js +4 -0
  2. package/lib/app/app.js.map +1 -1
  3. package/lib/app/app.module.css +14 -5
  4. package/lib/app/header/header.module.css +1 -3
  5. package/lib/components/asset-name/asset-name.js +8 -7
  6. package/lib/components/asset-name/asset-name.js.map +1 -1
  7. package/lib/components/asset-name/asset-name.module.css +11 -10
  8. package/lib/components/bundle-assets/bundle-assets.js +4 -2
  9. package/lib/components/bundle-assets/bundle-assets.js.map +1 -1
  10. package/lib/components/bundle-assets/bundle-assets.module.css +0 -12
  11. package/lib/components/bundle-assets/index.js +2 -1
  12. package/lib/components/bundle-assets/index.js.map +1 -1
  13. package/lib/components/bundle-assets-totals/bundle-assets-totals.js +4 -2
  14. package/lib/components/bundle-assets-totals/bundle-assets-totals.js.map +1 -1
  15. package/lib/components/bundle-modules/bundle-modules.js +5 -3
  16. package/lib/components/bundle-modules/bundle-modules.js.map +1 -1
  17. package/lib/components/bundle-modules/bundle-modules.module.css +2 -16
  18. package/lib/components/bundle-modules/index.js +2 -1
  19. package/lib/components/bundle-modules/index.js.map +1 -1
  20. package/lib/components/bundle-packages/bundle-packages.js +5 -3
  21. package/lib/components/bundle-packages/bundle-packages.js.map +1 -1
  22. package/lib/components/bundle-packages/bundle-packages.module.css +18 -22
  23. package/lib/components/delta/delta.js +3 -13
  24. package/lib/components/delta/delta.js.map +1 -1
  25. package/lib/components/delta/delta.module.css +13 -12
  26. package/lib/components/delta/index.js.map +1 -1
  27. package/lib/components/entry-info/entry-info.js +4 -2
  28. package/lib/components/entry-info/entry-info.js.map +1 -1
  29. package/lib/components/entry-info/entry-info.module.css +7 -2
  30. package/lib/components/index.js +3 -1
  31. package/lib/components/index.js.map +1 -1
  32. package/lib/components/insight-icon/insight-icon.module.css +6 -6
  33. package/lib/components/job-name/job-name.js +1 -2
  34. package/lib/components/job-name/job-name.js.map +1 -1
  35. package/lib/components/jobs-header/jobs-header.js +1 -1
  36. package/lib/components/jobs-header/jobs-header.js.map +1 -1
  37. package/lib/components/jobs-header/jobs-header.module.css +0 -1
  38. package/lib/components/metric-change-legend/index.js +18 -0
  39. package/lib/components/metric-change-legend/index.js.map +1 -0
  40. package/lib/components/metric-change-legend/metric-change-legend.js +91 -0
  41. package/lib/components/metric-change-legend/metric-change-legend.js.map +1 -0
  42. package/lib/components/metric-change-legend/metric-change-legend.module.css +80 -0
  43. package/lib/components/metric-run-info/metric-run-info.js +24 -8
  44. package/lib/components/metric-run-info/metric-run-info.js.map +1 -1
  45. package/lib/components/metrics-display-selector/metrics-display-selector.js +7 -9
  46. package/lib/components/metrics-display-selector/metrics-display-selector.js.map +1 -1
  47. package/lib/components/metrics-display-selector/metrics-display-selector.module.css +0 -27
  48. package/lib/components/metrics-table/metrics-table.js +31 -20
  49. package/lib/components/metrics-table/metrics-table.js.map +1 -1
  50. package/lib/components/metrics-table/metrics-table.module.css +4 -12
  51. package/lib/components/metrics-table-header/metrics-table-header.js +6 -6
  52. package/lib/components/metrics-table-header/metrics-table-header.js.map +1 -1
  53. package/lib/components/metrics-table-header/metrics-table-header.module.css +8 -12
  54. package/lib/components/metrics-table-options/metrics-table-options.js +4 -5
  55. package/lib/components/metrics-table-options/metrics-table-options.js.map +1 -1
  56. package/lib/components/metrics-table-row-count/index.js +18 -0
  57. package/lib/components/metrics-table-row-count/index.js.map +1 -0
  58. package/lib/components/metrics-table-row-count/metrics-table-row-count.js +17 -0
  59. package/lib/components/metrics-table-row-count/metrics-table-row-count.js.map +1 -0
  60. package/lib/components/metrics-table-row-count/metrics-table-row-count.module.css +5 -0
  61. package/lib/components/metrics-table-title/metrics-table-title.js +1 -1
  62. package/lib/components/metrics-table-title/metrics-table-title.js.map +1 -1
  63. package/lib/components/metrics-treemap/metrics-treemap.constants.js +3 -1
  64. package/lib/components/metrics-treemap/metrics-treemap.constants.js.map +1 -1
  65. package/lib/components/metrics-treemap/metrics-treemap.js +46 -113
  66. package/lib/components/metrics-treemap/metrics-treemap.js.map +1 -1
  67. package/lib/components/metrics-treemap/metrics-treemap.module.css +3 -274
  68. package/lib/components/metrics-treemap/metrics-treemap.utils.js +81 -16
  69. package/lib/components/metrics-treemap/metrics-treemap.utils.js.map +1 -1
  70. package/lib/components/metrics-treemap/tile/index.js +18 -0
  71. package/lib/components/metrics-treemap/tile/index.js.map +1 -0
  72. package/lib/components/metrics-treemap/tile/tile.js +79 -0
  73. package/lib/components/metrics-treemap/tile/tile.js.map +1 -0
  74. package/lib/components/metrics-treemap/tile/tile.module.css +145 -0
  75. package/lib/components/metrics-treemap/tile-group/index.js +18 -0
  76. package/lib/components/metrics-treemap/tile-group/index.js.map +1 -0
  77. package/lib/components/metrics-treemap/tile-group/tile-group.js +75 -0
  78. package/lib/components/metrics-treemap/tile-group/tile-group.js.map +1 -0
  79. package/lib/components/metrics-treemap/tile-group/tile-group.module.css +57 -0
  80. package/lib/components/metrics-treemap/tile-group-title/index.js +18 -0
  81. package/lib/components/metrics-treemap/tile-group-title/index.js.map +1 -0
  82. package/lib/components/metrics-treemap/tile-group-title/tile-group-title.js +24 -0
  83. package/lib/components/metrics-treemap/tile-group-title/tile-group-title.js.map +1 -0
  84. package/lib/components/metrics-treemap/tile-group-title/tile-group-title.module.css +48 -0
  85. package/lib/components/run-info/run-info.js +26 -14
  86. package/lib/components/run-info/run-info.js.map +1 -1
  87. package/lib/components/run-info/run-info.module.css +35 -26
  88. package/lib/components/sort-button/sort-button.module.css +0 -2
  89. package/lib/components/summary/summary.js +10 -10
  90. package/lib/components/summary/summary.js.map +1 -1
  91. package/lib/components/summary/summary.module.css +60 -14
  92. package/lib/constants.js +13 -1
  93. package/lib/constants.js.map +1 -1
  94. package/lib/css/default.css +7 -4
  95. package/lib/css/variables.css +84 -60
  96. package/lib/layout/flex-stack/flex-stack.js +2 -2
  97. package/lib/layout/flex-stack/flex-stack.js.map +1 -1
  98. package/lib/layout/flex-stack/flex-stack.module.css +65 -10
  99. package/lib/query-state.js +6 -3
  100. package/lib/query-state.js.map +1 -1
  101. package/lib/ui/button/button.js +3 -2
  102. package/lib/ui/button/button.js.map +1 -1
  103. package/lib/ui/button/button.module.css +38 -27
  104. package/lib/ui/control-group/control-group.js +1 -1
  105. package/lib/ui/control-group/control-group.js.map +1 -1
  106. package/lib/ui/copy-to-clipboard/copy-to-clipboard.module.css +2 -2
  107. package/lib/ui/dialog/dialog.js +7 -3
  108. package/lib/ui/dialog/dialog.js.map +1 -1
  109. package/lib/ui/dialog/dialog.module.css +27 -0
  110. package/lib/ui/dropdown/dropdown.js +13 -4
  111. package/lib/ui/dropdown/dropdown.js.map +1 -1
  112. package/lib/ui/dropdown/dropdown.module.css +60 -7
  113. package/lib/ui/filters/filters.js +28 -16
  114. package/lib/ui/filters/filters.js.map +1 -1
  115. package/lib/ui/filters/filters.module.css +3 -19
  116. package/lib/ui/hover-card/hover-card.js +7 -1
  117. package/lib/ui/hover-card/hover-card.js.map +1 -1
  118. package/lib/ui/hover-card/hover-card.module.css +18 -5
  119. package/lib/ui/input/input.module.css +2 -2
  120. package/lib/ui/table/table.module.css +12 -6
  121. package/lib/ui/tabs/tabs.module.css +13 -9
  122. package/lib/ui/tag/tag.module.css +0 -2
  123. package/lib/ui/textarea/textarea.module.css +2 -2
  124. package/lib/ui/toolbar/toolbar.js +2 -1
  125. package/lib/ui/toolbar/toolbar.js.map +1 -1
  126. package/lib/ui/toolbar/toolbar.module.css +0 -6
  127. package/lib/ui/tooltip/tooltip.js +6 -1
  128. package/lib/ui/tooltip/tooltip.js.map +1 -1
  129. package/lib/ui/tooltip/tooltip.module.css +12 -1
  130. package/lib/utils/index.js +1 -0
  131. package/lib/utils/index.js.map +1 -1
  132. package/lib/utils/portal.js +10 -0
  133. package/lib/utils/portal.js.map +1 -0
  134. package/lib-esm/app/app.js +5 -1
  135. package/lib-esm/app/app.js.map +1 -1
  136. package/lib-esm/app/app.module.css +14 -5
  137. package/lib-esm/app/header/header.module.css +1 -3
  138. package/lib-esm/components/asset-name/asset-name.js +8 -7
  139. package/lib-esm/components/asset-name/asset-name.js.map +1 -1
  140. package/lib-esm/components/asset-name/asset-name.module.css +11 -10
  141. package/lib-esm/components/bundle-assets/bundle-assets.js +4 -2
  142. package/lib-esm/components/bundle-assets/bundle-assets.js.map +1 -1
  143. package/lib-esm/components/bundle-assets/bundle-assets.module.css +0 -12
  144. package/lib-esm/components/bundle-assets/index.js +2 -1
  145. package/lib-esm/components/bundle-assets/index.js.map +1 -1
  146. package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js +4 -2
  147. package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js.map +1 -1
  148. package/lib-esm/components/bundle-modules/bundle-modules.js +5 -3
  149. package/lib-esm/components/bundle-modules/bundle-modules.js.map +1 -1
  150. package/lib-esm/components/bundle-modules/bundle-modules.module.css +2 -16
  151. package/lib-esm/components/bundle-modules/index.js +2 -1
  152. package/lib-esm/components/bundle-modules/index.js.map +1 -1
  153. package/lib-esm/components/bundle-packages/bundle-packages.js +5 -3
  154. package/lib-esm/components/bundle-packages/bundle-packages.js.map +1 -1
  155. package/lib-esm/components/bundle-packages/bundle-packages.module.css +18 -22
  156. package/lib-esm/components/delta/delta.js +3 -13
  157. package/lib-esm/components/delta/delta.js.map +1 -1
  158. package/lib-esm/components/delta/delta.module.css +13 -12
  159. package/lib-esm/components/delta/index.js.map +1 -1
  160. package/lib-esm/components/entry-info/entry-info.js +4 -2
  161. package/lib-esm/components/entry-info/entry-info.js.map +1 -1
  162. package/lib-esm/components/entry-info/entry-info.module.css +7 -2
  163. package/lib-esm/components/index.js +1 -0
  164. package/lib-esm/components/index.js.map +1 -1
  165. package/lib-esm/components/insight-icon/insight-icon.module.css +6 -6
  166. package/lib-esm/components/job-name/job-name.js +1 -2
  167. package/lib-esm/components/job-name/job-name.js.map +1 -1
  168. package/lib-esm/components/jobs-header/jobs-header.js +1 -1
  169. package/lib-esm/components/jobs-header/jobs-header.js.map +1 -1
  170. package/lib-esm/components/jobs-header/jobs-header.module.css +0 -1
  171. package/lib-esm/components/metric-change-legend/index.js +2 -0
  172. package/lib-esm/components/metric-change-legend/index.js.map +1 -0
  173. package/lib-esm/components/metric-change-legend/metric-change-legend.js +84 -0
  174. package/lib-esm/components/metric-change-legend/metric-change-legend.js.map +1 -0
  175. package/lib-esm/components/metric-change-legend/metric-change-legend.module.css +80 -0
  176. package/lib-esm/components/metric-run-info/metric-run-info.js +24 -8
  177. package/lib-esm/components/metric-run-info/metric-run-info.js.map +1 -1
  178. package/lib-esm/components/metrics-display-selector/metrics-display-selector.js +7 -9
  179. package/lib-esm/components/metrics-display-selector/metrics-display-selector.js.map +1 -1
  180. package/lib-esm/components/metrics-display-selector/metrics-display-selector.module.css +0 -27
  181. package/lib-esm/components/metrics-table/metrics-table.js +32 -20
  182. package/lib-esm/components/metrics-table/metrics-table.js.map +1 -1
  183. package/lib-esm/components/metrics-table/metrics-table.module.css +4 -12
  184. package/lib-esm/components/metrics-table-header/metrics-table-header.js +6 -6
  185. package/lib-esm/components/metrics-table-header/metrics-table-header.js.map +1 -1
  186. package/lib-esm/components/metrics-table-header/metrics-table-header.module.css +8 -12
  187. package/lib-esm/components/metrics-table-options/metrics-table-options.js +5 -6
  188. package/lib-esm/components/metrics-table-options/metrics-table-options.js.map +1 -1
  189. package/lib-esm/components/metrics-table-row-count/index.js +2 -0
  190. package/lib-esm/components/metrics-table-row-count/index.js.map +1 -0
  191. package/lib-esm/components/metrics-table-row-count/metrics-table-row-count.js +10 -0
  192. package/lib-esm/components/metrics-table-row-count/metrics-table-row-count.js.map +1 -0
  193. package/lib-esm/components/metrics-table-row-count/metrics-table-row-count.module.css +5 -0
  194. package/lib-esm/components/metrics-table-title/metrics-table-title.js +1 -1
  195. package/lib-esm/components/metrics-table-title/metrics-table-title.js.map +1 -1
  196. package/lib-esm/components/metrics-treemap/metrics-treemap.constants.js +2 -0
  197. package/lib-esm/components/metrics-treemap/metrics-treemap.constants.js.map +1 -1
  198. package/lib-esm/components/metrics-treemap/metrics-treemap.js +52 -120
  199. package/lib-esm/components/metrics-treemap/metrics-treemap.js.map +1 -1
  200. package/lib-esm/components/metrics-treemap/metrics-treemap.module.css +3 -274
  201. package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js +80 -18
  202. package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js.map +1 -1
  203. package/lib-esm/components/metrics-treemap/tile/index.js +2 -0
  204. package/lib-esm/components/metrics-treemap/tile/index.js.map +1 -0
  205. package/lib-esm/components/metrics-treemap/tile/tile.js +40 -0
  206. package/lib-esm/components/metrics-treemap/tile/tile.js.map +1 -0
  207. package/lib-esm/components/metrics-treemap/tile/tile.module.css +145 -0
  208. package/lib-esm/components/metrics-treemap/tile-group/index.js +2 -0
  209. package/lib-esm/components/metrics-treemap/tile-group/index.js.map +1 -0
  210. package/lib-esm/components/metrics-treemap/tile-group/tile-group.js +35 -0
  211. package/lib-esm/components/metrics-treemap/tile-group/tile-group.js.map +1 -0
  212. package/lib-esm/components/metrics-treemap/tile-group/tile-group.module.css +57 -0
  213. package/lib-esm/components/metrics-treemap/tile-group-title/index.js +2 -0
  214. package/lib-esm/components/metrics-treemap/tile-group-title/index.js.map +1 -0
  215. package/lib-esm/components/metrics-treemap/tile-group-title/tile-group-title.js +17 -0
  216. package/lib-esm/components/metrics-treemap/tile-group-title/tile-group-title.js.map +1 -0
  217. package/lib-esm/components/metrics-treemap/tile-group-title/tile-group-title.module.css +48 -0
  218. package/lib-esm/components/run-info/run-info.js +26 -14
  219. package/lib-esm/components/run-info/run-info.js.map +1 -1
  220. package/lib-esm/components/run-info/run-info.module.css +35 -26
  221. package/lib-esm/components/sort-button/sort-button.module.css +0 -2
  222. package/lib-esm/components/summary/summary.js +11 -11
  223. package/lib-esm/components/summary/summary.js.map +1 -1
  224. package/lib-esm/components/summary/summary.module.css +60 -14
  225. package/lib-esm/constants.js +12 -0
  226. package/lib-esm/constants.js.map +1 -1
  227. package/lib-esm/css/default.css +7 -4
  228. package/lib-esm/css/variables.css +84 -60
  229. package/lib-esm/layout/flex-stack/flex-stack.js +3 -2
  230. package/lib-esm/layout/flex-stack/flex-stack.js.map +1 -1
  231. package/lib-esm/layout/flex-stack/flex-stack.module.css +65 -10
  232. package/lib-esm/query-state.js +7 -4
  233. package/lib-esm/query-state.js.map +1 -1
  234. package/lib-esm/ui/button/button.js +3 -2
  235. package/lib-esm/ui/button/button.js.map +1 -1
  236. package/lib-esm/ui/button/button.module.css +38 -27
  237. package/lib-esm/ui/control-group/control-group.js +1 -1
  238. package/lib-esm/ui/control-group/control-group.js.map +1 -1
  239. package/lib-esm/ui/copy-to-clipboard/copy-to-clipboard.module.css +2 -2
  240. package/lib-esm/ui/dialog/dialog.js +7 -3
  241. package/lib-esm/ui/dialog/dialog.js.map +1 -1
  242. package/lib-esm/ui/dialog/dialog.module.css +27 -0
  243. package/lib-esm/ui/dropdown/dropdown.js +11 -3
  244. package/lib-esm/ui/dropdown/dropdown.js.map +1 -1
  245. package/lib-esm/ui/dropdown/dropdown.module.css +60 -7
  246. package/lib-esm/ui/filters/filters.js +29 -17
  247. package/lib-esm/ui/filters/filters.js.map +1 -1
  248. package/lib-esm/ui/filters/filters.module.css +3 -19
  249. package/lib-esm/ui/hover-card/hover-card.js +7 -1
  250. package/lib-esm/ui/hover-card/hover-card.js.map +1 -1
  251. package/lib-esm/ui/hover-card/hover-card.module.css +18 -5
  252. package/lib-esm/ui/input/input.module.css +2 -2
  253. package/lib-esm/ui/table/table.module.css +12 -6
  254. package/lib-esm/ui/tabs/tabs.module.css +13 -9
  255. package/lib-esm/ui/tag/tag.module.css +0 -2
  256. package/lib-esm/ui/textarea/textarea.module.css +2 -2
  257. package/lib-esm/ui/toolbar/toolbar.js +2 -1
  258. package/lib-esm/ui/toolbar/toolbar.js.map +1 -1
  259. package/lib-esm/ui/toolbar/toolbar.module.css +0 -6
  260. package/lib-esm/ui/tooltip/tooltip.js +6 -1
  261. package/lib-esm/ui/tooltip/tooltip.js.map +1 -1
  262. package/lib-esm/ui/tooltip/tooltip.module.css +12 -1
  263. package/lib-esm/utils/index.js +1 -0
  264. package/lib-esm/utils/index.js.map +1 -1
  265. package/lib-esm/utils/portal.js +6 -0
  266. package/lib-esm/utils/portal.js.map +1 -0
  267. package/package.json +18 -18
  268. package/src/app/app.jsx +7 -1
  269. package/src/app/app.module.css +14 -5
  270. package/src/app/header/header.module.css +1 -3
  271. package/src/components/asset-name/asset-name.module.css +11 -10
  272. package/src/components/asset-name/asset-name.tsx +17 -14
  273. package/src/components/bundle-assets/bundle-assets.module.css +0 -12
  274. package/src/components/bundle-assets/bundle-assets.tsx +8 -1
  275. package/src/components/bundle-assets/index.tsx +3 -1
  276. package/src/components/bundle-assets-totals/bundle-assets-totals.jsx +6 -4
  277. package/src/components/bundle-modules/bundle-modules.module.css +2 -16
  278. package/src/components/bundle-modules/bundle-modules.tsx +10 -3
  279. package/src/components/bundle-modules/index.tsx +3 -1
  280. package/src/components/bundle-packages/bundle-packages.jsx +14 -3
  281. package/src/components/bundle-packages/bundle-packages.module.css +18 -22
  282. package/src/components/delta/delta.module.css +13 -12
  283. package/src/components/delta/delta.tsx +32 -0
  284. package/src/components/entry-info/entry-info.module.css +7 -2
  285. package/src/components/entry-info/entry-info.tsx +9 -3
  286. package/src/components/index.ts +3 -0
  287. package/src/components/insight-icon/insight-icon.module.css +6 -6
  288. package/src/components/job-name/job-name.jsx +2 -3
  289. package/src/components/jobs-header/jobs-header.module.css +0 -1
  290. package/src/components/jobs-header/jobs-header.tsx +2 -2
  291. package/src/components/metric-change-legend/index.ts +1 -0
  292. package/src/components/metric-change-legend/metric-change-legend.module.css +80 -0
  293. package/src/components/metric-change-legend/metric-change-legend.stories.tsx +13 -0
  294. package/src/components/metric-change-legend/metric-change-legend.tsx +148 -0
  295. package/src/components/metric-run-info/metric-run-info.stories.tsx +9 -0
  296. package/src/components/metric-run-info/metric-run-info.tsx +39 -17
  297. package/src/components/metrics-display-selector/metrics-display-selector.module.css +0 -27
  298. package/src/components/metrics-display-selector/metrics-display-selector.tsx +25 -37
  299. package/src/components/metrics-table/metrics-table.module.css +4 -12
  300. package/src/components/metrics-table/metrics-table.tsx +70 -39
  301. package/src/components/metrics-table-header/metrics-table-header.module.css +8 -12
  302. package/src/components/metrics-table-header/metrics-table-header.tsx +5 -6
  303. package/src/components/metrics-table-options/metrics-table-options.tsx +13 -14
  304. package/src/components/metrics-table-row-count/index.ts +1 -0
  305. package/src/components/metrics-table-row-count/metrics-table-row-count.module.css +5 -0
  306. package/src/components/metrics-table-row-count/metrics-table-row-count.tsx +21 -0
  307. package/src/components/metrics-table-title/metrics-table-title.jsx +1 -1
  308. package/src/components/metrics-treemap/metrics-treemap.constants.ts +9 -0
  309. package/src/components/metrics-treemap/metrics-treemap.module.css +3 -274
  310. package/src/components/metrics-treemap/metrics-treemap.stories.utils.ts +46 -0
  311. package/src/components/metrics-treemap/metrics-treemap.tsx +123 -428
  312. package/src/components/metrics-treemap/metrics-treemap.utils.ts +161 -27
  313. package/src/components/metrics-treemap/tile/index.ts +1 -0
  314. package/src/components/metrics-treemap/tile/tile.module.css +145 -0
  315. package/src/components/metrics-treemap/tile/tile.stories.tsx +139 -0
  316. package/src/components/metrics-treemap/tile/tile.tsx +121 -0
  317. package/src/components/metrics-treemap/tile-group/index.ts +1 -0
  318. package/src/components/metrics-treemap/tile-group/tile-group.module.css +57 -0
  319. package/src/components/metrics-treemap/tile-group/tile-group.stories.tsx +163 -0
  320. package/src/components/metrics-treemap/tile-group/tile-group.tsx +177 -0
  321. package/src/components/metrics-treemap/tile-group-title/index.ts +1 -0
  322. package/src/components/metrics-treemap/tile-group-title/tile-group-title.module.css +48 -0
  323. package/src/components/metrics-treemap/tile-group-title/tile-group-title.stories.tsx +88 -0
  324. package/src/components/metrics-treemap/tile-group-title/tile-group-title.tsx +51 -0
  325. package/src/components/run-info/run-info.module.css +35 -26
  326. package/src/components/run-info/run-info.stories.tsx +16 -10
  327. package/src/components/run-info/run-info.tsx +132 -73
  328. package/src/components/sort-button/sort-button.module.css +0 -2
  329. package/src/components/summary/summary.module.css +60 -14
  330. package/src/components/summary/summary.tsx +50 -52
  331. package/src/constants.ts +13 -0
  332. package/src/css/default.css +7 -4
  333. package/src/css/variables.css +84 -60
  334. package/src/layout/flex-stack/flex-stack.module.css +65 -10
  335. package/src/layout/flex-stack/flex-stack.stories.tsx +68 -9
  336. package/src/layout/flex-stack/flex-stack.tsx +24 -4
  337. package/src/query-state.tsx +9 -4
  338. package/src/ui/button/button.module.css +38 -27
  339. package/src/ui/button/button.stories.tsx +1 -1
  340. package/src/ui/button/button.tsx +3 -1
  341. package/src/ui/control-group/control-group.tsx +1 -1
  342. package/src/ui/copy-to-clipboard/copy-to-clipboard.module.css +2 -2
  343. package/src/ui/dialog/dialog.module.css +27 -0
  344. package/src/ui/dialog/dialog.stories.tsx +8 -0
  345. package/src/ui/dialog/dialog.tsx +16 -2
  346. package/src/ui/dropdown/dropdown.module.css +60 -7
  347. package/src/ui/dropdown/dropdown.stories.tsx +6 -0
  348. package/src/ui/dropdown/dropdown.tsx +17 -2
  349. package/src/ui/filters/filters.module.css +3 -19
  350. package/src/ui/filters/filters.tsx +131 -67
  351. package/src/ui/hover-card/hover-card.module.css +18 -5
  352. package/src/ui/hover-card/hover-card.tsx +7 -1
  353. package/src/ui/input/input.module.css +2 -2
  354. package/src/ui/table/table.module.css +12 -6
  355. package/src/ui/tabs/tabs.module.css +13 -9
  356. package/src/ui/tag/tag.module.css +0 -2
  357. package/src/ui/textarea/textarea.module.css +2 -2
  358. package/src/ui/toolbar/toolbar.jsx +4 -1
  359. package/src/ui/toolbar/toolbar.module.css +0 -6
  360. package/src/ui/tooltip/tooltip.module.css +12 -1
  361. package/src/ui/tooltip/tooltip.tsx +6 -1
  362. package/src/utils/index.ts +1 -0
  363. package/src/utils/portal.ts +9 -0
  364. package/types/components/delta/delta.d.ts +7 -21
  365. package/types/components/delta/index.d.ts +1 -1
  366. package/types/components/index.d.ts +3 -0
  367. package/types/components/metric-change-legend/index.d.ts +1 -0
  368. package/types/components/metric-change-legend/metric-change-legend.d.ts +4 -0
  369. package/types/components/metric-run-info/metric-run-info.d.ts +3 -6
  370. package/types/components/metrics-table/metrics-table.d.ts +2 -1
  371. package/types/components/metrics-table-row-count/index.d.ts +1 -0
  372. package/types/components/metrics-table-row-count/metrics-table-row-count.d.ts +7 -0
  373. package/types/components/metrics-treemap/metrics-treemap.constants.d.ts +2 -0
  374. package/types/components/metrics-treemap/metrics-treemap.utils.d.ts +16 -5
  375. package/types/components/metrics-treemap/tile/index.d.ts +1 -0
  376. package/types/components/metrics-treemap/tile/tile.d.ts +11 -0
  377. package/types/components/metrics-treemap/tile-group/index.d.ts +1 -0
  378. package/types/components/metrics-treemap/tile-group/tile-group.d.ts +20 -0
  379. package/types/components/metrics-treemap/tile-group-title/index.d.ts +1 -0
  380. package/types/components/metrics-treemap/tile-group-title/tile-group-title.d.ts +12 -0
  381. package/types/components/run-info/run-info.d.ts +16 -7
  382. package/types/constants.d.ts +12 -0
  383. package/types/layout/flex-stack/flex-stack.d.ts +6 -2
  384. package/types/ui/button/button.d.ts +1 -0
  385. package/types/ui/dialog/dialog.d.ts +3 -2
  386. package/types/ui/dropdown/dropdown.d.ts +4 -1
  387. package/types/ui/filters/filters.d.ts +2 -1
  388. package/types/utils/index.d.ts +1 -0
  389. package/types/utils/portal.d.ts +1 -0
  390. package/vitest.config.ts +4 -0
  391. package/lib/components/metrics-table-options/metrics-table-options.module.css +0 -15
  392. package/lib-esm/components/metrics-table-options/metrics-table-options.module.css +0 -15
  393. package/src/components/delta/delta.jsx +0 -22
  394. package/src/components/metrics-table-options/metrics-table-options.module.css +0 -15
  395. /package/src/components/delta/{index.js → index.ts} +0 -0
@@ -32,22 +32,21 @@
32
32
  --line-height-number: 1.2em;
33
33
 
34
34
  /*
35
- * Color scheme:
36
- * https://coolors.co/287acc-da444e-55b950-efcc1a-192339
37
- * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23ebc013&mcgpalette3=%232a2933&mcgpalette4=%23287acc&themename=bundle-stats
38
- * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
35
+ * Color scheme: https://coolors.co/287acc-da444e-55b950-e5c110-192339-353538
39
36
  */
37
+
40
38
  --color-gray-25: #f9f9f9;
41
- --color-gray-50: #e5e5e7;
42
- --color-gray-100: #d2d2d4;
43
- --color-gray-200: #959499;
44
- --color-gray-300: #6a6970;
45
- --color-gray-400: #4a4952;
46
- --color-gray-500: #2a2933;
47
- --color-gray-600: #25242e;
48
- --color-gray-700: #1f1f27;
49
- --color-gray-800: #191920;
50
- --color-gray-900: #0f0f14;
39
+ /** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
40
+ --color-gray-50: #ececed;
41
+ --color-gray-100: #c9c9cc;
42
+ --color-gray-200: #a7a7aa;
43
+ --color-gray-300: #848489;
44
+ --color-gray-400: #626268;
45
+ --color-gray-500: #3f3f47;
46
+ --color-gray-600: #36363c;
47
+ --color-gray-700: #2c2c32;
48
+ --color-gray-800: #232327;
49
+ --color-gray-900: #19191c;
51
50
 
52
51
  --color-gray-ultra-light: var(--color-gray-200);
53
52
  --color-gray-light: var(--color-gray-300);
@@ -56,16 +55,17 @@
56
55
  --color-gray-ultra-dark: var(--color-gray-900);
57
56
 
58
57
  --color-red-25: #fdf5f6;
59
- --color-red-50: #fbe9ea;
60
- --color-red-100: #f4c7ca;
61
- --color-red-200: #eda2a7;
62
- --color-red-300: #e57c83;
63
- --color-red-400: #e06069;
58
+ /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/DA444E/218/68/78/white */
59
+ --color-red-50: #fbeced;
60
+ --color-red-100: #f5cbcd;
61
+ --color-red-200: #eea9ae;
62
+ --color-red-300: #e7878e;
63
+ --color-red-400: #e1666e;
64
64
  --color-red-500: #da444e;
65
- --color-red-600: #d63e47;
66
- --color-red-700: #d0353d;
67
- --color-red-800: #cb2d35;
68
- --color-red-900: #c21f25;
65
+ --color-red-600: #c92a35;
66
+ --color-red-700: #b31520;
67
+ --color-red-800: #8c0710;
68
+ --color-red-900: #660005;
69
69
  --color-red-ultra-light: var(--color-red-100);
70
70
  --color-red-light: var(--color-red-300);
71
71
  --color-red: var(--color-red-500);
@@ -73,16 +73,17 @@
73
73
  --color-red-ultra-dark: var(--color-red-900);
74
74
 
75
75
  --color-blue-25: #f3f8fd;
76
- --color-blue-50: #e5eff9;
77
- --color-blue-100: #bfd7f0;
78
- --color-blue-200: #94bde6;
79
- --color-blue-300: #69a2db;
80
- --color-blue-400: #488ed4;
76
+ /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/287ACC/40/122/204/white */
77
+ --color-blue-50: #eaf2fa;
78
+ --color-blue-100: #c3daf1;
79
+ --color-blue-200: #9cc2e8;
80
+ --color-blue-300: #75aade;
81
+ --color-blue-400: #4f92d5;
81
82
  --color-blue-500: #287acc;
82
- --color-blue-600: #2472c7;
83
- --color-blue-700: #1e67c0;
84
- --color-blue-800: #185db9;
85
- --color-blue-900: #0f4aad;
83
+ --color-blue-600: #1168bf;
84
+ --color-blue-700: #0055ac;
85
+ --color-blue-800: #00438c;
86
+ --color-blue-900: #003166;
86
87
 
87
88
  --color-blue-ultra-light: var(--color-blue-100);
88
89
  --color-blue-light: var(--color-blue-300);
@@ -91,16 +92,17 @@
91
92
  --color-blue-ultra-dark: var(--color-blue-900);
92
93
 
93
94
  --color-green-25: #f6fbf6;
94
- --color-green-50: #ebf7ea;
95
- --color-green-100: #cceacb;
96
- --color-green-200: #aadca8;
97
- --color-green-300: #88ce85;
98
- --color-green-400: #6fc46a;
95
+ /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/55b950/85/185/80/white */
96
+ --color-green-50: #eef8ee;
97
+ --color-green-100: #cfebce;
98
+ --color-green-200: #b1dfaf;
99
+ --color-green-300: #92d28f;
100
+ --color-green-400: #74c670;
99
101
  --color-green-500: #55b950;
100
- --color-green-600: #4eb249;
101
- --color-green-700: #44aa40;
102
- --color-green-800: #3ba237;
103
- --color-green-900: #2a9327;
102
+ --color-green-600: #3ea839;
103
+ --color-green-700: #2b9426;
104
+ --color-green-800: #1b7b16;
105
+ --color-green-900: #0f5f0b;
104
106
 
105
107
  --color-green-ultra-light: var(--color-green-100);
106
108
  --color-green-light: var(--color-green-300);
@@ -109,32 +111,35 @@
109
111
  --color-green-ultra-dark: var(--color-green-900);
110
112
 
111
113
  --color-yellow-25: #fffdf2;
112
- --color-yellow-50: #fdf7e3;
113
- --color-yellow-100: #f9ecb8;
114
- --color-yellow-200: #f5e089;
115
- --color-yellow-300: #f1d35a;
116
- --color-yellow-400: #eec936;
117
- --color-yellow-500: #ebc013;
118
- --color-yellow-600: #e9ba11;
119
- --color-yellow-700: #e5b20e;
120
- --color-yellow-800: #e2aa0b;
121
- --color-yellow-900: #dd9c06;
122
-
123
- --color-yellow-light-background: var(--color-yellow-25);
114
+ /* https://hihayk.github.io/scale/#4/5/20/80/0/-0/0/0/E5C110/229/193/16/white */
115
+ --color-yellow-50: #faf3cf;
116
+ --color-yellow-100: #f6e9a9;
117
+ --color-yellow-200: #f2df83;
118
+ --color-yellow-300: #edd55d;
119
+ --color-yellow-400: #e9cb36;
120
+ --color-yellow-500: #e5c110;
121
+ --color-yellow-600: #dab70f;
122
+ --color-yellow-700: #ceae0e;
123
+ --color-yellow-800: #c3a40e;
124
+ --color-yellow-900: #b79a0d;
125
+
124
126
  --color-yellow-ultra-light: var(--color-yellow-100);
125
127
  --color-yellow-light: var(--color-yellow-300);
126
128
  --color-yellow: var(--color-yellow-500);
127
- --color-yellow-ultra-dark: var(--color-yellow-700);
128
- --color-yellow-dark: var(--color-yellow-900);
129
+ --color-yellow-dark: var(--color-yellow-700);
130
+ --color-yellow-ultra-dark: var(--color-yellow-900);
129
131
 
130
132
  --color-dark: #111;
131
133
  --color-light: #fff;
132
134
 
133
- /* Functional color variables */
134
- --color-branding-light: #2b76d4;
135
+ /* https://hihayk.github.io/scale/#4/4/40/40/0/-0/0/0/1a477f/26/71/127/white */
136
+ --color-branding-light: #31598c;
135
137
  --color-branding: #1a477f;
136
- --color-branding-dark: #09182a;
138
+ --color-branding-dark: #102b4c;
139
+ }
137
140
 
141
+ body {
142
+ /* Functional color variables */
138
143
  --color-text-ultra-light: var(--color-gray-ultra-light);
139
144
  --color-text-light: var(--color-gray-light);
140
145
  --color-text: var(--color-gray);
@@ -142,6 +147,10 @@
142
147
  --color-text-ultra-dark: var(--color-gray-ultra-dark);
143
148
  --color-heading: var(--color-gray-ultra-dark);
144
149
 
150
+ --color-accent-light: var(--color-branding-light);
151
+ --color-accent: var(--color-branding);
152
+ --color-accent-dark: var(--color-branding-dark);
153
+
145
154
  --color-success-light: var(--color-green-light);
146
155
  --color-success: var(--color-green);
147
156
  --color-success-dark: var(--color-green-dark);
@@ -183,8 +192,8 @@
183
192
  --color-backdrop: rgba(0, 0, 0, 0.05);
184
193
  --color-shadow: rgba(0, 0, 0, 0.25);
185
194
 
186
- --transition-duration-in: 0.2s;
187
- --transition-duration-out: 0.17s;
195
+ --transition-duration-in: 120ms;
196
+ --transition-duration-out: 80ms;
188
197
  --transition-in: all var(--transition-duration-in) ease-in;
189
198
  --transition-out: all var(--transition-duration-out) ease-out;
190
199
 
@@ -193,9 +202,15 @@
193
202
  --layer: 100;
194
203
  /** for components with overlays (tooltips, hovercards) */
195
204
  --layer-high: 1000;
205
+ /** for the sticky header, tabs and side panels */
196
206
  --layer-xhigh: 10000;
197
207
  /** for dialogs/modals */
198
208
  --layer-xxhigh: 100000;
209
+ /**
210
+ * z-index used by overlays (tooltips, hovercards, dropdowns)
211
+ * overridden by the dialog portal to place nested overlays above the dialog
212
+ */
213
+ --layer-overlay: var(--layer-high);
199
214
 
200
215
  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
201
216
  --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
@@ -219,3 +234,12 @@
219
234
  --entry-info-width: 64rem;
220
235
  --entry-info-top: var(--header-height);
221
236
  }
237
+
238
+ @media (prefers-reduced-motion: reduce) {
239
+ * {
240
+ animation-duration: 0s !important;
241
+ animation-delay: 0s !important;
242
+ transition-duration: 0s !important;
243
+ transition-delay: 0s !important;
244
+ }
245
+ }
@@ -3,8 +3,9 @@ import cx from 'classnames';
3
3
  import { NO_SPACE } from '../../tokens';
4
4
  import css from './flex-stack.module.css';
5
5
  export const FlexStack = (props) => {
6
- const { as: Component = 'div', className = '', space = NO_SPACE, inline = false, alignItems = '', ...restProps } = props;
7
- const rootClassName = cx(css.root, css[`space--${space}`], css[`align-items--${alignItems}`], inline && css.inline, className);
6
+ var _a;
7
+ const { as: Component = 'div', className = '', gap, space, inline = false, direction = '', wrap = '', alignItems = '', justifyContent = '', ...restProps } = props;
8
+ const rootClassName = cx(css.root, css[`gap--${(_a = gap !== null && gap !== void 0 ? gap : space) !== null && _a !== void 0 ? _a : NO_SPACE}`], css[`direction--${direction}`], css[`wrap--${wrap}`], css[`align-items--${alignItems}`], css[`justify-content--${justifyContent}`], inline && css.inline, className);
8
9
  return React.createElement(Component, { ...restProps, className: rootClassName });
9
10
  };
10
11
  //# sourceMappingURL=flex-stack.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"flex-stack.js","sourceRoot":"","sources":["../../../src/layout/flex-stack/flex-stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,QAAQ,EAAU,MAAM,cAAc,CAAC;AAChD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAW1C,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,KAAiF,EACjF,EAAE;IACF,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,QAAQ,EAChB,MAAM,GAAG,KAAK,EACd,UAAU,GAAG,EAAE,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,GAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EACtB,GAAG,CAAC,gBAAgB,UAAU,EAAE,CAAC,EACjC,MAAM,IAAI,GAAG,CAAC,MAAM,EACpB,SAAS,CACV,CAAC;IAEF,OAAO,oBAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC"}
1
+ {"version":3,"file":"flex-stack.js","sourceRoot":"","sources":["../../../src/layout/flex-stack/flex-stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,QAAQ,EAAU,MAAM,cAAc,CAAC;AAChD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAwB1C,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,KAAiF,EACjF,EAAE;;IACF,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,EACH,KAAK,EACL,MAAM,GAAG,KAAK,EACd,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,UAAU,GAAG,EAAE,EACf,cAAc,GAAG,EAAE,EACnB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,GAAG,CAAC,QAAQ,MAAA,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,KAAK,mCAAI,QAAQ,EAAE,CAAC,EACvC,GAAG,CAAC,cAAc,SAAS,EAAE,CAAC,EAC9B,GAAG,CAAC,SAAS,IAAI,EAAE,CAAC,EACpB,GAAG,CAAC,gBAAgB,UAAU,EAAE,CAAC,EACjC,GAAG,CAAC,oBAAoB,cAAc,EAAE,CAAC,EACzC,MAAM,IAAI,GAAG,CAAC,MAAM,EACpB,SAAS,CACV,CAAC;IAEF,OAAO,oBAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC"}
@@ -4,43 +4,73 @@
4
4
  gap: 0;
5
5
  }
6
6
 
7
- /** Space variation */
8
- .space--xxxsmall {
7
+ /** Gap variation */
8
+ .gap--xxxsmall {
9
9
  gap: var(--space-xxxsmall);
10
10
  }
11
11
 
12
- .space--xxsmall {
12
+ .gap--xxsmall {
13
13
  gap: var(--space-xxsmall);
14
14
  }
15
15
 
16
- .space--xsmall {
16
+ .gap--xsmall {
17
17
  gap: var(--space-xsmall);
18
18
  }
19
19
 
20
- .space--small {
20
+ .gap--small {
21
21
  gap: var(--space-small);
22
22
  }
23
23
 
24
- .space--medium {
24
+ .gap--medium {
25
25
  gap: var(--space-medium);
26
26
  }
27
27
 
28
- .space--large {
28
+ .gap--large {
29
29
  gap: var(--space-large);
30
30
  }
31
31
 
32
- .space--xlarge {
32
+ .gap--xlarge {
33
33
  gap: var(--space-xlarge);
34
34
  }
35
35
 
36
- .space--xxlarge {
36
+ .gap--xxlarge {
37
37
  gap: var(--space-xxlarge);
38
38
  }
39
39
 
40
- .space--xxxlarge {
40
+ .gap--xxxlarge {
41
41
  gap: var(--space-xxxlarge);
42
42
  }
43
43
 
44
+ /** Direction variation */
45
+ .direction--row {
46
+ flex-direction: row;
47
+ }
48
+
49
+ .direction--row-reverse {
50
+ flex-direction: row-reverse;
51
+ }
52
+
53
+ .direction--column {
54
+ flex-direction: column;
55
+ }
56
+
57
+ .direction--column-reverse {
58
+ flex-direction: column-reverse;
59
+ }
60
+
61
+ /** Wrap variation */
62
+ .wrap--nowrap {
63
+ flex-wrap: nowrap;
64
+ }
65
+
66
+ .wrap--wrap {
67
+ flex-wrap: wrap;
68
+ }
69
+
70
+ .wrap--wrap-reverse {
71
+ flex-wrap: wrap-reverse;
72
+ }
73
+
44
74
  /** Align items variation */
45
75
  .root {
46
76
  align-items: stretch;
@@ -62,6 +92,31 @@
62
92
  align-items: baseline;
63
93
  }
64
94
 
95
+ /** Justify content variation */
96
+ .justify-content--flex-start {
97
+ justify-content: flex-start;
98
+ }
99
+
100
+ .justify-content--flex-end {
101
+ justify-content: flex-end;
102
+ }
103
+
104
+ .justify-content--center {
105
+ justify-content: center;
106
+ }
107
+
108
+ .justify-content--space-between {
109
+ justify-content: space-between;
110
+ }
111
+
112
+ .justify-content--space-around {
113
+ justify-content: space-around;
114
+ }
115
+
116
+ .justify-content--space-evenly {
117
+ justify-content: space-evenly;
118
+ }
119
+
65
120
  /** Inline variation */
66
121
  .inline {
67
122
  display: inline-flex;
@@ -1,4 +1,4 @@
1
- import React, { useCallback } from 'react';
1
+ import React, { useCallback, useRef } from 'react';
2
2
  import isEqual from 'lodash/isEqual';
3
3
  import { QueryParamProvider, useQueryParams } from 'use-query-params';
4
4
  import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
@@ -9,13 +9,16 @@ export const useComponentQueryState = (componentName) => {
9
9
  [componentName]: COMPONENT_STATE_META[componentName],
10
10
  });
11
11
  const componentState = queryState[componentName];
12
+ const componentStateRef = useRef(componentState);
13
+ componentStateRef.current = componentState;
12
14
  const setState = useCallback((updates) => {
13
- const newState = { ...componentState, ...updates };
14
- if (isEqual(componentState, newState)) {
15
+ const currentState = componentStateRef.current;
16
+ const newState = { ...currentState, ...updates };
17
+ if (isEqual(currentState, newState)) {
15
18
  return;
16
19
  }
17
20
  setQueryState({ [componentName]: newState });
18
- }, [componentState, setQueryState]);
21
+ }, [componentName, setQueryState]);
19
22
  return [componentState, setState];
20
23
  };
21
24
  //# sourceMappingURL=query-state.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAM3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,oBAAC,kBAAkB,IAAC,OAAO,EAAE,mBAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,cAAc,CAAC;QACjD,CAAC,aAAa,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,OAAgC,EAAE,EAAE;QACnC,MAAM,QAAQ,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,OAAO,EAAE,CAAC;QAGnD,IAAI,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,cAAc,EAAE,aAAa,CAAC,CAChC,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AACpC,CAAC,CAAC"}
1
+ {"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAM3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,oBAAC,kBAAkB,IAAC,OAAO,EAAE,mBAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,cAAc,CAAC;QACjD,CAAC,aAAa,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAGjD,MAAM,iBAAiB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IACjD,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC;IAE3C,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,OAAgC,EAAE,EAAE;QACnC,MAAM,YAAY,GAAG,iBAAiB,CAAC,OAAO,CAAC;QAC/C,MAAM,QAAQ,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,OAAO,EAAE,CAAC;QAGjD,IAAI,OAAO,CAAC,YAAY,EAAE,QAAQ,CAAC,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QAED,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,aAAa,EAAE,aAAa,CAAC,CAC/B,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AACpC,CAAC,CAAC"}
@@ -4,6 +4,7 @@ import { Button as ButtonBaseComponent } from 'ariakit/button';
4
4
  import { Icon as BaseIcon } from '../icon';
5
5
  import css from './button.module.css';
6
6
  export const BUTTON_SIZE = {
7
+ XSMALL: 'xsmall',
7
8
  SMALL: 'small',
8
9
  MEDIUM: 'medium',
9
10
  LARGE: 'large',
@@ -17,13 +18,13 @@ export const BUTTON_KIND = {
17
18
  SUCCES: 'success',
18
19
  };
19
20
  export const BUTTON_GLYPHS = BaseIcon.ICONS;
20
- const ButtonComponent = (props) => {
21
+ const ButtonComponent = (props, ref) => {
21
22
  const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = ButtonBaseComponent, children = null, Icon = BaseIcon, glyph, rightGlyph, ...restProps } = props;
22
23
  const resolvedPadding = padding || ((outline || solid) && size);
23
24
  const resolvedRadius = radius || ((outline || solid) && size);
24
25
  const resolvedSize = Object.values(BUTTON_SIZE).includes(size) ? size : BUTTON_SIZE.MEDIUM;
25
26
  const rootClassName = cx(css.root, kind && css[kind], css[resolvedSize], outline && css.outline, outline && css[`outline--${kind}`], solid && css.solid, solid && css[`solid--${kind}`], resolvedPadding && css.padding, resolvedRadius && css[`radius--${resolvedRadius}`], active && css.active, active && outline && css[`active-outline-${kind}`], className);
26
- return (React.createElement(Component, { ...restProps, className: rootClassName },
27
+ return (React.createElement(Component, { ...restProps, ref: ref, className: rootClassName },
27
28
  glyph && React.createElement(Icon, { glyph: glyph, className: css.glyph }),
28
29
  children && React.createElement("span", { className: css.content }, children),
29
30
  rightGlyph && React.createElement(Icon, { glyph: rightGlyph, className: css.glyph })));
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAEX,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC;AAmB5C,MAAM,eAAe,GAAG,CACtB,KAAqF,EACrF,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,mBAAmB,EACnC,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EACjB,GAAG,CAAC,YAAY,CAAC,EAEjB,OAAO,IAAI,GAAG,CAAC,OAAO,EACtB,OAAO,IAAI,GAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,GAAG,CAAC,KAAK,EAClB,KAAK,IAAI,GAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,GAAG,CAAC,OAAO,EAC9B,cAAc,IAAI,GAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,GAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,GAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa;QAC/C,KAAK,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI;QACrD,QAAQ,IAAI,8BAAM,SAAS,EAAE,GAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI,CACtD,CACb,CAAC;AACJ,CAAC,CAAC;AAKF,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAIxB,CAAC"}
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAEX,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC;AAmB5C,MAAM,eAAe,GAAG,CACtB,KAAqF,EACrF,GAAiC,EACjC,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,mBAAmB,EACnC,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EACjB,GAAG,CAAC,YAAY,CAAC,EAEjB,OAAO,IAAI,GAAG,CAAC,OAAO,EACtB,OAAO,IAAI,GAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,GAAG,CAAC,KAAK,EAClB,KAAK,IAAI,GAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,GAAG,CAAC,OAAO,EAC9B,cAAc,IAAI,GAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,GAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,GAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,aAAa;QACzD,KAAK,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI;QACrD,QAAQ,IAAI,8BAAM,SAAS,EAAE,GAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI,CACtD,CACb,CAAC;AACJ,CAAC,CAAC;AAKF,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAIxB,CAAC"}
@@ -3,28 +3,32 @@
3
3
  --button-space: 0px;
4
4
  /* button border width */
5
5
  --border-width: 0px;
6
+ /* line height in pixels to prevent layout shift when rendering a glyph */
7
+ --line-height: var(--space-small);
6
8
 
7
9
  display: inline-flex;
8
10
  align-items: center;
9
11
  justify-content: center;
10
- gap: calc(max(var(--button-space), var(--space-xxsmall)) * 0.66);
12
+ gap: calc(var(--button-space) * 0.66);
11
13
  appearance: none;
12
14
  padding: 0;
13
15
  border: var(--border-width) solid transparent;
14
16
  background: none;
15
- transition: var(--transition-out);
16
17
  color: var(--color-text-ultra-light);
18
+ font-size: var(--size-medium);
17
19
  font-family: var(--font-family);
20
+ line-height: var(--line-height);
18
21
  white-space: nowrap;
22
+ transition: var(--transition-out);
19
23
  }
20
24
 
21
25
  a.root {
22
26
  text-decoration: none;
23
27
  }
24
28
 
29
+ .root:focus,
25
30
  .root:hover,
26
- .root:active,
27
- .root:focus {
31
+ .root:active {
28
32
  outline: none;
29
33
  color: var(--color-text-light);
30
34
  transition: var(--transition-in);
@@ -32,6 +36,8 @@ a.root {
32
36
 
33
37
  .glyph {
34
38
  flex: 0 0 auto;
39
+ width: var(--line-height);
40
+ height: var(--line-height);
35
41
  }
36
42
 
37
43
  .text {
@@ -43,13 +49,13 @@ a.root {
43
49
  * Kind variation
44
50
  */
45
51
  .primary {
46
- color: var(--color-primary);
52
+ color: var(--color-accent);
47
53
  }
48
54
 
49
55
  .primary:hover,
50
56
  .primary:active,
51
57
  .primary:focus {
52
- color: var(--color-primary-dark);
58
+ color: var(--color-accent-dark);
53
59
  }
54
60
 
55
61
  .secondary {
@@ -106,25 +112,25 @@ a.root {
106
112
  * Solid Kind variation
107
113
  */
108
114
  .solid {
109
- background: var(--color-text-ultra-light);
115
+ background: var(--color-text-light);
110
116
  color: var(--color-background);
111
117
  }
112
118
 
113
119
  .solid:hover,
114
120
  .solid:active,
115
121
  .solid:focus {
116
- background: var(--color-text-light);
122
+ background: var(--color-text);
117
123
  color: var(--color-background);
118
124
  }
119
125
 
120
126
  .solid--primary {
121
- background: var(--color-primary);
127
+ background: var(--color-accent);
122
128
  }
123
129
 
124
130
  .solid--primary:hover,
125
131
  .solid--primary:active,
126
132
  .solid--primary:focus {
127
- background: var(--color-primary-dark);
133
+ background: var(--color-accent-dark);
128
134
  }
129
135
 
130
136
  .solid--secondary {
@@ -180,40 +186,36 @@ a.root {
180
186
  /**
181
187
  * Size variation
182
188
  */
189
+ .xsmall {
190
+ --button-space: var(--space-xxxsmall);
191
+ --line-height: var(--space-xsmall);
192
+
193
+ font-size: var(--size-xsmall);
194
+ }
195
+
183
196
  .small {
184
197
  --button-space: var(--space-xxsmall);
198
+ --line-height: var(--space-small);
185
199
 
186
200
  font-size: var(--size-small);
187
- line-height: var(--space-small);
188
- }
189
-
190
- .small .glyph {
191
- width: var(--space-small);
192
- height: var(--space-small);
193
201
  }
194
202
 
195
203
  .medium {
196
204
  --button-space: var(--space-xsmall);
197
-
198
- font-size: var(--size-medium);
199
- line-height: calc(var(--space-small) + var(--space-xxxsmall));
205
+ --line-height: var(--space-small);
200
206
  }
201
207
 
202
208
  .medium .glyph {
203
- width: calc(var(--space-small) + var(--space-xxxsmall));
209
+ margin: calc(0px - var(--space-xxxsmall) / 2);
204
210
  height: calc(var(--space-small) + var(--space-xxxsmall));
211
+ width: calc(var(--space-small) + var(--space-xxxsmall));
205
212
  }
206
213
 
207
214
  .large {
208
215
  --button-space: var(--space-small);
216
+ --line-height: var(--space-medium);
209
217
 
210
218
  font-size: var(--size-large);
211
- line-height: var(--space-medium);
212
- }
213
-
214
- .large .glyph {
215
- width: var(--space-medium);
216
- height: var(--space-medium);
217
219
  }
218
220
 
219
221
  /**
@@ -300,6 +302,10 @@ a.root {
300
302
  /**
301
303
  * Radius variation
302
304
  */
305
+ .radius--xsmall {
306
+ border-radius: var(--radius-xsmall);
307
+ }
308
+
303
309
  .radius--small {
304
310
  border-radius: var(--radius-small);
305
311
  }
@@ -361,5 +367,10 @@ a.root {
361
367
  * Disabled state
362
368
  */
363
369
  .root[disabled] {
364
- filter: grayscale(1);
370
+ opacity: 0.9;
371
+ }
372
+
373
+ .root[disabled] .icon,
374
+ .root[disabled] .content {
375
+ opacity: 0.8;
365
376
  }
@@ -4,6 +4,6 @@ import { FlexStack } from '../../layout/flex-stack';
4
4
  import css from './control-group.module.css';
5
5
  export const ControlGroup = (props) => {
6
6
  const { className = '', ...restProps } = props;
7
- return (React.createElement(FlexStack, { className: cx(css.root, className), space: "no-space", alignItems: "center", ...restProps }));
7
+ return (React.createElement(FlexStack, { className: cx(css.root, className), gap: "no-space", alignItems: "center", ...restProps }));
8
8
  };
9
9
  //# sourceMappingURL=control-group.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"control-group.js","sourceRoot":"","sources":["../../../src/ui/control-group/control-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,GAAG,MAAM,4BAA4B,CAAC;AAE7C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAA6C,EAAE,EAAE;IAC5E,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC/C,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,QAAQ,KACf,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"control-group.js","sourceRoot":"","sources":["../../../src/ui/control-group/control-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,GAAG,MAAM,4BAA4B,CAAC;AAE7C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAA6C,EAAE,EAAE;IAC5E,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC/C,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,GAAG,EAAC,UAAU,EACd,UAAU,EAAC,QAAQ,KACf,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC"}
@@ -6,10 +6,10 @@
6
6
 
7
7
  /** done state */
8
8
  .root svg {
9
- transition: var(--ui-transition-out);
9
+ transition: var(--transition-out);
10
10
  }
11
11
 
12
12
  .done svg {
13
13
  color: var(--color-success);
14
- transition: var(--ui-transition-in);
14
+ transition: var(--transition-in);
15
15
  }
@@ -1,16 +1,20 @@
1
1
  import React from 'react';
2
2
  import cx from 'classnames';
3
- import { Dialog as AriakitDialog, DialogDismiss as AriakitDialogDismiss } from 'ariakit/dialog';
3
+ import { Dialog as AriakitDialog, DialogDismiss as AriakitDialogDismiss, useDialogState as useAriakitDialogState, } from 'ariakit/dialog';
4
4
  import { Stack } from '../../layout/stack';
5
+ import { getCreatePortalElement } from '../../utils/portal';
5
6
  import { BUTTON_GLYPHS, Button } from '../button';
6
7
  import css from './dialog.module.css';
7
- export { useDialogState } from 'ariakit/dialog';
8
+ export const useDialogState = (options = {}) => {
9
+ return useAriakitDialogState({ animated: true, ...options });
10
+ };
11
+ const createPortalElement = getCreatePortalElement(css.portal);
8
12
  export const Dialog = (props) => {
9
13
  const { state, className = '', title = '', width = 'medium', center = false, modal = false, children, } = props;
10
14
  const rootClassName = cx(css.dialog, width && css[`width--${width}`], center && css.center);
11
15
  return (React.createElement(AriakitDialog, { state: state, modal: modal, backdrop: true, backdropProps: {
12
16
  className: css.backdrop,
13
- }, portal: true, className: rootClassName },
17
+ }, portal: true, portalElement: createPortalElement, className: rootClassName },
14
18
  !modal && (React.createElement(AriakitDialogDismiss, { as: Button, glyph: BUTTON_GLYPHS.CLOSE, className: css.headerClose }, null)),
15
19
  React.createElement(Stack, { space: "medium" },
16
20
  title && (React.createElement("header", { className: css.header }, typeof title === 'string' ? React.createElement("h2", { className: css.headerTitle }, title) : title)),
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEhG,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAYhD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,QAAQ,EAChB,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EACb,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,IAAI,GAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;IAE5F,OAAO,CACL,oBAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,aAAa,EAAE;YACb,SAAS,EAAE,GAAG,CAAC,QAAQ;SACxB,EACD,MAAM,QACN,SAAS,EAAE,aAAa;QAEvB,CAAC,KAAK,IAAI,CACT,oBAAC,oBAAoB,IAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,WAAW,IAErF,IAAI,CACgB,CACxB;QACD,oBAAC,KAAK,IAAC,KAAK,EAAC,QAAQ;YAClB,KAAK,IAAI,CACR,gCAAQ,SAAS,EAAE,GAAG,CAAC,MAAM,IAC1B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAAI,SAAS,EAAE,GAAG,CAAC,WAAW,IAAG,KAAK,CAAM,CAAC,CAAC,CAAC,KAAK,CAC1E,CACV;YACD,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CACtD,CACM,CACjB,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,MAAM,IAAI,aAAa,EACvB,aAAa,IAAI,oBAAoB,EACrC,cAAc,IAAI,qBAAqB,GAExC,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,UAA4B,EAAE,EAAE,EAAE;IAC/D,OAAO,qBAAqB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;AAC/D,CAAC,CAAC;AAKF,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AAY/D,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,QAAQ,EAChB,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EACb,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,IAAI,GAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;IAE5F,OAAO,CACL,oBAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,aAAa,EAAE;YACb,SAAS,EAAE,GAAG,CAAC,QAAQ;SACxB,EACD,MAAM,QACN,aAAa,EAAE,mBAAmB,EAClC,SAAS,EAAE,aAAa;QAEvB,CAAC,KAAK,IAAI,CACT,oBAAC,oBAAoB,IAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,WAAW,IAErF,IAAI,CACgB,CACxB;QACD,oBAAC,KAAK,IAAC,KAAK,EAAC,QAAQ;YAClB,KAAK,IAAI,CACR,gCAAQ,SAAS,EAAE,GAAG,CAAC,MAAM,IAC1B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAAI,SAAS,EAAE,GAAG,CAAC,WAAW,IAAG,KAAK,CAAM,CAAC,CAAC,CAAC,KAAK,CAC1E,CACV;YACD,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CACtD,CACM,CACjB,CAAC;AACJ,CAAC,CAAC"}