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

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

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

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

@@ -48,13 +48,15 @@
 /* hover current row */
 .root tbody tr th,
 .root tbody tr td {
-  transition: var(--transition-out);
+  transition-property: background-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .root tbody tr:hover th,
 .root tbody tr:hover td {
   background-color: var(--color-highlight-warning);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .empty {

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

@@ -13,7 +13,9 @@
   color: var(--color-text-ultra-light);
   font-weight: bold;
   text-decoration: none;
-  transition: var(--transition-out);
+  transition-property: color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .item::after {
@@ -26,7 +28,9 @@
   height: 2px;
   background: currentColor;
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .item:focus,
@@ -40,15 +44,15 @@
 .item:active::after,
 .item:focus::after {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .itemActive {
   color: var(--color-accent);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .itemActive::after {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }

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

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

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

@@ -22,12 +22,14 @@
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .tooltip[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .tooltip[data-leave] {

package/lib-esm/utils/portal.js

@@ -1,6 +1,21 @@
+import { useEffect, useState } from 'react';
 export const getCreatePortalElement = (className) => (element) => {
     const portalElement = element.ownerDocument.createElement('div');
     portalElement.className = className;
     return portalElement;
 };
+export const usePortalRoot = (className) => {
+    const [portalRoot, setPortalRoot] = useState(null);
+    useEffect(() => {
+        const element = document.createElement('div');
+        element.className = className;
+        document.body.appendChild(element);
+        setPortalRoot(element);
+        return () => {
+            element.remove();
+            setPortalRoot(null);
+        };
+    }, [className]);
+    return portalRoot;
+};
 //# sourceMappingURL=portal.js.map

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

@@ -1 +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"}
+{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../src/utils/portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAM5C,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;AAOF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,SAAiB,EAAsB,EAAE;IACrE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;QAC9B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACnC,aAAa,CAAC,OAAO,CAAC,CAAC;QAEvB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,MAAM,EAAE,CAAC;YACjB,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.23.0-beta.10",
+  "version": "4.23.0-beta.11",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -41,9 +41,9 @@
     "@babel/preset-env": "8.0.7",
     "@babel/preset-react": "8.0.1",
     "@babel/preset-typescript": "8.0.7",
-    "@storybook/addon-vitest": "10.6.2",
-    "@storybook/react": "10.6.2",
-    "@storybook/react-vite": "10.6.2",
+    "@storybook/addon-vitest": "10.6.5",
+    "@storybook/react": "10.6.5",
+    "@storybook/react-vite": "10.6.5",
     "@types/d3": "7.4.3",
     "@types/react": "18.3.13",
     "@types/react-router-dom": "5.3.3",
@@ -68,9 +68,9 @@
     "react-dom": "18.3.1",
     "react-router-dom": "5.3.4",
     "rimraf": "6.1.3",
-    "storybook": "10.6.2",
+    "storybook": "10.6.5",
     "typescript": "5.9.3",
-    "vite": "8.3.4",
+    "vite": "8.3.5",
     "vite-plugin-svgr": "5.2.0",
     "vitest": "5.0.5"
   },
@@ -83,7 +83,7 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.23.0-beta.10",
+    "@bundle-stats/utils": "^4.23.0-beta.11",
     "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": "7c9e99fe7bf5b35dc75cf504f31c0ca035c04476"
+  "gitHead": "7d3dc3eccafa5d78fbf1a2884e70355a518db9fb"
 }

package/src/app/app.jsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
+import { PortalContext } from 'ariakit/portal';
 import { COMPONENT } from '@bundle-stats/utils';
 
 import { URLS } from '../constants';
@@ -19,6 +20,7 @@ import { Stack } from '../layout/stack';
 import { Container } from '../ui/container';
 import { Tabs } from '../ui/tabs';
 import { QueryStateProvider, useComponentQueryState } from '../query-state';
+import { usePortalRoot } from '../utils/portal';
 import I18N from '../i18n';
 import { Header } from './header';
 import css from './app.module.css';
@@ -137,6 +139,20 @@ const PackagesRoute = () => {
   );
 };
 
+/**
+ * Render the overlays (hovercards, tooltips) of the content above the tabs
+ * (metric change legend, summary) above the sticky tabs
+ */
+const RaisedOverlaysProvider = ({ children }) => {
+  const portalRoot = usePortalRoot(css.raisedOverlaysPortal);
+
+  return <PortalContext.Provider value={portalRoot}>{children}</PortalContext.Provider>;
+};
+
+RaisedOverlaysProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
 const AppComponent = ({ version, jobs }) => {
   if (jobs?.length === 0) {
     return (
@@ -151,18 +167,20 @@ 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}
-            showSummaryItemDelta={jobs.length !== 1}
-            showSummaryItemBaseline={jobs?.length !== 1}
-          />
-        </Container>
+        <RaisedOverlaysProvider>
+          <Container className={css.metricChangeLegendContainer}>
+            <FlexStack justifyContent="flex-end">
+              <MetricChangeLegend />
+            </FlexStack>
+          </Container>
+          <Container className={css.summaryContainer}>
+            <Summary
+              data={jobs[0].summary}
+              showSummaryItemDelta={jobs.length !== 1}
+              showSummaryItemBaseline={jobs?.length !== 1}
+            />
+          </Container>
+        </RaisedOverlaysProvider>
 
         <Container className={css.tabsContainer}>
           <Tabs className={css.tabs}>

package/src/app/app.module.css

@@ -27,6 +27,11 @@
   padding-bottom: var(--space-xxsmall);
 }
 
+/** legend and summary overlays: above the sticky tabs, below the header */
+.raisedOverlaysPortal {
+  --layer-overlay: calc(var(--layer-xhigh) + 2);
+}
+
 .tabsContainer {
   border-bottom: 1px solid var(--color-outline);
   background: var(--color-light);
@@ -38,12 +43,12 @@
 
 .tabActive {
   color: var(--color-accent);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .tabActive::after {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .tabsContent {
@@ -70,7 +75,7 @@
   .tabsContainer {
     position: sticky;
     top: var(--header-height);
-    /** above the overlays (tooltips, hovercards, dropdowns) */
+    /** above the overlays (tooltips, hovercards, dropdowns), except the legend and summary overlays */
     z-index: var(--layer-xhigh);
   }
 }

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

@@ -29,6 +29,7 @@
 .contentWrapper {
   flex: 1 1 auto;
   overflow: auto;
+  overscroll-behavior: contain;
 }
 
 /** header */

package/src/components/metrics-display-selector/metrics-display-selector.module.css

@@ -27,10 +27,12 @@
 
 .dropdownItemIcon {
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .dropdownItemActive .dropdownItemIcon {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }

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

@@ -12,8 +12,9 @@
   font-size: var(--size-small);
   line-height: var(--line-height-heading);
   text-align: left;
-  transition: var(--transition-out);
   transition-property: opacity, background-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .root::before {
@@ -92,14 +93,14 @@
 
 .root::before {
   color: var(--color-highlight);
-  transition: var(--transition-out);
   transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
   opacity: 0.6;
 }
 
 .root:hover::before {
-  transition: var(--transition-in);
-  transition-property: opacity;
+  transition-duration: var(--transition-duration-in);
   opacity: 0.8;
 }
 

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

@@ -5,8 +5,9 @@
 
 /** Tile group size variation */
 .root {
-  transition: var(--transition-out);
-  transition-property: background-color, outline;
+  transition-property: background-color, outline-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 /** Tile group nested variation */
@@ -19,8 +20,7 @@
 .root.nested:has(> [data-treemap-tile]:hover) {
   background-color: rgba(27, 26, 33, 0.06);
   outline: 1px solid rgba(255, 255, 255, 1);
-  transition: var(--transition-in);
-  transition-property: background-color, outline;
+  transition-duration: var(--transition-duration-in);
 }
 
 .nested.tileGroup--NEGATIVE {
@@ -51,7 +51,9 @@
 .nested.tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> [data-treemap-tile-group-title]:hover),
 .nested.tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> [data-treemap-tile]:hover),
 .nested.tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> [data-treemap-tile-group-title]:hover),
-.nested.tileGroup--NEGATIVE > .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> [data-treemap-tile]:hover) {
+.nested.tileGroup--NEGATIVE
+  > .tileGroup--NEGATIVE
+  > .tileGroup--NO_CHANGE:has(> [data-treemap-tile]:hover) {
   background-color: var(--color-background);
   background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
 }

package/src/components/metrics-treemap/tile-group-title/tile-group-title.module.css

@@ -5,7 +5,8 @@
 
 .tileGroupTitleContent {
   width: 100%;
-  padding: var(--space-xxxsmall) calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall) var(--space-xxsmall);
+  padding: var(--space-xxxsmall) calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall)
+    var(--space-xxsmall);
   border-radius: var(--radius-xsmall);
   display: flex;
   align-items: center;
@@ -29,13 +30,8 @@
   color: var(--color-text-light);
 }
 
-.root {
-  transition: var(--transition-out);
-}
-
 .root:hover .tileGroupTitleText {
   text-decoration: underline;
-  transition: var(--transition-in);
 }
 
 /** Fill variation */

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

@@ -43,7 +43,6 @@
   line-height: inherit;
 }
 
-
 .delta {
   font-weight: bold;
   font-size: var(--size-small);
@@ -62,10 +61,11 @@
 .titleTooltipIcon[aria-controls=''] {
   opacity: 0;
   visibility: hidden;
+  /* delay hiding until the fade-out completes */
   transition:
-    opacity var(--transition-duration-out) ease-out,
-    color var(--transition-duration-out) ease-out,
-    visibility 0s;
+    opacity var(--transition-duration-out) var(--transition-timing-function),
+    color var(--transition-duration-out) var(--transition-timing-function),
+    visibility 0s linear var(--transition-duration-out);
 }
 
 .root:hover .titleHoverCardIcon span,
@@ -73,8 +73,8 @@
   opacity: 1;
   visibility: visible;
   transition:
-    opacity var(--transition-duration-in) ease-in,
-    color var(--transition-duration-in) ease-in,
+    opacity var(--transition-duration-in) var(--transition-timing-function),
+    color var(--transition-duration-in) var(--transition-timing-function),
     visibility 0s;
 }
 

package/src/components/sort-button/sort-button.module.css

@@ -28,7 +28,7 @@
 
 .directionActive {
   color: var(--color-text);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .direction:hover,
@@ -69,6 +69,9 @@
 .direction {
   pointer-events: none;
   opacity: 0;
+  transition-property: color, opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .active .direction,
@@ -77,5 +80,5 @@
 .interactive:hover:focus .direction {
   pointer-events: auto;
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }

package/src/components/summary/summary.module.css

@@ -42,14 +42,16 @@
   bottom: calc(0px - var(--space-xsmall));
   left: calc(0px - var(--space-xsmall));
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .item:focus::before,
 .item:active::before,
 .item:hover::before {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .item + .item::after {
@@ -63,7 +65,9 @@
   top: var(--space-xxsmall);
   bottom: var(--space-xxsmall);
   opacity: 1;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .item:focus::after,
@@ -73,5 +77,5 @@
 .item:active + .item::after,
 .item:hover + .item::after {
   opacity: 0;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }

package/src/css/default.css

@@ -61,7 +61,9 @@ code {
 
 a {
   color: var(--color-accent);
-  transition: var(--transition-out);
+  transition-property: color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 a:focus,
@@ -69,5 +71,5 @@ a:active,
 a:hover {
   color: var(--color-accent-dark);
   outline: none;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }

package/src/css/variables.css

@@ -190,12 +190,15 @@ body {
   --color-outline-danger: var(--color-red-100);
 
   --color-backdrop: rgba(0, 0, 0, 0.05);
-  --color-shadow: rgba(0, 0, 0, 0.25);
+  --color-shadow: rgba(0, 0, 0, 0.1);
 
+  /**
+   * Transitions: set `transition-property` explicitly on the base rule, use the `out` duration
+   * on the base rule and switch only `transition-duration` to `in` on the active/hover rule
+   */
   --transition-duration-in: 120ms;
   --transition-duration-out: 80ms;
-  --transition-in: all var(--transition-duration-in) ease-in;
-  --transition-out: all var(--transition-duration-out) ease-out;
+  --transition-timing-function: ease-out;
 
   --layer-xlow: 1;
   --layer-low: 10;

package/src/layout/box/box.module.css

@@ -18,14 +18,16 @@
 }
 
 .outlineHover {
-  transition: var(--transition-out);
+  transition-property: border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .outlineHover:focus,
 .outlineHover:active,
 .outlineHover:hover {
   border-color: var(--color-outline-dark);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .padding-xxxsmall {

package/src/ui/button/button.module.css

@@ -19,7 +19,9 @@
   font-family: var(--font-family);
   line-height: var(--line-height);
   white-space: nowrap;
-  transition: var(--transition-out);
+  transition-property: color, background-color, border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 a.root {
@@ -31,7 +33,7 @@ a.root {
 .root:active {
   outline: none;
   color: var(--color-text-light);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .glyph {

package/src/ui/copy-to-clipboard/copy-to-clipboard.module.css

@@ -6,10 +6,12 @@
 
 /** done state */
 .root svg {
-  transition: var(--transition-out);
+  transition-property: color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .done svg {
   color: var(--color-success);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }

package/src/ui/dialog/dialog.module.css

@@ -9,12 +9,14 @@
   justify-content: center;
   z-index: var(--layer-xxhigh);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .backdrop[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .backdrop[data-leave] {
@@ -39,17 +41,20 @@
   width: calc(100vw - 2 * var(--dialog-padding));
   position: relative;
   border-radius: var(--radius-medium);
-  padding: var(--dialog-padding);
+  border: 1px solid var(--color-outline);
+  padding: calc(var(--dialog-padding) - 1px);
   background: var(--color-background);
   box-shadow: 0 0 var(--space-medium) var(--color-shadow);
   z-index: var(--layer-xxhigh);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .dialog[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .digalog[data-leave] {
@@ -91,6 +96,7 @@
   );
   padding-bottom: 0.3em; /* extra space to compensate for the title line-height and allow to show focus state correctly on buttons */
   overflow: auto;
+  overscroll-behavior: contain;
 }
 
 /** Width variation */