@bundle-stats/ui 4.23.0-beta.1 → 4.23.0-beta.2

package/src/app/app.module.css

@@ -72,6 +72,6 @@
   .tabsContainer {
     position: sticky;
     top: var(--header-height);
-    z-index: calc(var(--layer-high));
+    z-index: var(--layer);
   }
 }

package/src/chart-colors.json

@@ -1,45 +1,59 @@
 [
-  "rgba(136,132,216,1)",
-  "rgba(135,137,219,1)",
-  "rgba(135,142,222,1)",
-  "rgba(134,147,225,1)",
-  "rgba(133,151,228,1)",
-  "rgba(132,156,231,1)",
-  "rgba(132,161,234,1)",
-  "rgba(131,166,237,1)",
-  "rgba(132,172,235,1)",
-  "rgba(134,178,234,1)",
-  "rgba(135,184,232,1)",
-  "rgba(137,191,230,1)",
-  "rgba(138,197,228,1)",
-  "rgba(140,203,227,1)",
-  "rgba(141,209,225,1)",
-  "rgba(139,208,215,1)",
-  "rgba(138,207,206,1)",
-  "rgba(136,206,196,1)",
-  "rgba(135,205,186,1)",
-  "rgba(133,204,176,1)",
-  "rgba(132,203,167,1)",
-  "rgba(130,202,157,1)",
-  "rgba(135,205,150,1)",
-  "rgba(140,208,143,1)",
-  "rgba(145,211,136,1)",
-  "rgba(149,213,129,1)",
-  "rgba(154,216,122,1)",
-  "rgba(159,219,115,1)",
-  "rgba(164,222,108,1)",
-  "rgba(170,224,105,1)",
-  "rgba(177,226,102,1)",
-  "rgba(183,228,99,1)",
-  "rgba(189,231,96,1)",
-  "rgba(195,233,93,1)",
-  "rgba(202,235,90,1)",
-  "rgba(208,237,87,1)",
-  "rgba(215,231,87,1)",
-  "rgba(221,226,87,1)",
-  "rgba(228,220,87,1)",
-  "rgba(235,215,88,1)",
-  "rgba(242,209,88,1)",
-  "rgba(248,204,88,1)",
-  "rgba(255,198,88,1)"
-]
+  "rgba(0,85,172,1)",
+  "rgba(13,85,174,1)",
+  "rgba(26,85,175,1)",
+  "rgba(39,85,177,1)",
+  "rgba(52,85,178,1)",
+  "rgba(65,84,180,1)",
+  "rgba(78,84,181,1)",
+  "rgba(91,84,183,1)",
+  "rgba(104,84,184,1)",
+  "rgba(112,83,184,1)",
+  "rgba(119,82,183,1)",
+  "rgba(127,81,183,1)",
+  "rgba(134,80,183,1)",
+  "rgba(142,79,182,1)",
+  "rgba(149,78,182,1)",
+  "rgba(157,77,181,1)",
+  "rgba(164,76,181,1)",
+  "rgba(170,75,179,1)",
+  "rgba(176,74,177,1)",
+  "rgba(182,73,174,1)",
+  "rgba(189,72,172,1)",
+  "rgba(195,71,170,1)",
+  "rgba(201,70,168,1)",
+  "rgba(207,69,165,1)",
+  "rgba(213,68,163,1)",
+  "rgba(217,68,160,1)",
+  "rgba(222,69,156,1)",
+  "rgba(226,69,153,1)",
+  "rgba(231,69,149,1)",
+  "rgba(235,69,146,1)",
+  "rgba(239,70,142,1)",
+  "rgba(244,70,139,1)",
+  "rgba(248,70,135,1)",
+  "rgba(249,73,131,1)",
+  "rgba(250,76,127,1)",
+  "rgba(251,78,122,1)",
+  "rgba(252,81,118,1)",
+  "rgba(252,84,114,1)",
+  "rgba(253,87,110,1)",
+  "rgba(254,89,105,1)",
+  "rgba(255,92,101,1)",
+  "rgba(255,96,96,1)",
+  "rgba(255,101,91,1)",
+  "rgba(255,105,86,1)",
+  "rgba(255,110,82,1)",
+  "rgba(255,114,77,1)",
+  "rgba(255,118,72,1)",
+  "rgba(255,123,67,1)",
+  "rgba(255,127,62,1)",
+  "rgba(255,132,54,1)",
+  "rgba(255,137,47,1)",
+  "rgba(255,142,39,1)",
+  "rgba(255,147,31,1)",
+  "rgba(255,151,23,1)",
+  "rgba(255,156,16,1)",
+  "rgba(255,161,8,1)",
+  "rgba(255,166,0,1)"
+]

package/src/components/entry-info/entry-info.module.css

@@ -5,7 +5,7 @@
   bottom: 0;
   width: 100vw;
   max-width: var(--entry-info-width);
-  z-index: var(--layer-high);
+  z-index: calc(var(--layer));
   background: var(--color-background);
   box-shadow: var(--shadow-layer-high);
 }

package/src/components/entry-info/entry-info.tsx

@@ -63,8 +63,8 @@ function defaultRenderRunInfo(item: ReportMetricRow) {
   return (
     <RunInfo
       current={metricRunInfo.displayValue}
-      delta={metricRunInfo.displayDeltaPercentage}
-      deltaPercentage={metricRunInfo.displayDelta}
+      delta={metricRunInfo.displayDelta}
+      deltaPercentage={metricRunInfo.displayDeltaPercentage}
       deltaType={metricRunInfo.deltaType}
       baseline={baselineRun?.displayValue || '0B'}
       size="large"

package/src/components/metric-change-legend/metric-change-legend.module.css

@@ -2,6 +2,17 @@
   font-size: var(--size-small);
 }
 
+.itemVariants {
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.itemLabel {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+}
+
 .itemAnchor {
   color: var(--color-text-light);
 }

package/src/components/metric-change-legend/metric-change-legend.tsx

@@ -135,8 +135,8 @@ export const MetricChangeLegend = (props: MetricChangeLegendProps) => {
           anchorClassName={css.itemAnchor}
           label={
             <FlexStack inline alignItems="center" space="xxsmall" className={css.item}>
-              <Variants kind={id} variants={variants} />
-              <span>{label}</span>
+              <Variants kind={id} variants={variants} className={css.itemVariants} />
+              <span className={css.itemLabel}>{label}</span>
             </FlexStack>
           }
         >

package/src/components/metric-run-info/metric-run-info.tsx

@@ -56,6 +56,7 @@ export type MetricRunInfoProps = {
   baseline?: number;
   showMetricDescription?: boolean;
   titleWrapper?: ElementType;
+  showDeltaValue?: boolean;
 } & Pick<RunInfoProps, 'showDelta' | 'showBaseline' | 'size' | 'loading'>;
 
 export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'div'>) => {
@@ -113,20 +114,10 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
       };
     }
 
-    // For file sizes, show the real data
-    if (metric.type === MetricTypes.FileSize) {
-      return {
-        showDelta: true,
-        delta: metricRunInfo.displayDelta,
-        deltaType: metricRunInfo.deltaType,
-        deltaPercentage: metricRunInfo.displayDeltaPercentage,
-      };
-    }
-
     return {
       showDelta: true,
-      delta: metricRunInfo.displayDelta,
       deltaType: metricRunInfo.deltaType,
+      deltaPercentage: metricRunInfo.displayDeltaPercentage,
     };
   }, [metric, metricRunInfo, showDelta]);
 

package/src/components/metrics-table-options/metrics-table-options.tsx

@@ -2,8 +2,7 @@ import type { ComponentProps } from 'react';
 import React from 'react';
 
 import I18N from '../../i18n';
-import { Dropdown, DropdownItem } from '../../ui/dropdown';
-import css from './metrics-table-options.module.css';
+import { Dropdown, DropdownGroup, DropdownItem } from '../../ui/dropdown';
 
 type MetricsTableOptionsProps = {
   onViewAllClick?: () => void;
@@ -15,19 +14,19 @@ export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
   const { onViewAllClick, onResetClick, onExportClick, ...restProps } = props;
 
   return (
-    <Dropdown glyph="more-vertical" placement="bottom-end" showChevron={false} {...restProps}>
-      <div className={css.group}>
+    <Dropdown glyph="more-vertical" placement="bottom-end" {...restProps}>
+      <DropdownGroup>
         {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
         {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
-      </div>
-      <div className={css.group}>
+      </DropdownGroup>
+      <DropdownGroup>
         {onExportClick && (
           <>
             <DropdownItem onClick={() => onExportClick('csv')}>{I18N.EXPORT_CSV}</DropdownItem>
             <DropdownItem onClick={() => onExportClick('json')}>{I18N.EXPORT_JSON}</DropdownItem>
           </>
         )}
-      </div>
+      </DropdownGroup>
     </Dropdown>
   );
 };

package/src/components/metrics-treemap/metrics-treemap.constants.ts

@@ -55,6 +55,14 @@ export type TileGroupSizeDisplay = 'minimal' | 'small' | 'default';
 
 export type TileSizeDisplay = 'minimal' | 'small' | 'default';
 
+/**
+ * DOM marker set on every tile and tile group title (see `metrics-treemap.tsx`).
+ * `MetricsTreemap` uses it to resolve the hovered node from a single delegated
+ * pointer handler, instead of attaching hover listeners to every cell.
+ */
+export const NODE_ID_ATTRIBUTE = 'data-treemap-id';
+export const NODE_ID_SELECTOR = `[${NODE_ID_ATTRIBUTE}]`;
+
 export const SQUARIFY_RATIO = 1.66;
 export const PADDING_OUTER = 1;
 export const PADDING_INNER = 2;

package/src/components/metrics-treemap/metrics-treemap.module.css

@@ -20,6 +20,7 @@
  * Tile group
  */
 .tileGroup {
+  border-radius: var(--radius-xsmall);
   position: absolute;
 }
 
@@ -31,6 +32,7 @@
 .tileGroupTitleContent {
   width: 100%;
   padding: var(--space-xxxsmall) 2px var(--space-xxxsmall) var(--space-xxsmall);
+  border-radius: var(--radius-xsmall);
   display: flex;
   align-items: center;
   color: var(--color-text);
@@ -66,12 +68,6 @@
 .tileGroup {
   transition: var(--transition-out);
   transition-property: background-color, outline;
-  border-radius: var(--radius-xsmall);
-}
-
-.tileGroup--minimal,
-.tileGroup--small {
-  border-radius: calc(var(--radius-xsmall) / 2);
 }
 
 .tileGroup--minimal .tileGroupTitle,
@@ -136,9 +132,8 @@
   position: absolute;
   appearance: none;
   border: 0;
-  border-radius: 0;
+  border-radius: var(--radius-xsmall);
   padding: 0;
-  border-radius: calc(var(--radius-xsmall) / 2);
   background: var(--color-background);
   display: flex;
   align-items: center;
@@ -159,6 +154,7 @@
   top: 0;
   width: 100%;
   height: 100%;
+  border-radius: inherit;
   background-color: currentColor;
 }
 
@@ -170,9 +166,10 @@
   display: flex;
   flex-flow: column;
   justify-content: center;
-  padding: var(--space-xxsmall) var(--space-xxsmall);
+  padding: var(--space-xxsmall);
   gap: var(--space-xxxsmall);
   line-height: var(--line-height-heading);
+  cursor: default;
 }
 
 /** Align label to other elements on the first column cells */
@@ -213,7 +210,7 @@
 /** Tile size variation */
 .tileSizeSmall .tileContent {
   padding: var(--space-xxxsmall);
-  font-size: 10px;
+  font-size: var(--size-xsmall);
 }
 
 .tileSizeSmall .tileContentLabel {
@@ -298,11 +295,6 @@
 }
 
 /** tooltip */
-.tileContentTooltipAnchor {
-  width: 100%;
-  height: 100%;
-}
-
 .tooltip {
   z-index: var(--layer-high);
   padding: var(--space-xsmall) var(--space-small);
@@ -326,7 +318,8 @@
   font-size: var(--size-small);
 }
 
-/* prevent tooltip portal wrapper from capturing events */
+/* prevent the tooltip portal wrapper from capturing pointer events - the
+   treemap relies on pointer events reaching the canvas to track the hovered cell */
 div[role='presentation']:has(.tooltip) {
   pointer-events: none;
 }