@bundle-stats/ui 4.16.0-beta.3 → 4.16.0-beta.5

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

@@ -22,16 +22,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.MetricsTableExport = void 0;
 const react_1 = __importStar(require("react"));
 const stack_1 = require("../../layout/stack");
 const tabs_1 = require("../../ui/tabs");
 const preview_source_1 = require("../preview-source");
-const metrics_table_export_module_css_1 = __importDefault(require("./metrics-table-export.module.css"));
 const generateSourceJSON = (items) => {
     const output = items.map((item) => ({
         name: item.label,
@@ -67,12 +63,12 @@ const SOURCES = [
     {
         label: 'CSV',
         transformFn: generateSourceCSV,
-        extension: '.csv',
+        extension: 'csv',
     },
     {
         label: 'JSON',
         transformFn: generateSourceJSON,
-        extension: '.json',
+        extension: 'json',
     },
 ];
 const MetricsTableExport = (props) => {
@@ -80,7 +76,7 @@ const MetricsTableExport = (props) => {
     const [selectedId, setSelectedId] = (0, react_1.useState)(SOURCES[0].label);
     return (react_1.default.createElement(stack_1.Stack, { space: "small", ...restProps },
         react_1.default.createElement(tabs_1.Tabs, null, SOURCES.map((source) => (react_1.default.createElement(tabs_1.Tabs.Item, { onClick: () => setSelectedId(source.label), isTabActive: selectedId === source.label, key: source.label }, source.label)))),
-        react_1.default.createElement("div", { className: metrics_table_export_module_css_1.default.panels }, SOURCES.map((source) => selectedId === source.label && (react_1.default.createElement(preview_source_1.PreviewSource, { source: source.transformFn(items), download: `${download}.${source.extension}`, className: metrics_table_export_module_css_1.default.panel, key: source.label }))))));
+        react_1.default.createElement("div", null, SOURCES.map((source) => selectedId === source.label && (react_1.default.createElement(preview_source_1.PreviewSource, { source: source.transformFn(items), rows: 20, download: `${download}.${source.extension}`, key: source.label }))))));
 };
 exports.MetricsTableExport = MetricsTableExport;
 //# sourceMappingURL=metrics-table-export.js.map

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

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

package/lib/components/preview-source/preview-source.js

@@ -12,14 +12,17 @@ const control_group_1 = require("../../ui/control-group");
 const tooltip_1 = require("../../ui/tooltip");
 const textarea_1 = require("../../ui/textarea");
 const preview_source_module_css_1 = __importDefault(require("./preview-source.module.css"));
+const DEFAULT_ROWS = 10;
 const PreviewSource = (props) => {
-    const { className = '', source, download = false, ...restProps } = props;
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(preview_source_module_css_1.default.root, className), ...restProps },
-        react_1.default.createElement(control_group_1.ControlGroup, { className: preview_source_module_css_1.default.toolbar },
+    const { className = '', source, rows = DEFAULT_ROWS, download = false, ...restProps } = props;
+    const isEmpty = !source;
+    const rootClassName = (0, classnames_1.default)(preview_source_module_css_1.default.root, className, isEmpty && preview_source_module_css_1.default.isEmpty);
+    return (react_1.default.createElement("div", { className: rootClassName, ...restProps },
+        source && (react_1.default.createElement(control_group_1.ControlGroup, { className: preview_source_module_css_1.default.toolbar },
             react_1.default.createElement(copy_to_clipboard_1.CopyToClipboard, { outline: true, size: "small", text: source }),
             download && (react_1.default.createElement(tooltip_1.Tooltip, { title: `Download ${download}`, className: preview_source_module_css_1.default.downloadTooltip },
-                react_1.default.createElement(button_1.Button, { outline: true, rightGlyph: button_1.BUTTON_GLYPHS.DOWNLOAD, size: "small", as: "a", href: `data:application/json,${encodeURIComponent(source)}`, download: download })))),
-        react_1.default.createElement(textarea_1.Textarea, { previewSource: true, readOnly: true, rows: 12, className: preview_source_module_css_1.default.content }, source)));
+                react_1.default.createElement(button_1.Button, { outline: true, rightGlyph: button_1.BUTTON_GLYPHS.DOWNLOAD, size: "small", as: "a", href: `data:application/json,${encodeURIComponent(source)}`, download: download }))))),
+        react_1.default.createElement(textarea_1.Textarea, { previewSource: true, readOnly: true, rows: rows, className: preview_source_module_css_1.default.content }, source)));
 };
 exports.PreviewSource = PreviewSource;
 //# sourceMappingURL=preview-source.js.map

package/lib/components/preview-source/preview-source.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview-source.js","sourceRoot":"","sources":["../../../src/components/preview-source/preview-source.tsx"],"names":[],"mappings":";;;;;;AACA,kDAA0B;AAC1B,4DAA4B;AAE5B,4CAAwD;AACxD,kEAA6D;AAC7D,0DAAsD;AACtD,8CAA2C;AAC3C,gDAA6C;AAC7C,4FAA8C;AAYvC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEzE,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,mCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,KAAM,SAAS;QACpD,8BAAC,4BAAY,IAAC,SAAS,EAAE,mCAAG,CAAC,OAAO;YAClC,8BAAC,mCAAe,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,MAAM,GAAI;YACrD,QAAQ,IAAI,CACX,8BAAC,iBAAO,IAAC,KAAK,EAAE,YAAY,QAAQ,EAAE,EAAE,SAAS,EAAE,mCAAG,CAAC,eAAe;gBACpE,8BAAC,eAAM,IACL,OAAO,QACP,UAAU,EAAE,sBAAa,CAAC,QAAQ,EAClC,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,yBAAyB,kBAAkB,CAAC,MAAM,CAAC,EAAE,EAC3D,QAAQ,EAAE,QAAQ,GAClB,CACM,CACX,CACY;QACf,8BAAC,mBAAQ,IAAC,aAAa,QAAC,QAAQ,QAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,mCAAG,CAAC,OAAO,IAC9D,MAAM,CACE,CACP,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,aAAa,iBAyBxB"}
+{"version":3,"file":"preview-source.js","sourceRoot":"","sources":["../../../src/components/preview-source/preview-source.tsx"],"names":[],"mappings":";;;;;;AACA,kDAA0B;AAC1B,4DAA4B;AAE5B,4CAAwD;AACxD,kEAA6D;AAC7D,0DAAsD;AACtD,8CAA2C;AAC3C,gDAA6C;AAC7C,4FAA8C;AAE9C,MAAM,YAAY,GAAG,EAAE,CAAC;AAgBjB,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,IAAI,GAAG,YAAY,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE9F,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC;IACxB,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,mCAAG,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,IAAI,mCAAG,CAAC,OAAO,CAAC,CAAC;IAEtE,OAAO,CACL,uCAAK,SAAS,EAAE,aAAa,KAAM,SAAS;QACzC,MAAM,IAAI,CACT,8BAAC,4BAAY,IAAC,SAAS,EAAE,mCAAG,CAAC,OAAO;YAClC,8BAAC,mCAAe,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,MAAM,GAAI;YACrD,QAAQ,IAAI,CACX,8BAAC,iBAAO,IAAC,KAAK,EAAE,YAAY,QAAQ,EAAE,EAAE,SAAS,EAAE,mCAAG,CAAC,eAAe;gBACpE,8BAAC,eAAM,IACL,OAAO,QACP,UAAU,EAAE,sBAAa,CAAC,QAAQ,EAClC,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,yBAAyB,kBAAkB,CAAC,MAAM,CAAC,EAAE,EAC3D,QAAQ,EAAE,QAAQ,GAClB,CACM,CACX,CACY,CAChB;QACD,8BAAC,mBAAQ,IAAC,aAAa,QAAC,QAAQ,QAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,mCAAG,CAAC,OAAO,IAChE,MAAM,CACE,CACP,CACP,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,aAAa,iBA8BxB"}

package/lib/components/preview-source/preview-source.module.css

@@ -7,6 +7,8 @@
   z-index: 2;
   top: var(--space-xsmall);
   right: var(--space-xsmall);
+  background: var(--color-background);
+  border-radius: var(--radius-medium);
 }
 
 /** fix control group with nested components */
@@ -21,8 +23,18 @@
   box-shadow: none;
 }
 
+/** Source content */
 .content {
   position: relative;
   z-index: 1;
   height: 100%;
+  background: var(--color-highlight);
+  color: var(--color-text);
+}
+
+/** Empty / loading state */
+.isEmpty .content {
+  pointer-events: none;
+  background: var(--skeleton-block-background);
+  opacity: var(--skeleton-opacity);
 }

package/lib/css/variables.css

@@ -201,6 +201,10 @@
 
   --outline-hover: 0 0 0 var(--space-xxxsmall) var(--color-highlight);
 
+  --skeleton-inline-background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
+  --skeleton-block-background: currentColor;
+  --skeleton-opacity: 0.06;
+
   /** Layout */
   --max-width: 88rem;
   --entry-info-width: 64rem;

package/lib/ui/dialog/dialog.module.css

@@ -61,11 +61,11 @@
 
 /** Width variation */
 .width--narrow {
-  max-width: 480px;
+  max-width: 360px;
 }
 
 .width--medium {
-  max-width: 748px;
+  max-width: 640px;
 }
 
 .width--wide {
@@ -73,7 +73,7 @@
 }
 
 .width--extra-wide {
-  max-width: var(--max-width);
+  max-width: calc(var(--max-width) + 2 * var(--space-medium));
 }
 
 /** Center variation */

package/lib/ui/skeleton/skeleton.module.css

@@ -1,6 +1,6 @@
 .root {
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
-  opacity: 0.05;
+  background: var(--skeleton-inline-background);
+  opacity: var(--skeleton-opacity);
   pointer-events: none;
   min-width: 6em;
   border-radius: var(--radius-medium);
@@ -14,5 +14,5 @@
 }
 
 .block {
-  background: currentColor;
+  background: var(--skeleton-block-background);
 }

package/lib-esm/components/metrics-table-export/metrics-table-export.js

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { Stack } from '../../layout/stack';
 import { Tabs } from '../../ui/tabs';
 import { PreviewSource } from '../preview-source';
-import css from './metrics-table-export.module.css';
 const generateSourceJSON = (items) => {
     const output = items.map((item) => {
         var _a;
@@ -43,12 +42,12 @@ const SOURCES = [
     {
         label: 'CSV',
         transformFn: generateSourceCSV,
-        extension: '.csv',
+        extension: 'csv',
     },
     {
         label: 'JSON',
         transformFn: generateSourceJSON,
-        extension: '.json',
+        extension: 'json',
     },
 ];
 export const MetricsTableExport = (props) => {
@@ -56,6 +55,6 @@ export const MetricsTableExport = (props) => {
     const [selectedId, setSelectedId] = useState(SOURCES[0].label);
     return (React.createElement(Stack, { space: "small", ...restProps },
         React.createElement(Tabs, null, SOURCES.map((source) => (React.createElement(Tabs.Item, { onClick: () => setSelectedId(source.label), isTabActive: selectedId === source.label, key: source.label }, source.label)))),
-        React.createElement("div", { className: css.panels }, SOURCES.map((source) => selectedId === source.label && (React.createElement(PreviewSource, { source: source.transformFn(items), download: `${download}.${source.extension}`, className: css.panel, key: source.label }))))));
+        React.createElement("div", null, SOURCES.map((source) => selectedId === source.label && (React.createElement(PreviewSource, { source: source.transformFn(items), rows: 20, download: `${download}.${source.extension}`, key: source.label }))))));
 };
 //# sourceMappingURL=metrics-table-export.js.map

package/lib-esm/components/metrics-table-export/metrics-table-export.js.map

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

package/lib-esm/components/preview-source/preview-source.js

@@ -6,13 +6,16 @@ import { ControlGroup } from '../../ui/control-group';
 import { Tooltip } from '../../ui/tooltip';
 import { Textarea } from '../../ui/textarea';
 import css from './preview-source.module.css';
+const DEFAULT_ROWS = 10;
 export const PreviewSource = (props) => {
-    const { className = '', source, download = false, ...restProps } = props;
-    return (React.createElement("div", { className: cx(css.root, className), ...restProps },
-        React.createElement(ControlGroup, { className: css.toolbar },
+    const { className = '', source, rows = DEFAULT_ROWS, download = false, ...restProps } = props;
+    const isEmpty = !source;
+    const rootClassName = cx(css.root, className, isEmpty && css.isEmpty);
+    return (React.createElement("div", { className: rootClassName, ...restProps },
+        source && (React.createElement(ControlGroup, { className: css.toolbar },
             React.createElement(CopyToClipboard, { outline: true, size: "small", text: source }),
             download && (React.createElement(Tooltip, { title: `Download ${download}`, className: css.downloadTooltip },
-                React.createElement(Button, { outline: true, rightGlyph: BUTTON_GLYPHS.DOWNLOAD, size: "small", as: "a", href: `data:application/json,${encodeURIComponent(source)}`, download: download })))),
-        React.createElement(Textarea, { previewSource: true, readOnly: true, rows: 12, className: css.content }, source)));
+                React.createElement(Button, { outline: true, rightGlyph: BUTTON_GLYPHS.DOWNLOAD, size: "small", as: "a", href: `data:application/json,${encodeURIComponent(source)}`, download: download }))))),
+        React.createElement(Textarea, { previewSource: true, readOnly: true, rows: rows, className: css.content }, source)));
 };
 //# sourceMappingURL=preview-source.js.map

package/lib-esm/components/preview-source/preview-source.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview-source.js","sourceRoot":"","sources":["../../../src/components/preview-source/preview-source.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,GAAG,MAAM,6BAA6B,CAAC;AAY9C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEzE,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,KAAM,SAAS;QACpD,oBAAC,YAAY,IAAC,SAAS,EAAE,GAAG,CAAC,OAAO;YAClC,oBAAC,eAAe,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,MAAM,GAAI;YACrD,QAAQ,IAAI,CACX,oBAAC,OAAO,IAAC,KAAK,EAAE,YAAY,QAAQ,EAAE,EAAE,SAAS,EAAE,GAAG,CAAC,eAAe;gBACpE,oBAAC,MAAM,IACL,OAAO,QACP,UAAU,EAAE,aAAa,CAAC,QAAQ,EAClC,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,yBAAyB,kBAAkB,CAAC,MAAM,CAAC,EAAE,EAC3D,QAAQ,EAAE,QAAQ,GAClB,CACM,CACX,CACY;QACf,oBAAC,QAAQ,IAAC,aAAa,QAAC,QAAQ,QAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,CAAC,OAAO,IAC9D,MAAM,CACE,CACP,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"preview-source.js","sourceRoot":"","sources":["../../../src/components/preview-source/preview-source.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,GAAG,MAAM,6BAA6B,CAAC;AAE9C,MAAM,YAAY,GAAG,EAAE,CAAC;AAgBxB,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,IAAI,GAAG,YAAY,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE9F,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC;IACxB,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC;IAEtE,OAAO,CACL,6BAAK,SAAS,EAAE,aAAa,KAAM,SAAS;QACzC,MAAM,IAAI,CACT,oBAAC,YAAY,IAAC,SAAS,EAAE,GAAG,CAAC,OAAO;YAClC,oBAAC,eAAe,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,MAAM,GAAI;YACrD,QAAQ,IAAI,CACX,oBAAC,OAAO,IAAC,KAAK,EAAE,YAAY,QAAQ,EAAE,EAAE,SAAS,EAAE,GAAG,CAAC,eAAe;gBACpE,oBAAC,MAAM,IACL,OAAO,QACP,UAAU,EAAE,aAAa,CAAC,QAAQ,EAClC,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,yBAAyB,kBAAkB,CAAC,MAAM,CAAC,EAAE,EAC3D,QAAQ,EAAE,QAAQ,GAClB,CACM,CACX,CACY,CAChB;QACD,oBAAC,QAAQ,IAAC,aAAa,QAAC,QAAQ,QAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,OAAO,IAChE,MAAM,CACE,CACP,CACP,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/components/preview-source/preview-source.module.css

@@ -7,6 +7,8 @@
   z-index: 2;
   top: var(--space-xsmall);
   right: var(--space-xsmall);
+  background: var(--color-background);
+  border-radius: var(--radius-medium);
 }
 
 /** fix control group with nested components */
@@ -21,8 +23,18 @@
   box-shadow: none;
 }
 
+/** Source content */
 .content {
   position: relative;
   z-index: 1;
   height: 100%;
+  background: var(--color-highlight);
+  color: var(--color-text);
+}
+
+/** Empty / loading state */
+.isEmpty .content {
+  pointer-events: none;
+  background: var(--skeleton-block-background);
+  opacity: var(--skeleton-opacity);
 }

package/lib-esm/css/variables.css

@@ -201,6 +201,10 @@
 
   --outline-hover: 0 0 0 var(--space-xxxsmall) var(--color-highlight);
 
+  --skeleton-inline-background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
+  --skeleton-block-background: currentColor;
+  --skeleton-opacity: 0.06;
+
   /** Layout */
   --max-width: 88rem;
   --entry-info-width: 64rem;

package/lib-esm/ui/dialog/dialog.module.css

@@ -61,11 +61,11 @@
 
 /** Width variation */
 .width--narrow {
-  max-width: 480px;
+  max-width: 360px;
 }
 
 .width--medium {
-  max-width: 748px;
+  max-width: 640px;
 }
 
 .width--wide {
@@ -73,7 +73,7 @@
 }
 
 .width--extra-wide {
-  max-width: var(--max-width);
+  max-width: calc(var(--max-width) + 2 * var(--space-medium));
 }
 
 /** Center variation */

package/lib-esm/ui/skeleton/skeleton.module.css

@@ -1,6 +1,6 @@
 .root {
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
-  opacity: 0.05;
+  background: var(--skeleton-inline-background);
+  opacity: var(--skeleton-opacity);
   pointer-events: none;
   min-width: 6em;
   border-radius: var(--radius-medium);
@@ -14,5 +14,5 @@
 }
 
 .block {
-  background: currentColor;
+  background: var(--skeleton-block-background);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.16.0-beta.3",
+  "version": "4.16.0-beta.5",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -74,7 +74,7 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.16.0-beta.3",
+    "@bundle-stats/utils": "^4.16.0-beta.5",
     "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": "192202fe9951efa05865b4421e69c9e577d2d6cc"
+  "gitHead": "b61ff19f9bbf4476a2fdbf2bcf11a714c79431ed"
 }

package/src/components/metrics-table-export/metrics-table-export.tsx

@@ -5,7 +5,6 @@ import type { ReportMetricRow } from '@bundle-stats/utils';
 import { Stack } from '../../layout/stack';
 import { Tabs } from '../../ui/tabs';
 import { PreviewSource } from '../preview-source';
-import css from './metrics-table-export.module.css';
 
 const generateSourceJSON = (items: Array<ReportMetricRow>): string => {
   const output = items.map((item) => ({
@@ -54,12 +53,12 @@ const SOURCES = [
   {
     label: 'CSV',
     transformFn: generateSourceCSV,
-    extension: '.csv',
+    extension: 'csv',
   },
   {
     label: 'JSON',
     transformFn: generateSourceJSON,
-    extension: '.json',
+    extension: 'json',
   },
 ];
 
@@ -85,14 +84,14 @@ export const MetricsTableExport = (props: MetricsTableExportProps) => {
           </Tabs.Item>
         ))}
       </Tabs>
-      <div className={css.panels}>
+      <div>
         {SOURCES.map(
           (source) =>
             selectedId === source.label && (
               <PreviewSource
                 source={source.transformFn(items)}
+                rows={20}
                 download={`${download}.${source.extension}`}
-                className={css.panel}
                 key={source.label}
               />
           ),

package/src/components/preview-source/preview-source.module.css

@@ -7,6 +7,8 @@
   z-index: 2;
   top: var(--space-xsmall);
   right: var(--space-xsmall);
+  background: var(--color-background);
+  border-radius: var(--radius-medium);
 }
 
 /** fix control group with nested components */
@@ -21,8 +23,18 @@
   box-shadow: none;
 }
 
+/** Source content */
 .content {
   position: relative;
   z-index: 1;
   height: 100%;
+  background: var(--color-highlight);
+  color: var(--color-text);
+}
+
+/** Empty / loading state */
+.isEmpty .content {
+  pointer-events: none;
+  background: var(--skeleton-block-background);
+  opacity: var(--skeleton-opacity);
 }

package/src/components/preview-source/preview-source.stories.tsx

@@ -33,3 +33,9 @@ export const Default: Story = {
     download: 'bundle-stats--assets.json',
   },
 };
+
+export const Empty: Story = {
+  args: {
+    download: 'bundle-stats--assets.json',
+  },
+};

package/src/components/preview-source/preview-source.tsx

@@ -9,8 +9,14 @@ import { Tooltip } from '../../ui/tooltip';
 import { Textarea } from '../../ui/textarea';
 import css from './preview-source.module.css';
 
+const DEFAULT_ROWS = 10;
+
 type PreviewSourceProps = {
-  source: string;
+  source?: string;
+  /**
+   * Textarea rows
+   */
+  rows?: number;
   /**
    * Link download attribute
    * @example
@@ -20,26 +26,31 @@ type PreviewSourceProps = {
 } & ComponentProps<'div'>;
 
 export const PreviewSource = (props: PreviewSourceProps) => {
-  const { className = '', source, download = false, ...restProps } = props;
+  const { className = '', source, rows = DEFAULT_ROWS, download = false, ...restProps } = props;
+
+  const isEmpty = !source;
+  const rootClassName = cx(css.root, className, isEmpty && css.isEmpty);
 
   return (
-    <div className={cx(css.root, className)} {...restProps}>
-      <ControlGroup className={css.toolbar}>
-        <CopyToClipboard outline size="small" text={source} />
-        {download && (
-          <Tooltip title={`Download ${download}`} className={css.downloadTooltip}>
-            <Button
-              outline
-              rightGlyph={BUTTON_GLYPHS.DOWNLOAD}
-              size="small"
-              as="a"
-              href={`data:application/json,${encodeURIComponent(source)}`}
-              download={download}
-            />
-          </Tooltip>
-        )}
-      </ControlGroup>
-      <Textarea previewSource readOnly rows={12} className={css.content}>
+    <div className={rootClassName} {...restProps}>
+      {source && (
+        <ControlGroup className={css.toolbar}>
+          <CopyToClipboard outline size="small" text={source} />
+          {download && (
+            <Tooltip title={`Download ${download}`} className={css.downloadTooltip}>
+              <Button
+                outline
+                rightGlyph={BUTTON_GLYPHS.DOWNLOAD}
+                size="small"
+                as="a"
+                href={`data:application/json,${encodeURIComponent(source)}`}
+                download={download}
+              />
+            </Tooltip>
+          )}
+        </ControlGroup>
+      )}
+      <Textarea previewSource readOnly rows={rows} className={css.content}>
         {source}
       </Textarea>
     </div>

package/src/css/variables.css

@@ -201,6 +201,10 @@
 
   --outline-hover: 0 0 0 var(--space-xxxsmall) var(--color-highlight);
 
+  --skeleton-inline-background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
+  --skeleton-block-background: currentColor;
+  --skeleton-opacity: 0.06;
+
   /** Layout */
   --max-width: 88rem;
   --entry-info-width: 64rem;

package/src/ui/dialog/dialog.module.css

@@ -61,11 +61,11 @@
 
 /** Width variation */
 .width--narrow {
-  max-width: 480px;
+  max-width: 360px;
 }
 
 .width--medium {
-  max-width: 748px;
+  max-width: 640px;
 }
 
 .width--wide {
@@ -73,7 +73,7 @@
 }
 
 .width--extra-wide {
-  max-width: var(--max-width);
+  max-width: calc(var(--max-width) + 2 * var(--space-medium));
 }
 
 /** Center variation */

package/src/ui/skeleton/skeleton.module.css

@@ -1,6 +1,6 @@
 .root {
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
-  opacity: 0.05;
+  background: var(--skeleton-inline-background);
+  opacity: var(--skeleton-opacity);
   pointer-events: none;
   min-width: 6em;
   border-radius: var(--radius-medium);
@@ -14,5 +14,5 @@
 }
 
 .block {
-  background: currentColor;
+  background: var(--skeleton-block-background);
 }

package/types/components/preview-source/preview-source.d.ts

@@ -1,7 +1,8 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
 type PreviewSourceProps = {
-    source: string;
+    source?: string;
+    rows?: number;
     download?: string;
 } & ComponentProps<'div'>;
 export declare const PreviewSource: (props: PreviewSourceProps) => React.JSX.Element;

package/lib/components/metrics-table-export/metrics-table-export.module.css

@@ -1,8 +0,0 @@
-.panels {
-}
-
-.panel {
-  min-height: 320px;
-  height: 60vh;
-  max-height: 480px;
-}

package/lib-esm/components/metrics-table-export/metrics-table-export.module.css

@@ -1,8 +0,0 @@
-.panels {
-}
-
-.panel {
-  min-height: 320px;
-  height: 60vh;
-  max-height: 480px;
-}

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

@@ -1,8 +0,0 @@
-.panels {
-}
-
-.panel {
-  min-height: 320px;
-  height: 60vh;
-  max-height: 480px;
-}