@bundle-stats/ui 3.2.7-beta.3 → 3.2.9-beta.1

package/lib-esm/app/app.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
 import { COMPONENT } from '@bundle-stats/utils';
@@ -59,17 +59,121 @@ Layout.defaultProps = {
   jobs: null,
   version: null
 };
+const JobsContext = /*#__PURE__*/React.createContext({
+  jobs: []
+});
 
-const AppComponent = _ref2 => {
+const JobsProvider = _ref2 => {
   let {
-    version,
-    jobs
+    jobs,
+    ...restProps
   } = _ref2;
+  const value = useMemo(() => ({
+    jobs
+  }), [jobs]);
+  return /*#__PURE__*/React.createElement(JobsContext.Provider, _extends({
+    value: value
+  }, restProps));
+};
+
+JobsProvider.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+const OverviewContent = () => {
+  const {
+    jobs
+  } = useContext(JobsContext);
+  const {
+    duplicatePackagesCount
+  } = jobs[0].summary.webpack;
+  const duplicatePackagesInsights = Boolean(duplicatePackagesCount.current || duplicatePackagesCount.baseline);
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "medium"
+  }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
+    duplicatePackagesCount: duplicatePackagesCount,
+    showDelta: jobs.length > 1
+  })), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+    space: "small"
+  }, /*#__PURE__*/React.createElement(TotalSizeTypeTitle, null), /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
+    jobs: jobs
+  }), /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
+    jobs: jobs,
+    outline: true
+  }))));
+};
+
+const AssetsContent = () => {
+  var _jobs$;
+
   const [bundleStatsState, bundleStatsSetState] = useComponentQueryState(COMPONENT.BUNDLE_ASSETS);
-  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(COMPONENT.BUNDLE_PACKAGES);
+  const {
+    jobs
+  } = useContext(JobsContext);
+  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+    space: "medium"
+  }, /*#__PURE__*/React.createElement(Summary, {
+    keys: METRICS_WEBPACK_ASSETS,
+    data: jobs == null ? void 0 : (_jobs$ = jobs[0]) == null ? void 0 : _jobs$.summary,
+    showSummaryItemDelta: (jobs == null ? void 0 : jobs.length) !== 1
+  }), /*#__PURE__*/React.createElement(Box, {
+    outline: true
+  }, /*#__PURE__*/React.createElement(BundleAssets, _extends({
+    jobs: jobs,
+    setState: bundleStatsSetState
+  }, bundleStatsState)))));
+};
+
+const ModulesContent = () => {
+  var _jobs$2;
+
   const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(COMPONENT.BUNDLE_MODULES);
+  const {
+    jobs
+  } = useContext(JobsContext);
+  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+    space: "medium"
+  }, /*#__PURE__*/React.createElement(Summary, {
+    keys: METRICS_WEBPACK_MODULES,
+    data: jobs == null ? void 0 : (_jobs$2 = jobs[0]) == null ? void 0 : _jobs$2.summary,
+    showSummaryItemDelta: (jobs == null ? void 0 : jobs.length) !== 1
+  }), /*#__PURE__*/React.createElement(Box, {
+    outline: true
+  }, /*#__PURE__*/React.createElement(BundleModules, _extends({
+    jobs: jobs,
+    setState: bundleModulesSetState
+  }, bundleModulesState)))));
+};
 
-  if (jobs.length === 0) {
+const PackagesContent = () => {
+  var _jobs$3;
+
+  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(COMPONENT.BUNDLE_PACKAGES);
+  const {
+    jobs
+  } = useContext(JobsContext);
+  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+    space: "medium"
+  }, /*#__PURE__*/React.createElement(Summary, {
+    keys: METRICS_WEBPACK_PACKAGES,
+    data: jobs == null ? void 0 : (_jobs$3 = jobs[0]) == null ? void 0 : _jobs$3.summary,
+    showSummaryItemDelta: (jobs == null ? void 0 : jobs.length) !== 1
+  }), /*#__PURE__*/React.createElement(Box, {
+    outline: true
+  }, /*#__PURE__*/React.createElement(BundlePackages, _extends({
+    jobs: jobs
+  }, bundlePackagesState, {
+    setState: bundlePackagesSetState
+  })))));
+};
+
+const AppComponent = _ref3 => {
+  let {
+    version,
+    jobs
+  } = _ref3;
+
+  if ((jobs == null ? void 0 : jobs.length) === 0) {
     return /*#__PURE__*/React.createElement(Layout, {
       version: version
     }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", {
@@ -77,11 +181,9 @@ const AppComponent = _ref2 => {
     }, I18N.NO_DATA)));
   }
 
-  const {
-    duplicatePackagesCount
-  } = jobs[0].summary.webpack;
-  const duplicatePackagesInsights = Boolean(duplicatePackagesCount.current || duplicatePackagesCount.baseline);
-  return /*#__PURE__*/React.createElement(Layout, {
+  return /*#__PURE__*/React.createElement(JobsProvider, {
+    jobs: jobs
+  }, /*#__PURE__*/React.createElement(Layout, {
     jobs: jobs,
     version: version
   }, /*#__PURE__*/React.createElement(Container, {
@@ -116,80 +218,20 @@ const AppComponent = _ref2 => {
   }, /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.ASSETS,
-    render: _ref3 => {
-      let {
-        location
-      } = _ref3;
-      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-        space: "medium"
-      }, /*#__PURE__*/React.createElement(Summary, {
-        keys: METRICS_WEBPACK_ASSETS,
-        data: jobs[0].summary,
-        showSummaryItemDelta: jobs.length !== 1
-      }), /*#__PURE__*/React.createElement(Box, {
-        outline: true
-      }, /*#__PURE__*/React.createElement(BundleAssets, _extends({
-        jobs: jobs,
-        setState: bundleStatsSetState
-      }, bundleStatsState, {
-        key: `${location.pathname}_${location.search}`
-      })))));
-    }
+    component: AssetsContent
   }), /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.MODULES,
-    render: () => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-      space: "medium"
-    }, /*#__PURE__*/React.createElement(Summary, {
-      keys: METRICS_WEBPACK_MODULES,
-      data: jobs[0].summary,
-      showSummaryItemDelta: jobs.length !== 1
-    }), /*#__PURE__*/React.createElement(Box, {
-      outline: true
-    }, /*#__PURE__*/React.createElement(BundleModules, _extends({
-      jobs: jobs,
-      setState: bundleModulesSetState
-    }, bundleModulesState)))))
+    component: ModulesContent
   }), /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.PACKAGES,
-    render: _ref4 => {
-      let {
-        location
-      } = _ref4;
-      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-        space: "medium"
-      }, /*#__PURE__*/React.createElement(Summary, {
-        keys: METRICS_WEBPACK_PACKAGES,
-        data: jobs[0].summary,
-        showSummaryItemDelta: jobs.length !== 1
-      }), /*#__PURE__*/React.createElement(Box, {
-        outline: true
-      }, /*#__PURE__*/React.createElement(BundlePackages, _extends({
-        jobs: jobs
-      }, bundlePackagesState, {
-        setState: bundlePackagesSetState,
-        key: `${location.pathname}_${location.search}`
-      })))));
-    }
+    component: PackagesContent
   }), /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.OVERVIEW,
-    render: () => /*#__PURE__*/React.createElement(Stack, {
-      space: "large"
-    }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
-      duplicatePackagesCount: duplicatePackagesCount,
-      showDelta: jobs.length > 1
-    })), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-      space: "small"
-    }, /*#__PURE__*/React.createElement(TotalSizeTypeTitle, null), /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
-      jobs: jobs
-    }), /*#__PURE__*/React.createElement(Box, {
-      outline: true
-    }, /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
-      jobs: jobs
-    })))))
-  }))));
+    component: OverviewContent
+  })))));
 };
 
 AppComponent.defaultProps = {

package/lib-esm/app/app.module.css

@@ -13,7 +13,7 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-large);
+  padding-top: var(--space-medium);
   padding-bottom: var(--space-small);
 }
 
@@ -35,8 +35,8 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-large);
+  padding-top: var(--space-medium);
+  padding-bottom: var(--space-medium);
   min-height: 480px;
 }
 

package/lib-esm/components/asset-info/asset-info.module.css

@@ -1,4 +1,5 @@
 .fileName {
+  max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-warning);
 }

package/lib-esm/components/bundle-assets/bundle-assets.js

@@ -3,7 +3,7 @@ import _get from "lodash/get";
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, FILE_TYPE_LABELS } from '@bundle-stats/utils';
@@ -72,66 +72,92 @@ TooltipNotPredictive.propTypes = {
 
 };
 
-const getRenderRowHeader = _ref4 => {
+const RowHeader = _ref4 => {
   let {
+    row,
     labels,
-    CustomComponentLink,
-    chunks
+    chunks,
+    CustomComponentLink
   } = _ref4;
-  return item => {
-    const {
-      label,
-      isNotPredictive,
-      runs,
-      isChunk,
-      isEntry,
-      isInitial
-    } = item;
-    return /*#__PURE__*/React.createElement(HoverCard, {
-      label: /*#__PURE__*/React.createElement(FlexStack, {
-        space: "xxxsmall",
-        className: css.assetName
-      }, /*#__PURE__*/React.createElement("div", {
-        className: css.assetInfoFlags
-      }, isNotPredictive && /*#__PURE__*/React.createElement(Tooltip, {
-        className: css.notPredictive,
-        title: /*#__PURE__*/React.createElement(TooltipNotPredictive, {
-          runs: runs
-        })
-      }, /*#__PURE__*/React.createElement(Icon, {
-        className: css.notPredictiveIcon,
-        glyph: "warning"
-      })), isChunk && /*#__PURE__*/React.createElement(Tag, {
-        title: "Chunk",
-        size: Tag.SIZES.SMALL,
-        kind: Tag.KINDS.INFO,
-        className: cx(css.tag, css.tagChunk)
-      }), isEntry && /*#__PURE__*/React.createElement(Tag, {
-        title: "Entrypoint",
-        size: Tag.SIZES.SMALL,
-        kind: Tag.KINDS.INFO,
-        className: cx(css.tag, css.tagEntry)
-      }), isInitial && /*#__PURE__*/React.createElement(Tag, {
-        title: "Initial",
-        size: Tag.SIZES.SMALL,
-        kind: Tag.KINDS.INFO,
-        className: cx(css.tag, css.tagInitial)
-      })), /*#__PURE__*/React.createElement(FileName, {
-        name: label
-      }))
-    }, /*#__PURE__*/React.createElement(AssetInfo, {
-      className: css.assetInfo,
-      item: item,
-      labels: labels,
-      chunks: chunks,
-      CustomComponentLink: CustomComponentLink
-    }));
-  };
+  const {
+    label,
+    isNotPredictive,
+    runs,
+    isChunk,
+    isEntry,
+    isInitial
+  } = row;
+  const [showHoverCard, setHoverCard] = useState(false);
+  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
+  const content = useMemo(() => /*#__PURE__*/React.createElement("span", {
+    className: css.assetName
+  }, /*#__PURE__*/React.createElement("span", {
+    className: css.assetNameTags
+  }, isNotPredictive && /*#__PURE__*/React.createElement(Tooltip, {
+    className: css.notPredictive,
+    title: /*#__PURE__*/React.createElement(TooltipNotPredictive, {
+      runs: runs
+    })
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: css.notPredictiveIcon,
+    glyph: "warning"
+  })), isChunk && /*#__PURE__*/React.createElement(Tag, {
+    className: cx(css.assetNameTag, css.assetNameTagChunk),
+    title: "Chunk",
+    size: Tag.SIZES.SMALL,
+    kind: Tag.KINDS.INFO
+  }), isEntry && /*#__PURE__*/React.createElement(Tag, {
+    className: cx(css.assetNameTag, css.assetNameTagEntry),
+    title: "Entrypoint",
+    size: Tag.SIZES.SMALL,
+    kind: Tag.KINDS.INFO
+  }), isInitial && /*#__PURE__*/React.createElement(Tag, {
+    className: cx(css.assetNameTag, css.assetNameTagInitial),
+    title: "Initial",
+    size: Tag.SIZES.SMALL,
+    kind: Tag.KINDS.INFO
+  })), /*#__PURE__*/React.createElement(FileName, {
+    className: css.assetNameText,
+    name: label
+  })), [isChunk, isEntry, isInitial, isNotPredictive, runs]);
+
+  if (!showHoverCard) {
+    return /*#__PURE__*/React.createElement("span", {
+      onMouseEnter: handleOnMouseEnter
+    }, content);
+  }
+
+  return /*#__PURE__*/React.createElement(HoverCard, {
+    label: content
+  }, /*#__PURE__*/React.createElement(AssetInfo, {
+    className: css.assetInfo,
+    item: row,
+    labels: labels,
+    chunks: chunks,
+    CustomComponentLink: CustomComponentLink
+  }));
 };
 
+RowHeader.propTypes = {
+  row: PropTypes.shape({
+    label: PropTypes.string,
+    isNotPredictive: PropTypes.bool,
+    isChunk: PropTypes.bool,
+    isInitial: PropTypes.bool,
+    isEntry: PropTypes.bool,
+    runs: PropTypes.arrayOf(PropTypes.object)
+  }).isRequired,
+  chunks: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string
+  })),
+  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
+  CustomComponentLink: PropTypes.elementType.isRequired
+};
+RowHeader.defaultProps = {
+  chunks: []
+};
 export const BundleAssets = props => {
-  var _jobs$, _jobs$$meta, _jobs$$meta$webpack;
-
   const {
     className,
     jobs,
@@ -155,12 +181,16 @@ export const BundleAssets = props => {
     handleResetFilters: resetFilters,
     handleViewAll: resetAllFilters
   });
-  const chunks = ((_jobs$ = jobs[0]) == null ? void 0 : (_jobs$$meta = _jobs$.meta) == null ? void 0 : (_jobs$$meta$webpack = _jobs$$meta.webpack) == null ? void 0 : _jobs$$meta$webpack.chunks) || [];
-  const renderRowHeader = useMemo(() => getRenderRowHeader({
-    labels: _map(jobs, 'label'),
-    CustomComponentLink,
-    chunks
-  }), [jobs, chunks]);
+  const renderRowHeader = useCallback(row => {
+    var _jobs$, _jobs$$meta, _jobs$$meta$webpack;
+
+    return /*#__PURE__*/React.createElement(RowHeader, {
+      row: row,
+      labels: _map(jobs, 'label'),
+      chunks: ((_jobs$ = jobs[0]) == null ? void 0 : (_jobs$$meta = _jobs$.meta) == null ? void 0 : (_jobs$$meta$webpack = _jobs$$meta.webpack) == null ? void 0 : _jobs$$meta$webpack.chunks) || [],
+      CustomComponentLink: CustomComponentLink
+    });
+  }, [jobs, CustomComponentLink]);
   return /*#__PURE__*/React.createElement("section", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(Toolbar, {

package/lib-esm/components/bundle-assets/bundle-assets.module.css

@@ -8,10 +8,7 @@
   margin-right: -1px; /** collapse border */
 }
 
-.assetName {
-  display: inline-flex;
-  align-items: center;
-}
+.assetName {}
 
 .notPredictive {
   margin-right: var(--space-xxsmall);
@@ -26,39 +23,48 @@
   vertical-align: top;
 }
 
-.assetInfoFlags {
-  display: inline-block;
+.assetNameTags {
+  display: inline;
   margin-right: var(--space-xxxsmall);
 }
 
-.assetInfoFlags:empty {
+.assetNameTags:empty {
   display: none;
 }
 
-.tag + .tag {
+.assetNameTag {
+  vertical-align: middle;
+}
+
+.assetNameTag + .assetNameTag {
   margin-left: 2px;
 }
 
-.tagEntry {
+.assetNameTagEntry {
   background: var(--color-info-light);
 }
 
-.tagEntry::before {
+.assetNameTagEntry::before {
   content: 'e';
 }
 
-.tagInitial {
+.assetNameTagInitial {
   background: var(--color-info-light);
 }
 
-.tagInitial::before {
+.assetNameTagInitial::before {
   content: 'i';
 }
 
-.tagChunk::before {
+.assetNameTagChunk::before {
   content: 'c';
 }
 
+.assetNameText {
+  display: inline;
+  vertical-align: middle;
+}
+
 /* Tooltip not predictive */
 .tooltipNotPredictive {
   text-align: left;

package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
@@ -9,7 +11,8 @@ export const BundleAssetsTotalsTable = _ref => {
   let {
     className,
     jobs,
-    customComponentLink: CustomComponentLink
+    customComponentLink: CustomComponentLink,
+    ...restProps
   } = _ref;
   const items = webpack.compareBySection.sizes(jobs);
 
@@ -27,13 +30,13 @@ export const BundleAssetsTotalsTable = _ref => {
     }, item.label);
   };
 
-  return /*#__PURE__*/React.createElement(MetricsTable, {
+  return /*#__PURE__*/React.createElement(MetricsTable, _extends({
     className: className,
     runs: jobs,
     items: items,
     renderRowHeader: renderRowHeader,
     showHeaderSum: true
-  });
+  }, restProps));
 };
 BundleAssetsTotalsTable.defaultProps = {
   className: '',

package/lib-esm/components/bundle-modules/bundle-modules.js

@@ -35,28 +35,27 @@ const RowHeader = _ref => {
 
   const chunkIds = _map(chunks, 'id');
 
-  const [showPopopver, setPopover] = useState(false);
-  const handleOnMouseEnter = useCallback(() => setPopover(true), [showPopopver]);
-  const content = /*#__PURE__*/React.createElement(FileName, {
+  const [showHoverCard, setHoverCard] = useState(false);
+  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
+  const content = useMemo(() => /*#__PURE__*/React.createElement(FileName, {
     name: row.label
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    onMouseEnter: handleOnMouseEnter
-  }, !showPopopver ? content : /*#__PURE__*/React.createElement(HoverCard, {
+  }), [row.label]);
+
+  if (!showHoverCard) {
+    return /*#__PURE__*/React.createElement("div", {
+      onMouseEnter: handleOnMouseEnter
+    }, content);
+  }
+
+  return /*#__PURE__*/React.createElement(HoverCard, {
     label: content
-  }, _ref2 => {
-    let {
-      close
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(ModuleInfo, {
-      className: css.namePopover,
-      item: row,
-      chunks: chunks,
-      chunkIds: chunkIds,
-      labels: labels,
-      customComponentLink: CustomComponentLink,
-      onClick: close
-    });
+  }, /*#__PURE__*/React.createElement(ModuleInfo, {
+    className: css.namePopover,
+    item: row,
+    chunks: chunks,
+    chunkIds: chunkIds,
+    labels: labels,
+    customComponentLink: CustomComponentLink
   }));
 };
 
@@ -74,22 +73,7 @@ RowHeader.propTypes = {
 RowHeader.defaultProps = {
   chunks: []
 };
-
-const getRenderRowHeader = _ref3 => {
-  let {
-    labels,
-    chunks,
-    CustomComponentLink
-  } = _ref3;
-  return row => /*#__PURE__*/React.createElement(RowHeader, {
-    row: row,
-    chunks: chunks,
-    labels: labels,
-    CustomComponentLink: CustomComponentLink
-  });
-};
-
-export const BundleModules = _ref4 => {
+export const BundleModules = _ref2 => {
   let {
     className,
     jobs,
@@ -107,14 +91,14 @@ export const BundleModules = _ref4 => {
     updateSearch,
     hasActiveFilters,
     customComponentLink: CustomComponentLink
-  } = _ref4;
+  } = _ref2;
   const rootClassName = cx(css.root, className);
-  const labels = useMemo(() => _map(jobs, 'label'), [jobs]);
-  const renderRowHeader = useMemo(() => getRenderRowHeader({
-    labels,
-    chunks,
-    CustomComponentLink
-  }), [labels, chunks]);
+  const renderRowHeader = useCallback(row => /*#__PURE__*/React.createElement(RowHeader, {
+    row: row,
+    chunks: chunks,
+    labels: _map(jobs, 'label'),
+    CustomComponentLink: CustomComponentLink
+  }), [jobs, chunks, CustomComponentLink]);
   const emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
     resources: "modules",
     filtered: totalRowCount !== 0,
@@ -142,11 +126,11 @@ export const BundleModules = _ref4 => {
     ...(!_isEmpty(chunks) && {
       [MODULE_CHUNK]: {
         label: 'Chunk',
-        ...chunks.reduce((chunkFilters, _ref5) => {
+        ...chunks.reduce((chunkFilters, _ref3) => {
           let {
             id,
             name
-          } = _ref5;
+          } = _ref3;
           return { ...chunkFilters,
             [id]: {
               label: name,
@@ -171,10 +155,10 @@ export const BundleModules = _ref4 => {
     className: rootClassName
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: _ref6 => {
+    renderActions: _ref4 => {
       let {
         actionClassName
-      } = _ref6;
+      } = _ref4;
       return /*#__PURE__*/React.createElement(FlexStack, {
         space: "xxsmall",
         className: cx(css.dropdown, actionClassName)