@bundle-stats/ui 4.22.3 → 4.23.0-beta.2

package/src/ui/table/table.module.css

@@ -16,7 +16,6 @@
 
 .root thead th {
   border-width: 0 0 1px;
-  text-transform: uppercase;
   vertical-align: top;
   background: var(--color-highlight);
 }

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

@@ -21,6 +21,17 @@
   text-align: center;
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.tooltip[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.tooltip[data-leave] {
+  pointer-events: none;
 }
 
 .arrow svg {

package/src/ui/tooltip/tooltip.tsx

@@ -29,7 +29,12 @@ export const Tooltip = <T extends React.ElementType = 'span'>(
     ...restProps
   } = props;
 
-  const tooltip = useTooltipState({ placement: 'top', timeout: 300 });
+  const tooltip = useTooltipState({
+    animated: true,
+    placement: 'top',
+    overflowPadding: 48,
+    timeout: 300,
+  });
 
   return (
     <>

package/types/components/delta/delta.d.ts

@@ -1,22 +1,8 @@
-export function Delta({ className, displayValue, deltaType, inverted }: {
-    className?: string | undefined;
-    displayValue: any;
-    deltaType: any;
-    inverted?: boolean | undefined;
-}): React.JSX.Element;
-export namespace Delta {
-    namespace defaultProps {
-        let className: string;
-        let inverted: boolean;
-    }
-    namespace propTypes {
-        let className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        export let displayValue: PropTypes.Validator<string>;
-        export let deltaType: PropTypes.Validator<string>;
-        let inverted_1: PropTypes.Requireable<boolean>;
-        export { inverted_1 as inverted };
-    }
-}
 import React from 'react';
-import PropTypes from 'prop-types';
+import type { MetricRunInfoDeltaType } from '@bundle-stats/utils';
+export interface DeltaProps {
+    displayValue: string;
+    deltaType: MetricRunInfoDeltaType;
+    inverted?: boolean;
+}
+export declare const Delta: (props: DeltaProps & React.ComponentProps<"span">) => React.JSX.Element;

package/types/components/delta/index.d.ts

@@ -1 +1 @@
-export * from "./delta";
+export * from './delta';

package/types/components/index.d.ts

@@ -5,12 +5,15 @@ export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
 export { ComponentLink } from './component-link';
 export { Delta } from './delta';
+export type { DeltaProps } from './delta';
 export { InsightIcon } from './insight-icon';
 export { Insights } from './insights';
 export { JobName } from './job-name';
 export { JobsHeader } from './jobs-header';
 export { LighthouseTable } from './lighthouse-table';
 export { Metric } from './metric';
+export { MetricChangeLegend } from './metric-change-legend';
+export type { MetricChangeLegendProps } from './metric-change-legend';
 export { MetricRunInfo } from './metric-run-info';
 export type { MetricRunInfoProps } from './metric-run-info';
 export { MetricsTable } from './metrics-table';

package/types/components/metric-change-legend/index.d.ts

@@ -0,0 +1 @@
+export * from './metric-change-legend';

package/types/components/metric-change-legend/metric-change-legend.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export interface MetricChangeLegendProps extends React.ComponentProps<'div'> {
+}
+export declare const MetricChangeLegend: (props: MetricChangeLegendProps) => React.JSX.Element;

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

@@ -1,14 +1,11 @@
 import React, { ElementType } from 'react';
 import { RunInfoProps } from '../run-info';
-export interface MetricRunInfoProps {
+export type MetricRunInfoProps = {
     metricId: string;
     current: number;
     baseline?: number;
-    showDelta?: boolean;
     showMetricDescription?: boolean;
-    showBaseline?: boolean;
     titleWrapper?: ElementType;
-    size?: RunInfoProps['size'];
-    loading?: RunInfoProps['loading'];
-}
+    showDeltaValue?: boolean;
+} & Pick<RunInfoProps, 'showDelta' | 'showBaseline' | 'size' | 'loading'>;
 export declare const MetricRunInfo: (props: MetricRunInfoProps & React.ComponentProps<"div">) => React.JSX.Element;

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

@@ -20,6 +20,8 @@ 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 NODE_ID_ATTRIBUTE = "data-treemap-id";
+export declare const NODE_ID_SELECTOR = "[data-treemap-id]";
 export declare const SQUARIFY_RATIO = 1.66;
 export declare const PADDING_OUTER = 1;
 export declare const PADDING_INNER = 2;

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

@@ -1,15 +1,21 @@
-import { type RefObject } from 'react';
 import { DeltaType, type MetricRunInfoBaseline, type MetricRunInfo, type ReportMetricRow } from '@bundle-stats/utils';
-import { type Tree, type TileSizeDisplay, type TileGroupSizeDisplay } from './metrics-treemap.constants';
+import { type TreeNode, 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 getTreemapNodesIndex(node: Tree, index?: Map<string, TreeNode>): Map<string, TreeNode>;
 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>;
+interface UseTreemapTooltipStateOptions {
     gutter?: number;
     timeout?: number;
+    hideTimeout?: number;
 }
-export declare function useTooltipStateWithMouseFollow(options: UseTooltipStateWithMouseFollowOptions): import("ariakit/tooltip").TooltipState;
+export declare function useTreemapTooltipState(options?: UseTreemapTooltipStateOptions): {
+    tooltipState: import("ariakit/tooltip").TooltipState;
+    setPointer: (x: number, y: number) => void;
+    hoveredNodeId: string | null;
+    setHoveredNode: (nodeId: string | null) => void;
+    clearHoveredNode: () => void;
+};
 export {};

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

@@ -1,17 +1,26 @@
 import React, { type ReactNode } from 'react';
-export interface RunInfoProps {
+import type { MetricRunInfoDeltaType } from '@bundle-stats/utils';
+type RunInfoTitleProps = {
+    className?: string;
     title?: ReactNode;
     titleHoverCard?: ReactNode;
     titleTooltip?: ReactNode;
+};
+type RunInfoContentProps = {
+    className?: string;
+    loading?: boolean;
     current?: ReactNode;
+    enhance?: boolean;
     baseline?: string;
     delta?: string;
     deltaPercentage?: string;
-    deltaType?: string;
+    deltaType?: MetricRunInfoDeltaType;
+    showBaseline?: boolean;
+    showDelta?: boolean;
+};
+export type RunInfoProps = Pick<RunInfoTitleProps, 'title' | 'titleHoverCard' | 'titleTooltip'> & Pick<RunInfoContentProps, 'current' | 'baseline' | 'delta' | 'deltaPercentage' | 'deltaType' | 'showBaseline' | 'showDelta' | 'loading' | 'enhance'> & {
     as?: React.ElementType;
     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 & Omit<React.ComponentProps<"div">, "title">) => React.JSX.Element;
+};
+export declare const RunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaPercentage, deltaType, as: Component, size, showBaseline, showDelta, loading, enhance, children, ...restProps }: RunInfoProps & Omit<React.ComponentProps<"div">, "title">) => React.JSX.Element;
+export {};

package/types/constants.d.ts

@@ -16,6 +16,18 @@ export declare const METRICS_WEBPACK_GENERAL: string[];
 export declare const METRICS_WEBPACK_ASSETS: string[];
 export declare const METRICS_WEBPACK_MODULES: string[];
 export declare const METRICS_WEBPACK_PACKAGES: string[];
+export declare const METRICS_GROUP_ASSETS: {
+    title: string;
+    metrics: string[];
+};
+export declare const METRICS_GROUP_MODULES: {
+    title: string;
+    metrics: string[];
+};
+export declare const METRICS_GROUP_PACKAGES: {
+    title: string;
+    metrics: string[];
+};
 export declare const SORT: {
     readonly ASC: "asc";
     readonly DESC: "desc";

package/types/ui/dialog/dialog.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentProps, ReactNode } from 'react';
 import React from 'react';
-import { Dialog as AriakitDialog } from 'ariakit/dialog';
-export { useDialogState } from 'ariakit/dialog';
+import { Dialog as AriakitDialog, type DialogStateProps } from 'ariakit/dialog';
+export declare const useDialogState: (options?: DialogStateProps) => import("ariakit/ts/disclosure/disclosure-state").DisclosureState;
 type AriakitDialogProps = ComponentProps<typeof AriakitDialog>;
 type DialogProps = {
     title?: ReactNode;
@@ -11,3 +11,4 @@ type DialogProps = {
     state: AriakitDialogProps['state'];
 } & Omit<ComponentProps<'div'>, 'title'>;
 export declare const Dialog: (props: DialogProps) => React.JSX.Element;
+export {};

package/types/ui/dropdown/dropdown.d.ts

@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import { MenuItem, MenuStateProps } from 'ariakit/menu';
+export type DropdownGroupProps = ComponentProps<'div'>;
+export declare const DropdownGroup: (props: DropdownGroupProps) => React.JSX.Element;
 interface DropdownItemProps {
     isActive?: boolean;
 }
@@ -13,6 +15,7 @@ interface DropdownProps {
     placement?: MenuStateProps['placement'];
     gutter?: MenuStateProps['gutter'];
     shift?: MenuStateProps['shift'];
+    showChevron?: boolean;
 }
 export declare const Dropdown: (props: DropdownProps & React.ComponentProps<"div">) => React.JSX.Element;
 export {};

package/types/ui/filters/filters.d.ts

@@ -3,12 +3,13 @@ import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
 interface FilterBooleanProps extends React.ComponentProps<'input'> {
     label: string;
 }
+type ToggleFilters = (newFilters: Record<string, boolean>) => void;
 interface FilterGroupProps extends React.ComponentProps<'div'> {
     groupKey: string;
     data: FilterGroupFieldData;
     values: Record<string, boolean>;
     onCheckboxChange: FilterBooleanProps['onChange'];
-    toggleFilters: (newFilters: Record<string, boolean>) => void;
+    toggleFilters: ToggleFilters;
 }
 interface FiltersProps extends React.ComponentProps<'div'> {
     values: Record<string, boolean>;

package/vitest.config.ts

@@ -35,6 +35,10 @@ export default defineConfig({
   },
   test: {
     name: 'ui:storybook',
+    // Same `configDir` misassumption as `fix-storybook-vitest-root` above, but on the Vitest
+    // side: `storybookTest` resolves the story globs and `setupFiles` against a root it derives
+    // from `configDir`. `dir` is the first source it reads, so set it explicitly.
+    dir: PACKAGE_ROOT,
     setupFiles: ['./vitest.setup.ts'],
     retry: 2,
     browser: {

package/lib/components/metrics-table-options/metrics-table-options.module.css

@@ -1,15 +0,0 @@
-.group:empty {
-  display: none;
-}
-
-.group {
-  margin-bottom: calc(var(--space-xxxsmall) / 2);
-  border-bottom: 1px solid var(--color-outline);
-  padding-bottom: calc(var(--space-xxxsmall) / 2);
-}
-
-.group:last-child {
-  margin-bottom: 0;
-  padding-bottom: 0;
-  border-bottom: none;
-}

package/lib-esm/components/metrics-table-options/metrics-table-options.module.css

@@ -1,15 +0,0 @@
-.group:empty {
-  display: none;
-}
-
-.group {
-  margin-bottom: calc(var(--space-xxxsmall) / 2);
-  border-bottom: 1px solid var(--color-outline);
-  padding-bottom: calc(var(--space-xxxsmall) / 2);
-}
-
-.group:last-child {
-  margin-bottom: 0;
-  padding-bottom: 0;
-  border-bottom: none;
-}

package/src/components/delta/delta.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './delta.module.css';
-
-export const Delta = ({ className = '', displayValue, deltaType, inverted = false }) => {
-  const rootClassName = cx(css.root, className, inverted && css.inverted, css[deltaType]);
-  return <span className={rootClassName}>{displayValue}</span>;
-};
-
-Delta.defaultProps = {
-  className: '',
-  inverted: false,
-};
-
-Delta.propTypes = {
-  className: PropTypes.string,
-  displayValue: PropTypes.string.isRequired,
-  deltaType: PropTypes.string.isRequired,
-  inverted: PropTypes.bool,
-};

package/src/components/metrics-table-options/metrics-table-options.module.css

@@ -1,15 +0,0 @@
-.group:empty {
-  display: none;
-}
-
-.group {
-  margin-bottom: calc(var(--space-xxxsmall) / 2);
-  border-bottom: 1px solid var(--color-outline);
-  padding-bottom: calc(var(--space-xxxsmall) / 2);
-}
-
-.group:last-child {
-  margin-bottom: 0;
-  padding-bottom: 0;
-  border-bottom: none;
-}