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

package/lib-esm/utils/index.js

@@ -1,4 +1,5 @@
 export * from './colors';
 export * from './jobs';
 export * from './components';
+export * from './portal';
 //# sourceMappingURL=index.js.map

package/lib-esm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC"}

package/lib-esm/utils/portal.js

@@ -0,0 +1,6 @@
+export const getCreatePortalElement = (className) => (element) => {
+    const portalElement = element.ownerDocument.createElement('div');
+    portalElement.className = className;
+    return portalElement;
+};
+//# sourceMappingURL=portal.js.map

package/lib-esm/utils/portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../src/utils/portal.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,SAAiB,EAAE,EAAE,CAAC,CAAC,OAAoB,EAAE,EAAE;IACpF,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjE,aAAa,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.22.3",
+  "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.2",
+    "@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.0",
-    "@vitest/browser": "4.1.11",
-    "@vitest/browser-playwright": "4.1.11",
+    "@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.4.2",
+    "jest": "^30.5.0",
     "jest-date-mock": "1.0.10",
-    "jest-environment-jsdom": "30.4.1",
+    "jest-environment-jsdom": "30.5.2",
     "lodash": "4.18.1",
-    "playwright": "1.62.1",
+    "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.2.2",
+    "vite": "8.3.4",
     "vite-plugin-svgr": "5.2.0",
-    "vitest": "4.1.11"
+    "vitest": "5.0.5"
   },
   "peerDependencies": {
     "classnames": "^2.0.0",
@@ -83,7 +83,7 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.22.3",
+    "@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": "40d689d101ffc69421f87e29fb7449b4f1ae8bff"
+  "gitHead": "7c9e99fe7bf5b35dc75cf504f31c0ca035c04476"
 }

package/src/app/app.jsx

@@ -10,9 +10,10 @@ import { BundleAssetsTotals } from '../components/bundle-assets-totals';
 import { BundleModules } from '../components/bundle-modules';
 import { BundlePackages } from '../components/bundle-packages';
 import { Insights } from '../components/insights';
-import { MetricsTableTitle } from '../components';
+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';
@@ -150,6 +151,11 @@ const AppComponent = ({ version, jobs }) => {
   return (
     <JobsProvider jobs={jobs}>
       <Layout jobs={jobs} version={version}>
+        <Container className={css.metricChangeLegendContainer}>
+          <FlexStack justifyContent="flex-end">
+            <MetricChangeLegend />
+          </FlexStack>
+        </Container>
         <Container className={css.summaryContainer}>
           <Summary
             data={jobs[0].summary}

package/src/app/app.module.css

@@ -17,11 +17,16 @@
   border-bottom: 1px solid var(--color-outline);
 }
 
-.summaryContainer {
+.metricChangeLegendContainer {
   padding-top: var(--space-small);
   padding-bottom: var(--space-xxsmall);
 }
 
+.summaryContainer {
+  padding-top: var(--space-xxsmall);
+  padding-bottom: var(--space-xxsmall);
+}
+
 .tabsContainer {
   border-bottom: 1px solid var(--color-outline);
   background: var(--color-light);
@@ -32,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 {
@@ -52,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;
@@ -62,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/delta/delta.module.css

@@ -8,16 +8,16 @@
   color: var(--color-info);
 }
 
-.HIGH_NEGATIVE {
-  color: var(--color-red-dark);
+.LOW_NEGATIVE {
+  color: var(--color-red-light);
 }
 
 .NEGATIVE {
-  color: var(--color-red-dark);
+  color: var(--color-red);
 }
 
-.LOW_NEGATIVE {
-  color: var(--color-red-light);
+.HIGH_NEGATIVE {
+  color: var(--color-red-dark);
 }
 
 .LOW_POSITIVE {
@@ -25,7 +25,7 @@
 }
 
 .POSITIVE {
-  color: var(--color-green-dark);
+  color: var(--color-green);
 }
 
 .HIGH_POSITIVE {
@@ -43,24 +43,25 @@
   background: var(--color-info-light);
 }
 
-.inverted.HIGH_NEGATIVE {
-  background: var(--color-red-dark);
+.inverted.LOW_NEGATIVE {
+  background: var(--color-red-light);
 }
 
 .inverted.NEGATIVE {
-  background: var(--color-red-dark);
+  background: var(--color-red);
 }
 
-.inverted.LOW_NEGATIVE {
-  background: var(--color-red-light);
+.inverted.HIGH_NEGATIVE {
+  background: var(--color-red-dark);
 }
 
+
 .inverted.LOW_POSITIVE {
   background: var(--color-green-light);
 }
 
 .inverted.POSITIVE {
-  background: var(--color-green-dark);
+  background: var(--color-green);
 }
 
 .inverted.HIGH_POSITIVE {