@bundle-stats/ui 4.18.0-beta.2 → 4.18.0-beta.4

package/lib-esm/components/metrics-display-selector/metrics-display-selector.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import cx from 'classnames';
-import { MetricsDisplayType } from '../../constants';
+import { MetricsDisplayType, MetricsDisplayGroupByDefault, MetricsDisplayGroupBy, } from '../../constants';
 import { Button } from '../../ui/button';
 import { ControlGroup } from '../../ui/control-group';
 import { Dropdown, DropdownItem } from '../../ui/dropdown';
 import { Icon } from '../../ui/icon';
+import { FlexStack } from '../../layout/flex-stack';
 import css from './metrics-display-selector.module.css';
-import { FlexStack } from '../../layout';
-const DEFAULT_GROUP_BY = '';
 const METRICS_DISPLAY_MAP = {
     [MetricsDisplayType.TABLE]: {
         glyph: Icon.ICONS.TABLE,
@@ -20,32 +19,34 @@ const METRICS_DISPLAY_MAP = {
 };
 const displayTypes = Object.values(MetricsDisplayType);
 export const MetricsDisplaySelector = (props) => {
-    const { value, groupBy = DEFAULT_GROUP_BY, groups = {}, onSelect, ...restProps } = props;
+    const { value, groupBy = MetricsDisplayGroupByDefault, groups = {}, onSelect, ...restProps } = props;
     return (React.createElement(ControlGroup, { ...restProps }, displayTypes.map((displayType, index) => {
         const displayGroups = groups === null || groups === void 0 ? void 0 : groups[displayType];
         const displayProps = METRICS_DISPLAY_MAP[displayType];
         const isLast = displayTypes.length - 1 === index;
         const isActive = displayType === value;
         if (!displayGroups || displayGroups.length === 0) {
-            return (React.createElement(Button, { outline: true, active: isActive, size: "small", type: "button", glyph: displayProps.glyph, onClick: () => onSelect(displayType), className: isLast && css.itemLast, key: displayType }, displayProps.label));
+            return (React.createElement(Button, { outline: true, active: isActive, size: "small", type: "button", glyph: displayProps.glyph, onClick: () => onSelect(displayType), className: cx(isLast && css.itemLast), key: displayType }, displayProps.label));
         }
         const displayGroupsData = [
-            {
-                value: DEFAULT_GROUP_BY,
-                label: 'No groups',
-            },
             ...displayGroups.map((displayGroup) => ({
                 value: displayGroup,
                 label: `Group by ${displayGroup}`,
             })),
+            {
+                value: MetricsDisplayGroupBy.NONE,
+                label: 'No group',
+            },
         ];
-        return (React.createElement(Dropdown, { glyph: displayProps.glyph, label: displayProps.label, className: cx(isLast && css.itemLast, isActive && css.buttonActive), key: displayType }, displayGroupsData.map((displayGroupData) => {
-            const isGroupActive = isActive && displayGroupData.value === groupBy;
-            return (React.createElement(DropdownItem, { onClick: () => onSelect(displayType, displayGroupData.value), isActive: isGroupActive, className: cx(css.dropdownItem, isGroupActive && css.dropdownItemActive), key: displayGroupData.value },
-                React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center" },
-                    React.createElement(Icon, { glyph: Icon.ICONS.CHECK, size: "small", className: css.dropdownItemIcon }),
-                    React.createElement("span", null, displayGroupData.label))));
-        })));
+        return (React.createElement(FlexStack, { className: cx(css.dropdownGroup, isLast && css.itemLast, isActive && css.itemActive), key: displayType },
+            React.createElement(Button, { size: "small", glyph: displayProps.glyph, onClick: () => onSelect(displayType), className: css.dropdownGroupButton }, displayProps.label),
+            React.createElement(Dropdown, { glyph: Icon.ICONS.CHEVRON_DOWN, placement: "bottom-end", className: css.dropdownGroupAnchor }, displayGroupsData.map((displayGroupData) => {
+                const isGroupActive = isActive && displayGroupData.value === groupBy;
+                return (React.createElement(DropdownItem, { onClick: () => onSelect(displayType, displayGroupData.value), isActive: isGroupActive, className: cx(css.dropdownItem, isGroupActive && css.dropdownItemActive), key: displayGroupData.value },
+                    React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center" },
+                        React.createElement(Icon, { glyph: Icon.ICONS.CHECK, size: "small", className: css.dropdownItemIcon }),
+                        React.createElement("span", null, displayGroupData.label))));
+            }))));
     })));
 };
 //# sourceMappingURL=metrics-display-selector.js.map

package/lib-esm/components/metrics-display-selector/metrics-display-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"metrics-display-selector.js","sourceRoot":"","sources":["../../../src/components/metrics-display-selector/metrics-display-selector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"metrics-display-selector.js","sourceRoot":"","sources":["../../../src/components/metrics-display-selector/metrics-display-selector.tsx"],"names":[],"mappings":"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"}

package/lib-esm/components/metrics-display-selector/metrics-display-selector.module.css

@@ -1,4 +1,30 @@
-.buttonActive {
+.dropdownGroup {
+  border: 1px solid var(--color-outline);
+}
+
+.dropdownGroupButton {
+  padding: calc(var(--space-xxsmall) - 1px);
+}
+
+.dropdownGroupAnchor {
+  border: none;
+  border-left: 1px solid var(--color-outline);
+  border-radius: 0;
+}
+
+.dropdownGroupAnchor:hover,
+.dropdownGroupAnchor:focus,
+.dropdownGroupAnchor:active {
+  border-color: var(--color-outline);
+  box-shadow: none;
+  background: none;
+}
+
+.dropdownGroup:hover {
+  border-color: var(--color-outline-dark);
+}
+
+.itemActive {
   background: var(--color-highlight);
 }
 

package/lib-esm/constants.js

@@ -37,6 +37,13 @@ export var MetricsDisplayType;
     MetricsDisplayType["TABLE"] = "table";
     MetricsDisplayType["TREEMAP"] = "treemap";
 })(MetricsDisplayType || (MetricsDisplayType = {}));
+export const MetricsDisplayTypeDefault = MetricsDisplayType.TABLE;
+export var MetricsDisplayGroupBy;
+(function (MetricsDisplayGroupBy) {
+    MetricsDisplayGroupBy["FOLDER"] = "folder";
+    MetricsDisplayGroupBy["NONE"] = "no-group";
+})(MetricsDisplayGroupBy || (MetricsDisplayGroupBy = {}));
+export const MetricsDisplayGroupByDefault = MetricsDisplayGroupBy.FOLDER;
 export var ModuleSizeMetric;
 (function (ModuleSizeMetric) {
     ModuleSizeMetric["SIZE"] = "value";

package/lib-esm/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE3D,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,QAAQ;IAChC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM;IAC9B,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO;IAChC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,UAAU,CAAC,MAAM,CACzD,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;IAClB,GAAG,GAAG;IACN,CAAC,gCAAgC,QAAQ,EAAE,CAAC,EAAE,QAAQ;CACvD,CAAC,EACF,EAAE,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,6BAA6B;IAC7B,2BAA2B;CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC;AACnF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,qBAAqB;IACrB,+BAA+B;IAC/B,uBAAuB;CACxB,CAAC;AACF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,sBAAsB,EAAE,gCAAgC,CAAC,CAAC;AAEnG,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,qCAAe,CAAA;IACf,yCAAmB,CAAA;AACrB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,kCAAc,CAAA;IACd,oDAAgC,CAAA;IAChC,4CAAwB,CAAA;AAC1B,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;QACvB,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,2CAA2C;KACrD;IACD,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE;QAC7B,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE,iDAAiD;KAC3D;IACD,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE;QACjC,KAAK,EAAE,gBAAgB;QACvB,OAAO,EAAE,uBAAuB;KACjC;CACF,CAAC"}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE3D,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,QAAQ;IAChC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM;IAC9B,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO;IAChC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,UAAU,CAAC,MAAM,CACzD,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;IAClB,GAAG,GAAG;IACN,CAAC,gCAAgC,QAAQ,EAAE,CAAC,EAAE,QAAQ;CACvD,CAAC,EACF,EAAE,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,6BAA6B;IAC7B,2BAA2B;CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC;AACnF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,qBAAqB;IACrB,+BAA+B;IAC/B,uBAAuB;CACxB,CAAC;AACF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,sBAAsB,EAAE,gCAAgC,CAAC,CAAC;AAEnG,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,qCAAe,CAAA;IACf,yCAAmB,CAAA;AACrB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,kBAAkB,CAAC,KAAK,CAAC;AAElE,MAAM,CAAN,IAAY,qBAGX;AAHD,WAAY,qBAAqB;IAC/B,0CAAiB,CAAA;IACjB,0CAAiB,CAAA;AACnB,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,QAGhC;AAED,MAAM,CAAC,MAAM,4BAA4B,GAAG,qBAAqB,CAAC,MAAM,CAAC;AAEzE,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,kCAAc,CAAA;IACd,oDAAgC,CAAA;IAChC,4CAAwB,CAAA;AAC1B,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;QACvB,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,2CAA2C;KACrD;IACD,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE;QAC7B,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE,iDAAiD;KAC3D;IACD,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE;QACjC,KAAK,EAAE,gBAAgB;QACvB,OAAO,EAAE,uBAAuB;KACjC;CACF,CAAC"}

package/lib-esm/hooks/metrics-display-type.js

@@ -1,9 +1,9 @@
 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;
 const QUERY_PARAM_VALUE = 'dt';
 const QUERY_PARAM_GROUP_BY = 'dtg';
 export const useMetricsDisplayType = (groups) => {
@@ -14,7 +14,7 @@ export const useMetricsDisplayType = (groups) => {
     const { [QUERY_PARAM_VALUE]: queryParamValue, [QUERY_PARAM_GROUP_BY]: queryParamGroupBy } = queryParams;
     const [localStorage, setLocalStorage] = useLocalStorage('storage', {
         value: DEFAULT_VALUE,
-        groupBy: DEFAULT_GROUP_BY,
+        groupBy: GROUP_BY_DEFAULT,
     });
     const value = useMemo(() => {
         const resolvedValue = queryParamValue !== null && queryParamValue !== void 0 ? queryParamValue : localStorage === null || localStorage === void 0 ? void 0 : localStorage.value;
@@ -30,10 +30,11 @@ export const useMetricsDisplayType = (groups) => {
         var _a;
         const resolvedValue = queryParamGroupBy !== null && queryParamGroupBy !== void 0 ? queryParamGroupBy : localStorage === null || localStorage === void 0 ? void 0 : localStorage.groupBy;
         if (!resolvedValue) {
-            return DEFAULT_GROUP_BY;
+            return GROUP_BY_DEFAULT;
         }
-        if (!((_a = groups === null || groups === void 0 ? void 0 : groups[value]) === null || _a === void 0 ? void 0 : _a.includes(resolvedValue))) {
-            return DEFAULT_GROUP_BY;
+        if (resolvedValue !== MetricsDisplayGroupBy.NONE &&
+            !((_a = groups === null || groups === void 0 ? void 0 : groups[value]) === null || _a === void 0 ? void 0 : _a.includes(resolvedValue))) {
+            return GROUP_BY_DEFAULT;
         }
         return resolvedValue;
     }, [queryParamGroupBy, localStorage === null || localStorage === void 0 ? void 0 : localStorage.groupBy]);
@@ -47,7 +48,7 @@ export const useMetricsDisplayType = (groups) => {
             setLocalStorage({ value, groupBy });
         }
     }, [value, groupBy, setLocalStorage, localStorage]);
-    const setDisplayType = useCallback((newValue, newGroupBy = DEFAULT_GROUP_BY) => {
+    const setDisplayType = useCallback((newValue, newGroupBy = GROUP_BY_DEFAULT) => {
         setQueryParams({
             [QUERY_PARAM_VALUE]: newValue,
             [QUERY_PARAM_GROUP_BY]: newGroupBy,

package/lib-esm/hooks/metrics-display-type.js.map

@@ -1 +1 @@
-{"version":3,"file":"metrics-display-type.js","sourceRoot":"","sources":["../../src/hooks/metrics-display-type.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"metrics-display-type.js","sourceRoot":"","sources":["../../src/hooks/metrics-display-type.ts"],"names":[],"mappings":"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"}

package/lib-esm/ui/dropdown/dropdown.js

@@ -8,9 +8,9 @@ export const DropdownItem = (props) => {
     return (React.createElement(MenuItem, { className: cx(css.item, className, isActive && css.itemActive), ...restProps }));
 };
 export const Dropdown = (props) => {
-    const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', disabled = false, children, } = props;
+    const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', disabled = false, placement, children, } = props;
     const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
-    const menuState = useMenuState();
+    const menuState = useMenuState({ placement });
     return (React.createElement(React.Fragment, null,
         React.createElement(MenuButton, { as: Button, outline: true, size: BUTTON_SIZE.SMALL, glyph: glyph, disabled: disabled, state: menuState, tabIndex: null, className: cx(css.button, className) }, label),
         React.createElement(Menu, { portal: true, state: menuState, "aria-label": dropdownAriaLabel, className: cx(css.dropdown, dropdownClassName) }, children)));

package/lib-esm/ui/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAMxC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAgE,EAAE,EAAE;IAC/F,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjE,OAAO,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAI,GAAG,CAAC,UAAU,CAAC,KAAM,SAAS,GAAI,CAC5F,CAAC;AACJ,CAAC,CAAC;AAUF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAkD,EAAE,EAAE;IAC7E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,iBAAiB,GAAG,EAAE,EACtB,KAAK,GAAG,IAAI,EACZ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,KAAK,EAChB,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAChF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL;QACE,oBAAC,UAAU,IACT,EAAE,EAAE,MAAM,EACV,OAAO,QACP,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,IAEnC,KAAK,CACK;QACb,oBAAC,IAAI,IACH,MAAM,QACN,KAAK,EAAE,SAAS,gBACJ,iBAAiB,EAC7B,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,iBAAiB,CAAC,IAE7C,QAAQ,CACJ,CACN,CACJ,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAkB,YAAY,EAAE,MAAM,cAAc,CAAC;AAExF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAMxC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAgE,EAAE,EAAE;IAC/F,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjE,OAAO,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAI,GAAG,CAAC,UAAU,CAAC,KAAM,SAAS,GAAI,CAC5F,CAAC;AACJ,CAAC,CAAC;AAWF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAkD,EAAE,EAAE;IAC7E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,iBAAiB,GAAG,EAAE,EACtB,KAAK,GAAG,IAAI,EACZ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAChF,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;IAE9C,OAAO,CACL;QACE,oBAAC,UAAU,IACT,EAAE,EAAE,MAAM,EACV,OAAO,QACP,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,IAEnC,KAAK,CACK;QACb,oBAAC,IAAI,IACH,MAAM,QACN,KAAK,EAAE,SAAS,gBACJ,iBAAiB,EAC7B,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,iBAAiB,CAAC,IAE7C,QAAQ,CACJ,CACN,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.18.0-beta.2",
+  "version": "4.18.0-beta.4",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,13 +36,13 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "7.26.0",
+    "@babel/preset-env": "7.26.9",
     "@babel/preset-react": "7.26.3",
     "@babel/preset-typescript": "7.26.0",
-    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-essentials": "8.6.3",
     "@storybook/addon-webpack5-compiler-babel": "3.0.5",
-    "@storybook/react": "8.4.7",
-    "@storybook/react-webpack5": "8.4.7",
+    "@storybook/react": "8.6.3",
+    "@storybook/react-webpack5": "8.6.3",
     "@types/d3": "7.4.3",
     "@types/react": "18.3.13",
     "@types/react-router-dom": "5.3.3",
@@ -61,8 +61,8 @@
     "react-dom": "18.3.1",
     "react-router-dom": "5.3.4",
     "rimraf": "6.0.1",
-    "storybook": "8.4.7",
-    "typescript": "5.7.3",
+    "storybook": "8.6.3",
+    "typescript": "5.8.2",
     "typescript-plugin-css-modules": "5.1.0"
   },
   "peerDependencies": {
@@ -74,7 +74,7 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "4.18.0-beta.2",
+    "@bundle-stats/utils": "4.18.0-beta.4",
     "ariakit": "2.0.0-next.44",
     "d3": "7.9.0",
     "modern-css-reset": "1.4.0",
@@ -82,5 +82,5 @@
     "snarkdown": "2.0.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "5f0b0fb4f7d313f54ce8d909738c170eb854af8c"
+  "gitHead": "a142130bbb412d682acb427deaaa04ea03871587"
 }

package/src/components/bundle-assets/bundle-assets.tsx

@@ -8,7 +8,7 @@ import { COMPONENT, SECTIONS } from '@bundle-stats/utils';
 import type { ReportMetricAssetRow, SortAction } from '../../types';
 import config from '../../config.json';
 import I18N from '../../i18n';
-import { MetricsDisplayType } from '../../constants';
+import { MetricsDisplayGroupBy, MetricsDisplayType } from '../../constants';
 import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
@@ -34,7 +34,7 @@ import { getFilters } from './bundle-assets.utils';
 import css from './bundle-assets.module.css';
 
 const DISPLAY_TYPE_GROUPS = {
-  [MetricsDisplayType.TREEMAP]: ['folder'],
+  [MetricsDisplayType.TREEMAP]: [MetricsDisplayGroupBy.FOLDER],
 };
 
 interface ViewMetricsTreemapProps {

package/src/components/bundle-modules/bundle-modules.tsx

@@ -8,7 +8,12 @@ import { WebpackChunk } from '@bundle-stats/utils';
 import type { ReportMetricModuleRow, SortAction } from '../../types';
 import config from '../../config.json';
 import I18N from '../../i18n';
-import { MetricsDisplayType, ModuleSizeMetric, ModuleSizeMetrics } from '../../constants';
+import {
+  MetricsDisplayGroupBy,
+  MetricsDisplayType,
+  ModuleSizeMetric,
+  ModuleSizeMetrics,
+} from '../../constants';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
@@ -38,7 +43,7 @@ import css from './bundle-modules.module.css';
 import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 
 const DISPLAY_TYPE_GROUPS = {
-  [MetricsDisplayType.TREEMAP]: ['folder'],
+  [MetricsDisplayType.TREEMAP]: [MetricsDisplayGroupBy.FOLDER],
 };
 
 interface RowHeaderProps {

package/src/components/bundle-packages/bundle-packages.jsx

@@ -26,12 +26,12 @@ import { PackageInfo } from '../package-info';
 import { SEARCH_PLACEHOLDER } from './bundle-packages.i18n';
 import css from './bundle-packages.module.css';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
-import { MetricsDisplayType } from '../../constants';
+import { MetricsDisplayGroupBy, MetricsDisplayType } from '../../constants';
 import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
 import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 
 const DISPLAY_TYPE_GROUPS = {
-  [MetricsDisplayType.TREEMAP]: ['folder'],
+  [MetricsDisplayType.TREEMAP]: [MetricsDisplayGroupBy.FOLDER],
 };
 
 const getDropdownFilters = ({ compareMode, filters }) => ({

package/src/components/metrics-display-selector/metrics-display-selector.module.css

@@ -1,4 +1,30 @@
-.buttonActive {
+.dropdownGroup {
+  border: 1px solid var(--color-outline);
+}
+
+.dropdownGroupButton {
+  padding: calc(var(--space-xxsmall) - 1px);
+}
+
+.dropdownGroupAnchor {
+  border: none;
+  border-left: 1px solid var(--color-outline);
+  border-radius: 0;
+}
+
+.dropdownGroupAnchor:hover,
+.dropdownGroupAnchor:focus,
+.dropdownGroupAnchor:active {
+  border-color: var(--color-outline);
+  box-shadow: none;
+  background: none;
+}
+
+.dropdownGroup:hover {
+  border-color: var(--color-outline-dark);
+}
+
+.itemActive {
   background: var(--color-highlight);
 }
 

package/src/components/metrics-display-selector/metrics-display-selector.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import cx from 'classnames';
 
-import { MetricsDisplayType } from '../../constants';
+import {
+  MetricsDisplayType,
+  MetricsDisplayGroupByDefault,
+  MetricsDisplayGroupBy,
+} from '../../constants';
 import { Button } from '../../ui/button';
 import { ControlGroup } from '../../ui/control-group';
 import { Dropdown, DropdownItem } from '../../ui/dropdown';
 import { Icon } from '../../ui/icon';
+import { FlexStack } from '../../layout/flex-stack';
 import css from './metrics-display-selector.module.css';
-import { FlexStack } from '../../layout';
-
-const DEFAULT_GROUP_BY = '';
 
 const METRICS_DISPLAY_MAP = {
   [MetricsDisplayType.TABLE]: {
@@ -35,7 +37,13 @@ export const MetricsDisplaySelector = (
   props: MetricsDisplaySelectorProps &
     Omit<React.ComponentProps<typeof ControlGroup>, 'onSelect' | 'value'>,
 ) => {
-  const { value, groupBy = DEFAULT_GROUP_BY, groups = {}, onSelect, ...restProps } = props;
+  const {
+    value,
+    groupBy = MetricsDisplayGroupByDefault,
+    groups = {},
+    onSelect,
+    ...restProps
+  } = props;
 
   return (
     <ControlGroup {...restProps}>
@@ -54,7 +62,7 @@ export const MetricsDisplaySelector = (
               type="button"
               glyph={displayProps.glyph}
               onClick={() => onSelect(displayType)}
-              className={isLast && css.itemLast}
+              className={cx(isLast && css.itemLast)}
               key={displayType}
             >
               {displayProps.label}
@@ -63,41 +71,57 @@ export const MetricsDisplaySelector = (
         }
 
         const displayGroupsData = [
-          {
-            value: DEFAULT_GROUP_BY,
-            label: 'No groups',
-          },
           ...displayGroups.map((displayGroup) => ({
             value: displayGroup,
             label: `Group by ${displayGroup}`,
           })),
+          {
+            value: MetricsDisplayGroupBy.NONE,
+            label: 'No group',
+          },
         ];
 
         return (
-          <Dropdown
-            glyph={displayProps.glyph}
-            label={displayProps.label}
-            className={cx(isLast && css.itemLast, isActive && css.buttonActive)}
+          <FlexStack
+            className={cx(css.dropdownGroup, isLast && css.itemLast, isActive && css.itemActive)}
             key={displayType}
           >
-            {displayGroupsData.map((displayGroupData) => {
-              const isGroupActive = isActive && displayGroupData.value === groupBy;
+            <Button
+              size="small"
+              glyph={displayProps.glyph}
+              onClick={() => onSelect(displayType)}
+              className={css.dropdownGroupButton}
+            >
+              {displayProps.label}
+            </Button>
+            <Dropdown
+              glyph={Icon.ICONS.CHEVRON_DOWN}
+              placement="bottom-end"
+              className={css.dropdownGroupAnchor}
+            >
+              {displayGroupsData.map((displayGroupData) => {
+                const isGroupActive = isActive && displayGroupData.value === groupBy;
 
-              return (
-                <DropdownItem
-                  onClick={() => onSelect(displayType, displayGroupData.value)}
-                  isActive={isGroupActive}
-                  className={cx(css.dropdownItem, isGroupActive && css.dropdownItemActive)}
-                  key={displayGroupData.value}
-                >
-                  <FlexStack space="xxxsmall" alignItems="center">
-                    <Icon glyph={Icon.ICONS.CHECK} size="small" className={css.dropdownItemIcon} />
-                    <span>{displayGroupData.label}</span>
-                  </FlexStack>
-                </DropdownItem>
-              );
-            })}
-          </Dropdown>
+                return (
+                  <DropdownItem
+                    onClick={() => onSelect(displayType, displayGroupData.value)}
+                    isActive={isGroupActive}
+                    className={cx(css.dropdownItem, isGroupActive && css.dropdownItemActive)}
+                    key={displayGroupData.value}
+                  >
+                    <FlexStack space="xxxsmall" alignItems="center">
+                      <Icon
+                        glyph={Icon.ICONS.CHECK}
+                        size="small"
+                        className={css.dropdownItemIcon}
+                      />
+                      <span>{displayGroupData.label}</span>
+                    </FlexStack>
+                  </DropdownItem>
+                );
+              })}
+            </Dropdown>
+          </FlexStack>
         );
       })}
     </ControlGroup>

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.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,7 @@ interface DropdownProps {
   ariaLabel?: string;
   glyph?: string;
   disabled?: boolean;
+  placement?: MenuStateProps['placement'];
 }
 
 export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) => {
@@ -33,11 +34,12 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
     ariaLabel = '',
     glyph = '',
     disabled = false,
+    placement,
     children,
   } = props;
 
   const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
-  const menuState = useMenuState();
+  const menuState = useMenuState({ placement });
 
   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,7 @@ interface DropdownProps {
     ariaLabel?: string;
     glyph?: string;
     disabled?: boolean;
+    placement?: MenuStateProps['placement'];
 }
 export declare const Dropdown: (props: DropdownProps & React.ComponentProps<"div">) => React.JSX.Element;
 export {};