@bundle-stats/ui 4.13.2 → 4.13.4-alpha.0

package/src/components/metrics-treemap/metrics-treemap.module.css

@@ -54,18 +54,18 @@
 }
 
 .tileGroupTitle {
-  transition: var(--ui-transition-out);
+  transition: var(--transition-out);
 }
 
 .tileGroupTitle:hover .tileGroupTitleText {
   text-decoration: underline;
-  transition: var(--ui-transition-in);
+  transition: var(--transition-in);
 }
 
 /** Tile group size variation */
 .tileGroup {
-  transition: var(--ui-transition-in);
-  transition-property: left, top, width, height;
+  transition: var(--transition-out);
+  transition-property: background-color, outline;
 }
 
 .tileGroup--minimal .tileGroupTitle,
@@ -81,13 +81,15 @@
 /** Tile group nested variation */
 .nested .tileGroup {
   background-color: rgba(27, 26, 33, 0.03);
-  outline: 1px solid rgba(255, 255, 255, 0.6);
+  outline: 1px solid rgba(255, 255, 255, 0.8);
 }
 
 .nested .tileGroup:has(> .tileGroupTitle:hover),
 .nested .tileGroup:has(> .tile:hover) {
   background-color: rgba(27, 26, 33, 0.06);
   outline: 1px solid rgba(255, 255, 255, 1);
+  transition: var(--transition-in);
+  transition-property: background-color, outline;
 }
 
 .nested .tileGroup--NEGATIVE {
@@ -137,7 +139,8 @@
   font-size: var(--size-small);
   line-height: var(--line-height-heading);
   text-align: left;
-  transition: var(--ui-transition-out);
+  transition: var(--transition-out);
+  transition-property: opacity, background-color;
 }
 
 .tile::before {
@@ -209,27 +212,22 @@
   margin-top: 0;
 }
 
-.tileSizeDefault {
-  transition: var(--ui-transition-in);
-  transition-property: left, top, width, height;
-}
-
 /** Tile diff variation */
 .tile {
   outline: 1px solid rgba(255, 255, 255, 1);
   color: var(--color-text);
-  transition: var(--ui-transition-out);
 }
 
 .tile::before {
   color: var(--color-highlight);
-  transition: var(--ui-transition-out);
+  transition: var(--transition-out);
   transition-property: opacity;
   opacity: 0.6;
 }
 
 .tile:hover::before {
-  transition: var(--ui-transition-in);
+  transition: var(--transition-in);
+  transition-property: opacity;
   opacity: 0.4;
 }
 

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

@@ -245,7 +245,7 @@ interface UseTooltipStateWithMouseFollowOptions {
  * Ariakit tooltip state hook with mouse follow functionality
  */
 export function useTooltipStateWithMouseFollow(options: UseTooltipStateWithMouseFollowOptions) {
-  const { parentRef, gutter = 16, timeout = 180 } = options;
+  const { parentRef, gutter = 16, timeout = 240 } = options;
 
   const pointer = useMouseHovered(parentRef, { whenHovered: true });
 

package/src/ui/file-name/file-name.module.css

@@ -6,4 +6,6 @@
   word-break: break-word;
   hyphens: auto;
   white-space: normal;
+  max-height: calc(2em * var(--line-height));
+  overflow: hidden;
 }

package/types/app/header/header.d.ts

@@ -3,5 +3,5 @@ import { JobsHeader } from '../../components/jobs-header';
 interface HeaderProps {
     jobs: React.ComponentProps<typeof JobsHeader>['jobs'];
 }
-export declare const Header: ({ className, jobs }: HeaderProps & React.ComponentProps<'header'>) => React.JSX.Element;
+export declare const Header: ({ className, jobs }: HeaderProps & React.ComponentProps<"header">) => React.JSX.Element;
 export {};

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

@@ -17,5 +17,5 @@ interface AssetInfoProps {
     customComponentLink?: React.ElementType;
     onClose: () => void;
 }
-export declare const AssetInfo: (props: AssetInfoProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const AssetInfo: (props: AssetInfoProps & React.ComponentProps<"div">) => React.JSX.Element;
 export {};

package/types/components/asset-not-predictive/asset-not-predictive.d.ts

@@ -4,5 +4,5 @@ interface AssetNotPredictiveProps {
     runs?: Array<Asset>;
     labels?: Array<string>;
 }
-export declare const AssetNotPredictive: (props: AssetNotPredictiveProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const AssetNotPredictive: (props: AssetNotPredictiveProps & React.ComponentProps<"div">) => React.JSX.Element;
 export {};

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

@@ -3,7 +3,7 @@ import { MetricRunInfo } from '@bundle-stats/utils';
 interface EntryInfoMetaLinkProps {
     as?: React.ElementType;
 }
-export declare const EntryInfoMetaLink: (props: EntryInfoMetaLinkProps & React.ComponentProps<'a'>) => React.JSX.Element;
+export declare const EntryInfoMetaLink: (props: EntryInfoMetaLinkProps & React.ComponentProps<"a">) => React.JSX.Element;
 interface EntryInfoMetaProps {
     label: string;
 }
@@ -23,7 +23,7 @@ interface EntryInfoProps {
     onClose: () => void;
 }
 export declare const EntryInfo: {
-    (props: EntryInfoProps & React.ComponentProps<'div'>): React.JSX.Element;
-    Meta: ({ className, label, children, }: EntryInfoMetaProps & React.ComponentProps<'p'>) => React.JSX.Element;
+    (props: EntryInfoProps & React.ComponentProps<"div">): React.JSX.Element;
+    Meta: ({ className, label, children, }: EntryInfoMetaProps & React.ComponentProps<"p">) => React.JSX.Element;
 };
 export {};

package/types/components/jobs-header/jobs-header.d.ts

@@ -11,9 +11,9 @@ interface ItemProps {
     };
     tag: string;
 }
-export declare const Item: (props: ItemProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const Item: (props: ItemProps & React.ComponentProps<"div">) => React.JSX.Element;
 interface JobsHeaderProps {
     jobs?: Array<ItemProps['job']> | null;
 }
-export declare const JobsHeader: (props: JobsHeaderProps & React.ComponentProps<'header'>) => React.JSX.Element;
+export declare const JobsHeader: (props: JobsHeaderProps & React.ComponentProps<"header">) => React.JSX.Element;
 export {};

package/types/components/metric/metric.d.ts

@@ -4,4 +4,4 @@ export interface MetricProps {
     unit?: string;
     inline?: boolean;
 }
-export declare const Metric: (props: MetricProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const Metric: (props: MetricProps & React.ComponentProps<"div">) => React.JSX.Element;

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

@@ -11,4 +11,4 @@ export interface MetricRunInfoProps {
     size?: RunInfoProps['size'];
     loading?: RunInfoProps['loading'];
 }
-export declare const MetricRunInfo: (props: MetricRunInfoProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const MetricRunInfo: (props: MetricRunInfoProps & React.ComponentProps<"div">) => React.JSX.Element;

package/types/components/metrics-display-selector/metrics-display-selector.d.ts

@@ -7,5 +7,5 @@ interface MetricsDisplaySelectorProps {
     groups?: Partial<Record<MetricsDisplayType, Array<string>>>;
     onSelect: (newValue: MetricsDisplayType, groupBy?: string) => void;
 }
-export declare const MetricsDisplaySelector: (props: MetricsDisplaySelectorProps & Omit<React.ComponentProps<typeof ControlGroup>, 'onSelect' | 'value'>) => React.JSX.Element;
+export declare const MetricsDisplaySelector: (props: MetricsDisplaySelectorProps & Omit<React.ComponentProps<typeof ControlGroup>, "onSelect" | "value">) => React.JSX.Element;
 export {};

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

@@ -11,5 +11,5 @@ interface MetricsTableHeaderProps {
     sort?: any;
     updateSort?: (val: any) => void;
 }
-export declare const MetricsTableHeader: (props: MetricsTableHeaderProps & React.ComponentProps<'thead'>) => React.JSX.Element;
+export declare const MetricsTableHeader: (props: MetricsTableHeaderProps & React.ComponentProps<"thead">) => React.JSX.Element;
 export {};

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

@@ -7,5 +7,5 @@ interface MetricsTreemapProps {
     onItemClick?: (entryId: string) => void;
     onGroupClick?: (entryId: string) => void;
 }
-export declare const MetricsTreemap: (props: MetricsTreemapProps & ComponentProps<'div'>) => React.JSX.Element;
+export declare const MetricsTreemap: (props: MetricsTreemapProps & ComponentProps<"div">) => React.JSX.Element;
 export {};

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

@@ -16,5 +16,5 @@ interface ModuleInfoProps {
     customComponentLink?: React.ElementType;
     onClose: () => void;
 }
-export declare const ModuleInfo: (props: ModuleInfoProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const ModuleInfo: (props: ModuleInfoProps & React.ComponentProps<"div">) => React.JSX.Element;
 export {};

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

@@ -11,5 +11,5 @@ interface PackageInfoProps {
     customComponentLink?: React.ElementType;
     onClose: () => void;
 }
-export declare const PackageInfo: (props: PackageInfoProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const PackageInfo: (props: PackageInfoProps & React.ComponentProps<"div">) => React.JSX.Element;
 export {};

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

@@ -14,4 +14,4 @@ export interface RunInfoProps {
     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, loading, enhance, ...restProps }: RunInfoProps & Omit<React.ComponentProps<"div">, "title">) => React.JSX.Element;

package/types/components/sort-button/sort-button.d.ts

@@ -7,5 +7,5 @@ interface SortButtonProps {
     sort?: SortAction;
     updateSort?: (params: SortAction) => void;
 }
-export declare const SortButton: (props: SortButtonProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const SortButton: (props: SortButtonProps & React.ComponentProps<"div">) => React.JSX.Element;
 export {};

package/types/components/summary/summary.d.ts

@@ -20,5 +20,5 @@ interface SummaryProps {
     showSummaryItemBaseline?: SummaryItemProps['showBaseline'];
     summaryItemLink?: SummaryItemProps['customLink'];
 }
-export declare const Summary: ({ className, data, loading, showSummaryItemDelta, showSummaryItemBaseline, summaryItemLink, }: SummaryProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const Summary: ({ className, data, loading, showSummaryItemDelta, showSummaryItemBaseline, summaryItemLink, }: SummaryProps & React.ComponentProps<"div">) => React.JSX.Element;
 export {};

package/types/hooks/rows-sort.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { SortAction } from '../types';
 interface UseRowsSortParams {
     rows: Array<unknown>;
@@ -6,7 +5,7 @@ interface UseRowsSortParams {
     initialDirection?: SortAction['direction'];
     getCustomSort: (item: any) => Array<string | number | boolean>;
 }
-export declare const getSortFn: (fieldPath: string, getCustomSort: UseRowsSortParams['getCustomSort']) => (item: unknown) => any;
+export declare const getSortFn: (fieldPath: string, getCustomSort: UseRowsSortParams["getCustomSort"]) => (item: unknown) => any;
 export declare const useRowsSort: ({ rows, initialField, initialDirection, getCustomSort, }: UseRowsSortParams) => {
     sort: {
         field: string;

package/types/layout/box/box.d.ts

@@ -9,5 +9,5 @@ interface BoxProps<T extends React.ElementType> {
     outline?: boolean;
     outlineHover?: boolean;
 }
-export declare const Box: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "div">(props: BoxProps<T> & Omit<React.ComponentProps<T>, keyof BoxProps<T>>) => React.JSX.Element;
+export declare const Box: <T extends React.ElementType = "div">(props: BoxProps<T> & Omit<React.ComponentProps<T>, keyof BoxProps<T>>) => React.JSX.Element;
 export {};

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

@@ -7,5 +7,5 @@ interface FlexStackProps<T extends React.ElementType> {
     inline?: boolean;
     alignItems?: 'top' | 'center' | 'bottom';
 }
-export declare const FlexStack: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "div">(props: FlexStackProps<T> & Omit<React.ComponentProps<T>, keyof FlexStackProps<T>>) => React.JSX.Element;
+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/layout/stack/stack.d.ts

@@ -4,4 +4,4 @@ export type StackProps = {
     as?: React.ElementType;
     space?: (typeof SPACES)[number];
 };
-export declare const Stack: (props: StackProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const Stack: (props: StackProps & React.ComponentProps<"div">) => React.JSX.Element;

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

@@ -11,5 +11,5 @@ interface DropdownProps {
     glyph?: string;
     disabled?: boolean;
 }
-export declare const Dropdown: (props: DropdownProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const Dropdown: (props: DropdownProps & React.ComponentProps<"div">) => React.JSX.Element;
 export {};

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

@@ -3,5 +3,5 @@ export declare const LABELS: {
     NONE: string;
     ALL: string;
 };
-export declare const getGroupFiltersLabelSuffix: (filters: FilterGroupFieldData['children']) => string;
+export declare const getGroupFiltersLabelSuffix: (filters: FilterGroupFieldData["children"]) => string;
 export declare const getInitialValues: (key: string, filtersData: FilterFieldsData | FilterFieldData | FilterGroupFieldData | string) => Record<string, boolean>;

package/types/ui/icon/icon.d.ts

@@ -34,7 +34,7 @@ interface IconProps {
     as?: React.ElementType;
 }
 export declare const Icon: {
-    (props: IconProps & React.ComponentProps<'span'>): React.JSX.Element;
+    (props: IconProps & React.ComponentProps<"span">): React.JSX.Element;
     ICONS: {
         readonly ARROW: "arrow";
         readonly ARROW_RIGHT_CIRCLE: "arrow-right-circle";

package/types/ui/input/input.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 interface InputProps {
     size?: 'small' | 'medium' | 'large';
 }
-export declare const Input: (props: InputProps & Omit<React.ComponentProps<'input'>, 'size'>) => React.JSX.Element;
+export declare const Input: (props: InputProps & Omit<React.ComponentProps<"input">, "size">) => React.JSX.Element;
 export {};

package/types/ui/input-search/input-search.d.ts

@@ -5,5 +5,5 @@ interface InputSearchProps {
     onChange?: (newValue: string) => void;
     debounceWait?: number;
 }
-export declare const InputSearch: (props: InputSearchProps & Omit<React.ComponentProps<'div'>, 'onChange'>) => React.JSX.Element;
+export declare const InputSearch: (props: InputSearchProps & Omit<React.ComponentProps<"div">, "onChange">) => React.JSX.Element;
 export {};

package/types/ui/table/table.d.ts

@@ -5,7 +5,7 @@ interface TableProps {
     outline?: boolean;
 }
 export declare const Table: {
-    (props: TableProps & React.ComponentProps<'table'>): React.JSX.Element;
+    (props: TableProps & React.ComponentProps<"table">): React.JSX.Element;
     THead: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
     TBody: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
     Tr: React.ElementType<any, keyof React.JSX.IntrinsicElements>;

package/types/ui/tag/tag.d.ts

@@ -6,7 +6,7 @@ interface TagProps {
     size?: (typeof SIZE)[keyof typeof SIZE];
 }
 export declare const Tag: {
-    (props: TagProps & React.ComponentProps<'span'>): React.JSX.Element;
+    (props: TagProps & React.ComponentProps<"span">): React.JSX.Element;
     KINDS: {
         readonly DEFAULT: "default";
         readonly SUCCESS: "success";

package/types/ui/tooltip/tooltip.d.ts

@@ -7,5 +7,5 @@ interface TooltipProps<T extends React.ElementType> {
     containerRef?: React.RefObject<HTMLElement>;
     darkMode?: boolean;
 }
-export declare const Tooltip: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "span">(props: TooltipProps<T> & Omit<React.ComponentProps<T>, keyof TooltipProps<T>>) => React.JSX.Element;
+export declare const Tooltip: <T extends React.ElementType = "span">(props: TooltipProps<T> & Omit<React.ComponentProps<T>, keyof TooltipProps<T>>) => React.JSX.Element;
 export {};