@bundle-stats/ui 4.13.0-beta.0 → 4.13.0-beta.10

package/lib-esm/ui/filters/filters.module.css

@@ -1,18 +1,19 @@
-/* Checkbox + label + button */
-.filter {
-  /* Update MenuItem padding */
-  padding-top: calc(var(--space-xxxsmall) / 2);
-  padding-bottom: calc(var(--space-xxxsmall) / 2);
+/* explicit ControlGroup last item styles to override ariakit injected sibling nodes */
+.itemLast {
+  border-top-right-radius: var(--radius-small) !important;
+  border-bottom-right-radius: var(--radius-small) !important;
+}
 
+/* Filter (label with input + text) */
+.filter {
   position: relative;
   width: 100%;
   max-width: 240px;
+  color: var(--color-text);
 }
 
-.filterCheckbox {
-}
-
-.filterInput {
+.filterControl {
+  margin: 0;
   flex: 0 0 auto;
   height: 1em;
 }
@@ -25,7 +26,47 @@
   text-overflow: ellipsis;
 }
 
-.filterOnlyButton {
+.filterControl[disabled] + .filterLabel {
+  color: var(--color-text-light);
+}
+
+.filter:hover {
+  color: var(--color-dark);
+}
+
+/** Filter single */
+.filterSingle {
+  padding: calc(var(--space-xxsmall) - 1px);
+  border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  font-size: var(--size-small);
+  line-height: var(--space-small);
+  color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
+}
+
+.filterSingle:hover,
+.filterSingle:active,
+.filterSingle:focus {
+  border-color: var(--color-outline-dark);
+  transition: var(--transition-in);
+}
+
+/** Filter group */
+.filterGroupItems {
+  max-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
+  overflow: auto;
+}
+
+.filterGroupItem {
+  position: relative;
+}
+
+.filterGroupItemFilter {
+  padding-right: 24px; /* space for only button */
+}
+
+.filterGroupOnlyButton {
   display: none;
   position: absolute;
   right: 2px;
@@ -37,10 +78,11 @@
 }
 
 /** cover item text */
-.filterOnlyButton::before {
+.filterGroupOnlyButton::before {
   content: ' ';
   display: block;
   position: absolute;
+  pointer-events: none;
   top: 0;
   right: 100%;
   bottom: 0;
@@ -48,53 +90,13 @@
   background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 75%);
 }
 
-/** filter disabled state */
-.filterInput[disabled] + .filterLabel {
-  color: var(--color-text-light);
-}
-
-.filterInput[disabled] + .filterOnlyButton {
-  display: none;
-}
-
 /** filter hover state */
-.filter {
-  color: var(--color-text);
-}
-
-.filter:hover {
-  color: var(--color-dark);
-}
-
-.filter:hover .filterOnlyButton {
+.filterGroupItem:hover .filterGroupOnlyButton {
   display: block;
 }
 
-/** Filter standard variation */
-.filterStandalone {
-  padding: 0;
-  width: auto;
-  color: var(--color-text-light);
-  z-index: var(--layout-xlow); /* show collapsed border */
-  font-size: var(--size-small);
-  line-height: var(--space-small);
-}
-
-.filterStandalone .filterCheckbox {
-  padding: calc(var(--space-xxsmall) - 1px) calc(var(--space-xxsmall) - 1px);
-  border: 1px solid var(--color-outline);
-}
-
-.filterStandalone:hover .filterCheckbox,
-.filterStandalone:active .filterCheckbox,
-.filterStandalone:focus .filterCheckbox {
-  z-index: var(--layout-xlow); /* show collapsed border */
-  box-shadow: var(--outline-hover);
-  color: var(--color-text);
-}
-
 /** Filter group variation */
-.labelSuffixCustom {
+.filterGroupLabelSuffixCustom {
   color: var(--color-text);
   text-transform: lowercase;
 }
@@ -112,11 +114,6 @@
   color: var(--color-text-light);
 }
 
-.filterGroupItems {
-  max-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
-  overflow: auto;
-}
-
 .filterGroupActions {
   margin-top: var(--space-xxxsmall);
   padding-top: var(--space-xxxsmall);
@@ -124,12 +121,3 @@
   margin-bottom: calc(0px - var(--space-xxxsmall));
   border-top: 1px solid var(--color-outline);
 }
-
-.item {
-  position: relative;
-  flex: 0 0 auto;
-}
-
-.itemButton {
-  border-radius: var(--radius-small);
-}

package/lib-esm/ui/hover-card/hover-card.js

@@ -4,7 +4,7 @@ import { Hovercard, HovercardAnchor, HovercardArrow, useHovercard, useHovercardS
 import css from './hover-card.module.css';
 export const HoverCard = (props) => {
     const { className = '', anchorClassName = '', hoverCardClassName = '', href = '', as = null, label, children, } = props;
-    const state = useHovercardState({ gutter: 8, timeout: 300 });
+    const state = useHovercardState({ gutter: 8, timeout: 300, placement: 'top' });
     const hovercardProps = useHovercard({ state, portal: true });
     const Component = useMemo(() => {
         if (as) {

package/lib-esm/ui/hover-card/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/ui/hover-card/hover-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,SAAS,EACT,eAAe,EACf,cAAc,EACd,YAAY,EACZ,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAY1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,kBAAkB,GAAG,EAAE,EACvB,IAAI,GAAG,EAAE,EACT,EAAE,GAAG,IAAI,EACT,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAC7D,MAAM,cAAc,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAG7D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,EAAE,EAAE;YACN,OAAO,EAAE,CAAC;SACX;QAED,IAAI,IAAI,EAAE;YACR,OAAO,GAAG,CAAC;SACZ;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;QACrC,oBAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,EAC1C,EAAE,EAAE,SAAS,mBACE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAEjD,KAAK,CACU;QAClB,oBAAC,SAAS,OACJ,cAAc,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC;YAEhD,oBAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI;YAC3B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAClE,CACR,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/ui/hover-card/hover-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,SAAS,EACT,eAAe,EACf,cAAc,EACd,YAAY,EACZ,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAY1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,kBAAkB,GAAG,EAAE,EACvB,IAAI,GAAG,EAAE,EACT,EAAE,GAAG,IAAI,EACT,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;IAC/E,MAAM,cAAc,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAG7D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,EAAE,EAAE;YACN,OAAO,EAAE,CAAC;SACX;QAED,IAAI,IAAI,EAAE;YACR,OAAO,GAAG,CAAC;SACZ;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;QACrC,oBAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,EAC1C,EAAE,EAAE,SAAS,mBACE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAEjD,KAAK,CACU;QAClB,oBAAC,SAAS,OACJ,cAAc,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC;YAEhD,oBAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI;YAC3B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAClE,CACR,CACP,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/ui/toolbar/toolbar.module.css

@@ -1,6 +1,4 @@
-.root {
-  padding: var(--space-small);
-}
+.root { }
 
 .content {}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.13.0-beta.0",
+  "version": "4.13.0-beta.10",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,14 +36,14 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "7.24.0",
-    "@babel/preset-react": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
+    "@babel/preset-env": "7.24.4",
+    "@babel/preset-react": "7.24.1",
+    "@babel/preset-typescript": "7.24.1",
     "@storybook/addon-essentials": "7.6.17",
     "@storybook/react": "7.6.17",
     "@storybook/react-webpack5": "7.6.17",
     "@types/d3": "7.4.3",
-    "@types/react": "18.2.64",
+    "@types/react": "18.2.75",
     "@types/react-router-dom": "5.3.3",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.5.1",
@@ -52,7 +52,7 @@
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",
-    "jest-date-mock": "1.0.8",
+    "jest-date-mock": "1.0.9",
     "jest-environment-jsdom": "29.7.0",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
@@ -73,14 +73,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "4.13.0-beta.0",
-    "@floating-ui/react": "0.26.9",
-    "@floating-ui/react-dom": "2.0.8",
+    "@bundle-stats/utils": "4.13.0-beta.10",
     "ariakit": "2.0.0-next.44",
     "d3": "^7.8.5",
     "modern-css-reset": "1.4.0",
     "react-use": "^17.5.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "f8197677d480f9b0b2112456526c821f49ed5a7d"
+  "gitHead": "448a7ea669d52d990e6ef2a64bbed63a9b1b3301"
 }

package/src/app/app.jsx

@@ -97,9 +97,7 @@ const OverviewContent = () => {
         </Container>
       )}
       <Container>
-        <Box outline>
-          <BundleAssetsTotals jobs={jobs} />
-        </Box>
+        <BundleAssetsTotals jobs={jobs} />
       </Container>
     </Stack>
   );
@@ -111,9 +109,7 @@ const AssetsContent = () => {
 
   return (
     <Container>
-      <Box outline>
-        <BundleAssets jobs={jobs} setState={bundleStatsSetState} {...bundleStatsState} />
-      </Box>
+      <BundleAssets jobs={jobs} setState={bundleStatsSetState} {...bundleStatsState} />
     </Container>
   );
 };
@@ -126,9 +122,7 @@ const ModulesContent = () => {
 
   return (
     <Container>
-      <Box outline>
-        <BundleModules jobs={jobs} setState={bundleModulesSetState} {...bundleModulesState} />
-      </Box>
+      <BundleModules jobs={jobs} setState={bundleModulesSetState} {...bundleModulesState} />
     </Container>
   );
 };
@@ -141,9 +135,7 @@ const PackagesContent = () => {
 
   return (
     <Container>
-      <Box outline>
-        <BundlePackages jobs={jobs} {...bundlePackagesState} setState={bundlePackagesSetState} />
-      </Box>
+      <BundlePackages jobs={jobs} {...bundlePackagesState} setState={bundlePackagesSetState} />
     </Container>
   );
 };

package/src/app/app.module.css

@@ -18,8 +18,8 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-medium);
-  padding-bottom: var(--space-xsmall);
+  padding-top: var(--space-small);
+  padding-bottom: var(--space-xxsmall);
 }
 
 .tabsContainer {

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

@@ -15,12 +15,15 @@ import config from '../../config.json';
 import I18N from '../../i18n';
 import { MetricsDisplayType } from '../../constants';
 import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
+import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
 import { Icon } from '../../ui/icon';
 import { InputSearch } from '../../ui/input-search';
 import { FileName } from '../../ui/file-name';
 import { HoverCard } from '../../ui/hover-card';
 import { Tag } from '../../ui/tag';
+import { Table } from '../../ui/table';
 import { Filters } from '../../ui/filters';
 import { EmptySet } from '../../ui/empty-set';
 import { Toolbar } from '../../ui/toolbar';
@@ -30,9 +33,10 @@ import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
-import { SEARCH_PLACEHOLDER } from './bundle-assets.i18n';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
+import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap } from '../metrics-treemap';
+import { SEARCH_PLACEHOLDER } from './bundle-assets.i18n';
 import css from './bundle-assets.module.css';
 
 const RUN_TITLE_CURRENT = 'Current';
@@ -230,9 +234,8 @@ export const BundleAssets = (props) => {
 
   return (
     <>
-      <section className={cx(css.root, className)}>
+      <Stack space="xsmall" as="section" className={cx(css.root, className)}>
         <Toolbar
-          className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
               <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
@@ -258,7 +261,7 @@ export const BundleAssets = (props) => {
             />
           </FlexStack>
         </Toolbar>
-        <main>
+        <Box outline as="main">
           {displayType === MetricsDisplayType.TABLE && (
             <MetricsTable
               runs={jobs}
@@ -272,10 +275,24 @@ export const BundleAssets = (props) => {
             />
           )}
           {displayType === MetricsDisplayType.TREEMAP && (
-            <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
+            <>
+              <Table compact>
+                <MetricsTableHeader
+                  metricTitle={metricsTableTitle}
+                  showSum
+                  jobs={jobs}
+                  rows={items}
+                />
+              </Table>
+              <MetricsTreemap
+                emptyMessage={emptyMessage}
+                items={items}
+                onItemClick={showEntryInfo}
+              />
+            </>
           )}
-        </main>
-      </section>
+        </Box>
+      </Stack>
 
       {entryItem && (
         <AssetInfo

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

@@ -1,11 +1,6 @@
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .toolbarSearch {
   width: 100%;
   max-width: 240px;
-  margin-right: -1px; /** collapse border */
 }
 
 .assetNameWrapper {

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

@@ -10,9 +10,14 @@ import {
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
-import { useShowEntry } from '../../hooks/show-entry';
+import { useEntryInfo } from '../../hooks/entry-info';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
-import { addRowAssetFlags, addRowIsNotPredictive, getRowFilter, getCustomSort } from './bundle-assets.utils';
+import {
+  addRowAssetFlags,
+  addRowIsNotPredictive,
+  getRowFilter,
+  getCustomSort,
+} from './bundle-assets.utils';
 
 export const BundleAssets = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
@@ -60,7 +65,7 @@ export const BundleAssets = (props) => {
     getCustomSort,
   });
 
-  const { hideEntryInfo, showEntryInfo } = useShowEntry({ setState });
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
 
   return (
     <BundleAssetsComponent

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import {
@@ -7,20 +7,26 @@ import {
 } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
+import config from '../../config.json';
 import { ASSETS_SIZES_FILE_TYPE_MAP, SECTION_URLS, MetricsDisplayType } from '../../constants';
 import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
+import I18N from '../../i18n';
 import { Toolbar } from '../../ui/toolbar';
-import { MetricsTreemap } from '../metrics-treemap';
+import { Table } from '../../ui/table';
+import { Box } from '../../layout/box';
+import { Stack } from '../../layout/stack';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
-import { TotalSizeTypeTitle } from '../total-size-type-title';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTableTitle } from '../metrics-table-title';
+import { MetricsTableHeader } from '../metrics-table-header';
+import { MetricsTreemap } from '../metrics-treemap';
 import { ComponentLink } from '../component-link';
-import css from './bundle-assets-totals.module.css';
 
 export const BundleAssetsTotals = ({
   className,
   jobs,
   customComponentLink: CustomComponentLink,
+  onTreemapItemClick,
   ...restProps
 }) => {
   const [displayType, setDisplayType] = useMetricsDisplayType();
@@ -43,37 +49,56 @@ export const BundleAssetsTotals = ({
     (entryId) => {
       const fileType = ASSETS_SIZES_FILE_TYPE_MAP[entryId];
       const { section, params } = getBundleAssetsFileTypeComponentLink(fileType, '');
-      const search = getComponentStateQueryString(params);
-      const nextUrl = `${SECTION_URLS[section]}?${search}`;
+      const queryParams = getComponentStateQueryString(params);
 
+      const nextUrl = `${SECTION_URLS[section]}?${queryParams}`;
       history.push(nextUrl);
     },
     [history],
   );
 
+  const metricsTableTitle = useMemo(
+    () => (
+      <MetricsTableTitle
+        title={I18N.ASSET_TOTALS}
+        popoverInfo={I18N.ASSET_TOTALS_INFO}
+        popoverHref={config.documentation.assets}
+      />
+    ),
+    [],
+  );
+
   return (
-    <div className={className}>
+    <Stack space="xsmall" as="section" className={className}>
       <Toolbar
-        className={css.toolbar}
         renderActions={() => (
           <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
         )}
-      >
-        <TotalSizeTypeTitle />
-      </Toolbar>
-      {displayType === MetricsDisplayType.TABLE && (
-        <MetricsTable
-          runs={jobs}
-          items={items}
-          renderRowHeader={renderRowHeader}
-          showHeaderSum
-          {...restProps}
-        />
-      )}
-      {displayType === MetricsDisplayType.TREEMAP && (
-        <MetricsTreemap items={items} onItemClick={handleMetricsTreemapItemClick} />
-      )}
-    </div>
+      />
+      <Box outline as="main">
+        {displayType === MetricsDisplayType.TABLE && (
+          <MetricsTable
+            title={metricsTableTitle}
+            runs={jobs}
+            items={items}
+            renderRowHeader={renderRowHeader}
+            showHeaderSum
+            {...restProps}
+          />
+        )}
+        {displayType === MetricsDisplayType.TREEMAP && (
+          <>
+            <Table compact>
+              <MetricsTableHeader metricTitle={metricsTableTitle} showSum jobs={jobs} rows={items} />
+            </Table>
+            <MetricsTreemap
+              items={items}
+              onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
+            />
+          </>
+        )}
+      </Box>
+    </Stack>
   );
 };
 
@@ -81,6 +106,7 @@ BundleAssetsTotals.defaultProps = {
   className: '',
   jobs: [],
   customComponentLink: ComponentLink,
+  onTreemapItemClick: undefined,
 };
 
 BundleAssetsTotals.propTypes = {
@@ -91,4 +117,9 @@ BundleAssetsTotals.propTypes = {
   jobs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
 
   customComponentLink: PropTypes.elementType,
+
+  /**
+   * Treemap item onClick
+   */
+  onTreemapItemClick: PropTypes.func,
 };

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

@@ -2,14 +2,9 @@
   color: var(--color-text-light);
 }
 
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .toolbarSearch {
   width: 100%;
   max-width: 240px;
-  margin-right: -1px; /** collapse border */
 }
 
 .metricSelector {