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

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 (81) hide show
  1. package/lib/app/app.js +15 -5
  2. package/lib/app/app.js.map +1 -1
  3. package/lib/app/app.module.css +8 -3
  4. package/lib/components/entry-info/entry-info.module.css +1 -0
  5. package/lib/components/metrics-display-selector/metrics-display-selector.module.css +4 -2
  6. package/lib/components/metrics-treemap/tile/tile.module.css +5 -4
  7. package/lib/components/metrics-treemap/tile-group/tile-group.module.css +7 -5
  8. package/lib/components/metrics-treemap/tile-group-title/tile-group-title.module.css +2 -6
  9. package/lib/components/run-info/run-info.module.css +6 -6
  10. package/lib/components/sort-button/sort-button.module.css +5 -2
  11. package/lib/components/summary/summary.module.css +8 -4
  12. package/lib/css/default.css +4 -2
  13. package/lib/css/variables.css +6 -3
  14. package/lib/layout/box/box.module.css +4 -2
  15. package/lib/ui/button/button.module.css +4 -2
  16. package/lib/ui/copy-to-clipboard/copy-to-clipboard.module.css +4 -2
  17. package/lib/ui/dialog/dialog.module.css +11 -5
  18. package/lib/ui/dropdown/dropdown.module.css +10 -5
  19. package/lib/ui/filters/filters.module.css +4 -2
  20. package/lib/ui/hover-card/hover-card.module.css +10 -5
  21. package/lib/ui/input/input.module.css +4 -2
  22. package/lib/ui/table/table.module.css +4 -2
  23. package/lib/ui/tabs/tabs.module.css +9 -5
  24. package/lib/ui/textarea/textarea.module.css +4 -2
  25. package/lib/ui/tooltip/tooltip.module.css +4 -2
  26. package/lib/utils/portal.js +17 -1
  27. package/lib/utils/portal.js.map +1 -1
  28. package/lib-esm/app/app.js +15 -5
  29. package/lib-esm/app/app.js.map +1 -1
  30. package/lib-esm/app/app.module.css +8 -3
  31. package/lib-esm/components/entry-info/entry-info.module.css +1 -0
  32. package/lib-esm/components/metrics-display-selector/metrics-display-selector.module.css +4 -2
  33. package/lib-esm/components/metrics-treemap/tile/tile.module.css +5 -4
  34. package/lib-esm/components/metrics-treemap/tile-group/tile-group.module.css +7 -5
  35. package/lib-esm/components/metrics-treemap/tile-group-title/tile-group-title.module.css +2 -6
  36. package/lib-esm/components/run-info/run-info.module.css +6 -6
  37. package/lib-esm/components/sort-button/sort-button.module.css +5 -2
  38. package/lib-esm/components/summary/summary.module.css +8 -4
  39. package/lib-esm/css/default.css +4 -2
  40. package/lib-esm/css/variables.css +6 -3
  41. package/lib-esm/layout/box/box.module.css +4 -2
  42. package/lib-esm/ui/button/button.module.css +4 -2
  43. package/lib-esm/ui/copy-to-clipboard/copy-to-clipboard.module.css +4 -2
  44. package/lib-esm/ui/dialog/dialog.module.css +11 -5
  45. package/lib-esm/ui/dropdown/dropdown.module.css +10 -5
  46. package/lib-esm/ui/filters/filters.module.css +4 -2
  47. package/lib-esm/ui/hover-card/hover-card.module.css +10 -5
  48. package/lib-esm/ui/input/input.module.css +4 -2
  49. package/lib-esm/ui/table/table.module.css +4 -2
  50. package/lib-esm/ui/tabs/tabs.module.css +9 -5
  51. package/lib-esm/ui/textarea/textarea.module.css +4 -2
  52. package/lib-esm/ui/tooltip/tooltip.module.css +4 -2
  53. package/lib-esm/utils/portal.js +15 -0
  54. package/lib-esm/utils/portal.js.map +1 -1
  55. package/package.json +8 -8
  56. package/src/app/app.jsx +30 -12
  57. package/src/app/app.module.css +8 -3
  58. package/src/components/entry-info/entry-info.module.css +1 -0
  59. package/src/components/metrics-display-selector/metrics-display-selector.module.css +4 -2
  60. package/src/components/metrics-treemap/tile/tile.module.css +5 -4
  61. package/src/components/metrics-treemap/tile-group/tile-group.module.css +7 -5
  62. package/src/components/metrics-treemap/tile-group-title/tile-group-title.module.css +2 -6
  63. package/src/components/run-info/run-info.module.css +6 -6
  64. package/src/components/sort-button/sort-button.module.css +5 -2
  65. package/src/components/summary/summary.module.css +8 -4
  66. package/src/css/default.css +4 -2
  67. package/src/css/variables.css +6 -3
  68. package/src/layout/box/box.module.css +4 -2
  69. package/src/ui/button/button.module.css +4 -2
  70. package/src/ui/copy-to-clipboard/copy-to-clipboard.module.css +4 -2
  71. package/src/ui/dialog/dialog.module.css +11 -5
  72. package/src/ui/dropdown/dropdown.module.css +10 -5
  73. package/src/ui/filters/filters.module.css +4 -2
  74. package/src/ui/hover-card/hover-card.module.css +10 -5
  75. package/src/ui/input/input.module.css +4 -2
  76. package/src/ui/table/table.module.css +4 -2
  77. package/src/ui/tabs/tabs.module.css +9 -5
  78. package/src/ui/textarea/textarea.module.css +4 -2
  79. package/src/ui/tooltip/tooltip.module.css +4 -2
  80. package/src/utils/portal.ts +25 -0
  81. package/types/utils/portal.d.ts +1 -0
package/src/ui/dropdown/dropdown.module.css CHANGED
@@ -11,21 +11,24 @@
11
11
  left: 0;
12
12
  top: 100%;
13
13
  border-radius: var(--radius-small);
14
+ border: 1px solid var(--color-outline);
14
15
  box-shadow: var(--shadow-layer);
15
16
  background: var(--color-background);
16
17
  min-width: 16em;
17
18
  z-index: var(--layer-overlay);
18
- padding: var(--space-xxxsmall);
19
+ padding: calc(var(--space-xxxsmall) - 1px);
19
20
  color: var(--color-text-light);
20
21
  font-size: var(--size-small);
21
22
  line-height: var(--line-height);
22
23
  opacity: 0;
23
- transition: var(--transition-out);
24
+ transition-property: opacity;
25
+ transition-duration: var(--transition-duration-out);
26
+ transition-timing-function: var(--transition-timing-function);
24
27
  }
25
28
 
26
29
  .dropdown[data-enter] {
27
30
  opacity: 1;
28
- transition: var(--transition-in);
31
+ transition-duration: var(--transition-duration-in);
29
32
  }
30
33
 
31
34
  .dropdown[data-leave] {
@@ -51,7 +54,9 @@
51
54
  text-align: left;
52
55
  text-decoration: none;
53
56
  cursor: default;
54
- transition: var(--transition-out);
57
+ transition-property: color, background-color;
58
+ transition-duration: var(--transition-duration-out);
59
+ transition-timing-function: var(--transition-timing-function);
55
60
  }
56
61
 
57
62
  .item[data-active-item],
@@ -60,7 +65,7 @@
60
65
  .item:active {
61
66
  background: var(--color-highlight);
62
67
  color: var(--color-text);
63
- transition: var(--transition-in);
68
+ transition-duration: var(--transition-duration-in);
64
69
  }
65
70
 
66
71
  .itemActive {
package/src/ui/filters/filters.module.css CHANGED
@@ -42,14 +42,16 @@
42
42
  font-size: var(--size-small);
43
43
  line-height: var(--space-small);
44
44
  color: var(--color-text-ultra-light);
45
- transition: var(--transition-out);
45
+ transition-property: color, border-color;
46
+ transition-duration: var(--transition-duration-out);
47
+ transition-timing-function: var(--transition-timing-function);
46
48
  }
47
49
 
48
50
  .filterSingle:focus,
49
51
  .filterSingle:active,
50
52
  .filterSingle:hover {
51
53
  border-color: var(--color-outline-dark);
52
- transition: var(--transition-in);
54
+ transition-duration: var(--transition-duration-in);
53
55
  }
54
56
 
55
57
  /** Filter group */
package/src/ui/hover-card/hover-card.module.css CHANGED
@@ -7,7 +7,9 @@
7
7
  color: inherit;
8
8
  cursor: default;
9
9
  text-decoration: none;
10
- transition: var(--transition-out);
10
+ transition-property: color;
11
+ transition-duration: var(--transition-duration-out);
12
+ transition-timing-function: var(--transition-timing-function);
11
13
  }
12
14
 
13
15
  .anchor:focus,
@@ -15,12 +17,13 @@
15
17
  .anchor:hover {
16
18
  color: var(--color-accent-dark);
17
19
  outline: 0;
18
- transition: var(--transition-in);
20
+ transition-duration: var(--transition-duration-in);
19
21
  }
20
22
 
21
23
  .hoverCard {
22
24
  z-index: var(--layer-overlay);
23
- padding: var(--space-small);
25
+ padding: calc(var(--space-small) - 1px);
26
+ border: 1px solid var(--color-outline);
24
27
  border-radius: var(--radius-medium);
25
28
  width: calc(100vw - 2 * var(--space-small));
26
29
  max-width: 340px;
@@ -30,12 +33,14 @@
30
33
  background: var(--color-light);
31
34
  font-size: var(--size-small);
32
35
  opacity: 0;
33
- transition: var(--transition-out);
36
+ transition-property: opacity;
37
+ transition-duration: var(--transition-duration-out);
38
+ transition-timing-function: var(--transition-timing-function);
34
39
  }
35
40
 
36
41
  .hoverCard[data-enter] {
37
42
  opacity: 1;
38
- transition: var(--transition-in);
43
+ transition-duration: var(--transition-duration-in);
39
44
  }
40
45
 
41
46
  .hoverCard[data-leave] {
package/src/ui/input/input.module.css CHANGED
@@ -3,7 +3,9 @@
3
3
  border-radius: var(--radius-small);
4
4
  color: var(--color-text-light);
5
5
  width: 100%;
6
- transition: var(--transition-out);
6
+ transition-property: color, border-color;
7
+ transition-duration: var(--transition-duration-out);
8
+ transition-timing-function: var(--transition-timing-function);
7
9
  appearance: none;
8
10
  outline: none;
9
11
  }
@@ -27,7 +29,7 @@
27
29
  .root:focus {
28
30
  border-color: var(--color-outline-dark);
29
31
  color: inherit;
30
- transition: var(--transition-in);
32
+ transition-duration: var(--transition-duration-in);
31
33
  }
32
34
 
33
35
  /** Size modifier */
package/src/ui/table/table.module.css CHANGED
@@ -48,13 +48,15 @@
48
48
  /* hover current row */
49
49
  .root tbody tr th,
50
50
  .root tbody tr td {
51
- transition: var(--transition-out);
51
+ transition-property: background-color;
52
+ transition-duration: var(--transition-duration-out);
53
+ transition-timing-function: var(--transition-timing-function);
52
54
  }
53
55
 
54
56
  .root tbody tr:hover th,
55
57
  .root tbody tr:hover td {
56
58
  background-color: var(--color-highlight-warning);
57
- transition: var(--transition-in);
59
+ transition-duration: var(--transition-duration-in);
58
60
  }
59
61
 
60
62
  .empty {
package/src/ui/tabs/tabs.module.css CHANGED
@@ -13,7 +13,9 @@
13
13
  color: var(--color-text-ultra-light);
14
14
  font-weight: bold;
15
15
  text-decoration: none;
16
- transition: var(--transition-out);
16
+ transition-property: color;
17
+ transition-duration: var(--transition-duration-out);
18
+ transition-timing-function: var(--transition-timing-function);
17
19
  }
18
20
 
19
21
  .item::after {
@@ -26,7 +28,9 @@
26
28
  height: 2px;
27
29
  background: currentColor;
28
30
  opacity: 0;
29
- transition: var(--transition-out);
31
+ transition-property: opacity;
32
+ transition-duration: var(--transition-duration-out);
33
+ transition-timing-function: var(--transition-timing-function);
30
34
  }
31
35
 
32
36
  .item:focus,
@@ -40,15 +44,15 @@
40
44
  .item:active::after,
41
45
  .item:focus::after {
42
46
  opacity: 1;
43
- transition: var(--transition-in);
47
+ transition-duration: var(--transition-duration-in);
44
48
  }
45
49
 
46
50
  .itemActive {
47
51
  color: var(--color-accent);
48
- transition: var(--transition-in);
52
+ transition-duration: var(--transition-duration-in);
49
53
  }
50
54
 
51
55
  .itemActive::after {
52
56
  opacity: 1;
53
- transition: var(--transition-in);
57
+ transition-duration: var(--transition-duration-in);
54
58
  }
package/src/ui/textarea/textarea.module.css CHANGED
@@ -4,7 +4,9 @@
4
4
  color: var(--color-text-light);
5
5
  width: 100%;
6
6
  resize: vertical;
7
- transition: var(--transition-out);
7
+ transition-property: color, border-color;
8
+ transition-duration: var(--transition-duration-out);
9
+ transition-timing-function: var(--transition-timing-function);
8
10
  appearance: none;
9
11
  outline: none;
10
12
  }
@@ -28,7 +30,7 @@
28
30
  .root:focus {
29
31
  border-color: var(--color-outline-dark);
30
32
  color: inherit;
31
- transition: var(--transition-in);
33
+ transition-duration: var(--transition-duration-in);
32
34
  }
33
35
 
34
36
  .root[readonly=''] {
package/src/ui/tooltip/tooltip.module.css CHANGED
@@ -22,12 +22,14 @@
22
22
  filter: drop-shadow(var(--shadow-layer));
23
23
  will-change: filter;
24
24
  opacity: 0;
25
- transition: var(--transition-out);
25
+ transition-property: opacity;
26
+ transition-duration: var(--transition-duration-out);
27
+ transition-timing-function: var(--transition-timing-function);
26
28
  }
27
29
 
28
30
  .tooltip[data-enter] {
29
31
  opacity: 1;
30
- transition: var(--transition-in);
32
+ transition-duration: var(--transition-duration-in);
31
33
  }
32
34
 
33
35
  .tooltip[data-leave] {
package/src/utils/portal.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import { useEffect, useState } from 'react';
2
+
1
3
  /**
2
4
  * Ariakit appends nested portals (tooltips, hovercards, menus) to the parent portal node,
3
5
  * create the portal node with a specific class to adjust the z-index of the nested overlays
@@ -7,3 +9,26 @@ export const getCreatePortalElement = (className: string) => (element: HTMLEleme
7
9
  portalElement.className = className;
8
10
  return portalElement;
9
11
  };
12
+
13
+ /**
14
+ * Create a body level portal root with a specific class, to be passed to Ariakit `PortalContext`
15
+ * Overlays (tooltips, hovercards, menus) rendered inside the context are appended to the root,
16
+ * so the class can adjust their z-index without affecting the overlays from other sections
17
+ */
18
+ export const usePortalRoot = (className: string): HTMLElement | null => {
19
+ const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);
20
+
21
+ useEffect(() => {
22
+ const element = document.createElement('div');
23
+ element.className = className;
24
+ document.body.appendChild(element);
25
+ setPortalRoot(element);
26
+
27
+ return () => {
28
+ element.remove();
29
+ setPortalRoot(null);
30
+ };
31
+ }, [className]);
32
+
33
+ return portalRoot;
34
+ };
package/types/utils/portal.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export declare const getCreatePortalElement: (className: string) => (element: HTMLElement) => HTMLDivElement;
2
+ export declare const usePortalRoot: (className: string) => HTMLElement | null;