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

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

@@ -11,7 +11,7 @@
 }
 
 .tooltip {
-  z-index: var(--layer-high);
+  z-index: var(--layer-overlay);
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   border-radius: var(--radius-small);
   background: var(--color-text);

package/src/ui/tooltip/tooltip.tsx

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

package/src/utils/index.ts

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

package/src/utils/portal.ts

@@ -0,0 +1,9 @@
+/**
+ * Ariakit appends nested portals (tooltips, hovercards, menus) to the parent portal node,
+ * create the portal node with a specific class to adjust the z-index of the nested overlays
+ */
+export const getCreatePortalElement = (className: string) => (element: HTMLElement) => {
+  const portalElement = element.ownerDocument.createElement('div');
+  portalElement.className = className;
+  return portalElement;
+};

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

@@ -6,5 +6,6 @@ export type MetricRunInfoProps = {
     baseline?: number;
     showMetricDescription?: boolean;
     titleWrapper?: ElementType;
+    showDeltaAbsoluteValue?: boolean;
 } & Pick<RunInfoProps, 'showDelta' | 'showBaseline' | 'size' | 'loading'>;
 export declare const MetricRunInfo: (props: MetricRunInfoProps & React.ComponentProps<"div">) => React.JSX.Element;

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

@@ -13,9 +13,10 @@ interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'ti
     sort?: MetricsTableHeaderProps['sort'];
     updateSort?: MetricsTableHeaderProps['updateSort'];
     renderRowHeader?: (item: ReportMetricRow) => React.ReactNode;
+    onRowClick?: (item: ReportMetricRow) => void;
     emptyMessage?: React.ReactNode;
     showAllItems: boolean;
     setShowAllItems: (value: boolean) => void;
 }
-export declare const MetricsTable: ({ className, runs, items, showHeaderSum, title, sort, updateSort, renderRowHeader, emptyMessage, showAllItems, setShowAllItems, ...restProps }: MetricsTableProps) => React.JSX.Element;
+export declare const MetricsTable: ({ className, runs, items, showHeaderSum, title, sort, updateSort, renderRowHeader, onRowClick, emptyMessage, showAllItems, setShowAllItems, ...restProps }: MetricsTableProps) => React.JSX.Element;
 export {};

package/types/components/metrics-table-row-count/index.d.ts

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FlexStackProps } from '../../layout/flex-stack';
+export type MetricsTableRowCountProps = {
+    count: number;
+    total: number;
+} & FlexStackProps<'span'>;
+export declare const MetricsTableRowCount: (props: MetricsTableRowCountProps) => 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,26 @@
-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 TreeTotal, 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 getGroupRunInfo(total: TreeTotal): {
+    runInfo: MetricRunInfo;
+    baselineDisplayValue: string;
+    deltaType: DeltaType.NEGATIVE | DeltaType.NO_CHANGE | 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/metrics-treemap/tile/index.d.ts

@@ -0,0 +1 @@
+export * from './tile';

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type TreeLeaf } from '../metrics-treemap.constants';
+export interface TileProps {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    data: TreeLeaf;
+    onClick?: (id: string) => void;
+}
+export declare const Tile: (props: TileProps) => React.JSX.Element;

package/types/components/metrics-treemap/tile-group/index.d.ts

@@ -0,0 +1 @@
+export * from './tile-group';

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

@@ -0,0 +1,20 @@
+import React, { type ComponentProps } from 'react';
+import type { HierarchyRectangularNode } from 'd3';
+import type { TreeNode, Tree } from '../metrics-treemap.constants';
+import { type TileProps } from '../tile';
+export interface TileGroupProps extends ComponentProps<'div'> {
+    title?: string;
+    total?: Tree['total'];
+    id: string;
+    childNodes: HierarchyRectangularNode<TreeNode>['children'];
+    nested?: boolean;
+    onItemClick: TileProps['onClick'];
+    onGroupClick?: (groupId: string) => void;
+    width?: number;
+    height?: number;
+    left: number;
+    top: number;
+    absoluteLeft: number;
+    absoluteTop: number;
+}
+export declare const TileGroup: (props: TileGroupProps) => React.JSX.Element;

package/types/components/metrics-treemap/tile-group-title/index.d.ts

@@ -0,0 +1 @@
+export * from './tile-group-title';

package/types/components/metrics-treemap/tile-group-title/tile-group-title.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { MetricRunInfo } from '@bundle-stats/utils';
+interface TileGroupTitleContentProps {
+    title?: string;
+    runInfo?: MetricRunInfo;
+}
+export type TileGroupTitleProps = TileGroupTitleContentProps & {
+    id: string;
+    fill?: boolean;
+};
+export declare const TileGroupTitle: (props: TileGroupTitleProps) => React.JSX.Element;
+export {};

package/types/layout/flex-stack/flex-stack.d.ts

@@ -1,11 +1,15 @@
 import React from 'react';
 import { SPACES } from '../../tokens';
 type SpaceValue = (typeof SPACES)[number];
-interface FlexStackProps<T extends React.ElementType> {
+export type FlexStackProps<T extends React.ElementType> = {
     as?: T;
+    gap?: SpaceValue;
     space?: SpaceValue;
     inline?: boolean;
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
     alignItems?: 'top' | 'center' | 'bottom';
-}
+    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+};
 export declare const FlexStack: <T extends React.ElementType = "div">(props: FlexStackProps<T> & Omit<React.ComponentProps<T>, keyof FlexStackProps<T>>) => React.JSX.Element;
 export {};

package/types/ui/button/button.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Icon as BaseIcon } from '../icon';
 export declare const BUTTON_SIZE: {
+    readonly XSMALL: "xsmall";
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
     readonly LARGE: "large";

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;
 }

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/types/utils/index.d.ts

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

package/types/utils/portal.d.ts

@@ -0,0 +1 @@
+export declare const getCreatePortalElement: (className: string) => (element: HTMLElement) => HTMLDivElement;

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/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;
-}