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

package/lib/app/app.js

@@ -41,6 +41,7 @@ const react_1 = __importStar(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
 const react_router_dom_1 = require("react-router-dom");
+const portal_1 = require("ariakit/portal");
 const utils_1 = require("@bundle-stats/utils");
 const constants_1 = require("../constants");
 const bundle_assets_1 = require("../components/bundle-assets");
@@ -57,6 +58,7 @@ const stack_1 = require("../layout/stack");
 const container_1 = require("../ui/container");
 const tabs_1 = require("../ui/tabs");
 const query_state_1 = require("../query-state");
+const portal_2 = require("../utils/portal");
 const i18n_1 = __importDefault(require("../i18n"));
 const header_1 = require("./header");
 const app_module_css_1 = __importDefault(require("./app.module.css"));
@@ -132,6 +134,13 @@ const PackagesRoute = () => {
     return (react_1.default.createElement(container_1.Container, null,
         react_1.default.createElement(bundle_packages_1.BundlePackages, { jobs: jobs, setState: setQueryState, ...queryState })));
 };
+const RaisedOverlaysProvider = ({ children }) => {
+    const portalRoot = (0, portal_2.usePortalRoot)(app_module_css_1.default.raisedOverlaysPortal);
+    return react_1.default.createElement(portal_1.PortalContext.Provider, { value: portalRoot }, children);
+};
+RaisedOverlaysProvider.propTypes = {
+    children: prop_types_1.default.node.isRequired,
+};
 const AppComponent = ({ version, jobs }) => {
     if (jobs?.length === 0) {
         return (react_1.default.createElement(Layout, { version: version },
@@ -140,11 +149,12 @@ const AppComponent = ({ version, jobs }) => {
     }
     return (react_1.default.createElement(JobsProvider, { jobs: jobs },
         react_1.default.createElement(Layout, { jobs: jobs, version: version },
-            react_1.default.createElement(container_1.Container, { className: app_module_css_1.default.metricChangeLegendContainer },
-                react_1.default.createElement(flex_stack_1.FlexStack, { justifyContent: "flex-end" },
-                    react_1.default.createElement(components_1.MetricChangeLegend, null))),
-            react_1.default.createElement(container_1.Container, { className: app_module_css_1.default.summaryContainer },
-                react_1.default.createElement(summary_1.Summary, { data: jobs[0].summary, showSummaryItemDelta: jobs.length !== 1, showSummaryItemBaseline: jobs?.length !== 1 })),
+            react_1.default.createElement(RaisedOverlaysProvider, null,
+                react_1.default.createElement(container_1.Container, { className: app_module_css_1.default.metricChangeLegendContainer },
+                    react_1.default.createElement(flex_stack_1.FlexStack, { justifyContent: "flex-end" },
+                        react_1.default.createElement(components_1.MetricChangeLegend, null))),
+                react_1.default.createElement(container_1.Container, { className: app_module_css_1.default.summaryContainer },
+                    react_1.default.createElement(summary_1.Summary, { data: jobs[0].summary, showSummaryItemDelta: jobs.length !== 1, showSummaryItemBaseline: jobs?.length !== 1 }))),
             react_1.default.createElement(container_1.Container, { className: app_module_css_1.default.tabsContainer },
                 react_1.default.createElement(tabs_1.Tabs, { className: app_module_css_1.default.tabs },
                     react_1.default.createElement(tabs_1.Tabs.Item, { as: react_router_dom_1.NavLink, exact: true, to: constants_1.URLS.OVERVIEW, activeClassName: app_module_css_1.default.tabActive }, i18n_1.default.OVERVIEW),

package/lib/app/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/app/app.jsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/app/app.jsx"],"names":[],"mappings":"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"}

package/lib/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/lib/components/entry-info/entry-info.module.css

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

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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 */

package/lib/ui/dropdown/dropdown.module.css

@@ -11,21 +11,24 @@
   left: 0;
   top: 100%;
   border-radius: var(--radius-small);
+  border: 1px solid var(--color-outline);
   box-shadow: var(--shadow-layer);
   background: var(--color-background);
   min-width: 16em;
   z-index: var(--layer-overlay);
-  padding: var(--space-xxxsmall);
+  padding: calc(var(--space-xxxsmall) - 1px);
   color: var(--color-text-light);
   font-size: var(--size-small);
   line-height: var(--line-height);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .dropdown[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .dropdown[data-leave] {
@@ -51,7 +54,9 @@
   text-align: left;
   text-decoration: none;
   cursor: default;
-  transition: var(--transition-out);
+  transition-property: color, background-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .item[data-active-item],
@@ -60,7 +65,7 @@
 .item:active {
   background: var(--color-highlight);
   color: var(--color-text);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .itemActive {

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

@@ -42,14 +42,16 @@
   font-size: var(--size-small);
   line-height: var(--space-small);
   color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
+  transition-property: color, border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .filterSingle:focus,
 .filterSingle:active,
 .filterSingle:hover {
   border-color: var(--color-outline-dark);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 /** Filter group */

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

@@ -7,7 +7,9 @@
   color: inherit;
   cursor: default;
   text-decoration: none;
-  transition: var(--transition-out);
+  transition-property: color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .anchor:focus,
@@ -15,12 +17,13 @@
 .anchor:hover {
   color: var(--color-accent-dark);
   outline: 0;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .hoverCard {
   z-index: var(--layer-overlay);
-  padding: var(--space-small);
+  padding: calc(var(--space-small) - 1px);
+  border: 1px solid var(--color-outline);
   border-radius: var(--radius-medium);
   width: calc(100vw - 2 * var(--space-small));
   max-width: 340px;
@@ -30,12 +33,14 @@
   background: var(--color-light);
   font-size: var(--size-small);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .hoverCard[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .hoverCard[data-leave] {

package/lib/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/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/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);
 }