@bundle-stats/ui 4.15.1 → 4.16.0-beta.1

package/src/assets/icons.svg

@@ -1,72 +1,86 @@
 <svg width="0" height="0" style="position:absolute">
-  <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="arrow" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 5v14M19 12l-7 7-7-7"/>
-  </symbol>
-  <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="arrow-right-circle" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="12" cy="12" r="10"/>
-  <path d="m12 16 4-4-4-4M8 12h8"/>
-  </symbol>
-  <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="check" xmlns="http://www.w3.org/2000/svg">
-  <path d="M20 6 9 17l-5-5"/>
-  </symbol>
-  <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="chevron-down" xmlns="http://www.w3.org/2000/svg">
-  <path d="m6 9 6 6 6-6"/>
-  </symbol>
-  <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="chevron-up" xmlns="http://www.w3.org/2000/svg">
-  <path d="m18 15-6-6-6 6"/>
-  </symbol>
-  <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="clock" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="12" cy="12" r="10"/>
-  <path d="M12 6v6l4 2"/>
-  </symbol>
-  <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="close" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="12" cy="12" r="10"/>
-  <path d="m15 9-6 6M9 9l6 6"/>
-  </symbol>
-  <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="commit" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="12" cy="12" r="4"/>
-  <path d="M1.05 12H7M17.01 12h5.95"/>
-  </symbol>
-  <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="error" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="12" cy="12" r="10"/>
-  <path d="M12 8v4M12 16h.01"/>
-  </symbol>
-  <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="external-link" xmlns="http://www.w3.org/2000/svg">
-  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/>
-  </symbol>
-  <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="filter" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 20V10M18 20V4M6 20v-4"/>
-  </symbol>
-  <symbol viewBox="0 0 98 96" id="github" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/>
-  </symbol>
-  <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="help" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="12" cy="12" r="10"/>
-  <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/>
-  </symbol>
-  <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="info" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="12" cy="12" r="10"/>
-  <path d="M12 16v-4M12 8h.01"/>
-  </symbol>
-  <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="menu" xmlns="http://www.w3.org/2000/svg">
-  <path d="M3 12h18M3 6h18M3 18h18"/>
-  </symbol>
-  <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="more-vertical" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="12" cy="12" r="1"/>
-  <circle cx="12" cy="5" r="1"/>
-  <circle cx="12" cy="19" r="1"/>
-  </symbol>
-  <symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg">
-  <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
-  <path d="M0 0h24v24H0z" fill="none"/>
-  </symbol>
-  <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="table" xmlns="http://www.w3.org/2000/svg">
-  <path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/>
-  </symbol>
-  <symbol fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" id="treemap" xmlns="http://www.w3.org/2000/svg">
-  <path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 21h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9M12.025 3.422 12 20.652ZM12.85 9l7.347.025zm-.153 6 7.576.025zm4.334.764L17 20.326Z"/>
-  </symbol>
-  <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="warning" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01"/>
-  </symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5v14M19 12l-7 7-7-7"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle" viewBox="0 0 24 24" id="arrow-right-circle" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="m12 16 4-4-4-4M8 12h8"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="check" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 6 9 17l-5-5"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" viewBox="0 0 24 24" id="chevron-down" xmlns="http://www.w3.org/2000/svg">
+<path d="m6 9 6 6 6-6"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up" viewBox="0 0 24 24" id="chevron-up" xmlns="http://www.w3.org/2000/svg">
+<path d="m18 15-6-6-6 6"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" id="clipboard" xmlns="http://www.w3.org/2000/svg">
+<rect width="8" height="4" x="8" y="2" rx="1" ry="1"/>
+<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" id="clipboard-check" xmlns="http://www.w3.org/2000/svg">
+<rect width="8" height="4" x="8" y="2" rx="1" ry="1"/>
+<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
+<path d="m9.277 15.145 2 2 4-4"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" id="clock" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M12 6v6l4 2"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle" viewBox="0 0 24 24" id="close" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="m15 9-6 6M9 9l6 6"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="4"/>
+<path d="M1.05 12H7M17.01 12h5.95"/>
+</symbol>
+<symbol fill="currentColor" viewBox="0 0 24 24" id="download" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0h24v24H0z" fill="none"/>
+<path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="error" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M12 8v4M12 16h.01"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link" viewBox="0 0 24 24" id="external-link" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 20V10M18 20V4M6 20v-4"/>
+</symbol>
+<symbol viewBox="0 0 98 96" id="github" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="info" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M12 16v-4M12 8h.01"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu" id="menu" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12h18M3 6h18M3 18h18"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="more-vertical" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="1"/>
+<circle cx="12" cy="5" r="1"/>
+<circle cx="12" cy="19" r="1"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
+<path d="M0 0h24v24H0z" fill="none"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="table" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" id="treemap" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 21h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9M12.025 3.422 12 20.652ZM12.85 9l7.347.025zm-.153 6 7.576.025zm4.334.764L17 20.326Z"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01"/>
+</symbol>
 </svg>
+

package/src/assets/icons.svg.jsx

@@ -63,6 +63,33 @@ export const SvgIcons = (props) => (
     >
       <path d="m18 15-6-6-6 6" />
     </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      id="clipboard"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
+      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+    </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      id="clipboard-check"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
+      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+      <path d="m9.277 15.145 2 2 4-4" />
+    </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
@@ -102,6 +129,15 @@ export const SvgIcons = (props) => (
       <circle cx="12" cy="12" r="4" />
       <path d="M1.05 12H7M17.01 12h5.95" />
     </symbol>
+    <symbol
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      id="download"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z" />
+    </symbol>
     <symbol
       fill="none"
       stroke="currentColor"

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

@@ -19,6 +19,7 @@ import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
+import { Dialog, useDialogState } from '../../ui/dialog';
 import { Icon } from '../../ui/icon';
 import { InputSearch } from '../../ui/input-search';
 import { FileName } from '../../ui/file-name';
@@ -32,6 +33,7 @@ import { AssetInfo } from '../asset-info';
 import { AssetNotPredictive } from '../asset-not-predictive';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTableExport } from '../metrics-table-export';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
@@ -313,6 +315,12 @@ export const BundleAssets = (props) => {
     return allItems.find(({ key }) => key === entryId);
   }, [allItems, entryId]);
 
+  const exportDialog = useDialogState();
+
+  const handleExportClick = useCallback(() => {
+    exportDialog.toggle();
+  }, []);
+
   return (
     <>
       <Stack space="xsmall" as="section" className={cx(css.root, className)}>
@@ -326,8 +334,9 @@ export const BundleAssets = (props) => {
                 onSelect={setDisplayType}
               />
               <MetricsTableOptions
-                handleViewAll={resetAllFilters}
-                handleResetFilters={resetFilters}
+                onViewAllClick={resetAllFilters}
+                onResetClick={resetFilters}
+                onExportClick={handleExportClick}
               />
             </FlexStack>
           )}
@@ -385,6 +394,10 @@ export const BundleAssets = (props) => {
           onClose={hideEntryInfo}
         />
       )}
+
+      <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
+        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--assets"/>}
+      </Dialog>
     </>
   );
 };

package/src/components/bundle-assets-totals/bundle-assets-totals.jsx

@@ -15,12 +15,16 @@ import { Toolbar } from '../../ui/toolbar';
 import { Table } from '../../ui/table';
 import { Box } from '../../layout/box';
 import { Stack } from '../../layout/stack';
+import { Dialog, useDialogState } from '../../ui/dialog';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTable } from '../metrics-table';
-import { MetricsTableTitle } from '../metrics-table-title';
+import { MetricsTableExport } from '../metrics-table-export';
 import { MetricsTableHeader } from '../metrics-table-header';
+import { MetricsTableOptions } from '../metrics-table-options';
+import { MetricsTableTitle } from '../metrics-table-title';
 import { MetricsTreemap, getTreemapNodes } from '../metrics-treemap';
 import { ComponentLink } from '../component-link';
+import { FlexStack } from '../../layout';
 
 const metricsTableTitle = (
   <MetricsTableTitle
@@ -68,42 +72,57 @@ export const BundleAssetsTotals = ({
     [history],
   );
 
+  const exportDialog = useDialogState();
+
+  const handleExportClick = useCallback(() => {
+    exportDialog.toggle();
+  }, []);
+
   return (
-    <Stack space="xsmall" as="section" className={className}>
-      <Toolbar
-        renderActions={() => (
-          <MetricsDisplaySelector onSelect={setDisplayType} value={displayType.value} />
-        )}
-      />
-      <Box outline as="main">
-        {displayType.value === MetricsDisplayType.TABLE && (
-          <MetricsTable
-            title={metricsTableTitle}
-            runs={jobs}
-            items={items}
-            renderRowHeader={renderRowHeader}
-            showHeaderSum
-            {...restProps}
-          />
-        )}
-        {displayType.value === MetricsDisplayType.TREEMAP && (
-          <>
-            <Table compact>
-              <MetricsTableHeader
-                metricTitle={metricsTableTitle}
-                showSum
-                jobs={jobs}
-                rows={items}
-              />
-            </Table>
-            <MetricsTreemap
-              treeNodes={getTreemapNodes(items)}
-              onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
+    <>
+      <Stack space="xsmall" as="section" className={className}>
+        <Toolbar
+          renderActions={() => (
+            <FlexStack space="xxsmall">
+              <MetricsDisplaySelector onSelect={setDisplayType} value={displayType.value} />
+              <MetricsTableOptions onExportClick={handleExportClick} />
+            </FlexStack>
+          )}
+        />
+        <Box outline as="main">
+          {displayType.value === MetricsDisplayType.TABLE && (
+            <MetricsTable
+              title={metricsTableTitle}
+              runs={jobs}
+              items={items}
+              renderRowHeader={renderRowHeader}
+              showHeaderSum
+              {...restProps}
             />
-          </>
-        )}
-      </Box>
-    </Stack>
+          )}
+          {displayType.value === MetricsDisplayType.TREEMAP && (
+            <>
+              <Table compact>
+                <MetricsTableHeader
+                  metricTitle={metricsTableTitle}
+                  showSum
+                  jobs={jobs}
+                  rows={items}
+                />
+              </Table>
+              <MetricsTreemap
+                treeNodes={getTreemapNodes(items)}
+                onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
+              />
+            </>
+          )}
+        </Box>
+      </Stack>
+
+      <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
+        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--totals" />}
+      </Dialog>
+    </>
   );
 };
 

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

@@ -13,6 +13,7 @@ import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Button } from '../../ui/button';
 import { ControlGroup } from '../../ui/control-group';
+import { Dialog, useDialogState } from '../../ui/dialog';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
@@ -23,6 +24,7 @@ import { Toolbar } from '../../ui/toolbar';
 import { Tooltip } from '../../ui/tooltip';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTableExport } from '../metrics-table-export';
 import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
 import { MetricsTableOptions } from '../metrics-table-options';
@@ -252,6 +254,12 @@ export const BundleModules = (props: BundleModulesProps) => {
     return allItems.find(({ key }) => key === entryId);
   }, [allItems, entryId]);
 
+  const exportDialog = useDialogState();
+
+  const handleExportClick = useCallback(() => {
+    exportDialog.toggle();
+  }, []);
+
   return (
     <>
       <Stack space="xsmall" as="section" className={rootClassName}>
@@ -266,8 +274,9 @@ export const BundleModules = (props: BundleModulesProps) => {
                 groups={DISPLAY_TYPE_GROUPS}
               />
               <MetricsTableOptions
-                handleViewAll={resetAllFilters}
-                handleResetFilters={resetFilters}
+                onViewAllClick={resetAllFilters}
+                onResetClick={resetFilters}
+                onExportClick={handleExportClick}
               />
             </FlexStack>
           )}
@@ -363,6 +372,10 @@ export const BundleModules = (props: BundleModulesProps) => {
           onClose={hideEntryInfo}
         />
       )}
+
+      <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
+        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--modules"/>}
+      </Dialog>
     </>
   );
 };

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

@@ -9,6 +9,7 @@ import I18N from '../../i18n';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
+import { Dialog, useDialogState } from '../../ui/dialog';
 import { InputSearch } from '../../ui/input-search';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
@@ -17,6 +18,7 @@ import { Table } from '../../ui/table';
 import { Toolbar } from '../../ui/toolbar';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTableExport } from '../metrics-table-export';
 import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
@@ -261,6 +263,12 @@ export const BundlePackages = (props) => {
     return allItems.find(({ key }) => key === entryId)
   }, [allItems, entryId]);
 
+  const exportDialog = useDialogState();
+
+  const handleExportClick = useCallback(() => {
+    exportDialog.toggle();
+  }, []);
+
   return (
     <>
       <Stack space="xsmall" as="section" className={cx(css.root, className)}>
@@ -270,8 +278,9 @@ export const BundlePackages = (props) => {
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
               <MetricsDisplaySelector onSelect={setDisplayType} value={displayType.value} groupBy={displayType.groupBy} groups={DISPLAY_TYPE_GROUPS} />
               <MetricsTableOptions
-                handleViewAll={resetAllFilters}
-                handleResetFilters={resetFilters}
+                onViewAllClick={resetAllFilters}
+                onResetClick={resetFilters}
+                onExportClick={handleExportClick}
               />
             </FlexStack>
           )}
@@ -327,6 +336,10 @@ export const BundlePackages = (props) => {
           onClose={hideEntryInfo}
         />
       )}
+
+      <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
+        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--packages"/>}
+      </Dialog>
     </>
   );
 };

package/src/components/entry-info/entry-info.module.css

@@ -28,7 +28,7 @@
 /** header */
 .header {
   /** space for close icon */
-  padding-right: calc(var(--space-medium) + var(--space-xxxsmall) + var(--space-xsmall));
+  padding-right: calc(var(--space-xlarge) + var(--space-xxxsmall) + var(--space-xsmall));
   border-bottom: 1px solid var(--color-outline);
 }
 

package/src/components/entry-info/entry-info.tsx

@@ -6,6 +6,7 @@ import type { MetricRunInfo, ReportMetricRow } from '@bundle-stats/utils';
 import { METRIC_TYPE_CONFIGS, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { Box } from '../../layout/box';
+import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { FileName } from '../../ui/file-name';
 import { Button } from '../../ui/button';
@@ -14,7 +15,7 @@ import { Table } from '../../ui/table';
 import { RunInfo } from '../run-info';
 import * as I18N from './entry-info.i18n';
 import css from './entry-info.module.css';
-import { Tooltip } from '../../ui';
+import { CopyToClipboard, Tooltip } from '../../ui';
 
 interface EntryInfoMetaLinkProps {
   as?: ElementType;
@@ -102,10 +103,10 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
     <Portal className={cx(css.root, className)}>
       <Box padding="medium" as="header" className={css.header}>
         <Stack space="small">
-          <h3 className={css.label}>
+          <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.label}>
             <FileName as="code" name={itemTitle || item.label} className={css.fileName} />
-          </h3>
-
+            <CopyToClipboard text={item.label} size="small" />
+          </FlexStack>
           <div>{renderRunInfo(item)}</div>
         </Stack>
         <Button
@@ -135,6 +136,7 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
             <Table.TBody>
               {item.runs.map((run, index) => {
                 const key = `info-${run?.name || index}-${index}`;
+                const rowRun = run as any;
 
                 return (
                   <Table.Tr key={key}>
@@ -142,11 +144,23 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
                       {labels[index]}
                     </Table.Th>
                     <Table.Td className={cx(css.runsCell, css.runsColName)}>
-                      <FileName
-                        className={css.fileName}
-                        as="code"
-                        name={(run as any)?.[runNameSelector] || '-'}
-                      />
+                      {rowRun?.[runNameSelector] ? (
+                        <FlexStack
+                          space="xxxsmall"
+                          alignItems="center"
+                          as="h3"
+                          className={css.label}
+                        >
+                          <FileName
+                            as="code"
+                            name={rowRun[runNameSelector]}
+                            className={css.fileName}
+                          />
+                          <CopyToClipboard text={item.label} size="small" />
+                        </FlexStack>
+                      ) : (
+                        '-'
+                      )}
                     </Table.Td>
                     <Table.Td className={cx(css.runsCell, css.runsColSize)}>
                       <span className={css.size}>

package/src/components/metrics-table-export/index.ts

@@ -0,0 +1 @@
+export * from './metrics-table-export';

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

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

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { MetricsTableExport } from '.';
+
+const meta: Meta<typeof MetricsTableExport> = {
+  title: 'Components/MetricsTableExport',
+  component: MetricsTableExport,
+  decorators: [getWrapperDecorator()],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ITEMS = [
+  {
+    label: 'Hey',
+    runs: [
+      { value: 1, name: 'a' },
+      { value: 2, name: 'b' },
+    ],
+  },
+];
+
+export const Default: Story = {
+  args: {
+    items: ITEMS,
+  },
+};