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

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