@bundle-stats/ui 4.18.3 → 4.19.0-beta.2

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

@@ -1,5 +1,15 @@
-:not(.group:empty) ~ .group {
-  margin-top: calc(var(--space-xxxsmall) / 2);
-  padding-top: calc(var(--space-xxxsmall) / 2);
-  border-top: 1px solid var(--color-outline);
+.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/run-info/run-info.module.css

@@ -31,7 +31,7 @@
 }
 
 .delta {
-  font-weight: normal;
+  font-weight: bold;
 }
 
 .deltaValue + .deltaValue::before {

package/src/constants.ts

@@ -46,6 +46,15 @@ export enum MetricsDisplayType {
   TREEMAP = 'treemap',
 }
 
+export const MetricsDisplayTypeDefault = MetricsDisplayType.TABLE;
+
+export enum MetricsDisplayGroupBy {
+  FOLDER = 'folder',
+  NONE = 'no-group',
+}
+
+export const MetricsDisplayGroupByDefault = MetricsDisplayGroupBy.FOLDER;
+
 export enum ModuleSizeMetric {
   SIZE = 'value',
   DUPLICATE_SIZE = 'duplicateSize',

package/src/hooks/metrics-display-type.ts

@@ -2,10 +2,10 @@ import { useCallback, useEffect, useMemo } from 'react';
 import { useLocalStorage } from 'react-use';
 import { StringParam, useQueryParams } from 'use-query-params';
 
-import { MetricsDisplayType } from '../constants';
+import { MetricsDisplayType, MetricsDisplayGroupBy } from '../constants';
 
 const DEFAULT_VALUE = MetricsDisplayType.TABLE;
-const DEFAULT_GROUP_BY = '';
+const GROUP_BY_DEFAULT = MetricsDisplayGroupBy.FOLDER;
 
 // Display type query param name
 const QUERY_PARAM_VALUE = 'dt';
@@ -36,7 +36,7 @@ export const useMetricsDisplayType = (
     'storage',
     {
       value: DEFAULT_VALUE,
-      groupBy: DEFAULT_GROUP_BY,
+      groupBy: GROUP_BY_DEFAULT,
     },
   );
 
@@ -64,11 +64,14 @@ export const useMetricsDisplayType = (
     const resolvedValue = queryParamGroupBy ?? localStorage?.groupBy;
 
     if (!resolvedValue) {
-      return DEFAULT_GROUP_BY;
+      return GROUP_BY_DEFAULT;
     }
 
-    if (!groups?.[value]?.includes(resolvedValue as MetricsDisplayType)) {
-      return DEFAULT_GROUP_BY;
+    if (
+      resolvedValue !== MetricsDisplayGroupBy.NONE &&
+      !groups?.[value]?.includes(resolvedValue as MetricsDisplayType)
+    ) {
+      return GROUP_BY_DEFAULT;
     }
 
     return resolvedValue;
@@ -93,7 +96,7 @@ export const useMetricsDisplayType = (
   }, [value, groupBy, setLocalStorage, localStorage]);
 
   const setDisplayType = useCallback(
-    (newValue: MetricsDisplayType, newGroupBy: string = DEFAULT_GROUP_BY) => {
+    (newValue: MetricsDisplayType, newGroupBy: string = GROUP_BY_DEFAULT) => {
       setQueryParams({
         [QUERY_PARAM_VALUE]: newValue,
         [QUERY_PARAM_GROUP_BY]: newGroupBy,

package/src/ui/dropdown/dropdown.module.css

@@ -11,7 +11,7 @@
   left: 0;
   top: 100%;
   border-radius: var(--radius-medium);
-  box-shadow: var(--shadow-layer-high);
+  box-shadow: var(--shadow-layer);
   background: var(--color-background);
   min-width: 12em;
   z-index: var(--layer-high);

package/src/ui/dropdown/dropdown.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
+import { Menu, MenuButton, MenuItem, MenuStateProps, useMenuState } from 'ariakit/menu';
 
 import { Button, BUTTON_SIZE } from '../button';
 import css from './dropdown.module.css';
@@ -23,6 +23,9 @@ interface DropdownProps {
   ariaLabel?: string;
   glyph?: string;
   disabled?: boolean;
+  placement?: MenuStateProps['placement'];
+  gutter?: MenuStateProps['gutter'];
+  shift?: MenuStateProps['shift'];
 }
 
 export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) => {
@@ -33,11 +36,14 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
     ariaLabel = '',
     glyph = '',
     disabled = false,
+    placement,
+    gutter = 4,
+    shift,
     children,
   } = props;
 
   const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
-  const menuState = useMenuState();
+  const menuState = useMenuState({ placement, gutter, shift });
 
   return (
     <>

package/types/constants.d.ts

@@ -1,3 +1,4 @@
+import { SECTIONS } from '@bundle-stats/utils';
 export declare const URLS: {
     OVERVIEW: string;
     ASSETS: string;
@@ -5,7 +6,10 @@ export declare const URLS: {
     PACKAGES: string;
 };
 export declare const SECTION_URLS: {
-    [x: string]: string;
+    [SECTIONS.TOTALS]: string;
+    [SECTIONS.ASSETS]: string;
+    [SECTIONS.MODULES]: string;
+    [SECTIONS.PACKAGES]: string;
 };
 export declare const ASSETS_SIZES_FILE_TYPE_MAP: {};
 export declare const METRICS_WEBPACK_GENERAL: string[];
@@ -20,6 +24,12 @@ export declare enum MetricsDisplayType {
     TABLE = "table",
     TREEMAP = "treemap"
 }
+export declare const MetricsDisplayTypeDefault = MetricsDisplayType.TABLE;
+export declare enum MetricsDisplayGroupBy {
+    FOLDER = "folder",
+    NONE = "no-group"
+}
+export declare const MetricsDisplayGroupByDefault = MetricsDisplayGroupBy.FOLDER;
 export declare enum ModuleSizeMetric {
     SIZE = "value",
     DUPLICATE_SIZE = "duplicateSize",

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MenuItem } from 'ariakit/menu';
+import { MenuItem, MenuStateProps } from 'ariakit/menu';
 interface DropdownItemProps {
     isActive?: boolean;
 }
@@ -10,6 +10,9 @@ interface DropdownProps {
     ariaLabel?: string;
     glyph?: string;
     disabled?: boolean;
+    placement?: MenuStateProps['placement'];
+    gutter?: MenuStateProps['gutter'];
+    shift?: MenuStateProps['shift'];
 }
 export declare const Dropdown: (props: DropdownProps & React.ComponentProps<"div">) => React.JSX.Element;
 export {};