@bundle-stats/ui 4.13.2 → 4.13.3

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 (10) hide show
  1. package/lib/components/metrics-treemap/metrics-treemap.module.css +12 -14
  2. package/lib/components/metrics-treemap/metrics-treemap.utils.js +1 -1
  3. package/lib/ui/file-name/file-name.module.css +2 -0
  4. package/lib-esm/components/metrics-treemap/metrics-treemap.module.css +12 -14
  5. package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js +1 -1
  6. package/lib-esm/ui/file-name/file-name.module.css +2 -0
  7. package/package.json +6 -6
  8. package/src/components/metrics-treemap/metrics-treemap.module.css +12 -14
  9. package/src/components/metrics-treemap/metrics-treemap.utils.ts +1 -1
  10. package/src/ui/file-name/file-name.module.css +2 -0
package/lib/components/metrics-treemap/metrics-treemap.module.css CHANGED
@@ -54,18 +54,18 @@
54
54
  }
55
55
 
56
56
  .tileGroupTitle {
57
- transition: var(--ui-transition-out);
57
+ transition: var(--transition-out);
58
58
  }
59
59
 
60
60
  .tileGroupTitle:hover .tileGroupTitleText {
61
61
  text-decoration: underline;
62
- transition: var(--ui-transition-in);
62
+ transition: var(--transition-in);
63
63
  }
64
64
 
65
65
  /** Tile group size variation */
66
66
  .tileGroup {
67
- transition: var(--ui-transition-in);
68
- transition-property: left, top, width, height;
67
+ transition: var(--transition-out);
68
+ transition-property: background-color, outline;
69
69
  }
70
70
 
71
71
  .tileGroup--minimal .tileGroupTitle,
@@ -81,13 +81,15 @@
81
81
  /** Tile group nested variation */
82
82
  .nested .tileGroup {
83
83
  background-color: rgba(27, 26, 33, 0.03);
84
- outline: 1px solid rgba(255, 255, 255, 0.6);
84
+ outline: 1px solid rgba(255, 255, 255, 0.8);
85
85
  }
86
86
 
87
87
  .nested .tileGroup:has(> .tileGroupTitle:hover),
88
88
  .nested .tileGroup:has(> .tile:hover) {
89
89
  background-color: rgba(27, 26, 33, 0.06);
90
90
  outline: 1px solid rgba(255, 255, 255, 1);
91
+ transition: var(--transition-in);
92
+ transition-property: background-color, outline;
91
93
  }
92
94
 
93
95
  .nested .tileGroup--NEGATIVE {
@@ -137,7 +139,8 @@
137
139
  font-size: var(--size-small);
138
140
  line-height: var(--line-height-heading);
139
141
  text-align: left;
140
- transition: var(--ui-transition-out);
142
+ transition: var(--transition-out);
143
+ transition-property: opacity, background-color;
141
144
  }
142
145
 
143
146
  .tile::before {
@@ -209,27 +212,22 @@
209
212
  margin-top: 0;
210
213
  }
211
214
 
212
- .tileSizeDefault {
213
- transition: var(--ui-transition-in);
214
- transition-property: left, top, width, height;
215
- }
216
-
217
215
  /** Tile diff variation */
218
216
  .tile {
219
217
  outline: 1px solid rgba(255, 255, 255, 1);
220
218
  color: var(--color-text);
221
- transition: var(--ui-transition-out);
222
219
  }
223
220
 
224
221
  .tile::before {
225
222
  color: var(--color-highlight);
226
- transition: var(--ui-transition-out);
223
+ transition: var(--transition-out);
227
224
  transition-property: opacity;
228
225
  opacity: 0.6;
229
226
  }
230
227
 
231
228
  .tile:hover::before {
232
- transition: var(--ui-transition-in);
229
+ transition: var(--transition-in);
230
+ transition-property: opacity;
233
231
  opacity: 0.4;
234
232
  }
235
233
 
package/lib/components/metrics-treemap/metrics-treemap.utils.js CHANGED
@@ -153,7 +153,7 @@ function resolveTileSizeDisplay(width, height) {
153
153
  }
154
154
  exports.resolveTileSizeDisplay = resolveTileSizeDisplay;
155
155
  function useTooltipStateWithMouseFollow(options) {
156
- const { parentRef, gutter = 16, timeout = 180 } = options;
156
+ const { parentRef, gutter = 16, timeout = 240 } = options;
157
157
  const pointer = (0, react_use_1.useMouseHovered)(parentRef, { whenHovered: true });
158
158
  const getAnchorRect = (0, react_1.useCallback)(() => {
159
159
  if (pointer.docX === 0 && pointer.docY === 0 && pointer.elW === 0 && pointer.elH === 0) {
package/lib/ui/file-name/file-name.module.css CHANGED
@@ -6,4 +6,6 @@
6
6
  word-break: break-word;
7
7
  hyphens: auto;
8
8
  white-space: normal;
9
+ max-height: calc(2em * var(--line-height));
10
+ overflow: hidden;
9
11
  }
package/lib-esm/components/metrics-treemap/metrics-treemap.module.css CHANGED
@@ -54,18 +54,18 @@
54
54
  }
55
55
 
56
56
  .tileGroupTitle {
57
- transition: var(--ui-transition-out);
57
+ transition: var(--transition-out);
58
58
  }
59
59
 
60
60
  .tileGroupTitle:hover .tileGroupTitleText {
61
61
  text-decoration: underline;
62
- transition: var(--ui-transition-in);
62
+ transition: var(--transition-in);
63
63
  }
64
64
 
65
65
  /** Tile group size variation */
66
66
  .tileGroup {
67
- transition: var(--ui-transition-in);
68
- transition-property: left, top, width, height;
67
+ transition: var(--transition-out);
68
+ transition-property: background-color, outline;
69
69
  }
70
70
 
71
71
  .tileGroup--minimal .tileGroupTitle,
@@ -81,13 +81,15 @@
81
81
  /** Tile group nested variation */
82
82
  .nested .tileGroup {
83
83
  background-color: rgba(27, 26, 33, 0.03);
84
- outline: 1px solid rgba(255, 255, 255, 0.6);
84
+ outline: 1px solid rgba(255, 255, 255, 0.8);
85
85
  }
86
86
 
87
87
  .nested .tileGroup:has(> .tileGroupTitle:hover),
88
88
  .nested .tileGroup:has(> .tile:hover) {
89
89
  background-color: rgba(27, 26, 33, 0.06);
90
90
  outline: 1px solid rgba(255, 255, 255, 1);
91
+ transition: var(--transition-in);
92
+ transition-property: background-color, outline;
91
93
  }
92
94
 
93
95
  .nested .tileGroup--NEGATIVE {
@@ -137,7 +139,8 @@
137
139
  font-size: var(--size-small);
138
140
  line-height: var(--line-height-heading);
139
141
  text-align: left;
140
- transition: var(--ui-transition-out);
142
+ transition: var(--transition-out);
143
+ transition-property: opacity, background-color;
141
144
  }
142
145
 
143
146
  .tile::before {
@@ -209,27 +212,22 @@
209
212
  margin-top: 0;
210
213
  }
211
214
 
212
- .tileSizeDefault {
213
- transition: var(--ui-transition-in);
214
- transition-property: left, top, width, height;
215
- }
216
-
217
215
  /** Tile diff variation */
218
216
  .tile {
219
217
  outline: 1px solid rgba(255, 255, 255, 1);
220
218
  color: var(--color-text);
221
- transition: var(--ui-transition-out);
222
219
  }
223
220
 
224
221
  .tile::before {
225
222
  color: var(--color-highlight);
226
- transition: var(--ui-transition-out);
223
+ transition: var(--transition-out);
227
224
  transition-property: opacity;
228
225
  opacity: 0.6;
229
226
  }
230
227
 
231
228
  .tile:hover::before {
232
- transition: var(--ui-transition-in);
229
+ transition: var(--transition-in);
230
+ transition-property: opacity;
233
231
  opacity: 0.4;
234
232
  }
235
233
 
package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js CHANGED
@@ -147,7 +147,7 @@ export function resolveTileSizeDisplay(width, height) {
147
147
  return 'default';
148
148
  }
149
149
  export function useTooltipStateWithMouseFollow(options) {
150
- const { parentRef, gutter = 16, timeout = 180 } = options;
150
+ const { parentRef, gutter = 16, timeout = 240 } = options;
151
151
  const pointer = useMouseHovered(parentRef, { whenHovered: true });
152
152
  const getAnchorRect = useCallback(() => {
153
153
  var _a, _b, _c, _d;
package/lib-esm/ui/file-name/file-name.module.css CHANGED
@@ -6,4 +6,6 @@
6
6
  word-break: break-word;
7
7
  hyphens: auto;
8
8
  white-space: normal;
9
+ max-height: calc(2em * var(--line-height));
10
+ overflow: hidden;
9
11
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bundle-stats/ui",
3
- "version": "4.13.2",
3
+ "version": "4.13.3",
4
4
  "description": "UI components for BundleStats projects.",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -36,9 +36,9 @@
36
36
  },
37
37
  "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
38
38
  "devDependencies": {
39
- "@babel/preset-env": "7.24.5",
40
- "@babel/preset-react": "7.24.1",
41
- "@babel/preset-typescript": "7.24.1",
39
+ "@babel/preset-env": "7.24.7",
40
+ "@babel/preset-react": "7.24.7",
41
+ "@babel/preset-typescript": "7.24.7",
42
42
  "@storybook/addon-essentials": "7.6.17",
43
43
  "@storybook/react": "7.6.17",
44
44
  "@storybook/react-webpack5": "7.6.17",
@@ -73,12 +73,12 @@
73
73
  "react-router-dom": "^5.0.0"
74
74
  },
75
75
  "dependencies": {
76
- "@bundle-stats/utils": "^4.13.2",
76
+ "@bundle-stats/utils": "^4.13.3",
77
77
  "ariakit": "2.0.0-next.44",
78
78
  "d3": "^7.8.5",
79
79
  "modern-css-reset": "1.4.0",
80
80
  "react-use": "^17.5.0",
81
81
  "use-query-params": "2.2.1"
82
82
  },
83
- "gitHead": "7e91118f08140f10991aa53a4ecdc4174387ce80"
83
+ "gitHead": "9ad8ae004d40d702efc3caef12d5641668a51d10"
84
84
  }
package/src/components/metrics-treemap/metrics-treemap.module.css CHANGED
@@ -54,18 +54,18 @@
54
54
  }
55
55
 
56
56
  .tileGroupTitle {
57
- transition: var(--ui-transition-out);
57
+ transition: var(--transition-out);
58
58
  }
59
59
 
60
60
  .tileGroupTitle:hover .tileGroupTitleText {
61
61
  text-decoration: underline;
62
- transition: var(--ui-transition-in);
62
+ transition: var(--transition-in);
63
63
  }
64
64
 
65
65
  /** Tile group size variation */
66
66
  .tileGroup {
67
- transition: var(--ui-transition-in);
68
- transition-property: left, top, width, height;
67
+ transition: var(--transition-out);
68
+ transition-property: background-color, outline;
69
69
  }
70
70
 
71
71
  .tileGroup--minimal .tileGroupTitle,
@@ -81,13 +81,15 @@
81
81
  /** Tile group nested variation */
82
82
  .nested .tileGroup {
83
83
  background-color: rgba(27, 26, 33, 0.03);
84
- outline: 1px solid rgba(255, 255, 255, 0.6);
84
+ outline: 1px solid rgba(255, 255, 255, 0.8);
85
85
  }
86
86
 
87
87
  .nested .tileGroup:has(> .tileGroupTitle:hover),
88
88
  .nested .tileGroup:has(> .tile:hover) {
89
89
  background-color: rgba(27, 26, 33, 0.06);
90
90
  outline: 1px solid rgba(255, 255, 255, 1);
91
+ transition: var(--transition-in);
92
+ transition-property: background-color, outline;
91
93
  }
92
94
 
93
95
  .nested .tileGroup--NEGATIVE {
@@ -137,7 +139,8 @@
137
139
  font-size: var(--size-small);
138
140
  line-height: var(--line-height-heading);
139
141
  text-align: left;
140
- transition: var(--ui-transition-out);
142
+ transition: var(--transition-out);
143
+ transition-property: opacity, background-color;
141
144
  }
142
145
 
143
146
  .tile::before {
@@ -209,27 +212,22 @@
209
212
  margin-top: 0;
210
213
  }
211
214
 
212
- .tileSizeDefault {
213
- transition: var(--ui-transition-in);
214
- transition-property: left, top, width, height;
215
- }
216
-
217
215
  /** Tile diff variation */
218
216
  .tile {
219
217
  outline: 1px solid rgba(255, 255, 255, 1);
220
218
  color: var(--color-text);
221
- transition: var(--ui-transition-out);
222
219
  }
223
220
 
224
221
  .tile::before {
225
222
  color: var(--color-highlight);
226
- transition: var(--ui-transition-out);
223
+ transition: var(--transition-out);
227
224
  transition-property: opacity;
228
225
  opacity: 0.6;
229
226
  }
230
227
 
231
228
  .tile:hover::before {
232
- transition: var(--ui-transition-in);
229
+ transition: var(--transition-in);
230
+ transition-property: opacity;
233
231
  opacity: 0.4;
234
232
  }
235
233
 
package/src/components/metrics-treemap/metrics-treemap.utils.ts CHANGED
@@ -245,7 +245,7 @@ interface UseTooltipStateWithMouseFollowOptions {
245
245
  * Ariakit tooltip state hook with mouse follow functionality
246
246
  */
247
247
  export function useTooltipStateWithMouseFollow(options: UseTooltipStateWithMouseFollowOptions) {
248
- const { parentRef, gutter = 16, timeout = 180 } = options;
248
+ const { parentRef, gutter = 16, timeout = 240 } = options;
249
249
 
250
250
  const pointer = useMouseHovered(parentRef, { whenHovered: true });
251
251
 
package/src/ui/file-name/file-name.module.css CHANGED
@@ -6,4 +6,6 @@
6
6
  word-break: break-word;
7
7
  hyphens: auto;
8
8
  white-space: normal;
9
+ max-height: calc(2em * var(--line-height));
10
+ overflow: hidden;
9
11
  }