@bundle-stats/ui 4.4.2 → 4.5.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.4.2",
+  "version": "4.5.0-beta.1",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -76,11 +76,11 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.4.2",
+    "@bundle-stats/utils": "^4.5.0-beta.1",
     "ariakit": "2.0.0-next.44",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.3",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "0c227cc1fbf945e5e710f27ad77c70e7c3507bca"
+  "gitHead": "69b774bd837c26a5e9f170fa740a7b9ff25e61f9"
 }

package/src/assets/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>

package/src/assets/icons/chevron-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up"><path d="m18 15-6-6-6 6"/></svg>

package/src/assets/icons.svg

@@ -1,20 +1,26 @@
 <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" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
+<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" class="feather feather-arrow-right-circle" viewBox="0 0 24 24" id="arrow-right-circle" xmlns="http://www.w3.org/2000/svg">
+<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 16l4-4-4-4M8 12h8"/>
 </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">
+<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 9l6 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 15l-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" class="feather feather-x-circle" viewBox="0 0 24 24" id="close" xmlns="http://www.w3.org/2000/svg">
+<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 9l-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">
+<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>
@@ -22,16 +28,16 @@
 <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">
+<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 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 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">
+<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 0112.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">
+<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 015.83 1c0 2-3 3-3 3M12 17h.01"/>
 </symbol>
@@ -39,7 +45,7 @@
 <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">
+<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">
@@ -51,7 +57,7 @@
 <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
 <path d="M0 0h24v24H0z" fill="none"/>
 </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">
+<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.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"/>
 </symbol>
 </svg>

package/src/assets/icons.svg.jsx

@@ -9,7 +9,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-arrow-down"
       id="arrow"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -21,7 +20,6 @@ export const SvgIcons = (props) => (
       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"
@@ -29,6 +27,30 @@ export const SvgIcons = (props) => (
       <circle cx="12" cy="12" r="10" />
       <path d="M12 16l4-4-4-4M8 12h8" />
     </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 9l6 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 15l-6-6-6 6" />
+    </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
@@ -36,7 +58,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-clock"
       id="clock"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -49,7 +70,6 @@ export const SvgIcons = (props) => (
       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"
@@ -64,7 +84,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-git-commit"
       id="commit"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -90,7 +109,6 @@ export const SvgIcons = (props) => (
       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"
@@ -104,7 +122,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-bar-chart"
       id="filter"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -125,7 +142,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-help-circle"
       id="help"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -152,7 +168,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-menu"
       id="menu"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -183,7 +198,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-alert-triangle"
       id="warning"
       xmlns="http://www.w3.org/2000/svg"
     >

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

@@ -19,7 +19,6 @@ import { FileName } from '../../ui/file-name';
 import { HoverCard } from '../../ui/hover-card';
 import { Tag } from '../../ui/tag';
 import { Filters } from '../../ui/filters';
-import { SortDropdown } from '../../ui/sort-dropdown';
 import { EmptySet } from '../../ui/empty-set';
 import { Toolbar } from '../../ui/toolbar';
 import { AssetInfo } from '../asset-info';
@@ -170,7 +169,6 @@ export const BundleAssets = (props) => {
     filters,
     entryId,
     hasActiveFilters,
-    sortFields,
     sort,
     updateSort,
     search,
@@ -221,7 +219,6 @@ export const BundleAssets = (props) => {
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-              <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -252,6 +249,8 @@ export const BundleAssets = (props) => {
             emptyMessage={emptyMessage}
             showHeaderSum
             title={metricsTableTitle}
+            sort={sort}
+            updateSort={updateSort}
           />
         </main>
       </section>
@@ -313,12 +312,6 @@ BundleAssets.propTypes = {
   }).isRequired,
   entryId: PropTypes.string,
   hasActiveFilters: PropTypes.bool,
-  sortFields: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      label: PropTypes.string,
-      defaultDirection: PropTypes.bool,
-    }),
-  }).isRequired,
   search: PropTypes.string.isRequired,
   updateSearch: PropTypes.func.isRequired,
   sort: PropTypes.shape({

package/src/components/bundle-assets/bundle-assets.utils.js

@@ -1,7 +1,5 @@
 import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
 
-import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-assets.constants';
-
 export const addRowAssetFlags = (row) => {
   const { runs } = row;
 
@@ -72,25 +70,11 @@ export const getRowFilter = (filters) => (item) => {
   return true;
 };
 
-export const getCustomSort = (sortId) => (item) => {
-  if (sortId === SORT_BY_NAME) {
-    return item.key;
-  }
-
-  if (sortId === SORT_BY_DELTA) {
-    return item?.runs?.[0]?.delta ? Math.abs(item.runs[0].delta) : 0;
-  }
-
-  if (sortId === SORT_BY_SIZE) {
-    return item?.runs?.[0]?.value || 0;
-  }
-
-  return [
-    !item.isNotPredictive,
-    !item.changed,
-    !item.isInitial,
-    !item.isEntry,
-    !item.isChunk,
-    item.key,
-  ];
-};
+export const getCustomSort = (item) => [
+  !item.isNotPredictive,
+  !item.changed,
+  !item.isInitial,
+  !item.isEntry,
+  !item.isChunk,
+  item.key,
+];

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

@@ -12,7 +12,6 @@ import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
 import { addRowAssetFlags, addRowIsNotPredictive, getRowFilter, getCustomSort } from './bundle-assets.utils';
-import { SORT_BY } from './bundle-assets.constants';
 
 export const BundleAssets = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
@@ -55,7 +54,6 @@ export const BundleAssets = (props) => {
 
   const sortParams = useRowsSort({
     rows: filteredRows,
-    sortFields: SORT_BY,
     sortBy,
     sortDirection: direction,
     getCustomSort,

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

@@ -21,7 +21,6 @@ import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
-import { SortDropdown } from '../../ui/sort-dropdown';
 import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
@@ -125,7 +124,6 @@ export const BundleModules = ({
   resetAllFilters,
   filters,
   entryId,
-  sortFields,
   sort,
   updateSort,
   search,
@@ -179,12 +177,6 @@ export const BundleModules = ({
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-              <SortDropdown
-                className={css.tableDropdown}
-                fields={sortFields}
-                onChange={updateSort}
-                {...sort}
-              />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -216,6 +208,8 @@ export const BundleModules = ({
           emptyMessage={emptyMessage}
           showHeaderSum
           title={metricsTableTitle}
+          sort={sort}
+          updateSort={updateSort}
         />
       </div>
       {entryId && (
@@ -277,12 +271,6 @@ BundleModules.propTypes = {
 
   hasActiveFilters: PropTypes.bool,
 
-  sortFields: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      label: PropTypes.string,
-      defaultDirection: PropTypes.bool,
-    }),
-  }).isRequired,
   sort: PropTypes.shape({
     sortBy: PropTypes.string,
     direction: PropTypes.string,

package/src/components/bundle-modules/bundle-modules.utils.js

@@ -11,8 +11,6 @@ import {
   getModuleSourceFileType,
 } from '@bundle-stats/utils';
 
-import { SORT_BY_NAME, SORT_BY_SIZE, SORT_BY_DELTA } from './bundle-modules.constants';
-
 export const addRowFlags = (row) => {
   const { key, runs } = row;
 
@@ -28,21 +26,7 @@ export const addRowFlags = (row) => {
   return row;
 };
 
-export const getCustomSort = (sortBy) => (item) => {
-  if (sortBy === SORT_BY_NAME) {
-    return item.key;
-  }
-
-  if (sortBy === SORT_BY_SIZE) {
-    return item?.runs?.[0]?.value || 0;
-  }
-
-  if (sortBy === SORT_BY_DELTA) {
-    return item?.runs?.[0]?.delta ? Math.abs(item.runs[0].delta) : 0;
-  }
-
-  return [!item.changed, item.key];
-};
+export const getCustomSort = (item) => [!item.changed, item.key];
 
 export const getRowFilter = (filters) => (row) => {
   // Skip not changed rows

package/src/components/bundle-modules/index.jsx

@@ -19,7 +19,6 @@ import {
   getCustomSort,
   useModuleFilterByChunk,
 } from './bundle-modules.utils';
-import { SORT_BY } from './bundle-modules.constants';
 
 export const BundleModules = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
@@ -88,9 +87,8 @@ export const BundleModules = (props) => {
 
   const sortParams = useRowsSort({
     rows: filteredRows,
-    sortFields: SORT_BY,
-    sortBy,
-    sortDirection: direction,
+    fieldPath: sortBy,
+    direction,
     getCustomSort,
   });
 

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

@@ -8,7 +8,6 @@ import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
-import { SortDropdown } from '../../ui/sort-dropdown';
 import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { ComponentLink } from '../component-link';
@@ -117,7 +116,6 @@ export const BundlePackages = (props) => {
     resetAllFilters,
     totalRowCount,
     filters,
-    sortFields,
     sort,
     updateSort,
     search,
@@ -178,7 +176,6 @@ export const BundlePackages = (props) => {
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-              <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -209,6 +206,8 @@ export const BundlePackages = (props) => {
             renderRowHeader={renderRowHeader}
             showHeaderSum
             title={metricsTableTitle}
+            sort={sort}
+            updateSort={updateSort}
           />
         </main>
       </section>
@@ -259,12 +258,6 @@ BundlePackages.propTypes = {
     changed: PropTypes.bool,
   }).isRequired,
   hasActiveFilters: PropTypes.bool,
-  sortFields: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      label: PropTypes.string,
-      defaultDirection: PropTypes.bool,
-    }),
-  }).isRequired,
   sort: PropTypes.shape({
     sortBy: PropTypes.string,
     direction: PropTypes.string,

package/src/components/bundle-packages/bundle-packages.utils.js

@@ -1,8 +1,6 @@
 import uniq from 'lodash/uniq';
 import { PACKAGE_FILTERS } from '@bundle-stats/utils';
 
-import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-packages.constants';
-
 // Get a list of duplicate packages across jobs
 export const getDuplicatePackages = (jobs) => {
   const jobsDuplicatePackages = jobs.map((job) => {
@@ -25,21 +23,7 @@ export const getRowFilter = (filters) => (item) => {
   return true;
 };
 
-export const getCustomSort = (sortId) => (item) => {
-  if (sortId === SORT_BY_NAME) {
-    return item.key;
-  }
-
-  if (sortId === SORT_BY_DELTA) {
-    return item?.runs?.[0]?.delta ? Math.abs(item.runs[0].delta) : 0;
-  }
-
-  if (sortId === SORT_BY_SIZE) {
-    return item?.runs?.[0]?.value || 0;
-  }
-
-  return [!item.changed, item.key];
-};
+export const getCustomSort = (item) => [!item.changed, item.key];
 
 export const getAddRowDuplicateFlag = (duplicateJobs) => (row) => ({
   ...row,

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

@@ -6,7 +6,6 @@ import * as webpack from '@bundle-stats/utils/lib-esm/webpack/compare';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
-import { SORT_BY } from './bundle-packages.constants';
 import { BundlePackages as BundlePackagesComponent } from './bundle-packages';
 import { getDuplicatePackages, getAddRowDuplicateFlag, getRowFilter, getCustomSort } from './bundle-packages.utils';
 
@@ -50,9 +49,8 @@ export const BundlePackages = (props) => {
 
   const sortParams = useRowsSort({
     rows: filteredRows,
-    sortFields: SORT_BY,
-    sortBy,
-    sortDirection: direction,
+    fieldPath: sortBy,
+    direction,
     getCustomSort,
   });
 

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

@@ -30,6 +30,7 @@
   /** space for close icon */
   padding-right: calc(var(--space-medium) + var(--space-xxxsmall) + var(--space-xsmall));
   border-bottom: 1px solid var(--color-outline);
+  background: var(--color-highlight);
 }
 
 .headerClose {
@@ -67,10 +68,6 @@
   font-size: var(--size-small);
 }
 
-.runs .runsCell {
-  padding: var(--space-xxxsmall) var(--space-xxsmall);
-}
-
 .runs .runsColJob {
   white-space: nowrap;
 }
@@ -88,6 +85,7 @@
 }
 
 .metaLabel {
-  margin-right: .6em;
-  color: var(--color-text-light);
+  display: inline-block;
+  margin-right: var(--space-xxxsmall);
+  min-width: 5em;
 }

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

@@ -71,29 +71,28 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
         <Stack space="small">
           {tags && <div>{tags}</div>}
 
-          <Stack space="xxxsmall">
-            <h3 className={css.label}>
-              <FileName as="code" name={itemTitle || item.label} className={css.fileName} />
-            </h3>
+          <h3 className={css.label}>
+            <FileName as="code" name={itemTitle || item.label} className={css.fileName} />
+          </h3>
 
-            <RunInfo
-              current={metricRunInfo.displayValue}
-              delta={metricRunInfo.displayDeltaPercentage}
-              deltaType={metricRunInfo.deltaType}
-              baseline={baselineRun?.displayValue || '0B'}
-              size="large"
-            />
-          </Stack>
+          <RunInfo
+            current={metricRunInfo.displayValue}
+            delta={metricRunInfo.displayDeltaPercentage}
+            deltaPercentage={metricRunInfo.displayDelta}
+            deltaType={metricRunInfo.deltaType}
+            baseline={baselineRun?.displayValue || '0B'}
+            size="large"
+          />
         </Stack>
         <button type="button" onClick={onClose} className={css.headerClose}>
-          <Icon glyph={Icon.ICONS.CLOSE} />
+          <Icon glyph={Icon.ICONS.CLOSE} size="large" />
         </button>
       </Box>
       <Box padding="small" as="main" className={css.contentWrapper}>
         <Stack space="small" className={css.content}>
           {children}
 
-          <Table outline className={css.runs}>
+          <Table outline compact className={css.runs}>
             <Table.THead>
               <Table.Tr>
                 <Table.Th className={cx(css.runsCell, css.runsColJob)}>&nbsp;</Table.Th>