@bundle-stats/ui 4.13.0 → 4.13.2

package/src/components/run-info/run-info.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { type ReactNode, useMemo } from 'react';
 import cx from 'classnames';
 
 import { Icon } from '../../ui/icon';
@@ -25,17 +25,17 @@ const getMetricParams = (value: string): [string, string?] => {
 };
 
 export interface RunInfoProps {
-  title?: string;
-  titleHoverCard?: React.ReactNode;
-  titleTooltip?: React.ReactNode;
-  current?: React.ReactNode;
+  title?: ReactNode;
+  titleHoverCard?: ReactNode;
+  titleTooltip?: ReactNode;
+  current?: ReactNode;
   baseline?: string;
   delta?: string;
   deltaPercentage?: string;
   deltaType?: string;
 
   as?: React.ElementType;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
 
   showBaseline?: boolean;
   loading?: boolean;
@@ -44,7 +44,7 @@ export interface RunInfoProps {
 
 export const RunInfo = ({
   className = '',
-  title = '',
+  title = null,
   titleHoverCard = null,
   titleTooltip = null,
   current = '',
@@ -58,7 +58,7 @@ export const RunInfo = ({
   loading = false,
   enhance = false,
   ...restProps
-}: RunInfoProps & React.ComponentProps<'div'>) => {
+}: RunInfoProps & Omit<React.ComponentProps<'div'>, 'title'>) => {
   const rootClassName = cx(
     css.root,
     className,
@@ -66,7 +66,7 @@ export const RunInfo = ({
     (delta || deltaPercentage) && css.showDelta,
   );
 
-  const currentValueParams: [React.ReactNode, string?] = useMemo(() => {
+  const currentValueParams: [ReactNode, string?] = useMemo(() => {
     if (!enhance || typeof current !== 'string') {
       return [current];
     }

package/src/css/variables.css

@@ -22,6 +22,7 @@
   --size-xlarge: 1.266rem;
   --size-xxlarge: 1.424rem;
   --size-xxxlarge: 1.602rem;
+  --size-xxxxlarge: 1.802rem;
 
   --line-height: 1.66;
   --line-height-heading: 1.33;

package/src/ui/tooltip/tooltip.module.css

@@ -11,15 +11,16 @@
 }
 
 .tooltip {
+  z-index: var(--layer-xxhigh);
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   border-radius: var(--radius-small);
   background: var(--color-light);
-  max-width: 24em;
+  max-width: 28em;
   color: var(--color-text);
+  font-size: var(--size-xsmall);
+  text-align: center;
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
-  font-size: var(--size-xsmall);
-  z-index: var(--layer-xxhigh);
 }
 
 .arrow svg {

package/types/components/metric-run-info/metric-run-info.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ElementType } from 'react';
 import { RunInfoProps } from '../run-info';
 export interface MetricRunInfoProps {
     metricId: string;
@@ -7,6 +7,7 @@ export interface MetricRunInfoProps {
     showDelta?: boolean;
     showMetricDescription?: boolean;
     showBaseline?: boolean;
+    titleWrapper?: ElementType;
     size?: RunInfoProps['size'];
     loading?: RunInfoProps['loading'];
 }

package/types/components/metrics-treemap/metrics-treemap.constants.d.ts

@@ -1,7 +1,7 @@
 import type { ReportMetricRow } from '@bundle-stats/utils';
 export interface TreeTotal {
     current: number;
-    baseline: number;
+    baseline?: number;
 }
 export interface TreeLeaf {
     id: string;

package/types/components/run-info/run-info.d.ts

@@ -1,17 +1,17 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
 export interface RunInfoProps {
-    title?: string;
-    titleHoverCard?: React.ReactNode;
-    titleTooltip?: React.ReactNode;
-    current?: React.ReactNode;
+    title?: ReactNode;
+    titleHoverCard?: ReactNode;
+    titleTooltip?: ReactNode;
+    current?: ReactNode;
     baseline?: string;
     delta?: string;
     deltaPercentage?: string;
     deltaType?: string;
     as?: React.ElementType;
-    size?: 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
     showBaseline?: boolean;
     loading?: boolean;
     enhance?: boolean;
 }
-export declare const RunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaPercentage, deltaType, as: Component, size, showBaseline, loading, enhance, ...restProps }: RunInfoProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const RunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaPercentage, deltaType, as: Component, size, showBaseline, loading, enhance, ...restProps }: RunInfoProps & Omit<React.ComponentProps<'div'>, 'title'>) => React.JSX.Element;