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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.23.0-beta.1",
+  "version": "4.23.0-beta.10",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -38,41 +38,41 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "8.0.5",
+    "@babel/preset-env": "8.0.7",
     "@babel/preset-react": "8.0.1",
-    "@babel/preset-typescript": "8.0.1",
-    "@storybook/addon-vitest": "10.5.10",
-    "@storybook/react": "10.5.10",
-    "@storybook/react-vite": "10.5.10",
+    "@babel/preset-typescript": "8.0.7",
+    "@storybook/addon-vitest": "10.6.2",
+    "@storybook/react": "10.6.2",
+    "@storybook/react-vite": "10.6.2",
     "@types/d3": "7.4.3",
     "@types/react": "18.3.13",
     "@types/react-router-dom": "5.3.3",
-    "@vitejs/plugin-react": "6.1.1",
-    "@vitest/browser": "5.0.0",
-    "@vitest/browser-playwright": "5.0.0",
+    "@vitejs/plugin-react": "6.1.2",
+    "@vitest/browser": "5.0.5",
+    "@vitest/browser-playwright": "5.0.5",
     "babel-plugin-polyfill-corejs3": "1.0.0",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.5.1",
     "colormap": "2.3.2",
-    "core-js": "3.50.0",
+    "core-js": "3.51.0",
     "cross-env": "10.1.0",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "^30.5.0",
     "jest-date-mock": "1.0.10",
-    "jest-environment-jsdom": "30.5.1",
+    "jest-environment-jsdom": "30.5.2",
     "lodash": "4.18.1",
-    "playwright": "1.63.0",
+    "playwright": "1.64.1",
     "prop-types": "15.8.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "5.3.4",
     "rimraf": "6.1.3",
-    "storybook": "10.5.10",
+    "storybook": "10.6.2",
     "typescript": "5.9.3",
-    "vite": "8.3.0",
+    "vite": "8.3.4",
     "vite-plugin-svgr": "5.2.0",
-    "vitest": "5.0.0"
+    "vitest": "5.0.5"
   },
   "peerDependencies": {
     "classnames": "^2.0.0",
@@ -83,7 +83,7 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.23.0-beta.1",
+    "@bundle-stats/utils": "^4.23.0-beta.10",
     "ariakit": "2.0.0-next.44",
     "d3": "7.9.0",
     "modern-css-reset": "1.4.0",
@@ -91,5 +91,5 @@
     "snarkdown": "2.0.0",
     "use-query-params": "2.2.2"
   },
-  "gitHead": "5ed30de2bfdfe488b8a5f3490b11d1429d89b6ad"
+  "gitHead": "7c9e99fe7bf5b35dc75cf504f31c0ca035c04476"
 }

package/src/app/app.jsx

@@ -13,6 +13,7 @@ import { Insights } from '../components/insights';
 import { MetricChangeLegend, MetricsTableTitle } from '../components';
 import { Summary } from '../components/summary';
 import { Box } from '../layout/box';
+import { FlexStack } from '../layout/flex-stack';
 import { Footer } from '../layout/footer';
 import { Stack } from '../layout/stack';
 import { Container } from '../ui/container';
@@ -151,9 +152,9 @@ const AppComponent = ({ version, jobs }) => {
     <JobsProvider jobs={jobs}>
       <Layout jobs={jobs} version={version}>
         <Container className={css.metricChangeLegendContainer}>
-          <div className={css.metricChangeLegendContainerInner}>
+          <FlexStack justifyContent="flex-end">
             <MetricChangeLegend />
-          </div>
+          </FlexStack>
         </Container>
         <Container className={css.summaryContainer}>
           <Summary

package/src/app/app.module.css

@@ -22,11 +22,6 @@
   padding-bottom: var(--space-xxsmall);
 }
 
-.metricChangeLegendContainerInner {
-  display: flex;
-  justify-content: flex-end;
-}
-
 .summaryContainer {
   padding-top: var(--space-xxsmall);
   padding-bottom: var(--space-xxsmall);
@@ -42,11 +37,13 @@
 }
 
 .tabActive {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition: var(--transition-in);
 }
 
 .tabActive::after {
-  background: currentColor;
+  opacity: 1;
+  transition: var(--transition-in);
 }
 
 .tabsContent {
@@ -62,7 +59,8 @@
 
   .header {
     position: fixed;
-    z-index: calc(var(--layer-xhigh) + 2);
+    /** above the sticky tabs, entry info and the entry info overlays */
+    z-index: calc(var(--layer-xhigh) + 3);
     left: 0;
     top: 0;
     right: 0;
@@ -72,6 +70,7 @@
   .tabsContainer {
     position: sticky;
     top: var(--header-height);
-    z-index: calc(var(--layer-high));
+    /** above the overlays (tooltips, hovercards, dropdowns) */
+    z-index: var(--layer-xhigh);
   }
 }

package/src/app/header/header.module.css

@@ -11,14 +11,12 @@
   border-radius: 50%;
   opacity: 0.8;
   color: var(--color-text-ultra-dark);
-  transition: var(--transition-out);
 }
 
-.toolsGitHub:hover,
 .toolsGitHub:focus,
+.toolsGitHub:hover,
 .toolsGitHub:active {
   opacity: 1;
-  transition: var(--transition-in);
 }
 
 .toolsGitHubIcon {

package/src/components/asset-name/asset-name.module.css

@@ -1,6 +1,5 @@
 .notPredictive {
-  margin-right: var(--space-xxsmall);
-  display: inline-block;
+  flex: 0 0 auto;
   width: var(--space-small);
   height: var(--space-small);
 }
@@ -13,20 +12,22 @@
   max-width: 480px;
 }
 
-.metaTags {
-  display: inline;
-  margin-right: var(--space-xxxsmall);
+.link {
+  flex: 1 1 auto;
 }
 
-.metaTag + .metaTag {
-  margin-left: calc(var(--space-xxxsmall) / 2);
+.tags {
+  flex: 0 0 auto;
+  display: inline-flex;
+  gap: 1px;
 }
 
-.metaTags:empty {
+.tags:empty {
   display: none;
 }
 
-.nameText {
-  display: inline-block;
+.name {
+  flex: 1 1 auto;
   vertical-align: middle;
+  text-decoration: inherit;
 }

package/src/components/asset-name/asset-name.tsx

@@ -1,5 +1,6 @@
 import React, { ElementType } from 'react';
 
+import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../../ui/icon';
 import { FileName } from '../../ui/file-name';
 import { HoverCard } from '../../ui/hover-card';
@@ -24,7 +25,7 @@ export const AssetName = (props: AssetNameProps) => {
   const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = row;
 
   return (
-    <span className={className}>
+    <FlexStack as="span" inline alignItems="center" gap="xxxsmall" className={className}>
       {isNotPredictive && (
         <HoverCard
           label={<Icon className={css.notPredictiveIcon} glyph={Icon.ICONS.WARNING} />}
@@ -35,25 +36,27 @@ export const AssetName = (props: AssetNameProps) => {
         </HoverCard>
       )}
 
-      <EntryComponentLink entryId={row.key} className={css.name}>
-        <span className={css.metaTags}>
+      <FlexStack
+        as={EntryComponentLink}
+        entryId={row.key}
+        inline
+        alignItems="center"
+        gap="xxxsmall"
+        className={css.link}
+      >
+        <span className={css.tags}>
           {isEntry && (
-            <AssetMetaTag className={css.metaTag} title="Entrypoint" tag="entry" status={isEntry} />
+            <AssetMetaTag className={css.tag} title="Entrypoint" tag="entry" status={isEntry} />
           )}
           {isInitial && (
-            <AssetMetaTag
-              className={css.metaTag}
-              title="Initial"
-              tag="initial"
-              status={isInitial}
-            />
+            <AssetMetaTag className={css.tag} title="Initial" tag="initial" status={isInitial} />
           )}
           {isChunk && (
-            <AssetMetaTag className={css.metaTag} title="Chunk" tag="chunk" status={isChunk} />
+            <AssetMetaTag className={css.tag} title="Chunk" tag="chunk" status={isChunk} />
           )}
         </span>
-        <FileName className={css.nameText} name={label} />
-      </EntryComponentLink>
-    </span>
+        <FileName className={css.name} name={label} />
+      </FlexStack>
+    </FlexStack>
   );
 };

package/src/components/bundle-assets/bundle-assets.module.css

@@ -3,18 +3,6 @@
   max-width: 240px;
 }
 
-.root .assetName:hover,
-.root .assetName:active,
-.root .assetName:focus {
-  text-decoration: none;
-}
-
-.root .assetName:hover .assetNameText,
-.root .assetName:active .assetNameText,
-.root .assetName:focus .assetNameText {
-  text-decoration: underline;
-}
-
 .search {
   margin: 0;
   width: 100%;

package/src/components/bundle-assets/bundle-assets.tsx

@@ -26,6 +26,7 @@ import { MetricsTable } from '../metrics-table';
 import { MetricsTableExport } from '../metrics-table-export';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
+import { MetricsTableRowCount } from '../metrics-table-row-count';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
@@ -164,7 +165,7 @@ export const BundleAssets = (props: BundleAssetsProps) => {
     () => (
       <MetricsTableTitle
         title={I18N.ASSETS}
-        info={`${items.length}/${totalRowCount}`}
+        info={<MetricsTableRowCount count={items.length} total={totalRowCount} />}
         popoverInfo={I18N.ASSETS_INFO}
         popoverHref={config.documentation.assets}
       />
@@ -205,6 +206,11 @@ export const BundleAssets = (props: BundleAssetsProps) => {
     [EntryComponentLink],
   );
 
+  const handleRowClick = useCallback(
+    (row: ReportMetricRow) => showEntryInfo(row.key),
+    [showEntryInfo],
+  );
+
   const emptyMessage = useMemo(
     () => (
       <EmptySet
@@ -276,6 +282,7 @@ export const BundleAssets = (props: BundleAssetsProps) => {
               runs={jobs}
               items={items}
               renderRowHeader={renderRowHeader}
+              onRowClick={handleRowClick}
               emptyMessage={emptyMessage}
               showHeaderSum
               title={metricsTableTitle}

package/src/components/bundle-assets/index.tsx

@@ -75,12 +75,14 @@ export const BundleAssets = (props: BundleAssetsProps) => {
     return { rows: result, totalRowCount: result.length };
   }, [jobs]);
 
+  const getRowFilter = useMemo(() => generateGetRowFilter({ chunkIds }), [chunkIds]);
+
   // Filter rows
   const filteredRows = useRowsFilter({
     rows,
     searchPattern: searchProps.searchPattern,
     filters: searchProps.filters,
-    getRowFilter: generateGetRowFilter({ chunkIds }),
+    getRowFilter,
   });
 
   // Sort rows

package/src/components/bundle-assets-totals/bundle-assets-totals.jsx

@@ -72,6 +72,10 @@ export const BundleAssetsTotals = ({
     [history],
   );
 
+  const handleItemClick = onTreemapItemClick || handleMetricsTreemapItemClick;
+
+  const handleRowClick = useCallback((row) => handleItemClick(row.key), [handleItemClick]);
+
   const exportDialog = useDialogState();
   const [exportSourceType, setExportSourceType] = useState(undefined);
 
@@ -98,6 +102,7 @@ export const BundleAssetsTotals = ({
               runs={jobs}
               items={items}
               renderRowHeader={renderRowHeader}
+              onRowClick={handleRowClick}
               showHeaderSum
               {...restProps}
             />
@@ -112,10 +117,7 @@ export const BundleAssetsTotals = ({
                   rows={items}
                 />
               </Table>
-              <MetricsTreemap
-                treeNodes={getTreemapNodes(items)}
-                onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
-              />
+              <MetricsTreemap treeNodes={getTreemapNodes(items)} onItemClick={handleItemClick} />
             </>
           )}
         </Box>

package/src/components/bundle-modules/bundle-modules.module.css

@@ -12,8 +12,7 @@
 }
 
 .nameTagDuplicated {
-  margin-right: var(--space-xxxsmall);
-  vertical-align: baseline;
+  flex: 0 0 auto;
 }
 
 .nameTagDuplicated::before {
@@ -21,18 +20,5 @@
 }
 
 .nameText {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.root .name:hover,
-.root .name:active,
-.root .name:focus {
-  text-decoration: none;
-}
-
-.root .name:hover .nameText,
-.root .name:active .nameText,
-.root .name:focus .nameText {
-  text-decoration: underline;
+  flex: 1 1 auto;
 }

package/src/components/bundle-modules/bundle-modules.tsx

@@ -36,6 +36,7 @@ import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '.
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableTitle } from '../metrics-table-title';
+import { MetricsTableRowCount } from '../metrics-table-row-count';
 import { ModuleInfo } from '../module-info';
 import { generateFilterFieldsData } from './bundle-modules.utils';
 import * as I18N_MODULES from './bundle-modules.i18n';
@@ -57,12 +58,12 @@ const RowHeader = (props: RowHeaderProps) => {
   const moduleRow = row as ReportMetricModuleRow;
 
   return (
-    <EntryComponentLink entryId={row.key} className={css.name}>
+    <FlexStack as={EntryComponentLink} entryId={row.key} inline alignItems="center" gap="xxxsmall">
       {moduleRow.duplicated && (
         <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
       )}
       <FileName className={css.nameText} name={moduleRow.label} />
-    </EntryComponentLink>
+    </FlexStack>
   );
 };
 
@@ -228,7 +229,7 @@ export const BundleModules = (props: BundleModulesProps) => {
     () => (
       <MetricsTableTitle
         title={I18N.MODULES}
-        info={`${items.length}/${totalRowCount}`}
+        info={<MetricsTableRowCount count={items.length} total={totalRowCount} />}
         popoverInfo={I18N.MODULES_INFO}
         popoverHref={config.documentation.modules}
       />
@@ -241,6 +242,11 @@ export const BundleModules = (props: BundleModulesProps) => {
     [EntryComponentLink],
   );
 
+  const handleRowClick = useCallback(
+    (row: ReportMetricRow) => showEntryInfo(row.key),
+    [showEntryInfo],
+  );
+
   const emptyMessage = useMemo(
     () => (
       <EmptySet
@@ -348,6 +354,7 @@ export const BundleModules = (props: BundleModulesProps) => {
               items={items}
               runs={jobs}
               renderRowHeader={renderRowHeader}
+              onRowClick={handleRowClick}
               emptyMessage={emptyMessage}
               showHeaderSum
               title={metricsTableTitle}

package/src/components/bundle-modules/index.tsx

@@ -116,11 +116,13 @@ export const BundleModules = (props: BundleModulesProps) => {
     };
   }, [jobs, moduleMetric]);
 
+  const getRowFilter = useMemo(() => generateGetRowFilter({ chunkIds }), [chunkIds]);
+
   const filteredRows = useRowsFilter({
     rows,
     searchPattern: searchParams.searchPattern,
     filters: searchParams.filters,
-    getRowFilter: generateGetRowFilter({ chunkIds }),
+    getRowFilter,
   }) as Array<ReportMetricModuleRow>;
 
   const sortParams = useRowsSort({

package/src/components/bundle-packages/bundle-packages.jsx

@@ -22,6 +22,7 @@ import { MetricsTableExport } from '../metrics-table-export';
 import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
+import { MetricsTableRowCount } from '../metrics-table-row-count';
 import { PackageInfo } from '../package-info';
 import { SEARCH_PLACEHOLDER } from './bundle-packages.i18n';
 import css from './bundle-packages.module.css';
@@ -48,7 +49,14 @@ const getDropdownFilters = ({ compareMode, filters }) => ({
 
 const PackageName = ({ row, packageName, showDetails, EntryComponentLink }) => {
   return (
-    <EntryComponentLink entryId={showDetails ? row.key : packageName} className={css.packageName}>
+    <FlexStack
+      as={EntryComponentLink}
+      entryId={showDetails ? row.key : packageName}
+      inline
+      alignItems="center"
+      gap="xxxsmall"
+      className={css.packageName}
+    >
       {showDetails && row.duplicate && (
         <Tag
           className={css.packageNameTagDuplicate}
@@ -58,7 +66,7 @@ const PackageName = ({ row, packageName, showDetails, EntryComponentLink }) => {
         />
       )}
       <span className={css.packageNameLabel}>{packageName}</span>
-    </EntryComponentLink>
+    </FlexStack>
   );
 };
 
@@ -217,7 +225,7 @@ export const BundlePackages = (props) => {
     () => (
       <MetricsTableTitle
         title={I18N.PACKAGES}
-        info={`${items.length}/${totalRowCount}`}
+        info={<MetricsTableRowCount count={items.length} total={totalRowCount} />}
         popoverInfo={I18N.PACKAGES_INFO}
         popoverHref={config.documentation.packages}
       />
@@ -249,6 +257,8 @@ export const BundlePackages = (props) => {
     [PackageNameCustomComponentLink],
   );
 
+  const handleRowClick = useCallback((row) => showEntryInfo(row.key), [showEntryInfo]);
+
   const emptyMessage = useMemo(
     () => (
       <EmptySet
@@ -320,6 +330,7 @@ export const BundlePackages = (props) => {
               items={items}
               emptyMessage={emptyMessage}
               renderRowHeader={renderRowHeader}
+              onRowClick={handleRowClick}
               showHeaderSum
               title={metricsTableTitle}
               sort={sort}

package/src/components/bundle-packages/bundle-packages.module.css

@@ -12,8 +12,20 @@
 }
 
 .packageName {
-  display: inline-block;
   color: var(--color-text-light);
+  text-decoration: none;
+}
+
+.packageNameTagDuplicate {
+  flex: 0 0 auto;
+}
+
+.packageNameTagDuplicate::before {
+  content: 'd';
+}
+
+.packageNameLabel {
+  flex: 1 1 auto;
 }
 
 .packageName:last-child {
@@ -25,29 +37,13 @@
   margin: 0 var(--space-xxxsmall);
   content: '/';
   color: var(--color-text-ultra-light);
+  text-decoration: none;
 }
 
-.packageNameTagDuplicate {
-  margin-right: var(--space-xxxsmall);
-  vertical-align: middle;
-}
-
-.packageNameLabel {
-  vertical-align: middle;
-}
-
-.packageNameTagDuplicate::before {
-  content: 'd';
-}
-
-.root .packageName:hover,
-.root .packageName:active,
-.root .packageName:focus {
-  text-decoration: none;
+.packageName:hover {
+  text-decoration: none !important;
 }
 
-.root .packageName:hover .packageNameLabel,
-.root .packageName:active .packageNameLabel,
-.root .packageName:focus .packageNameLabel {
-  text-decoration: underline;
+.packageName:hover .packageNameLabel {
+  text-decoration: underline !important;
 }

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

@@ -1,3 +1,8 @@
+/** place overlays triggered from inside the entry info above the panel, under the header */
+.portal {
+  --layer-overlay: calc(var(--layer-xhigh) + 2);
+}
+
 .root {
   position: fixed;
   right: 0;
@@ -5,7 +10,8 @@
   bottom: 0;
   width: 100vw;
   max-width: var(--entry-info-width);
-  z-index: var(--layer-high);
+  /** above the sticky tabs */
+  z-index: calc(var(--layer-xhigh) + 1);
   background: var(--color-background);
   box-shadow: var(--shadow-layer-high);
 }
@@ -107,7 +113,6 @@
   line-height: var(--line-height-heading);
   border-radius: var(--radius-small);
   background: var(--color-highlight);
-  transition: var(--transition-out);
 
   text-decoration: none;
   text-transform: none;

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

@@ -12,6 +12,7 @@ import { FileName } from '../../ui/file-name';
 import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { Table } from '../../ui/table';
+import { getCreatePortalElement } from '../../utils/portal';
 import { RunInfo } from '../run-info';
 import * as I18N from './entry-info.i18n';
 import css from './entry-info.module.css';
@@ -50,6 +51,11 @@ const EntryInfoMeta = ({
   </div>
 );
 
+/**
+ * Raise the z-index of the overlays nested inside the entry info
+ */
+const createPortalElement = getCreatePortalElement(css.portal);
+
 function defaultRenderRunInfo(item: ReportMetricRow) {
   const baselineRun = item.runs.length > 1 ? item.runs?.[item.runs.length - 1] : null;
 
@@ -63,8 +69,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"
@@ -108,7 +114,7 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
   } = props;
 
   return (
-    <Portal className={cx(css.root, className)}>
+    <Portal portalElement={createPortalElement} className={cx(css.root, className)}>
       <Box padding="medium" as="header" className={css.header}>
         <Stack space="small">
           <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.label}>

package/src/components/jobs-header/jobs-header.module.css

@@ -1,7 +1,6 @@
 .root {
   padding: var(--space-small) 0;
   width: 100%;
-  display: flex;
 }
 
 .item {

package/src/components/jobs-header/jobs-header.tsx

@@ -76,7 +76,7 @@ export const JobsHeader = (props: JobsHeaderProps & React.ComponentProps<'header
   const rootClassName = cx(css.root, className);
 
   return (
-    <header className={rootClassName}>
+    <FlexStack as="header" className={rootClassName}>
       {jobs?.map((job, index) => (
         <Item
           key={job.internalBuildNumber || index}
@@ -84,6 +84,6 @@ export const JobsHeader = (props: JobsHeaderProps & React.ComponentProps<'header
           tag={index === 0 ? I18N.CURRENT : I18N.BASELINE}
         />
       ))}
-    </header>
+    </FlexStack>
   );
 };