@bundle-stats/ui 4.13.0-beta.11 → 4.13.0-beta.13

package/lib-esm/components/metrics-treemap/metrics-treemap.module.css

@@ -22,7 +22,7 @@
 }
 
 /** Leaf wrapper button */
-.leaf {
+.tile {
   position: absolute;
   appearance: none;
   border: 0;
@@ -35,9 +35,10 @@
   font-size: var(--size-small);
   line-height: var(--line-height-heading);
   text-align: left;
+  transition: var(--ui-transition-out);
 }
 
-.leaf::before {
+.tile::before {
   content: "";
   display: block;
   position: absolute;
@@ -47,18 +48,22 @@
   width: 100%;
   height: 100%;
   background-color: currentColor;
-  color: var(--color-background);
+  color: var(--color-highlight);
   transition: var(--ui-transition-out);
   transition-property: opacity;
-  opacity: 0.6;
+  opacity: 0.75;
 }
 
-.leaf:hover::before {
+.tile:hover {
   transition: var(--ui-transition-in);
-  opacity: 0.4;
 }
 
-.leafContent {
+.tile:hover::before {
+  transition: var(--ui-transition-in);
+  opacity: 0.5;
+}
+
+.tileContent {
   position: relative;
   z-index: 1;
   width: 100%;
@@ -71,8 +76,8 @@
   line-height: var(--line-height-heading);
 }
 
-/** Align label to other elements on the first column leafs */
-.leafFirstCol .leafContent {
+/** Align label to other elements on the first column cells */
+.tileFirstCol .tileContent {
   padding-left: var(--space-small);
 }
 
@@ -100,51 +105,51 @@
 }
 
 /** Tile size variation */
-.leafSmall .leafContent {
+.tileSmall .tileContent {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   gap: 0;
   font-size: var(--size-xsmall);
 }
 
-.leafSmall .leadContentLabel {
+.tileSmall .leadContentLabel {
   margin-top: 0;
 }
 
 /** Tile diff variation */
-.leaf-NO_CHANGE {
+.tile-NO_CHANGE {
   color: var(--color-text-light);
 }
 
-.leaf-NO_CHANGE::before {
+.tile-NO_CHANGE::before {
   color: var(--color-gray-50);
   opacity: 0.4;
 }
 
-.leaf-NO_CHANGE:hover::before {
+.tile-NO_CHANGE:hover::before {
   opacity: 0.2;
 }
 
-.leaf-HIGH_NEGATIVE::before {
+.tile-HIGH_NEGATIVE::before {
   color: var(--color-red-100);
 }
 
-.leaf-NEGATIVE::before {
+.tile-NEGATIVE::before {
   color: var(--color-red-50);
 }
 
-.leaf-LOW_NEGATIVE::before {
+.tile-LOW_NEGATIVE::before {
   color: var(--color-red-25);
 }
 
-.leaf-LOW_POSITIVE::before {
+.tile-LOW_POSITIVE::before {
   color: var(--color-green-25);
 }
 
-.leaf-POSITIVE::before {
+.tile-POSITIVE::before {
   color: var(--color-green-50);
 }
 
-.leaf-HIGH_POSITIVE::before {
+.tile-HIGH_POSITIVE::before {
   color: var(--color-green-100);
 }
 
@@ -166,7 +171,7 @@
 }
 
 /** tooltip */
-.leafContentTooltipAnchor {
+.tileContentTooltipAnchor {
   width: 100%;
   height: 100%;
 }
@@ -191,11 +196,11 @@ div[role="presentation"]:has(.tooltip) {
 }
 
 
-.leafTooltipArrow svg {
+.tileTooltipArrow svg {
   display: block;
   fill: var(--color-background) !important;
 }
 
-.leafTooltipContentTitle {
+.tileTooltipContentTitle {
   font-size: var(--size-medium);
 }

package/lib-esm/css/variables.css

@@ -192,6 +192,7 @@
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
 
+  --radius-xsmall: 3px;
   --radius-small: 5px;
   --radius-medium: 7px;
   --radius-large: 9px;

package/lib-esm/layout/box/box.module.css

@@ -8,11 +8,13 @@
 }
 
 .outline > :first-child {
-  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+  border-top-left-radius: var(--radius-medium);
+  border-top-right-radius: var(--radius-medium);
 }
 
 .outline > :last-child {
-  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
+  border-bottom-left-radius: var(--radius-medium);
+  border-bottom-right-radius: var(--radius-medium);
 }
 
 .outlineHover {

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

@@ -89,6 +89,36 @@
   border-width: 1px;
 }
 
+/** cascade border radius */
+.root thead,
+.root thead tr:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.root thead tr:first-child th:first-child {
+  border-top-left-radius: inherit;
+}
+
+.root thead tr:first-child th:last-child {
+  border-top-right-radius: inherit;
+}
+
+.root tbody:last-child,
+.root tbody:last-child tr:last-child {
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+
+.root tbody:last-child tr:last-child th:first-child,
+.root tbody:last-child tr:last-child td:first-child {
+  border-bottom-left-radius: inherit;
+}
+
+.root tbody:last-child tr:last-child td:last-child {
+  border-bottom-right-radius: inherit;
+}
+
 /* compact variation */
 .compact td,
 .compact th {

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

@@ -42,7 +42,7 @@ a.root:active {
 /** Size variation */
 /** default: medium */
 .root {
-  border-radius: var(--radius-medium);
+  border-radius: var(--radius-small);
   padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
   min-width: var(--space-small);
   height: var(--space-small);
@@ -51,7 +51,7 @@ a.root:active {
 }
 
 .small {
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-xsmall);
   padding: calc(var(--space-xxxsmall) / 2);
   height: var(--space-xsmall);
   min-width: var(--space-xsmall);
@@ -60,7 +60,7 @@ a.root:active {
 }
 
 .large {
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-medium);
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   min-width: var(--space-medium);
   height: var(--space-medium);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.13.0-beta.11",
+  "version": "4.13.0-beta.13",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -43,7 +43,7 @@
     "@storybook/react": "7.6.17",
     "@storybook/react-webpack5": "7.6.17",
     "@types/d3": "7.4.3",
-    "@types/react": "18.2.77",
+    "@types/react": "18.2.78",
     "@types/react-router-dom": "5.3.3",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.5.1",
@@ -73,12 +73,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "4.13.0-beta.11",
+    "@bundle-stats/utils": "4.13.0-beta.13",
     "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": "e128789009e036ad306e3fb6095137b91b56111f"
+  "gitHead": "d906df430d706514c91458bdd363be9e9dc3e74e"
 }

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

@@ -22,6 +22,14 @@ import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap } from '../metrics-treemap';
 import { ComponentLink } from '../component-link';
 
+const metricsTableTitle = (
+  <MetricsTableTitle
+    title={I18N.ASSET_TOTALS}
+    popoverInfo={I18N.ASSET_TOTALS_INFO}
+    popoverHref={config.documentation.assets}
+  />
+);
+
 export const BundleAssetsTotals = ({
   className,
   jobs,
@@ -32,18 +40,21 @@ export const BundleAssetsTotals = ({
   const [displayType, setDisplayType] = useMetricsDisplayType();
   const history = useHistory();
 
-  const items = webpack.compareBySection.sizes(jobs);
+  const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
 
-  const renderRowHeader = (item) => {
-    const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
-    const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
+  const renderRowHeader = useCallback(
+    (item) => {
+      const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
+      const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
 
-    return (
-      <CustomComponentLink section={section} title={title} params={params}>
-        {item.label}
-      </CustomComponentLink>
-    );
-  };
+      return (
+        <CustomComponentLink section={section} title={title} params={params}>
+          {item.label}
+        </CustomComponentLink>
+      );
+    },
+    [CustomComponentLink],
+  );
 
   const handleMetricsTreemapItemClick = useCallback(
     (entryId) => {
@@ -57,17 +68,6 @@ export const BundleAssetsTotals = ({
     [history],
   );
 
-  const metricsTableTitle = useMemo(
-    () => (
-      <MetricsTableTitle
-        title={I18N.ASSET_TOTALS}
-        popoverInfo={I18N.ASSET_TOTALS_INFO}
-        popoverHref={config.documentation.assets}
-      />
-    ),
-    [],
-  );
-
   return (
     <Stack space="xsmall" as="section" className={className}>
       <Toolbar
@@ -89,7 +89,12 @@ export const BundleAssetsTotals = ({
         {displayType === MetricsDisplayType.TREEMAP && (
           <>
             <Table compact>
-              <MetricsTableHeader metricTitle={metricsTableTitle} showSum jobs={jobs} rows={items} />
+              <MetricsTableHeader
+                metricTitle={metricsTableTitle}
+                showSum
+                jobs={jobs}
+                rows={items}
+              />
             </Table>
             <MetricsTreemap
               items={items}

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

@@ -22,7 +22,7 @@
 }
 
 /** Leaf wrapper button */
-.leaf {
+.tile {
   position: absolute;
   appearance: none;
   border: 0;
@@ -35,9 +35,10 @@
   font-size: var(--size-small);
   line-height: var(--line-height-heading);
   text-align: left;
+  transition: var(--ui-transition-out);
 }
 
-.leaf::before {
+.tile::before {
   content: "";
   display: block;
   position: absolute;
@@ -47,18 +48,22 @@
   width: 100%;
   height: 100%;
   background-color: currentColor;
-  color: var(--color-background);
+  color: var(--color-highlight);
   transition: var(--ui-transition-out);
   transition-property: opacity;
-  opacity: 0.6;
+  opacity: 0.75;
 }
 
-.leaf:hover::before {
+.tile:hover {
   transition: var(--ui-transition-in);
-  opacity: 0.4;
 }
 
-.leafContent {
+.tile:hover::before {
+  transition: var(--ui-transition-in);
+  opacity: 0.5;
+}
+
+.tileContent {
   position: relative;
   z-index: 1;
   width: 100%;
@@ -71,8 +76,8 @@
   line-height: var(--line-height-heading);
 }
 
-/** Align label to other elements on the first column leafs */
-.leafFirstCol .leafContent {
+/** Align label to other elements on the first column cells */
+.tileFirstCol .tileContent {
   padding-left: var(--space-small);
 }
 
@@ -100,51 +105,51 @@
 }
 
 /** Tile size variation */
-.leafSmall .leafContent {
+.tileSmall .tileContent {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   gap: 0;
   font-size: var(--size-xsmall);
 }
 
-.leafSmall .leadContentLabel {
+.tileSmall .leadContentLabel {
   margin-top: 0;
 }
 
 /** Tile diff variation */
-.leaf-NO_CHANGE {
+.tile-NO_CHANGE {
   color: var(--color-text-light);
 }
 
-.leaf-NO_CHANGE::before {
+.tile-NO_CHANGE::before {
   color: var(--color-gray-50);
   opacity: 0.4;
 }
 
-.leaf-NO_CHANGE:hover::before {
+.tile-NO_CHANGE:hover::before {
   opacity: 0.2;
 }
 
-.leaf-HIGH_NEGATIVE::before {
+.tile-HIGH_NEGATIVE::before {
   color: var(--color-red-100);
 }
 
-.leaf-NEGATIVE::before {
+.tile-NEGATIVE::before {
   color: var(--color-red-50);
 }
 
-.leaf-LOW_NEGATIVE::before {
+.tile-LOW_NEGATIVE::before {
   color: var(--color-red-25);
 }
 
-.leaf-LOW_POSITIVE::before {
+.tile-LOW_POSITIVE::before {
   color: var(--color-green-25);
 }
 
-.leaf-POSITIVE::before {
+.tile-POSITIVE::before {
   color: var(--color-green-50);
 }
 
-.leaf-HIGH_POSITIVE::before {
+.tile-HIGH_POSITIVE::before {
   color: var(--color-green-100);
 }
 
@@ -166,7 +171,7 @@
 }
 
 /** tooltip */
-.leafContentTooltipAnchor {
+.tileContentTooltipAnchor {
   width: 100%;
   height: 100%;
 }
@@ -191,11 +196,11 @@ div[role="presentation"]:has(.tooltip) {
 }
 
 
-.leafTooltipArrow svg {
+.tileTooltipArrow svg {
   display: block;
   fill: var(--color-background) !important;
 }
 
-.leafTooltipContentTitle {
+.tileTooltipContentTitle {
   font-size: var(--size-medium);
 }