@bundle-stats/ui 4.2.3-beta.0 → 4.2.3-beta.1

package/lib/components/metric/metric.js

@@ -1,77 +1,20 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Metric = void 0;
-const react_1 = __importStar(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const metric_module_css_1 = __importDefault(require("./metric.module.css"));
-const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
-const Metric = ({ className, value, formatter, inline, children, enhanced }) => {
-    const { displayValue, displayUnit } = (0, react_1.useMemo)(() => {
-        const formattedValue = formatter?.(value);
-        if (!formattedValue) {
-            return { displayValue: value };
-        }
-        if (!enhanced) {
-            return { displayValue: formattedValue };
-        }
-        const matches = formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN);
-        if (!matches) {
-            return { displayValue: value };
-        }
-        return {
-            displayUnit: matches[2],
-            displayValue: matches[1],
-        };
-    }, [formatter, value]);
+const Metric = (props) => {
+    const { className = '', value = '0', unit = '', inline = false, children = null, ...restProps } = props;
     const rootClassName = (0, classnames_1.default)(className, metric_module_css_1.default.root, inline && metric_module_css_1.default.inline);
-    return (react_1.default.createElement("div", { className: rootClassName },
+    return (react_1.default.createElement("div", { className: rootClassName, ...restProps },
         react_1.default.createElement("div", { className: metric_module_css_1.default.display },
-            react_1.default.createElement("span", { className: metric_module_css_1.default.displayValue }, displayValue),
-            displayUnit && react_1.default.createElement("span", { className: metric_module_css_1.default.displayUnit }, displayUnit)),
-        react_1.default.createElement("div", { className: metric_module_css_1.default.delta }, children)));
+            react_1.default.createElement("span", { className: metric_module_css_1.default.displayValue }, value),
+            unit && react_1.default.createElement("span", { className: metric_module_css_1.default.displayUnit }, unit)),
+        children && react_1.default.createElement("div", { className: metric_module_css_1.default.content }, children)));
 };
 exports.Metric = Metric;
-exports.Metric.defaultProps = {
-    className: '',
-    enhanced: false,
-    inline: false,
-    value: 0,
-    children: [],
-    formatter: (val) => val,
-};
-exports.Metric.propTypes = {
-    className: prop_types_1.default.string,
-    enhanced: prop_types_1.default.bool,
-    inline: prop_types_1.default.bool,
-    value: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
-    formatter: prop_types_1.default.func,
-    children: prop_types_1.default.node,
-};
 //# sourceMappingURL=metric.js.map

package/lib/components/metric/metric.js.map

@@ -1 +1 @@
-{"version":3,"file":"metric.js","sourceRoot":"","sources":["../../../src/components/metric/metric.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AACvC,4DAAmC;AACnC,4DAA4B;AAE5B,4EAAsC;AAGtC,MAAM,0BAA0B,GAAG,uBAAuB,CAAC;AAEpD,MAAM,MAAM,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpF,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACjD,MAAM,cAAc,GAAG,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;QAE1C,IAAI,CAAC,cAAc,EAAE;YACnB,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;SAChC;QAED,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC;SACzC;QAED,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC;QAEjE,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;SAChC;QAED,OAAO;YACL,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;YACvB,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;SACzB,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,SAAS,EAAE,2BAAG,CAAC,IAAI,EAAE,MAAM,IAAI,2BAAG,CAAC,MAAM,CAAC,CAAC;IAEpE,OAAO,CACL,uCAAK,SAAS,EAAE,aAAa;QAC3B,uCAAK,SAAS,EAAE,2BAAG,CAAC,OAAO;YACzB,wCAAM,SAAS,EAAE,2BAAG,CAAC,YAAY,IAAG,YAAY,CAAQ;YACvD,WAAW,IAAI,wCAAM,SAAS,EAAE,2BAAG,CAAC,WAAW,IAAG,WAAW,CAAQ,CAClE;QACN,uCAAK,SAAS,EAAE,2BAAG,CAAC,KAAK,IAAG,QAAQ,CAAO,CACvC,CACP,CAAC;AACJ,CAAC,CAAC;AAnCW,QAAA,MAAM,UAmCjB;AAEF,cAAM,CAAC,YAAY,GAAG;IACpB,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,KAAK;IACb,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,EAAE;IACZ,SAAS,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG;CACxB,CAAC;AAEF,cAAM,CAAC,SAAS,GAAG;IACjB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,QAAQ,EAAE,oBAAS,CAAC,IAAI;IACxB,MAAM,EAAE,oBAAS,CAAC,IAAI;IACtB,KAAK,EAAE,oBAAS,CAAC,SAAS,CAAC,CAAC,oBAAS,CAAC,MAAM,EAAE,oBAAS,CAAC,MAAM,CAAC,CAAC;IAChE,SAAS,EAAE,oBAAS,CAAC,IAAI;IACzB,QAAQ,EAAE,oBAAS,CAAC,IAAI;CACzB,CAAC"}
+{"version":3,"file":"metric.js","sourceRoot":"","sources":["../../../src/components/metric/metric.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAE5B,4EAAsC;AAiB/B,MAAM,MAAM,GAAG,CAAC,KAAgD,EAAE,EAAE;IACzE,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,GAAG,EACX,IAAI,GAAG,EAAE,EACT,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,IAAI,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,SAAS,EAAE,2BAAG,CAAC,IAAI,EAAE,MAAM,IAAI,2BAAG,CAAC,MAAM,CAAC,CAAC;IAEpE,OAAO,CACL,uCAAK,SAAS,EAAE,aAAa,KAAM,SAAS;QAC1C,uCAAK,SAAS,EAAE,2BAAG,CAAC,OAAO;YACzB,wCAAM,SAAS,EAAE,2BAAG,CAAC,YAAY,IAAG,KAAK,CAAQ;YAChD,IAAI,IAAI,wCAAM,SAAS,EAAE,2BAAG,CAAC,WAAW,IAAG,IAAI,CAAQ,CACpD;QACL,QAAQ,IAAI,uCAAK,SAAS,EAAE,2BAAG,CAAC,OAAO,IAAG,QAAQ,CAAO,CACtD,CACP,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,MAAM,UAqBjB"}

package/lib/components/metric/metric.module.css

@@ -1,12 +1,13 @@
 .root {
-  letter-spacing: 0.05em;
+  font-family: var(--font-family-fixed);
+  line-height: 1;
 }
 
 .displayUnit {
   font-size: var(--size-small);
 }
 
-.delta {
+.content {
   font-size: var(--size-small);
 }
 
@@ -14,7 +15,7 @@
   display: inline-block;
 }
 
-.inline .delta {
+.inline .content {
   display: inline-block;
-  margin: 0 0 0 var(--space-xxxsmall);
+  margin: 0 0 0 var(--space-xxsmall);
 }

package/lib/components/metric-run-info/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./metric-run-info"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/metric-run-info/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,oDAAkC"}

package/lib/components/metric-run-info/metric-run-info.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetricRunInfo = void 0;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("@bundle-stats/utils");
+const focusable_1 = require("ariakit/focusable");
+const stack_1 = require("../../layout/stack");
+const flex_stack_1 = require("../../layout/flex-stack");
+const icon_1 = require("../../ui/icon");
+const run_info_1 = require("../run-info");
+const metric_run_info_module_css_1 = __importDefault(require("./metric-run-info.module.css"));
+const MetricHoverCard = ({ title, description, url }) => {
+    const onClick = (0, react_1.useCallback)((event) => {
+        if (!url) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        window.open(url);
+    }, [url]);
+    return (react_1.default.createElement(stack_1.Stack, { space: "xxsmall", className: metric_run_info_module_css_1.default.metricHoverCard },
+        react_1.default.createElement("h3", { className: metric_run_info_module_css_1.default.metricHoverCardTitle }, title),
+        react_1.default.createElement(stack_1.Stack, { space: "xxxsmall" },
+            react_1.default.createElement("p", { className: metric_run_info_module_css_1.default.metricHoverCardDescription }, description),
+            url && (react_1.default.createElement("div", null,
+                react_1.default.createElement(focusable_1.Focusable, { as: "span", onClick: onClick, className: metric_run_info_module_css_1.default.readMoreLink },
+                    react_1.default.createElement(flex_stack_1.FlexStack, { alignItems: "center", space: "xxxsmall" },
+                        react_1.default.createElement("span", null, "Learn more"),
+                        react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.EXTERNAL_LINK, size: "small" }))))))));
+};
+const MetricRunInfo = (props) => {
+    const { metricId, current, baseline = 0, showDelta = true, showMetricDescription = true, showBaseline = true, titleWrapper: CustomTitleWrapper = react_1.default.Fragment, ...restProps } = props;
+    const metric = (0, utils_1.getGlobalMetricType)(metricId);
+    const metricRunInfo = (0, utils_1.getMetricRunInfo)(metric, current, baseline || 0);
+    const titleHoverCard = (0, react_1.useMemo)(() => {
+        if (showMetricDescription && (metric.description || metric.url)) {
+            return (react_1.default.createElement(MetricHoverCard, { title: metric.label, description: metric.description, url: metric.url }));
+        }
+        return null;
+    }, [showMetricDescription, metric]);
+    const title = (0, react_1.useMemo)(() => react_1.default.createElement(CustomTitleWrapper, null, metric.label), [CustomTitleWrapper, metric.label]);
+    const deltaProps = (0, react_1.useMemo)(() => {
+        if (!showDelta || metric.skipDelta || !('delta' in metricRunInfo)) {
+            return {};
+        }
+        return {
+            delta: metricRunInfo.displayDeltaPercentage,
+            deltaType: metricRunInfo.deltaType,
+        };
+    }, [metricRunInfo]);
+    return (react_1.default.createElement(run_info_1.RunInfo, { title: title, titleHoverCard: titleHoverCard, enhance: true, current: metricRunInfo.displayValue, showBaseline: showBaseline, ...(showBaseline && {
+            baseline: metric.formatter(baseline),
+        }), ...deltaProps, ...restProps }));
+};
+exports.MetricRunInfo = MetricRunInfo;
+//# sourceMappingURL=metric-run-info.js.map

package/lib/components/metric-run-info/metric-run-info.js.map

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

package/lib/components/metric-run-info/metric-run-info.module.css

@@ -0,0 +1,17 @@
+.metricHoverCardTitle {
+  font-weight: bold;
+  font-size: 1em;
+}
+
+.readMoreLink {
+  cursor: pointer;
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
+.readMoreLink:hover,
+.readMoreLink:focus,
+.readMoreLink:active {
+  color: var(--color-primary-dark);
+  text-decoration: none;
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./metrics-display-selector"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metrics-display-selector/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6DAA2C"}

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

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetricsDisplaySelector = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const constants_1 = require("../../constants");
+const button_1 = require("../../ui/button");
+const control_group_1 = require("../../ui/control-group");
+const dropdown_1 = require("../../ui/dropdown");
+const icon_1 = require("../../ui/icon");
+const flex_stack_1 = require("../../layout/flex-stack");
+const metrics_display_selector_module_css_1 = __importDefault(require("./metrics-display-selector.module.css"));
+const METRICS_DISPLAY_MAP = {
+    [constants_1.MetricsDisplayType.TABLE]: {
+        glyph: icon_1.Icon.ICONS.TABLE,
+        label: 'Table',
+    },
+    [constants_1.MetricsDisplayType.TREEMAP]: {
+        glyph: icon_1.Icon.ICONS.TREEMAP,
+        label: 'Treemap',
+    },
+};
+const displayTypes = Object.values(constants_1.MetricsDisplayType);
+const MetricsDisplaySelector = (props) => {
+    const { value, groupBy = constants_1.MetricsDisplayGroupByDefault, groups = {}, onSelect, ...restProps } = props;
+    return (react_1.default.createElement(control_group_1.ControlGroup, { ...restProps }, displayTypes.map((displayType, index) => {
+        const displayGroups = groups?.[displayType];
+        const displayProps = METRICS_DISPLAY_MAP[displayType];
+        const isFirst = index === 0;
+        const isLast = displayTypes.length - 1 === index;
+        const isActive = displayType === value;
+        if (!displayGroups || displayGroups.length === 0) {
+            return (react_1.default.createElement(button_1.Button, { outline: true, active: isActive, size: "small", type: "button", glyph: displayProps.glyph, onClick: () => onSelect(displayType), className: (0, classnames_1.default)(isLast && metrics_display_selector_module_css_1.default.itemLast), key: displayType }, displayProps.label));
+        }
+        const displayGroupsData = [
+            ...displayGroups.map((displayGroup) => ({
+                value: displayGroup,
+                label: `Group by ${displayGroup}`,
+            })),
+            {
+                value: constants_1.MetricsDisplayGroupBy.NONE,
+                label: 'No group',
+            },
+        ];
+        const itemClassName = (0, classnames_1.default)(metrics_display_selector_module_css_1.default.dropdownGroup, isFirst && metrics_display_selector_module_css_1.default.itemFirst, isLast && metrics_display_selector_module_css_1.default.itemLast, isActive && metrics_display_selector_module_css_1.default.itemActive);
+        return (react_1.default.createElement(flex_stack_1.FlexStack, { className: itemClassName, key: displayType },
+            react_1.default.createElement(button_1.Button, { size: "small", glyph: displayProps.glyph, onClick: () => onSelect(displayType), className: metrics_display_selector_module_css_1.default.dropdownGroupButton }, displayProps.label),
+            react_1.default.createElement(dropdown_1.Dropdown, { glyph: icon_1.Icon.ICONS.CHEVRON_DOWN, placement: "bottom-end", shift: -1, className: metrics_display_selector_module_css_1.default.dropdownGroupAnchor }, displayGroupsData.map((displayGroupData) => {
+                const isGroupActive = isActive && displayGroupData.value === groupBy;
+                return (react_1.default.createElement(dropdown_1.DropdownItem, { onClick: () => onSelect(displayType, displayGroupData.value), isActive: isGroupActive, className: (0, classnames_1.default)(metrics_display_selector_module_css_1.default.dropdownItem, isGroupActive && metrics_display_selector_module_css_1.default.dropdownItemActive), key: displayGroupData.value },
+                    react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center" },
+                        react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.CHECK, size: "small", className: metrics_display_selector_module_css_1.default.dropdownItemIcon }),
+                        react_1.default.createElement("span", null, displayGroupData.label))));
+            }))));
+    })));
+};
+exports.MetricsDisplaySelector = MetricsDisplaySelector;
+//# sourceMappingURL=metrics-display-selector.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,63 @@
+.dropdownGroup {
+  border: 1px solid var(--color-outline);
+  transition: var(--transition-out);
+}
+
+.dropdownGroupButton {
+  padding: calc(var(--space-xxsmall) - 1px);
+}
+
+.dropdownGroupAnchor {
+  border: none;
+  border-radius: 0;
+  position: relative;
+}
+
+.dropdownGroupAnchor::before {
+  content: '';
+  display: block;
+  width: 1px;
+  background: var(--color-outline-dark);
+  position: absolute;
+  left: 0;
+  top: var(--space-xxxsmall);
+  bottom: var(--space-xxxsmall);
+}
+
+.dropdownGroupAnchor:hover,
+.dropdownGroupAnchor:focus,
+.dropdownGroupAnchor:active {
+  border-color: var(--color-outline);
+  box-shadow: none;
+  background: none;
+}
+
+.dropdownGroup:hover {
+  border-color: var(--color-outline-dark);
+  transition: var(--transition-in);
+}
+
+.itemActive {
+  background: var(--color-highlight);
+}
+
+/* explicit ControlGroup last item styles to override ariakit injected sibling nodes */
+.itemFirst {
+  border-top-left-radius: var(--radius-small) !important;
+  border-bottom-left-radius: var(--radius-small) !important;
+}
+
+.itemLast {
+  border-top-right-radius: var(--radius-small) !important;
+  border-bottom-right-radius: var(--radius-small) !important;
+}
+
+.dropdownItemIcon {
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.dropdownItemActive .dropdownItemIcon {
+  opacity: 1;
+  transition: var(--transition-in);
+}

package/lib/components/metrics-table/index.js

@@ -15,20 +15,30 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MetricsTable = void 0;
 const react_1 = __importStar(require("react"));
 const metrics_table_1 = require("./metrics-table");
 const MetricsTable = (props) => {
     const [showAllItems, setShowAllItems] = (0, react_1.useState)(false);
-    return (react_1.default.createElement(metrics_table_1.MetricsTable, { ...props, showAllItems: showAllItems, setShowAllItems: setShowAllItems }));
+    return react_1.default.createElement(metrics_table_1.MetricsTable, { ...props, showAllItems: showAllItems, setShowAllItems: setShowAllItems });
 };
 exports.MetricsTable = MetricsTable;
 //# sourceMappingURL=index.js.map

package/lib/components/metrics-table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metrics-table/index.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAExC,mDAAgE;AAEzD,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAExD,OAAO,CACL,8BAAC,4BAAa,OAAK,KAAK,EAAE,YAAY,EAAE,YAAY,EAAG,eAAe,EAAE,eAAe,GAAI,CAC5F,CAAC;AACJ,CAAC,CAAC;AANW,QAAA,YAAY,gBAMvB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metrics-table/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAExC,mDAAgE;AAOzD,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAExD,OAAO,8BAAC,4BAAa,OAAK,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,eAAe,GAAI,CAAC;AACpG,CAAC,CAAC;AAJW,QAAA,YAAY,gBAIvB"}

package/lib/components/metrics-table/metrics-table.i18n.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SHOW_LESS = exports.SHOW_ALL = exports.EMPTY_MESSAGE = void 0;
+exports.EMPTY_MESSAGE = 'No items found.';
+exports.SHOW_ALL = 'Show all';
+exports.SHOW_LESS = 'Show less';
+//# sourceMappingURL=metrics-table.i18n.js.map

package/lib/components/metrics-table/metrics-table.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-table.i18n.js","sourceRoot":"","sources":["../../../src/components/metrics-table/metrics-table.i18n.ts"],"names":[],"mappings":";;;AAAa,QAAA,aAAa,GAAG,iBAAiB,CAAC;AAClC,QAAA,QAAQ,GAAG,UAAU,CAAC;AACtB,QAAA,SAAS,GAAG,WAAW,CAAC"}