@bundle-stats/ui 4.23.0-beta.3 → 4.23.0-beta.5

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

@@ -45,9 +45,9 @@
   transition: var(--transition-out);
 }
 
-.filterSingle:hover,
+.filterSingle:focus,
 .filterSingle:active,
-.filterSingle:focus {
+.filterSingle:hover {
   border-color: var(--color-outline-dark);
   transition: var(--transition-in);
 }
@@ -72,8 +72,6 @@
   right: 2px;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxxsmall);
-  font-size: var(--size-xsmall);
   line-height: 1.1;
 }
 
@@ -102,8 +100,8 @@
 }
 
 .filterGroupSearchNotFound {
-  padding: var(--space-xxsmall) 0;
   text-align: center;
+  min-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
   font-size: var(--size-small);
   color: var(--color-text-light);
 }

package/lib-esm/ui/hover-card/hover-card.module.css

@@ -10,13 +10,12 @@
   transition: var(--transition-out);
 }
 
+.anchor:focus,
+.anchor:active,
 .anchor:hover {
-  color: var(--color-primary);
-  transition: var(--transition-in);
-}
-
-.anchor:focus {
+  color: var(--color-accent-dark);
   outline: 0;
+  transition: var(--transition-in);
 }
 
 .hoverCard {

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

@@ -3,7 +3,7 @@
   border-radius: var(--radius-small);
   color: var(--color-text-light);
   width: 100%;
-  transition: var(--transition-in);
+  transition: var(--transition-out);
   appearance: none;
   outline: none;
 }
@@ -27,7 +27,7 @@
 .root:focus {
   border-color: var(--color-outline-dark);
   color: inherit;
-  transition: var(--transition-out);
+  transition: var(--transition-in);
 }
 
 /** Size modifier */

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

@@ -33,21 +33,28 @@
   border-top: 0;
 }
 
-.root tbody td a {
+.root tbody a {
   color: inherit;
   text-decoration: none;
 }
 
-.root tbody td a:hover,
-.root tbody td a:focus,
-.root tbody td a:active {
-  color: var(--color-primary);
+.root tbody a:focus,
+.root tbody a:active,
+.root tbody a:hover {
+  color: var(--color-accent);
   text-decoration: underline;
 }
 
+/* hover current row */
+.root tbody tr th,
+.root tbody tr td {
+  transition: var(--transition-out);
+}
+
 .root tbody tr:hover th,
 .root tbody tr:hover td {
   background-color: var(--color-highlight-warning);
+  transition: var(--transition-in);
 }
 
 .empty {

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

@@ -13,7 +13,7 @@
   color: var(--color-text-ultra-light);
   font-weight: bold;
   text-decoration: none;
-  transition: var(--ui-transition-out);
+  transition: var(--transition-out);
 }
 
 .item::after {
@@ -24,27 +24,31 @@
   right: 0;
   bottom: -1px;
   height: 2px;
-  background: transparent;
+  background: currentColor;
+  opacity: 0;
+  transition: var(--transition-out);
 }
 
-.item:hover,
+.item:focus,
 .item:active,
-.item:focus {
-  color: var(--color-primary);
+.item:hover {
+  color: var(--color-accent);
   outline: none;
-  transition: var(--ui-transition-out);
 }
 
 .item:hover::after,
 .item:active::after,
 .item:focus::after {
-  background: currentColor;
+  opacity: 1;
+  transition: var(--transition-in);
 }
 
 .itemActive {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition: var(--transition-in);
 }
 
 .itemActive::after {
-  background: currentColor;
+  opacity: 1;
+  transition: var(--transition-in);
 }

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

@@ -10,7 +10,6 @@
 
 a.root {
   text-decoration: none;
-  transition: var(--transition-out);
 }
 
 a.root:hover,
@@ -19,7 +18,6 @@ a.root:active {
   opacity: 0.8;
   color: var(--color-light);
   text-decoration: none;
-  transition: var(--transition-in);
 }
 
 /** Kind variation */

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

@@ -4,7 +4,7 @@
   color: var(--color-text-light);
   width: 100%;
   resize: vertical;
-  transition: var(--transition-in);
+  transition: var(--transition-out);
   appearance: none;
   outline: none;
 }
@@ -28,7 +28,7 @@
 .root:focus {
   border-color: var(--color-outline-dark);
   color: inherit;
-  transition: var(--transition-out);
+  transition: var(--transition-in);
 }
 
 .root[readonly=''] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.23.0-beta.3",
+  "version": "4.23.0-beta.5",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -83,7 +83,7 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.23.0-beta.3",
+    "@bundle-stats/utils": "^4.23.0-beta.5",
     "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": "3256dd3f8821ffab059bdb3d0477321c8b126836"
+  "gitHead": "af798896d85f2758e3cd1a5874b06207cef61c68"
 }

package/src/app/app.module.css

@@ -42,11 +42,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 {

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/chart-colors.json

@@ -1,59 +1,59 @@
 [
-  "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(79,146,213,1)",
+  "rgba(86,146,215,1)",
+  "rgba(92,145,217,1)",
+  "rgba(99,145,219,1)",
+  "rgba(105,144,221,1)",
+  "rgba(112,144,223,1)",
+  "rgba(118,143,225,1)",
+  "rgba(125,143,227,1)",
+  "rgba(131,142,229,1)",
+  "rgba(138,141,229,1)",
+  "rgba(145,140,229,1)",
+  "rgba(152,138,229,1)",
+  "rgba(159,137,229,1)",
+  "rgba(165,136,228,1)",
+  "rgba(172,135,228,1)",
+  "rgba(179,133,228,1)",
+  "rgba(186,132,228,1)",
+  "rgba(192,130,226,1)",
+  "rgba(198,129,223,1)",
+  "rgba(204,127,221,1)",
+  "rgba(210,125,218,1)",
+  "rgba(216,123,216,1)",
+  "rgba(222,122,213,1)",
+  "rgba(228,120,211,1)",
+  "rgba(234,118,208,1)",
+  "rgba(237,117,204,1)",
+  "rgba(239,116,199,1)",
+  "rgba(242,114,195,1)",
+  "rgba(245,113,191,1)",
+  "rgba(247,112,186,1)",
+  "rgba(250,111,182,1)",
+  "rgba(252,109,177,1)",
+  "rgba(255,108,173,1)",
+  "rgba(255,109,167,1)",
+  "rgba(255,109,162,1)",
+  "rgba(255,110,156,1)",
+  "rgba(255,111,151,1)",
+  "rgba(255,111,145,1)",
+  "rgba(255,112,139,1)",
+  "rgba(255,112,134,1)",
+  "rgba(255,113,128,1)",
+  "rgba(255,116,122,1)",
+  "rgba(255,119,116,1)",
+  "rgba(255,121,109,1)",
+  "rgba(255,124,103,1)",
+  "rgba(255,127,97,1)",
+  "rgba(255,130,91,1)",
+  "rgba(255,132,84,1)",
+  "rgba(255,135,78,1)",
+  "rgba(255,139,68,1)",
+  "rgba(255,143,59,1)",
+  "rgba(255,147,49,1)",
+  "rgba(255,151,39,1)",
+  "rgba(255,154,29,1)",
+  "rgba(255,158,20,1)",
+  "rgba(255,162,10,1)",
   "rgba(255,166,0,1)"
 ]

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

@@ -1,6 +1,11 @@
+.root {
+  display: inline-flex;
+  gap: var(--space-xxxsmall);
+  align-items: center;
+}
+
 .notPredictive {
-  margin-right: var(--space-xxsmall);
-  display: inline-block;
+  flex: 0 0 auto;
   width: var(--space-small);
   height: var(--space-small);
 }
@@ -13,20 +18,25 @@
   max-width: 480px;
 }
 
-.metaTags {
-  display: inline;
-  margin-right: var(--space-xxxsmall);
+.link {
+  flex: 1 1 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xxxsmall);
 }
 
-.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,4 +1,5 @@
 import React, { ElementType } from 'react';
+import cx from 'classnames';
 
 import { Icon } from '../../ui/icon';
 import { FileName } from '../../ui/file-name';
@@ -24,7 +25,7 @@ export const AssetName = (props: AssetNameProps) => {
   const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = row;
 
   return (
-    <span className={className}>
+    <span className={cx(css.root, className)}>
       {isNotPredictive && (
         <HoverCard
           label={<Icon className={css.notPredictiveIcon} glyph={Icon.ICONS.WARNING} />}
@@ -35,24 +36,19 @@ export const AssetName = (props: AssetNameProps) => {
         </HoverCard>
       )}
 
-      <EntryComponentLink entryId={row.key} className={css.name}>
-        <span className={css.metaTags}>
+      <EntryComponentLink entryId={row.key} 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} />
+        <FileName className={css.name} name={label} />
       </EntryComponentLink>
     </span>
   );

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-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

@@ -11,9 +11,14 @@
   border-bottom: 1px solid var(--color-outline);
 }
 
+.name {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xxxsmall);
+}
+
 .nameTagDuplicated {
-  margin-right: var(--space-xxxsmall);
-  vertical-align: baseline;
+  flex: 0 0 auto;
 }
 
 .nameTagDuplicated::before {
@@ -21,18 +26,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';
@@ -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-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';
@@ -217,7 +218,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 +250,8 @@ export const BundlePackages = (props) => {
     [PackageNameCustomComponentLink],
   );
 
+  const handleRowClick = useCallback((row) => showEntryInfo(row.key), [showEntryInfo]);
+
   const emptyMessage = useMemo(
     () => (
       <EmptySet
@@ -320,6 +323,7 @@ export const BundlePackages = (props) => {
               items={items}
               emptyMessage={emptyMessage}
               renderRowHeader={renderRowHeader}
+              onRowClick={handleRowClick}
               showHeaderSum
               title={metricsTableTitle}
               sort={sort}