@bundle-stats/ui 4.13.0-beta.9 → 4.13.0-rc.0

package/src/ui/button/button.stories.tsx

@@ -62,7 +62,14 @@ export const All = () => (
         <h3>With icon</h3>
         <Items>
           {Object.values(BUTTON_KIND).map((kind) => (
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} kind={kind} key={kind}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+        <Items>
+          {Object.values(BUTTON_KIND).map((kind) => (
+            <Button rightGlyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
               Action {kind}
             </Button>
           ))}
@@ -106,12 +113,12 @@ export const All = () => (
         <h3>With icon</h3>
         {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size}>
               Action default
             </Button>
             {Object.values(BUTTON_KIND).map((kind) => (
               <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                 outline
                 kind={kind}
                 size={size}
@@ -125,10 +132,10 @@ export const All = () => (
         <h3>Only icon</h3>
         {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size} />
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size} />
             {Object.values(BUTTON_KIND).map((kind) => (
               <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                 outline
                 kind={kind}
                 size={size}
@@ -179,12 +186,12 @@ export const All = () => (
         <h3>With icon</h3>
         {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size}>
               Action default
             </Button>
             {Object.values(BUTTON_KIND).map((kind) => (
               <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                 solid
                 kind={kind}
                 size={size}
@@ -198,10 +205,10 @@ export const All = () => (
         <h3>Only icon</h3>
         {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size} />
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size} />
             {Object.values(BUTTON_KIND).map((kind) => (
               <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                 solid
                 kind={kind}
                 size={size}

package/src/ui/button/button.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import cx from 'classnames';
 import { Button as ButtonBaseComponent } from 'ariakit/button';
 
@@ -50,7 +51,7 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
     radius = '',
     padding = '',
     as: Component = ButtonBaseComponent,
-    children,
+    children = null,
     Icon = BaseIcon,
     glyph,
     rightGlyph,
@@ -61,10 +62,12 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
   const resolvedPadding = padding || ((outline || solid) && size);
   const resolvedRadius = radius || ((outline || solid) && size);
 
+  const resolvedSize = Object.values(BUTTON_SIZE).includes(size) ? size : BUTTON_SIZE.MEDIUM;
+
   const rootClassName = cx(
     css.root,
-    css[size],
     kind && css[kind],
+    css[resolvedSize],
 
     outline && css.outline,
     outline && css[`outline--${kind}`],
@@ -72,22 +75,20 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
     solid && css.solid,
     solid && css[`solid--${kind}`],
 
-    resolvedPadding && css[`padding--${resolvedPadding}`],
-    resolvedPadding && outline && css[`outline--padding--${resolvedPadding}`],
+    resolvedPadding && css.padding,
     resolvedRadius && css[`radius--${resolvedRadius}`],
 
     active && css.active,
     active && outline && css[`active-outline-${kind}`],
 
-    css[size],
     className,
   );
 
   return (
     <Component {...restProps} className={rootClassName}>
-      {glyph && <Icon glyph={glyph} size={size} className={css.glyph} />}
+      {glyph && <Icon glyph={glyph} className={css.glyph} />}
       {children && <span className={css.content}>{children}</span>}
-      {rightGlyph && <Icon glyph={glyph} size={size} className={css.glyph} />}
+      {rightGlyph && <Icon glyph={rightGlyph} className={css.glyph} />}
     </Component>
   );
 };

package/src/ui/dropdown/dropdown.tsx

@@ -18,7 +18,6 @@ export const DropdownItem = (props: DropdownItemProps & React.ComponentProps<typ
 };
 
 interface DropdownProps {
-  buttonClassName?: string;
   dropdownClassName?: string;
   label?: React.ReactNode;
   ariaLabel?: string;
@@ -28,7 +27,7 @@ interface DropdownProps {
 
 export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) => {
   const {
-    buttonClassName = '',
+    className = '',
     dropdownClassName = '',
     label = null,
     ariaLabel = '',
@@ -50,7 +49,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
         disabled={disabled}
         state={menuState}
         tabIndex={null}
-        className={cx(css.button, buttonClassName)}
+        className={cx(css.button, className)}
       >
         {label}
       </MenuButton>

package/src/ui/filters/filters.module.css

@@ -13,6 +13,7 @@
 }
 
 .filterControl {
+  margin: 0;
   flex: 0 0 auto;
   height: 1em;
 }
@@ -41,12 +42,14 @@
   font-size: var(--size-small);
   line-height: var(--space-small);
   color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
 }
 
 .filterSingle:hover,
 .filterSingle:active,
 .filterSingle:focus {
   border-color: var(--color-outline-dark);
+  transition: var(--transition-in);
 }
 
 /** Filter group */
@@ -57,7 +60,10 @@
 
 .filterGroupItem {
   position: relative;
-  padding-right: 10em;
+}
+
+.filterGroupItemFilter {
+  padding-right: 24px; /* space for only button */
 }
 
 .filterGroupOnlyButton {
@@ -76,6 +82,7 @@
   content: ' ';
   display: block;
   position: absolute;
+  pointer-events: none;
   top: 0;
   right: 100%;
   bottom: 0;

package/src/ui/filters/filters.tsx

@@ -50,11 +50,10 @@ interface FilterGroupProps extends React.ComponentProps<'div'> {
 
 const FilterGroup = (props: FilterGroupProps) => {
   const { className = '', groupKey, data, values, onCheckboxChange, toggleFilters } = props;
+  const { label: groupLabel, children: groupItems } = data;
 
   const [search, setSearch] = useState('');
 
-  const { label: groupLabel, children: groupItems } = data;
-
   const areAllGroupItemsChecked = groupItems
     .map(({ key: itemKey }) => values?.[`${groupKey}.${itemKey}`])
     .reduce((agg, val) => agg && val, true);
@@ -98,7 +97,7 @@ const FilterGroup = (props: FilterGroupProps) => {
 
   return (
     <Dropdown
-      buttonClassName={className}
+      className={className}
       label={dropdownLabel}
       ariaLabel={`${groupLabel}: ${filterSuffix}`}
     >

package/src/ui/hover-card/hover-card.tsx

@@ -31,7 +31,7 @@ export const HoverCard = (props: HoverCardProps) => {
     children,
   } = props;
 
-  const state = useHovercardState({ gutter: 8, timeout: 300 });
+  const state = useHovercardState({ gutter: 8, timeout: 300, placement: 'top' });
   const hovercardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href

package/src/ui/icon/icon.tsx

@@ -5,10 +5,11 @@ import css from './icon.module.css';
 
 const ICONS = {
   ARROW: 'arrow',
-  ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
+  ARROW_RIGHT_CIRCLE: 'arrow-right-circle',
   CANCEL: 'close',
   CHEVRON_DOWN: 'chevron-down',
   CHEVRON_UP: 'chevron-up',
+  CHECK: 'check',
   CLOSE: 'close',
   CLOCK: 'clock',
   COMMIT: 'commit',

package/src/ui/input-search/input-search.tsx

@@ -70,6 +70,7 @@ export const InputSearch = (
       />
       {value && (
         <Button
+          size="small"
           radius="circle"
           glyph={Icon.ICONS.CANCEL}
           type="button"

package/src/ui/loader/loader.jsx

@@ -4,7 +4,7 @@ import cx from 'classnames';
 
 import css from './loader.module.css';
 
-export const Loader = ({ className, size, ...restProps }) => (
+export const Loader = ({ className = '', size = 'medium', ...restProps }) => (
   <span className={cx(css.root, className, css[size])} {...restProps} />
 );
 

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

@@ -89,6 +89,36 @@
   border-width: 1px;
 }
 
+/** cascade border radius */
+.root thead,
+.root thead tr:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.root thead tr:first-child th:first-child {
+  border-top-left-radius: inherit;
+}
+
+.root thead tr:first-child th:last-child {
+  border-top-right-radius: inherit;
+}
+
+.root tbody:last-child,
+.root tbody:last-child tr:last-child {
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+
+.root tbody:last-child tr:last-child th:first-child,
+.root tbody:last-child tr:last-child td:first-child {
+  border-bottom-left-radius: inherit;
+}
+
+.root tbody:last-child tr:last-child td:last-child {
+  border-bottom-right-radius: inherit;
+}
+
 /* compact variation */
 .compact td,
 .compact th {

package/src/ui/tag/tag.module.css

@@ -42,7 +42,7 @@ a.root:active {
 /** Size variation */
 /** default: medium */
 .root {
-  border-radius: var(--radius-medium);
+  border-radius: var(--radius-small);
   padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
   min-width: var(--space-small);
   height: var(--space-small);
@@ -51,7 +51,7 @@ a.root:active {
 }
 
 .small {
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-xsmall);
   padding: calc(var(--space-xxxsmall) / 2);
   height: var(--space-xsmall);
   min-width: var(--space-xsmall);
@@ -60,7 +60,7 @@ a.root:active {
 }
 
 .large {
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-medium);
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   min-width: var(--space-medium);
   height: var(--space-medium);

package/src/ui/toolbar/toolbar.module.css

@@ -1,6 +1,4 @@
-.root {
-  padding: var(--space-small);
-}
+.root { }
 
 .content {}
 

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

@@ -1,4 +1,4 @@
-export declare const SEARCH = "Search by module name";
+export declare const SEARCH = "Search by module path";
 export declare const CHANGED = "Changed";
 export declare const DUPLICATE = "Duplicate";
 export declare const CHUNK = "Chunk";

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

@@ -1,8 +1,8 @@
 export function Delta({ className, displayValue, deltaType, inverted }: {
-    className: any;
+    className?: string | undefined;
     displayValue: any;
     deltaType: any;
-    inverted: any;
+    inverted?: boolean | undefined;
 }): React.JSX.Element;
 export namespace Delta {
     namespace defaultProps {

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

@@ -3,7 +3,9 @@ import { MetricsDisplayType } from '../../constants';
 import { ControlGroup } from '../../ui/control-group';
 interface MetricsDisplaySelectorProps {
     value: MetricsDisplayType;
-    onSelect: (newValue: MetricsDisplayType) => void;
+    groupBy?: string;
+    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 {};

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

@@ -1 +1,2 @@
 export * from './metrics-treemap';
+export { getTreemapNodes, getTreemapNodesGroupedByPath } from './metrics-treemap.utils';

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

@@ -0,0 +1,20 @@
+import type { ReportMetricRow } from '@bundle-stats/utils';
+export interface TreeTotal {
+    current: number;
+    baseline: number;
+}
+export interface TreeLeaf {
+    id: string;
+    label: string;
+    value: number;
+    item: ReportMetricRow;
+}
+export interface Tree {
+    id: string;
+    label: string;
+    value: number;
+    children: TreeNodeChildren;
+    total?: TreeTotal;
+}
+export type TreeNode = Tree | TreeLeaf;
+export type TreeNodeChildren = Array<TreeNode>;

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

@@ -1,9 +1,11 @@
-import React from 'react';
-import type { ReportMetricRow } from '@bundle-stats/utils';
+import React, { type ComponentProps, type ReactNode } from 'react';
+import type { Tree } from './metrics-treemap.constants';
 interface MetricsTreemapProps {
-    items: Array<ReportMetricRow>;
-    emptyMessage?: React.ReactNode;
+    treeNodes: Tree;
+    emptyMessage?: ReactNode;
+    nested?: boolean;
     onItemClick?: (entryId: string) => void;
+    onGroupClick?: (entryId: string) => void;
 }
-export declare const MetricsTreemap: (props: MetricsTreemapProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const MetricsTreemap: (props: MetricsTreemapProps & ComponentProps<'div'>) => React.JSX.Element;
 export {};

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

@@ -0,0 +1,2 @@
+export declare const TILE_GROUP_LABEL = "View children entries";
+export declare const TILE_LABEL = "View entry info";

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

@@ -0,0 +1,5 @@
+import { DeltaType, type MetricRunInfoBaseline, type MetricRunInfo, type ReportMetricRow } from '@bundle-stats/utils';
+import type { Tree } 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;

package/types/hooks/metrics-display-type.d.ts

@@ -1,4 +1,10 @@
 import { MetricsDisplayType } from '../constants';
-type UseMetricsDisplayType = [MetricsDisplayType, (value: MetricsDisplayType) => void];
-export declare const useMetricsDisplayType: () => UseMetricsDisplayType;
+type UseMetricsDisplayType = [
+    {
+        value: MetricsDisplayType;
+        groupBy?: string;
+    },
+    (newDisplayType: MetricsDisplayType, newGroupBy?: string) => void
+];
+export declare const useMetricsDisplayType: (groups?: Partial<Record<MetricsDisplayType, Array<string>>>) => UseMetricsDisplayType;
 export {};

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

@@ -5,7 +5,6 @@ interface DropdownItemProps {
 }
 export declare const DropdownItem: (props: DropdownItemProps & React.ComponentProps<typeof MenuItem>) => React.JSX.Element;
 interface DropdownProps {
-    buttonClassName?: string;
     dropdownClassName?: string;
     label?: React.ReactNode;
     ariaLabel?: string;

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

@@ -1,10 +1,11 @@
 import React from 'react';
 declare const ICONS: {
     readonly ARROW: "arrow";
-    readonly ARROW_RIGHT_CIRLCE: "arrow-right-circle";
+    readonly ARROW_RIGHT_CIRCLE: "arrow-right-circle";
     readonly CANCEL: "close";
     readonly CHEVRON_DOWN: "chevron-down";
     readonly CHEVRON_UP: "chevron-up";
+    readonly CHECK: "check";
     readonly CLOSE: "close";
     readonly CLOCK: "clock";
     readonly COMMIT: "commit";
@@ -36,10 +37,11 @@ export declare const Icon: {
     (props: IconProps & React.ComponentProps<'span'>): React.JSX.Element;
     ICONS: {
         readonly ARROW: "arrow";
-        readonly ARROW_RIGHT_CIRLCE: "arrow-right-circle";
+        readonly ARROW_RIGHT_CIRCLE: "arrow-right-circle";
         readonly CANCEL: "close";
         readonly CHEVRON_DOWN: "chevron-down";
         readonly CHEVRON_UP: "chevron-up";
+        readonly CHECK: "check";
         readonly CLOSE: "close";
         readonly CLOCK: "clock";
         readonly COMMIT: "commit";

package/types/ui/loader/loader.d.ts

@@ -1,7 +1,7 @@
 export function Loader({ className, size, ...restProps }: {
     [x: string]: any;
-    className: any;
-    size: any;
+    className?: string | undefined;
+    size?: string | undefined;
 }): React.JSX.Element;
 export namespace Loader {
     let SIZE_SMALL: string;

package/lib/components/bundle-assets-totals/bundle-assets-totals.module.css

@@ -1,7 +0,0 @@
-.title {
-  color: var(--color-text-light);
-}
-
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}

package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.module.css

@@ -1,7 +0,0 @@
-.title {
-  color: var(--color-text-light);
-}
-
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}

package/src/components/bundle-assets-totals/bundle-assets-totals.module.css

@@ -1,7 +0,0 @@
-.title {
-  color: var(--color-text-light);
-}
-
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}