@bundle-stats/ui 4.13.0-rc.0 → 4.13.0-rc.1

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

@@ -9,77 +9,43 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { useDebounce, useHoverDirty, useMeasure, useMouseHovered } from 'react-use';
+import { useHoverDirty, useMeasure } from 'react-use';
 import cx from 'classnames';
 import { HierarchyRectangularNode, hierarchy, treemap, treemapSquarify } from 'd3';
-import { Tooltip, TooltipArrow, TooltipAnchor, useTooltipState } from 'ariakit/tooltip';
+import { Tooltip, TooltipArrow, TooltipAnchor } from 'ariakit/tooltip';
 import {
   type ReportMetricRow,
   type MetricRunInfo,
   type MetricRunInfoBaseline,
-  getMetricRunInfo,
   METRIC_TYPE_CONFIGS,
+  formatFileSize,
+  getMetricRunInfo,
 } from '@bundle-stats/utils';
 
 import { Stack } from '../../layout/stack';
 import { FileName } from '../../ui/file-name';
 import { Delta } from '../delta';
 import { RunInfo } from '../run-info';
-import type { TreeLeaf, TreeNode, Tree } from './metrics-treemap.constants';
+import {
+  type TreeLeaf,
+  type TreeNode,
+  type Tree,
+  SQUARIFY_RATIO,
+  PADDING_OUTER,
+  PADDING_INNER,
+  NESTED_PADDING,
+  NESTED_PADDING_TOP,
+  NESTED_PADDING_LEFT,
+  TileSizeDisplay,
+} from './metrics-treemap.constants';
 import * as I18N from './metrics-treemap.i18n';
 import css from './metrics-treemap.module.css';
-import { resolveGroupDeltaType } from './metrics-treemap.utils';
-
-const SQUARIFY_RATIO = 1.66;
-const PADDING_OUTER = 1;
-const PADDING_INNER = 2;
-const NESTED_PADDING = 4;
-const NESTED_PADDING_TOP = 16 + NESTED_PADDING * 2;
-const NESTED_PADDING_LEFT = 8;
-
-/**
- * Resolve the tile's size using predefined values to avoid
- * computing the size of the content for every tile
- */
-const PADDING_TOP = 4;
-const PADDING_BOTTOM = 2; // substracted to allow longer texts to appear
-const PADDING_LEFT = 2;
-const PADDING_RIGHT = 4; // substracted to allow longer texts to not break
-const VERTICAL_SPACING = 4;
-const LINE_HEIGHT = 16;
-const LINE_HEIGHT_SMALL = 13.3;
-
-function resolveTileGroupSizeDisplay(width: number, height: number): TileSizeDisplay {
-  if (height < NESTED_PADDING_TOP || width < 24) {
-    return 'minimal';
-  }
-
-  if (height < NESTED_PADDING_TOP + 8) {
-    return 'small';
-  }
-
-  return 'default';
-}
-
-type TileSizeDisplay = 'minimal' | 'small' | 'default';
-
-function resolveTileSizeDisplay(width: number, height: number): TileSizeDisplay {
-  if (
-    height > PADDING_TOP + PADDING_BOTTOM + VERTICAL_SPACING + LINE_HEIGHT * 2 &&
-    width > PADDING_LEFT + PADDING_RIGHT + 128
-  ) {
-    return 'default';
-  }
-
-  if (
-    height > PADDING_TOP + PADDING_BOTTOM + LINE_HEIGHT_SMALL * 2 &&
-    width > PADDING_LEFT + PADDING_BOTTOM + 48
-  ) {
-    return 'small';
-  }
-
-  return 'minimal';
-}
+import {
+  resolveGroupDeltaType,
+  resolveTileSizeDisplay,
+  resolveTileGroupSizeDisplay,
+  useTooltipStateWithMouseFollow,
+} from './metrics-treemap.utils';
 
 interface TileTooltipContentProps {
   item: ReportMetricRow;
@@ -118,7 +84,7 @@ interface TileContentProps {
   /**
    * The estimated size of the tile
    */
-  sizeDisplay: 'minimal' | 'small' | 'default';
+  sizeDisplay: TileSizeDisplay;
   /**
    * Metric run info
    */
@@ -128,23 +94,33 @@ interface TileContentProps {
 const TileContent = forwardRef((props: TileContentProps, ref: Ref<HTMLDivElement>) => {
   const { label, sizeDisplay, item, runInfo } = props;
 
+  // Render only the container
   if (sizeDisplay === 'minimal') {
     return <div className={css.tileContent} ref={ref} />;
   }
 
+  const resolvedLabel = label || item.label;
+
+  // Render only the label
+  if (sizeDisplay === 'small') {
+    return (
+      <div className={css.tileContent} ref={ref}>
+        <p className={css.tileContentLabel}>{resolvedLabel}</p>
+      </div>
+    );
+  }
+
   return (
     <div className={css.tileContent} ref={ref}>
-      <FileName as="p" className={css.tileContentLabel} name={label || item.label} />
-      {sizeDisplay !== 'small' && (
-        <p className={css.tileContentValue}>
-          <span className={css.tileContentMetric}>{runInfo.displayValue}</span>
-          <Delta
-            className={css.tileContentDelta}
-            displayValue={runInfo.displayDeltaPercentage}
-            deltaType={runInfo.deltaType}
-          />
-        </p>
-      )}
+      <p className={css.tileContentLabel}>{label || item.label}</p>
+      <p className={css.tileContentValue}>
+        <span className={css.tileContentMetric}>{runInfo.displayValue}</span>
+        <Delta
+          className={css.tileContentDelta}
+          displayValue={runInfo.displayDeltaPercentage}
+          deltaType={runInfo.deltaType}
+        />
+      </p>
     </div>
   );
 });
@@ -152,29 +128,7 @@ const TileContent = forwardRef((props: TileContentProps, ref: Ref<HTMLDivElement
 const TileContentWithTooltip = (props: TileContentProps & { parentRef: RefObject<Element> }) => {
   const { label, sizeDisplay, item, runInfo, parentRef } = props;
 
-  const pointer = useMouseHovered(parentRef, { whenHovered: true });
-
-  // Return custom rect based on the mouse position
-  const getAnchorRect = useCallback(() => {
-    // Skip custom component rect area if the pointer position is empty
-    if (pointer.docX === 0 && pointer.docY === 0 && pointer.elW === 0 && pointer.elH === 0) {
-      return null;
-    }
-
-    const newRect = {
-      x: pointer.docX - (document?.defaultView?.scrollX ?? 0),
-      y: pointer.docY - (document?.defaultView?.scrollY ?? 0),
-      w: 1,
-      h: 1,
-    };
-
-    return newRect;
-  }, [pointer.docX, pointer.docY]);
-
-  const tooltipState = useTooltipState({ gutter: 12, getAnchorRect, timeout: 120 });
-
-  // Update tooltip position when poiner values are changing
-  useDebounce(tooltipState.render, 5, [pointer.docX, pointer.docY]);
+  const tooltipState = useTooltipStateWithMouseFollow({ parentRef });
 
   return (
     <>
@@ -221,7 +175,7 @@ const Tile = (props: TileProps) => {
     css[`tile-${runInfo.deltaType}`],
     sizeDisplay === 'small' && css.tileSizeSmall,
     sizeDisplay === 'default' && css.tileSizeDefault,
-    left === 0 && css.tileFirstCol,
+    left === PADDING_INNER && css.tileFirstCol,
   );
 
   /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus */
@@ -249,6 +203,96 @@ const Tile = (props: TileProps) => {
   );
 };
 
+interface TileGroupTitleTooltipContentProps {
+  title: string;
+  runInfo: MetricRunInfo;
+  baselineDisplayValue?: string;
+}
+
+const TileGroupTitleTooltipContent = (props: TileGroupTitleTooltipContentProps) => {
+  const { title, runInfo, baselineDisplayValue } = props;
+
+  return (
+    <Stack space="small" className={css.tileTooltip}>
+      <h3 className={css.tileTooltipContentTitle}>
+        <FileName as="code" name={title} />
+      </h3>
+      <RunInfo
+        current={runInfo.displayValue}
+        baseline={baselineDisplayValue}
+        delta={runInfo.displayDeltaPercentage}
+        deltaType={runInfo.deltaType}
+      />
+    </Stack>
+  );
+};
+
+interface TileGroupTitleContentProps {
+  title?: string;
+  runInfo?: MetricRunInfo;
+}
+
+const TileGroupTitleContent = (props: TileGroupTitleContentProps) => {
+  const { title, runInfo } = props;
+
+  return (
+    <div className={css.tileGroupTitleContent}>
+      {title && <span className={css.tileGroupTitleText}>{title}</span>}
+      {runInfo && (
+        <span className={css.tileGroupTitleTotal}>
+          {runInfo.displayValue}
+          {'displayDelta' in runInfo && `(${runInfo.displayDeltaPercentage})`}
+        </span>
+      )}
+    </div>
+  );
+};
+
+type TileGroupTitleContentWithTooltipProps = {
+  parentRef: RefObject<Element>;
+  tooltipContent: TileGroupTitleTooltipContentProps;
+} & TileGroupTitleContentProps;
+
+const TileGroupTitleContentWithTooltip = (props: TileGroupTitleContentWithTooltipProps) => {
+  const { parentRef, tooltipContent, ...restProps } = props;
+
+  const tooltipState = useTooltipStateWithMouseFollow({ parentRef });
+
+  return (
+    <>
+      <TooltipAnchor state={tooltipState} className={css.tileContentTooltipAnchor}>
+        <TileGroupTitleContent {...restProps} />
+      </TooltipAnchor>
+      <Tooltip state={tooltipState} className={css.tooltip}>
+        <TooltipArrow state={tooltipState} size={16} className={css.tileTooltipArrow} />
+        <TileGroupTitleTooltipContent {...tooltipContent} />
+      </Tooltip>
+    </>
+  );
+};
+
+type TileGroupTitleProps = Omit<TileGroupTitleContentWithTooltipProps, 'parentRef'>;
+
+const TileGroupTitle = (props: TileGroupTitleProps) => {
+  const { tooltipContent, ...restProps } = props;
+  const contentRef = useRef<HTMLDivElement>(null);
+  const hover = useHoverDirty(contentRef);
+
+  return (
+    <div className={css.tileGroupTitle} ref={contentRef}>
+      {hover ? (
+        <TileGroupTitleContentWithTooltip
+          parentRef={contentRef}
+          tooltipContent={tooltipContent}
+          {...restProps}
+        />
+      ) : (
+        <TileGroupTitleContent {...restProps} />
+      )}
+    </div>
+  );
+};
+
 interface TileGroupProps extends ComponentProps<'div'> {
   /**
    * Node title
@@ -323,11 +367,36 @@ const TileGroup = (props: TileGroupProps) => {
     [width, height],
   );
 
-  const metricRunInfo =
-    total &&
-    getMetricRunInfo(METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE, total.current, total.baseline);
-  const groupDeltaType = resolveGroupDeltaType(metricRunInfo);
-  const rootClassName = cx(css.tileGroup, css[`tileGroup--${groupDeltaType}`]);
+  // Prepare data
+  const [runInfo, baselineDisplayValue, deltaType] = useMemo(() => {
+    if (!total) {
+      return [];
+    }
+
+    const resolvedRunInfo = getMetricRunInfo(
+      METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE,
+      total.current,
+      total.baseline,
+    ) as MetricRunInfo;
+    const resolvedBaselineDisplayValue = formatFileSize(total.baseline);
+    const resolvedDeltaType = resolveGroupDeltaType(resolvedRunInfo);
+
+    return [resolvedRunInfo, resolvedBaselineDisplayValue, resolvedDeltaType];
+  }, [total]);
+
+  const rootClassName = cx(
+    css.tileGroup,
+    css[`tileGroup--${deltaType}`],
+    css[`tileGroup--${displaySize}`],
+  );
+
+  // Tooltip data
+  // - by default show the node id (full path) as title
+  const tooltipContent = {
+    title: id || title,
+    runInfo,
+    baselineDisplayValue,
+  } as TileGroupTitleTooltipContentProps;
 
   if (title && displaySize === 'minimal') {
     return (
@@ -337,7 +406,9 @@ const TileGroup = (props: TileGroupProps) => {
         aria-label={I18N.TILE_GROUP_LABEL}
         className={rootClassName}
         style={{ left, top, width, height }}
-      />
+      >
+        <TileGroupTitle tooltipContent={tooltipContent} />
+      </div>
     );
   }
 
@@ -350,7 +421,7 @@ const TileGroup = (props: TileGroupProps) => {
         style={{ left, top, width, height }}
         className={rootClassName}
       >
-        <div className={css.tileGroupTitle}>{title}</div>
+        <TileGroupTitle title={title} tooltipContent={tooltipContent} />
       </div>
     );
   }
@@ -363,17 +434,7 @@ const TileGroup = (props: TileGroupProps) => {
       className={cx(rootClassName, css.tileGroupSizeDefault)}
       style={{ left, top, width, height }}
     >
-      {title && (
-        <div className={css.tileGroupTitle}>
-          {title}
-          {metricRunInfo && (
-            <span className={css.tileGroupTitleTotal}>
-              {`${metricRunInfo.displayValue}`}
-              {'displayDelta' in metricRunInfo && ` (${metricRunInfo.displayDeltaPercentage})`}
-            </span>
-          )}
-        </div>
-      )}
+      <TileGroupTitle title={title} runInfo={runInfo} tooltipContent={tooltipContent} />
       {childNodes?.map((childNode) => {
         if ('children' in childNode) {
           const groupData = childNode.data as Tree;

package/src/components/metrics-treemap/metrics-treemap.utils.ts

@@ -1,3 +1,6 @@
+import { type RefObject, useCallback } from 'react';
+import { useDebounce, useMouseHovered } from 'react-use';
+import { useTooltipState } from 'ariakit/tooltip';
 import {
   DeltaType,
   type MetricRunInfoBaseline,
@@ -5,7 +8,15 @@ import {
   type ReportMetricRow,
 } from '@bundle-stats/utils';
 
-import type { TreeLeaf, TreeNodeChildren, Tree, TreeTotal } from './metrics-treemap.constants';
+import {
+  type TreeLeaf,
+  type TreeNodeChildren,
+  type Tree,
+  type TreeTotal,
+  type TileSizeDisplay,
+  type TileGroupSizeDisplay,
+  NESTED_PADDING_TOP,
+} from './metrics-treemap.constants';
 
 const ROOT_LABEL = '(root)';
 
@@ -160,3 +171,98 @@ export function resolveGroupDeltaType(
 
   return DeltaType.NO_CHANGE;
 }
+
+/**
+ * Resolve the tile's size using predefined values to avoid
+ * computing the size of the content for every tile
+ */
+const PADDING_TOP = 8;
+const PADDING_BOTTOM = 8;
+const PADDING_LEFT = 8;
+const PADDING_RIGHT = 8;
+const LINE_HEIGHT = 16;
+const LINE_HEIGHT_SMALL = 13.3;
+
+export function resolveTileGroupSizeDisplay(width: number, height: number): TileGroupSizeDisplay {
+  if (height < NESTED_PADDING_TOP) {
+    return 'minimal';
+  }
+
+  if (width < 24) {
+    return 'minimal';
+  }
+
+  if (height < NESTED_PADDING_TOP + 8) {
+    return 'small';
+  }
+
+  return 'default';
+}
+
+export function resolveTileSizeDisplay(width: number, height: number): TileSizeDisplay {
+  if (height < PADDING_TOP + PADDING_BOTTOM + LINE_HEIGHT_SMALL) {
+    return 'minimal';
+  }
+
+  if (width < PADDING_LEFT + PADDING_RIGHT + 42) {
+    return 'minimal';
+  }
+
+  if (height < PADDING_TOP + PADDING_TOP + LINE_HEIGHT * 2) {
+    return 'small';
+  }
+
+  if (width < PADDING_LEFT + PADDING_RIGHT + 96) {
+    return 'small';
+  }
+
+  return 'default';
+}
+
+interface UseTooltipStateWithMouseFollowOptions {
+  /**
+   * React ref to parent div
+   */
+  parentRef: RefObject<Element>;
+  /**
+   * Tooltip gutter
+   */
+  gutter?: number;
+  /**
+   * Tooltip timeout
+   */
+  timeout?: number;
+}
+
+/**
+ * Ariakit tooltip state hook with mouse follow functionality
+ */
+export function useTooltipStateWithMouseFollow(options: UseTooltipStateWithMouseFollowOptions) {
+  const { parentRef, gutter = 16, timeout = 180 } = options;
+
+  const pointer = useMouseHovered(parentRef, { whenHovered: true });
+
+  // Return custom rect based on the mouse position
+  const getAnchorRect = useCallback(() => {
+    // Skip custom component rect area if the pointer position is empty
+    if (pointer.docX === 0 && pointer.docY === 0 && pointer.elW === 0 && pointer.elH === 0) {
+      return null;
+    }
+
+    const newRect = {
+      x: pointer.docX - (document?.defaultView?.scrollX ?? 0),
+      y: pointer.docY - (document?.defaultView?.scrollY ?? 0),
+      w: 1,
+      h: 1,
+    };
+
+    return newRect;
+  }, [pointer.docX, pointer.docY]);
+
+  const tooltipState = useTooltipState({ gutter, getAnchorRect, timeout });
+
+  // Update tooltip position when pointer values change
+  useDebounce(tooltipState.render, 10, [pointer.docX, pointer.docY]);
+
+  return tooltipState;
+}

package/src/utils/colors.ts

@@ -0,0 +1,19 @@
+import chunk from 'lodash/chunk';
+
+import COLORS from '../chart-colors.json';
+
+export function getColors(count = 2) {
+  const chunks = chunk(COLORS, Math.round(COLORS.length / count));
+
+  return chunks.map((chunkColors, index) => {
+    if (index === 0) {
+      return chunkColors[0];
+    }
+
+    if (index === chunks.length - 1) {
+      return chunkColors[chunkColors.length - 1];
+    }
+
+    return chunkColors[Math.floor(chunkColors.length / 2)];
+  });
+}

package/src/utils/components.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import cx from 'classnames';
+
+export const getRenderChildWithClassName = (className: string) => (child: any) => {
+  if (child === null || child === '') {
+    return null;
+  }
+
+  const { props } = child;
+
+  if (!props) {
+    return <div className={className}>{child}</div>;
+  }
+
+  return React.cloneElement(child, {
+    ...props,
+    className: cx(className, props.className), // eslint-disable-line react/prop-types
+  });
+};

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './jobs';
+export * from './components';

package/src/utils/jobs.ts

@@ -0,0 +1,22 @@
+import uniqBy from 'lodash/uniqBy';
+
+import type { Job, WebpackChunk } from '@bundle-stats/utils';
+
+interface GetJobsChunksData {
+  chunks: Array<WebpackChunk>;
+  chunkIds: Array<string>;
+}
+
+/**
+ * Get chunks data from all jobs
+ */
+export function getJobsChunksData(jobs: Array<Job>): GetJobsChunksData {
+  const jobChunks = jobs.map((job) => job?.meta?.webpack?.chunks || []);
+  const chunks = uniqBy(jobChunks.flat(), ({ id }) => id);
+  const chunkIds = chunks?.map(({ id }) => id);
+
+  return {
+    chunks,
+    chunkIds,
+  };
+}

package/types/components/bundle-assets/bundle-assets.d.ts

@@ -13,12 +13,8 @@ export namespace BundleAssets {
         export let jobs: PropTypes.Validator<(PropTypes.InferProps<{
             internalBuildNumber: PropTypes.Requireable<number>;
             label: PropTypes.Requireable<string>;
-            meta: PropTypes.Requireable<PropTypes.InferProps<{
-                webpack: PropTypes.Requireable<PropTypes.InferProps<{
-                    chunks: PropTypes.Requireable<any[]>;
-                }>>;
-            }>>;
         }> | null | undefined)[]>;
+        export let chunks: PropTypes.Validator<any[]>;
         export let items: PropTypes.Validator<(PropTypes.InferProps<{
             key: PropTypes.Requireable<string>;
             label: PropTypes.Requireable<string>;

package/types/components/bundle-modules/bundle-modules.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
+import { type Job } from '@bundle-stats/utils';
+import { WebpackChunk } from '@bundle-stats/utils';
 import { SortAction } from '../../types';
 import { ModuleMetric } from './bundle-modules.constants';
-import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
+import type { ReportMetricModuleRow } from './bundle-modules.types';
 interface BundleModulesProps extends React.ComponentProps<'div'> {
     jobs?: Array<Job>;
     items?: Array<ReportMetricModuleRow>;
     allItems?: Array<ReportMetricModuleRow>;
-    chunks?: Array<Chunk>;
+    chunks?: Array<WebpackChunk>;
     totalRowCount: number;
     updateFilters: () => void;
     resetFilters: () => void;

package/types/components/bundle-modules/bundle-modules.utils.d.ts

@@ -1,16 +1,12 @@
-import type { ReportMetricRow } from '@bundle-stats/utils';
+import { type WebpackChunk, type ReportMetricRow } from '@bundle-stats/utils';
 import { type Module } from '@bundle-stats/utils/lib-esm/webpack';
 import type { FilterFieldsData } from '../../types';
-import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
+import type { ReportMetricModuleRow } from './bundle-modules.types';
 export declare const addRowFlags: (row: Module & ReportMetricRow) => ReportMetricModuleRow;
 export declare const getCustomSort: (item: ReportMetricRow) => (string | boolean)[];
 export declare const generateGetRowFilter: ({ chunkIds }: {
     chunkIds: Array<string>;
 }) => (filters: Record<string, unknown>) => (row: ReportMetricModuleRow) => boolean;
-export declare const extractChunkData: (jobs: Array<Job>) => {
-    chunks: Chunk[];
-    chunkIds: string[];
-};
 export declare const generateFilters: (chunkIds: Array<string>, multipleJobs: boolean) => {
     defaultFilters: {
         [x: string]: boolean;
@@ -21,7 +17,7 @@ export declare const generateFilters: (chunkIds: Array<string>, multipleJobs: bo
 };
 interface GetFiltersFormDataParams {
     filters: Record<string, boolean>;
-    chunks: Array<Chunk>;
+    chunks: Array<WebpackChunk>;
     compareMode: boolean;
 }
 export declare const generateFilterFieldsData: (params: GetFiltersFormDataParams) => FilterFieldsData;

package/types/components/bundle-modules/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
+import type { Job } from '@bundle-stats/utils';
 import type { SortAction } from '../../types';
 import { BundleModules as BaseComponent } from './bundle-modules';
-import * as types from './bundle-modules.types';
 interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'jobs' | 'items' | 'chunks' | 'updateFilters' | 'resetFilters' | 'resetAllFilters' | 'filters' | 'sort' | 'updateSort' | 'search' | 'updateSearch' | 'allItems' | 'totalRowCount' | 'hideEntryInfo' | 'showEntryInfo'> {
-    jobs: Array<types.Job>;
+    jobs: Array<Job>;
     filters: Record<string, boolean>;
     search?: string;
     metric?: string;

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

@@ -18,3 +18,11 @@ export interface Tree {
 }
 export type TreeNode = Tree | TreeLeaf;
 export type TreeNodeChildren = Array<TreeNode>;
+export type TileGroupSizeDisplay = 'minimal' | 'small' | 'default';
+export type TileSizeDisplay = 'minimal' | 'small' | 'default';
+export declare const SQUARIFY_RATIO = 1.66;
+export declare const PADDING_OUTER = 1;
+export declare const PADDING_INNER = 2;
+export declare const NESTED_PADDING = 4;
+export declare const NESTED_PADDING_TOP: number;
+export declare const NESTED_PADDING_LEFT = 8;

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

@@ -1,5 +1,5 @@
 import React, { type ComponentProps, type ReactNode } from 'react';
-import type { Tree } from './metrics-treemap.constants';
+import { type Tree } from './metrics-treemap.constants';
 interface MetricsTreemapProps {
     treeNodes: Tree;
     emptyMessage?: ReactNode;

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

@@ -1,5 +1,15 @@
+import { type RefObject } from 'react';
 import { DeltaType, type MetricRunInfoBaseline, type MetricRunInfo, type ReportMetricRow } from '@bundle-stats/utils';
-import type { Tree } from './metrics-treemap.constants';
+import { type Tree, type TileSizeDisplay, type TileGroupSizeDisplay } from './metrics-treemap.constants';
 export declare function getTreemapNodes(items: Array<ReportMetricRow>): Tree;
 export declare function getTreemapNodesGroupedByPath(items: Array<ReportMetricRow>): Tree;
 export declare function resolveGroupDeltaType(metricRunInfo?: MetricRunInfo | MetricRunInfoBaseline): DeltaType.NO_CHANGE | DeltaType.NEGATIVE | DeltaType.POSITIVE;
+export declare function resolveTileGroupSizeDisplay(width: number, height: number): TileGroupSizeDisplay;
+export declare function resolveTileSizeDisplay(width: number, height: number): TileSizeDisplay;
+interface UseTooltipStateWithMouseFollowOptions {
+    parentRef: RefObject<Element>;
+    gutter?: number;
+    timeout?: number;
+}
+export declare function useTooltipStateWithMouseFollow(options: UseTooltipStateWithMouseFollowOptions): import("ariakit/tooltip").TooltipState;
+export {};

package/types/utils/colors.d.ts

@@ -0,0 +1 @@
+export declare function getColors(count?: number): string[];

package/types/utils/components.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const getRenderChildWithClassName: (className: string) => (child: any) => React.JSX.Element | null;

package/types/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './jobs';
+export * from './components';