@bundle-stats/ui 3.1.4-alpha.0 → 3.2.1-alpha.0

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

@@ -2,16 +2,8 @@ import _map from "lodash/map";
 import _isEmpty from "lodash/isEmpty";
 import _get from "lodash/get";
 
-var _PropTypes$shape;
-
 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); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -33,22 +25,17 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import { ModuleInfo } from '../module-info';
 import css from './bundle-modules.module.css';
 
-var RowHeader = function RowHeader(_ref) {
-  var row = _ref.row,
-      chunks = _ref.chunks,
-      labels = _ref.labels,
-      CustomComponentLink = _ref.CustomComponentLink;
-
-  var chunkIds = _map(chunks, 'id');
+const RowHeader = ({
+  row,
+  chunks,
+  labels,
+  CustomComponentLink
+}) => {
+  const chunkIds = _map(chunks, 'id');
 
-  var _useState = useState(false),
-      showPopopver = _useState[0],
-      setPopover = _useState[1];
-
-  var handleOnMouseEnter = useCallback(function () {
-    return setPopover(true);
-  }, [showPopopver]);
-  var content = /*#__PURE__*/React.createElement(FileName, {
+  const [showPopopver, setPopover] = useState(false);
+  const handleOnMouseEnter = useCallback(() => setPopover(true), [showPopopver]);
+  const content = /*#__PURE__*/React.createElement(FileName, {
     name: row.label
   });
   return /*#__PURE__*/React.createElement("div", {
@@ -56,18 +43,17 @@ var RowHeader = function RowHeader(_ref) {
   }, !showPopopver ? content : /*#__PURE__*/React.createElement(Popover, {
     ariaLabel: "View module info",
     label: content
-  }, function (_ref2) {
-    var popoverToggle = _ref2.popoverToggle;
-    return /*#__PURE__*/React.createElement(ModuleInfo, {
-      className: css.namePopover,
-      item: row,
-      chunks: chunks,
-      chunkIds: chunkIds,
-      labels: labels,
-      customComponentLink: CustomComponentLink,
-      onClick: popoverToggle
-    });
-  }));
+  }, ({
+    popoverToggle
+  }) => /*#__PURE__*/React.createElement(ModuleInfo, {
+    className: css.namePopover,
+    item: row,
+    chunks: chunks,
+    chunkIds: chunkIds,
+    labels: labels,
+    customComponentLink: CustomComponentLink,
+    onClick: popoverToggle
+  })));
 };
 
 RowHeader.propTypes = {
@@ -85,109 +71,108 @@ RowHeader.defaultProps = {
   chunks: []
 };
 
-var getRenderRowHeader = function getRenderRowHeader(_ref3) {
-  var labels = _ref3.labels,
-      chunks = _ref3.chunks,
-      CustomComponentLink = _ref3.CustomComponentLink;
-  return function (row) {
-    return /*#__PURE__*/React.createElement(RowHeader, {
-      row: row,
-      chunks: chunks,
-      labels: labels,
-      CustomComponentLink: CustomComponentLink
-    });
-  };
-};
-
-export var BundleModules = function BundleModules(_ref4) {
-  var _MODULE_SOURCE_TYPE, _objectSpread2, _ref6, _objectSpread5;
+const getRenderRowHeader = ({
+  labels,
+  chunks,
+  CustomComponentLink
+}) => row => /*#__PURE__*/React.createElement(RowHeader, {
+  row: row,
+  chunks: chunks,
+  labels: labels,
+  CustomComponentLink: CustomComponentLink
+});
 
-  var className = _ref4.className,
-      jobs = _ref4.jobs,
-      items = _ref4.items,
-      chunks = _ref4.chunks,
-      totalRowCount = _ref4.totalRowCount,
-      updateFilters = _ref4.updateFilters,
-      resetFilters = _ref4.resetFilters,
-      resetAllFilters = _ref4.resetAllFilters,
-      filters = _ref4.filters,
-      sortItems = _ref4.sortItems,
-      sort = _ref4.sort,
-      updateSort = _ref4.updateSort,
-      search = _ref4.search,
-      updateSearch = _ref4.updateSearch,
-      hasActiveFilters = _ref4.hasActiveFilters,
-      CustomComponentLink = _ref4.customComponentLink;
-  var rootClassName = cx(css.root, className);
-  var labels = useMemo(function () {
-    return _map(jobs, 'label');
-  }, [jobs]);
-  var renderRowHeader = useMemo(function () {
-    return getRenderRowHeader({
-      labels: labels,
-      chunks: chunks,
-      CustomComponentLink: CustomComponentLink
-    });
-  }, [labels, chunks]);
-  var emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
+export const BundleModules = ({
+  className,
+  jobs,
+  items,
+  chunks,
+  totalRowCount,
+  updateFilters,
+  resetFilters,
+  resetAllFilters,
+  filters,
+  sortFields,
+  sort,
+  updateSort,
+  search,
+  updateSearch,
+  hasActiveFilters,
+  customComponentLink: CustomComponentLink
+}) => {
+  const rootClassName = cx(css.root, className);
+  const labels = useMemo(() => _map(jobs, 'label'), [jobs]);
+  const renderRowHeader = useMemo(() => getRenderRowHeader({
+    labels,
+    chunks,
+    CustomComponentLink
+  }), [labels, chunks]);
+  const emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
     resources: "modules",
     filtered: totalRowCount !== 0,
     handleResetFilters: resetFilters,
     handleViewAll: resetAllFilters
   });
-
-  var dropdownFilters = _objectSpread(_objectSpread((_objectSpread2 = {}, _objectSpread2[MODULE_FILTERS.CHANGED] = {
-    label: 'Changed',
-    defaultValue: filters.changed,
-    disabled: jobs.length <= 1
-  }, _objectSpread2[MODULE_SOURCE_TYPE] = (_MODULE_SOURCE_TYPE = {
-    label: 'Source'
-  }, _MODULE_SOURCE_TYPE[MODULE_FILTERS.FIRST_PARTY] = {
-    label: 'First party',
-    defaultValue: _get(filters, MODULE_SOURCE_TYPE + "." + MODULE_FILTERS.FIRST_PARTY, true)
-  }, _MODULE_SOURCE_TYPE[MODULE_FILTERS.THIRD_PARTY] = {
-    label: 'Third party',
-    defaultValue: _get(filters, MODULE_SOURCE_TYPE + "." + MODULE_FILTERS.THIRD_PARTY, true)
-  }, _MODULE_SOURCE_TYPE), _objectSpread2), !_isEmpty(chunks) && (_ref6 = {}, _ref6[MODULE_CHUNK] = _objectSpread({
-    label: 'Chunk'
-  }, chunks.reduce(function (chunkFilters, _ref5) {
-    var _objectSpread3;
-
-    var id = _ref5.id,
-        name = _ref5.name;
-    return _objectSpread(_objectSpread({}, chunkFilters), {}, (_objectSpread3 = {}, _objectSpread3[id] = {
-      label: name,
-      defaultValue: _get(filters, MODULE_CHUNK + "." + id, true)
-    }, _objectSpread3));
-  }, {})), _ref6)), {}, (_objectSpread5 = {}, _objectSpread5[MODULE_FILE_TYPE] = _objectSpread({
-    label: 'File type'
-  }, MODULE_SOURCE_FILE_TYPES.reduce(function (agg, fileType) {
-    var _objectSpread4;
-
-    return _objectSpread(_objectSpread({}, agg), {}, (_objectSpread4 = {}, _objectSpread4[fileType] = {
-      label: FILE_TYPE_LABELS[fileType],
-      defaultValue: _get(filters, MODULE_FILE_TYPE + "." + fileType, true)
-    }, _objectSpread4));
-  }, {})), _objectSpread5));
-
+  const dropdownFilters = {
+    [MODULE_FILTERS.CHANGED]: {
+      label: 'Changed',
+      defaultValue: filters.changed,
+      disabled: jobs.length <= 1
+    },
+    [MODULE_SOURCE_TYPE]: {
+      label: 'Source',
+      [MODULE_FILTERS.FIRST_PARTY]: {
+        label: 'First party',
+        defaultValue: _get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`, true)
+      },
+      [MODULE_FILTERS.THIRD_PARTY]: {
+        label: 'Third party',
+        defaultValue: _get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`, true)
+      }
+    },
+    // When chunks data available, list available chunks as filters
+    ...(!_isEmpty(chunks) && {
+      [MODULE_CHUNK]: {
+        label: 'Chunk',
+        ...chunks.reduce((chunkFilters, {
+          id,
+          name
+        }) => ({ ...chunkFilters,
+          [id]: {
+            label: name,
+            defaultValue: _get(filters, `${MODULE_CHUNK}.${id}`, true)
+          }
+        }), {})
+      }
+    }),
+    // Module source types
+    [MODULE_FILE_TYPE]: {
+      label: 'File type',
+      ...MODULE_SOURCE_FILE_TYPES.reduce((agg, fileType) => ({ ...agg,
+        [fileType]: {
+          label: FILE_TYPE_LABELS[fileType],
+          defaultValue: _get(filters, `${MODULE_FILE_TYPE}.${fileType}`, true)
+        }
+      }), {})
+    }
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: rootClassName
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: function renderActions(_ref7) {
-      var actionClassName = _ref7.actionClassName;
-      return /*#__PURE__*/React.createElement(FlexStack, {
-        space: "xxsmall",
-        className: cx(css.dropdown, actionClassName)
-      }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
-        className: css.tableDropdown,
-        items: sortItems,
-        onChange: updateSort
-      }, sort)), /*#__PURE__*/React.createElement(MetricsTableOptions, {
-        handleViewAll: resetAllFilters,
-        handleResetFilters: resetFilters
-      }));
-    }
+    renderActions: ({
+      actionClassName
+    }) => /*#__PURE__*/React.createElement(FlexStack, {
+      space: "xxsmall",
+      className: cx(css.dropdown, actionClassName)
+    }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
+      className: css.tableDropdown,
+      fields: sortFields,
+      onChange: updateSort
+    }, sort)), /*#__PURE__*/React.createElement(MetricsTableOptions, {
+      handleViewAll: resetAllFilters,
+      handleResetFilters: resetFilters
+    }))
   }, /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(MetricsTableSearch, {
     className: css.toolbarSearch,
     search: search,
@@ -207,7 +192,7 @@ export var BundleModules = function BundleModules(_ref4) {
     showHeaderSum: true,
     title: /*#__PURE__*/React.createElement(MetricsTableTitle, {
       title: I18N.MODULES,
-      info: "(" + items.length + "/" + totalRowCount + ")",
+      info: `(${items.length}/${totalRowCount})`,
       popoverInfo: I18N.MODULES_INFO,
       popoverHref: config.documentation.modules
     })
@@ -254,10 +239,12 @@ BundleModules.propTypes = {
     changed: PropTypes.bool
   }).isRequired,
   hasActiveFilters: PropTypes.bool,
-  sortItems: PropTypes.shape((_PropTypes$shape = {}, _PropTypes$shape[PropTypes.string] = PropTypes.shape({
-    label: PropTypes.string,
-    defaultDirection: PropTypes.bool
-  }), _PropTypes$shape)).isRequired,
+  sortFields: PropTypes.shape({
+    [PropTypes.string]: PropTypes.shape({
+      label: PropTypes.string,
+      defaultDirection: PropTypes.bool
+    })
+  }).isRequired,
   sort: PropTypes.shape({
     sortBy: PropTypes.string,
     direction: PropTypes.string

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

@@ -6,7 +6,10 @@ import currentStatsFixtures from '../../../__mocks__/webpack-stats.current.json'
 import { getWrapperDecorator } from '../../stories';
 import { BundleModules } from '.'; // Limit the side of the modules when not in dev mode (chromatic limit, snapshot too large)
 
-var _ref = process.env.NODE_ENV !== 'development' ? {
+const {
+  baselineStats,
+  currentStats
+} = process.env.NODE_ENV !== 'development' ? {
   // eslint-disable-next-line prefer-object-spread
   baselineStats: Object.assign({}, baselineStatsFixtures, {
     modules: baselineStatsFixtures.modules.slice(0, 100)
@@ -18,37 +21,28 @@ var _ref = process.env.NODE_ENV !== 'development' ? {
 } : {
   baselineStats: baselineStatsFixtures,
   currentStats: currentStatsFixtures
-},
-    baselineStats = _ref.baselineStats,
-    currentStats = _ref.currentStats;
-
-var JOBS = createJobs([{
+};
+const JOBS = createJobs([{
   webpack: currentStats
 }, {
   webpack: baselineStats
 }]);
-var stories = storiesOf('Components/BundleModules', module);
+const stories = storiesOf('Components/BundleModules', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(BundleModules, {
-    jobs: [JOBS[1]]
-  });
-});
-stories.add('multiple jobs', function () {
-  return /*#__PURE__*/React.createElement(BundleModules, {
-    jobs: JOBS
-  });
-});
-var JOBS_EMPTY_BASELINE = createJobs([{
+stories.add('default', () => /*#__PURE__*/React.createElement(BundleModules, {
+  jobs: [JOBS[1]]
+}));
+stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(BundleModules, {
+  jobs: JOBS
+}));
+const JOBS_EMPTY_BASELINE = createJobs([{
   webpack: currentStats
 }, null]);
-stories.add('empty baseline', function () {
-  return /*#__PURE__*/React.createElement(BundleModules, {
-    jobs: JOBS_EMPTY_BASELINE
-  });
-}); // Module moved between chunks
+stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundleModules, {
+  jobs: JOBS_EMPTY_BASELINE
+})); // Module moved between chunks
 
-var JOBS_MOVED_MODULE = createJobs([{
+const JOBS_MOVED_MODULE = createJobs([{
   webpack: {
     chunks: [{
       id: 1,
@@ -118,38 +112,32 @@ var JOBS_MOVED_MODULE = createJobs([{
     }]
   }
 }]);
-var chunkFiltersStories = storiesOf('Components/BundleModules/chunk filters', module);
+const chunkFiltersStories = storiesOf('Components/BundleModules/chunk filters', module);
 chunkFiltersStories.addDecorator(getWrapperDecorator());
-chunkFiltersStories.add('chunk with module moved in', function () {
-  return /*#__PURE__*/React.createElement(BundleModules, {
-    filters: {
-      changed: false,
-      'c.1': true,
-      'c.2': false,
-      'c.3': false
-    },
-    jobs: [].concat(JOBS_MOVED_MODULE)
-  });
-});
-chunkFiltersStories.add('chunk with module moved out', function () {
-  return /*#__PURE__*/React.createElement(BundleModules, {
-    filters: {
-      changed: false,
-      'c.1': false,
-      'c.2': true,
-      'c.3': false
-    },
-    jobs: [].concat(JOBS_MOVED_MODULE)
-  });
-});
-chunkFiltersStories.add('removed chunk', function () {
-  return /*#__PURE__*/React.createElement(BundleModules, {
-    filters: {
-      changed: false,
-      'c.1': false,
-      'c.2': false,
-      'c.3': true
-    },
-    jobs: [].concat(JOBS_MOVED_MODULE)
-  });
-});
+chunkFiltersStories.add('chunk with module moved in', () => /*#__PURE__*/React.createElement(BundleModules, {
+  filters: {
+    changed: false,
+    'c.1': true,
+    'c.2': false,
+    'c.3': false
+  },
+  jobs: [...JOBS_MOVED_MODULE]
+}));
+chunkFiltersStories.add('chunk with module moved out', () => /*#__PURE__*/React.createElement(BundleModules, {
+  filters: {
+    changed: false,
+    'c.1': false,
+    'c.2': true,
+    'c.3': false
+  },
+  jobs: [...JOBS_MOVED_MODULE]
+}));
+chunkFiltersStories.add('removed chunk', () => /*#__PURE__*/React.createElement(BundleModules, {
+  filters: {
+    changed: false,
+    'c.1': false,
+    'c.2': false,
+    'c.3': true
+  },
+  jobs: [...JOBS_MOVED_MODULE]
+}));

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

@@ -0,0 +1,95 @@
+import _merge from "lodash/merge";
+import _intersection from "lodash/intersection";
+import _get from "lodash/get";
+import { useMemo } from 'react';
+import { MODULE_PATH_PACKAGES } from '@bundle-stats/utils/lib-esm/webpack';
+import { MODULE_CHUNK, MODULE_FILTERS, MODULE_FILE_TYPE, MODULE_SOURCE_TYPE, getModuleSourceFileType } from '@bundle-stats/utils';
+import { SORT_BY_NAME, SORT_BY_SIZE, SORT_BY_DELTA } from './bundle-modules.constants';
+export const addRowSourceFlag = row => {
+  const {
+    key
+  } = row;
+  const thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
+  return { ...row,
+    thirdParty
+  };
+};
+export const getCustomSort = sortBy => item => {
+  if (sortBy === SORT_BY_NAME) {
+    return item.key;
+  }
+
+  if (sortBy === SORT_BY_SIZE) {
+    return _get(item, 'runs[0].value', 0);
+  }
+
+  if (sortBy === SORT_BY_DELTA) {
+    return _get(item, 'runs[0].deltaPercentage', 0);
+  }
+
+  return [!item.changed, item.key];
+};
+export const getRowFilter = filters => row => {
+  // Skip not changed rows
+  if (filters[MODULE_FILTERS.CHANGED] && !row.changed) {
+    return false;
+  } // Skip not matching source type
+
+
+  if (!(filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`] && row.thirdParty === false || filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`] && row.thirdParty === true)) {
+    return false;
+  } // Skip not matching source file types
+
+
+  const fileType = getModuleSourceFileType(row.key);
+
+  if (!filters[`${MODULE_FILE_TYPE}.${fileType}`]) {
+    return false;
+  }
+
+  return true;
+};
+export const useModuleFilterByChunk = ({
+  jobs,
+  filters,
+  chunkIds
+}) => {
+  const filteredJobs = useMemo(() => {
+    // List of chunkIds with filter value set to `true`
+    const includedChunkIds = chunkIds.reduce((agg, chunkId) => {
+      if (_get(filters, `${MODULE_CHUNK}.${chunkId}`)) {
+        return [...agg, chunkId];
+      }
+
+      return agg;
+    }, []); // If all the filters are included, return jobs as they are
+
+    if (includedChunkIds.length === chunkIds.length) {
+      return jobs;
+    }
+
+    const jobsWithFilteredData = jobs.map(job => {
+      var _job$metrics;
+
+      const {
+        modules
+      } = (job == null ? void 0 : (_job$metrics = job.metrics) == null ? void 0 : _job$metrics.webpack) || {};
+      const filteredModules = Object.entries(modules).reduce((agg, [moduleId, moduleEntry]) => {
+        const match = _intersection(moduleEntry.chunkIds, includedChunkIds);
+
+        if (match.length > 0) {
+          agg[moduleId] = moduleEntry; // eslint-disable-line no-param-reassign
+        }
+
+        return agg;
+      }, {}); // Copy job data into a new object to prevent mutations of the original data
+
+      const newJob = _merge({}, job);
+
+      newJob.metrics.webpack.modules = filteredModules;
+      return newJob;
+    });
+    return jobsWithFilteredData;
+  }, [jobs, filters, chunkIds]);
+  return filteredJobs;
+};

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

@@ -1,3 +1,111 @@
-import enhance from './bundle-modules.container';
-import { BundleModules as Component } from './bundle-modules';
-export var BundleModules = enhance(Component);
+import _map from "lodash/map";
+import _uniqBy from "lodash/uniqBy";
+
+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 PropTypes from 'prop-types';
+import { getModuleChunkFilters, getModuleSourceTypeFilters, getModuleFileTypeFilters } from '@bundle-stats/utils';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+import { useRowsFilter } from '../../hooks/rows-filter';
+import { useRowsSort } from '../../hooks/rows-sort';
+import { useSearchParams } from '../../hooks/search-params';
+import { BundleModules as BundleModulesComponent } from './bundle-modules';
+import { addRowSourceFlag, getRowFilter, 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;
+
+  const chunks = _uniqBy(jobs.map(job => {
+    var _job$meta, _job$meta$webpack;
+
+    return (job == null ? void 0 : (_job$meta = job.meta) == null ? void 0 : (_job$meta$webpack = _job$meta.webpack) == null ? void 0 : _job$meta$webpack.chunks) || [];
+  }).flat(), ({
+    id
+  }) => id);
+
+  const chunkIds = _map(chunks, 'id');
+
+  const {
+    defaultFilters,
+    allEntriesFilters
+  } = useMemo(() => ({
+    defaultFilters: {
+      changed: (jobs == null ? void 0 : jobs.length) > 1,
+      ...getModuleSourceTypeFilters(true),
+      ...getModuleChunkFilters(chunkIds, true),
+      ...getModuleFileTypeFilters(true)
+    },
+    allEntriesFilters: {
+      changed: false,
+      ...getModuleSourceTypeFilters(true),
+      ...getModuleChunkFilters(chunkIds, true),
+      ...getModuleFileTypeFilters(true)
+    }
+  }), [jobs]);
+  const searchParams = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState
+  });
+  const filteredJobsByChunkIds = useModuleFilterByChunk({
+    jobs,
+    filters: searchParams.filters,
+    chunkIds
+  });
+  const {
+    rows,
+    totalRowCount
+  } = useMemo(() => {
+    const result = webpack.compareBySection.modules(filteredJobsByChunkIds, [addRowSourceFlag]);
+    return {
+      rows: result,
+      totalRowCount: result.length
+    };
+  }, [filteredJobsByChunkIds]);
+  const filteredRows = useRowsFilter({
+    rows,
+    searchPattern: searchParams.searchPattern,
+    filters: searchParams.filters,
+    getRowFilter
+  });
+  const sortParams = useRowsSort({
+    rows: filteredRows,
+    sortFields: SORT_BY,
+    sortBy,
+    sortDirection: direction,
+    getCustomSort
+  });
+  return /*#__PURE__*/React.createElement(BundleModulesComponent, _extends({
+    jobs: jobs,
+    chunks: chunks
+  }, restProps, searchParams, sortParams, {
+    totalRowCount: totalRowCount
+  }));
+};
+BundleModules.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired,
+  // eslint-disable-line react/forbid-prop-types
+  filters: PropTypes.object,
+  // eslint-disable-line react/forbid-prop-types
+  search: PropTypes.string,
+  sortBy: PropTypes.string,
+  direction: PropTypes.string,
+  setState: PropTypes.func.isRequired
+};
+BundleModules.defaultProps = {
+  filters: undefined,
+  search: undefined,
+  sortBy: undefined,
+  direction: undefined
+};