@bundle-stats/ui 4.13.0-beta.6 → 4.13.0-beta.8

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

@@ -22,15 +22,13 @@
 }
 
 /** Leaf wrapper button */
-.leafAction {
-  position: relative;
+.leaf {
+  position: absolute;
   appearance: none;
   border: 0;
   border-radius: 0;
   padding: 0;
   background: none;
-  width: 100%;
-  height: 100%;
   display: flex;
   align-items: center;
   font-family: var(--font-family-fixed);
@@ -39,7 +37,7 @@
   text-align: left;
 }
 
-.leafAction::before {
+.leaf::before {
   content: "";
   display: block;
   position: absolute;
@@ -55,7 +53,7 @@
   opacity: 0.6;
 }
 
-.leaf:hover .leafAction::before {
+.leaf:hover::before {
   transition: var(--ui-transition-in);
   opacity: 0.4;
 }
@@ -113,40 +111,40 @@
 }
 
 /** Tile diff variation */
-.leaf-NO_CHANGE .leafAction {
+.leaf-NO_CHANGE {
   color: var(--color-text-light);
 }
 
-.leaf-NO_CHANGE .leafAction::before {
+.leaf-NO_CHANGE::before {
   color: var(--color-gray-50);
   opacity: 0.4;
 }
 
-.leaf-NO_CHANGE:hover .leafAction::before {
+.leaf-NO_CHANGE:hover::before {
   opacity: 0.2;
 }
 
-.leaf-HIGH_NEGATIVE .leafAction::before {
+.leaf-HIGH_NEGATIVE::before {
   color: var(--color-red-100);
 }
 
-.leaf-NEGATIVE .leafAction::before {
+.leaf-NEGATIVE::before {
   color: var(--color-red-50);
 }
 
-.leaf-LOW_NEGATIVE .leafAction::before {
+.leaf-LOW_NEGATIVE::before {
   color: var(--color-red-25);
 }
 
-.leaf-LOW_POSITIVE .leafAction::before {
+.leaf-LOW_POSITIVE::before {
   color: var(--color-green-25);
 }
 
-.leaf-POSITIVE .leafAction::before {
+.leaf-POSITIVE::before {
   color: var(--color-green-50);
 }
 
-.leaf-HIGH_POSITIVE .leafAction::before {
+.leaf-HIGH_POSITIVE::before {
   color: var(--color-green-100);
 }
 

package/src/components/metrics-treemap/metrics-treemap.tsx

@@ -142,11 +142,6 @@ const LeafContentWithTooltip = (props: LeafContentProps & { parentRef: RefObject
   );
 };
 
-const LeafAction = forwardRef((props: React.ComponentProps<'button'>, ref) => (
-  // @ts-expect-error
-  <button type="button" xmlns="http://www.w3.org/1999/xhtml" ref={ref} {...props} />
-));
-
 interface TreeNode {
   id: string;
   value: number;
@@ -161,8 +156,8 @@ interface RootTree {
 }
 
 interface LeafProps {
-  x: number;
-  y: number;
+  left: number;
+  top: number;
   width: number;
   height: number;
   data: TreeNode;
@@ -170,7 +165,7 @@ interface LeafProps {
 }
 
 const Leaf = (props: LeafProps) => {
-  const { x, y, width, height, data, onClick } = props;
+  const { left, top, width, height, data, onClick } = props;
 
   const { item } = data;
   const runInfo = item.runs?.[0] as MetricRunInfo;
@@ -178,7 +173,7 @@ const Leaf = (props: LeafProps) => {
   const sizeDisplay = useMemo(() => resolveLeafSizeDisplay(width, height), [width, height]);
   const handleOnClick = useCallback(() => onClick?.(item.key), [item.key, onClick]);
 
-  const leafContentRef = useRef<HTMLElement>(null);
+  const leafContentRef = useRef<HTMLButtonElement>(null);
   const hover = useHoverDirty(leafContentRef);
 
   const leafClassName = cx(
@@ -188,20 +183,24 @@ const Leaf = (props: LeafProps) => {
   );
 
   return (
-    <foreignObject height={height} width={width} x={x} y={y} className={leafClassName}>
-      <LeafAction onClick={handleOnClick} ref={leafContentRef} className={css.leafAction}>
-        {hover ? (
-          <LeafContentWithTooltip
-            sizeDisplay={sizeDisplay}
-            item={item}
-            runInfo={runInfo}
-            parentRef={leafContentRef}
-          />
-        ) : (
-          <LeafContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
-        )}
-      </LeafAction>
-    </foreignObject>
+    <button
+      type="button"
+      onClick={handleOnClick}
+      ref={leafContentRef}
+      style={{ left, top, width, height }}
+      className={leafClassName}
+    >
+      {hover ? (
+        <LeafContentWithTooltip
+          sizeDisplay={sizeDisplay}
+          item={item}
+          runInfo={runInfo}
+          parentRef={leafContentRef}
+        />
+      ) : (
+        <LeafContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
+      )}
+    </button>
   );
 };
 
@@ -275,7 +274,7 @@ export const MetricsTreemap = (props: MetricsTreemapProps & React.ComponentProps
   return (
     <div className={cx(css.root, className)} {...restProps} ref={containerRef}>
       {cells.length > 0 ? (
-        <svg viewBox={`0 0 ${width} ${height}`} className={css.canvas}>
+        <div className={css.canvas}>
           {cells.map((leaf) => {
             if (!leaf.parent) {
               return null;
@@ -283,17 +282,17 @@ export const MetricsTreemap = (props: MetricsTreemapProps & React.ComponentProps
 
             return (
               <Leaf
-                x={leaf.x0}
-                y={leaf.y0}
+                data={leaf.data as TreeNode}
+                left={leaf.x0}
+                top={leaf.y0}
                 width={leaf.x1 - leaf.x0}
                 height={leaf.y1 - leaf.y0}
-                data={leaf.data as TreeNode}
                 onClick={onItemClick}
                 key={leaf.id}
               />
             );
           })}
-        </svg>
+        </div>
       ) : (
         <div className={css.emptyMessage}>
           <div className={css.emptyMessageWrapper}>{emptyMessage}</div>

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

@@ -3,6 +3,7 @@
   display: inline-block;
   border-radius: var(--radius-small);
   position: relative;
+  color: var(--color-text-ultra-light);
 }
 
 .toggle {

package/types/components/index.d.ts

@@ -16,6 +16,5 @@ export { MetricsTableOptions } from "./metrics-table-options";
 export { MetricsTableTitle } from "./metrics-table-title";
 export { ModuleInfo } from "./module-info";
 export { Summary } from "./summary";
-export { TotalSizeTypeTitle } from "./total-size-type-title";
 export { MetricRunInfo, MetricRunInfoProps } from "./metric-run-info";
 export { RunInfo, RunInfoProps } from "./run-info";

package/types/components/metrics-table/metrics-table.d.ts

@@ -1,23 +1,17 @@
 import React from 'react';
-import { type MetricRunInfo } from '@bundle-stats/utils';
+import type { ReportMetricRow } from '@bundle-stats/utils';
 import { Table } from '../../ui/table';
-interface Item {
-    key: string;
-    label?: string;
-    changed: boolean;
-    biggerIsBetter: boolean;
-    runs: Array<MetricRunInfo | null>;
-}
 interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'title'> {
     runs: Array<{
+        label: string;
         internalBuildNumber: number;
     }>;
-    items: Array<Item>;
+    items: Array<ReportMetricRow>;
     title?: React.ReactNode;
     showHeaderSum?: boolean;
     sort?: any;
     updateSort?: (val: any) => void;
-    renderRowHeader?: (item: Item) => React.ReactNode;
+    renderRowHeader?: (item: ReportMetricRow) => React.ReactNode;
     emptyMessage?: React.ReactNode;
     showAllItems: boolean;
     setShowAllItems: (value: boolean) => void;

package/types/components/metrics-table/metrics-table.i18n.d.ts

@@ -1,8 +1,3 @@
-export declare const BASELINE_TITLE = "Baseline";
-export declare const CURRENT_TITLE = "Current";
-export declare const SORT_VALUE = "value";
-export declare const SORT_CHANGE = "change";
-export declare const SORT_PERCENTUAL_CHANGE = "percentual change";
 export declare const EMPTY_MESSAGE = "No items found.";
 export declare const SHOW_ALL = "Show all";
 export declare const SHOW_LESS = "Show less";

package/types/components/metrics-table-header/index.d.ts

@@ -0,0 +1 @@
+export * from './metrics-table-header';

package/types/components/metrics-table-header/metrics-table-header.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { type ReportMetricRow } from '@bundle-stats/utils';
+interface MetricsTableHeaderProps {
+    metricTitle?: React.ReactNode;
+    showSum?: boolean;
+    jobs: Array<{
+        label: string;
+        internalBuildNumber: number;
+    }>;
+    rows: Array<ReportMetricRow>;
+    sort?: any;
+    updateSort?: (val: any) => void;
+}
+export declare const MetricsTableHeader: (props: MetricsTableHeaderProps & React.ComponentProps<'thead'>) => React.JSX.Element;
+export {};

package/types/components/metrics-table-header/metrics-table-header.i18n.d.ts

@@ -0,0 +1,5 @@
+export declare const BASELINE_TITLE = "Baseline";
+export declare const CURRENT_TITLE = "Current";
+export declare const SORT_VALUE = "value";
+export declare const SORT_CHANGE = "change";
+export declare const SORT_PERCENTUAL_CHANGE = "percentual change";

package/lib/components/total-size-type-title/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/total-size-type-title/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0DAAwC"}

package/lib/components/total-size-type-title/total-size-type-title.js

@@ -1,32 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TotalSizeTypeTitle = void 0;
-const react_1 = __importDefault(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
-const classnames_1 = __importDefault(require("classnames"));
-const config_json_1 = __importDefault(require("../../config.json"));
-const i18n_1 = __importDefault(require("../../i18n"));
-const flex_stack_1 = require("../../layout/flex-stack");
-const stack_1 = require("../../layout/stack");
-const button_1 = require("../../ui/button");
-const icon_1 = require("../../ui/icon");
-const hover_card_1 = require("../../ui/hover-card");
-const total_size_type_title_module_css_1 = __importDefault(require("./total-size-type-title.module.css"));
-const TotalSizeTypeTitle = ({ className }) => (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", className: (0, classnames_1.default)(total_size_type_title_module_css_1.default.root, className) },
-    react_1.default.createElement("span", { className: total_size_type_title_module_css_1.default.text }, i18n_1.default.ASSET_TOTALS),
-    react_1.default.createElement(hover_card_1.HoverCard, { label: react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.HELP }), anchorClassName: total_size_type_title_module_css_1.default.anchor },
-        react_1.default.createElement(stack_1.Stack, { space: "xxxsmall" },
-            react_1.default.createElement("p", null, i18n_1.default.ASSET_TOTALS_INFO),
-            react_1.default.createElement("p", null,
-                react_1.default.createElement(button_1.Button, { kind: "primary", type: "button", onClick: () => window.open(config_json_1.default.documentation.assets), className: total_size_type_title_module_css_1.default.readMoreLink }, i18n_1.default.READ_MORE))))));
-exports.TotalSizeTypeTitle = TotalSizeTypeTitle;
-exports.TotalSizeTypeTitle.propTypes = {
-    className: prop_types_1.default.string,
-};
-exports.TotalSizeTypeTitle.defaultProps = {
-    className: '',
-};
-//# sourceMappingURL=total-size-type-title.js.map

package/lib/components/total-size-type-title/total-size-type-title.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"total-size-type-title.js","sourceRoot":"","sources":["../../../src/components/total-size-type-title/total-size-type-title.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAE5B,oEAAuC;AACvC,sDAA8B;AAC9B,wDAAoD;AACpD,8CAA2C;AAC3C,4CAAyC;AACzC,wCAAqC;AACrC,oDAAgD;AAChD,0GAAqD;AAE9C,MAAM,kBAAkB,GAAG,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CACnD,8BAAC,sBAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,0CAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAChF,wCAAM,SAAS,EAAE,0CAAG,CAAC,IAAI,IAAG,cAAI,CAAC,YAAY,CAAQ;IACrD,8BAAC,sBAAS,IAAC,KAAK,EAAE,8BAAC,WAAI,IAAC,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,IAAI,GAAI,EAAE,eAAe,EAAE,0CAAG,CAAC,MAAM;QAC7E,8BAAC,aAAK,IAAC,KAAK,EAAC,UAAU;YACrB,yCAAI,cAAI,CAAC,iBAAiB,CAAK;YAC/B;gBACE,8BAAC,eAAM,IACL,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,qBAAM,CAAC,aAAa,CAAC,MAAM,CAAC,EACvD,SAAS,EAAE,0CAAG,CAAC,YAAY,IAE1B,cAAI,CAAC,SAAS,CACR,CACP,CACE,CACE,CACF,CACb,CAAC;AAnBW,QAAA,kBAAkB,sBAmB7B;AAEF,0BAAkB,CAAC,SAAS,GAAG;IAC7B,SAAS,EAAE,oBAAS,CAAC,MAAM;CAC5B,CAAC;AAEF,0BAAkB,CAAC,YAAY,GAAG;IAChC,SAAS,EAAE,EAAE;CACd,CAAC"}

package/lib/components/total-size-type-title/total-size-type-title.module.css

@@ -1,14 +0,0 @@
-.root {
-  color: var(--color-text-light);
-}
-
-.text {
-  font-weight: bold;
-  font-size: var(--size-medium);
-  line-height: var(--space-medium);
-  text-transform: uppercase;
-}
-
-.anchor {
-  display: block;
-}

package/lib-esm/components/total-size-type-title/index.js

@@ -1,2 +0,0 @@
-export * from './total-size-type-title';
-//# sourceMappingURL=index.js.map

package/lib-esm/components/total-size-type-title/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/total-size-type-title/index.js"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/lib-esm/components/total-size-type-title/total-size-type-title.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import config from '../../config.json';
-import I18N from '../../i18n';
-import { FlexStack } from '../../layout/flex-stack';
-import { Stack } from '../../layout/stack';
-import { Button } from '../../ui/button';
-import { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
-import css from './total-size-type-title.module.css';
-export const TotalSizeTypeTitle = ({ className }) => (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", className: cx(css.root, className) },
-    React.createElement("span", { className: css.text }, I18N.ASSET_TOTALS),
-    React.createElement(HoverCard, { label: React.createElement(Icon, { glyph: Icon.ICONS.HELP }), anchorClassName: css.anchor },
-        React.createElement(Stack, { space: "xxxsmall" },
-            React.createElement("p", null, I18N.ASSET_TOTALS_INFO),
-            React.createElement("p", null,
-                React.createElement(Button, { kind: "primary", type: "button", onClick: () => window.open(config.documentation.assets), className: css.readMoreLink }, I18N.READ_MORE))))));
-TotalSizeTypeTitle.propTypes = {
-    className: PropTypes.string,
-};
-TotalSizeTypeTitle.defaultProps = {
-    className: '',
-};
-//# sourceMappingURL=total-size-type-title.js.map

package/lib-esm/components/total-size-type-title/total-size-type-title.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"total-size-type-title.js","sourceRoot":"","sources":["../../../src/components/total-size-type-title/total-size-type-title.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,GAAG,MAAM,oCAAoC,CAAC;AAErD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CACnD,oBAAC,SAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAChF,8BAAM,SAAS,EAAE,GAAG,CAAC,IAAI,IAAG,IAAI,CAAC,YAAY,CAAQ;IACrD,oBAAC,SAAS,IAAC,KAAK,EAAE,oBAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI,EAAE,eAAe,EAAE,GAAG,CAAC,MAAM;QAC7E,oBAAC,KAAK,IAAC,KAAK,EAAC,UAAU;YACrB,+BAAI,IAAI,CAAC,iBAAiB,CAAK;YAC/B;gBACE,oBAAC,MAAM,IACL,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,EACvD,SAAS,EAAE,GAAG,CAAC,YAAY,IAE1B,IAAI,CAAC,SAAS,CACR,CACP,CACE,CACE,CACF,CACb,CAAC;AAEF,kBAAkB,CAAC,SAAS,GAAG;IAC7B,SAAS,EAAE,SAAS,CAAC,MAAM;CAC5B,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG;IAChC,SAAS,EAAE,EAAE;CACd,CAAC"}

package/lib-esm/components/total-size-type-title/total-size-type-title.module.css

@@ -1,14 +0,0 @@
-.root {
-  color: var(--color-text-light);
-}
-
-.text {
-  font-weight: bold;
-  font-size: var(--size-medium);
-  line-height: var(--space-medium);
-  text-transform: uppercase;
-}
-
-.anchor {
-  display: block;
-}

package/src/components/total-size-type-title/index.js

@@ -1 +0,0 @@
-export * from './total-size-type-title';

package/src/components/total-size-type-title/total-size-type-title.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import config from '../../config.json';
-import I18N from '../../i18n';
-import { FlexStack } from '../../layout/flex-stack';
-import { Stack } from '../../layout/stack';
-import { Button } from '../../ui/button';
-import { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
-import css from './total-size-type-title.module.css';
-
-export const TotalSizeTypeTitle = ({ className }) => (
-  <FlexStack space="xxxsmall" alignItems="center" className={cx(css.root, className)}>
-    <span className={css.text}>{I18N.ASSET_TOTALS}</span>
-    <HoverCard label={<Icon glyph={Icon.ICONS.HELP} />} anchorClassName={css.anchor}>
-      <Stack space="xxxsmall">
-        <p>{I18N.ASSET_TOTALS_INFO}</p>
-        <p>
-          <Button
-            kind="primary"
-            type="button"
-            onClick={() => window.open(config.documentation.assets)}
-            className={css.readMoreLink}
-          >
-            {I18N.READ_MORE}
-          </Button>
-        </p>
-      </Stack>
-    </HoverCard>
-  </FlexStack>
-);
-
-TotalSizeTypeTitle.propTypes = {
-  className: PropTypes.string,
-};
-
-TotalSizeTypeTitle.defaultProps = {
-  className: '',
-};

package/src/components/total-size-type-title/total-size-type-title.module.css

@@ -1,14 +0,0 @@
-.root {
-  color: var(--color-text-light);
-}
-
-.text {
-  font-weight: bold;
-  font-size: var(--size-medium);
-  line-height: var(--space-medium);
-  text-transform: uppercase;
-}
-
-.anchor {
-  display: block;
-}

package/types/components/total-size-type-title/index.d.ts

@@ -1 +0,0 @@
-export * from "./total-size-type-title";

package/types/components/total-size-type-title/total-size-type-title.d.ts

@@ -1,14 +0,0 @@
-export function TotalSizeTypeTitle({ className }: {
-    className: any;
-}): React.JSX.Element;
-export namespace TotalSizeTypeTitle {
-    namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        let className_1: string;
-        export { className_1 as className };
-    }
-}
-import React from 'react';
-import PropTypes from 'prop-types';