@bundle-stats/ui 3.2.0-beta.1 → 3.2.1-beta.10

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

@@ -1,3 +1,90 @@
-import { enhance } from './bundle-assets.container';
+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 * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+import { ASSET_FILTERS } from '@bundle-stats/utils';
+import { getAssetEntryTypeFilters, getAssetFileTypeFilters } from '@bundle-stats/utils/lib-esm/utils/component-links';
+import { useRowsFilter } from '../../hooks/rows-filter';
+import { useRowsSort } from '../../hooks/rows-sort';
+import { useSearchParams } from '../../hooks/search-params';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
-export var BundleAssets = enhance(BundleAssetsComponent);
+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;
+  const {
+    defaultFilters,
+    allEntriesFilters
+  } = useMemo(() => ({
+    defaultFilters: {
+      [ASSET_FILTERS.CHANGED]: (jobs == null ? void 0 : jobs.length) > 1,
+      ...getAssetEntryTypeFilters(true),
+      ...getAssetFileTypeFilters(true)
+    },
+    allEntriesFilters: {
+      [ASSET_FILTERS.CHANGED]: false,
+      ...getAssetEntryTypeFilters(true),
+      ...getAssetFileTypeFilters(true)
+    }
+  }), [jobs]);
+  const searchParams = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState
+  });
+  const {
+    rows,
+    totalRowCount
+  } = useMemo(() => {
+    const result = webpack.compareBySection.assets(jobs, [addRowAssetFlags, addRowIsNotPredictive]);
+    return {
+      rows: result,
+      totalRowCount: result.length
+    };
+  }, [jobs]);
+  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(BundleAssetsComponent, _extends({
+    jobs: jobs
+  }, restProps, searchParams, sortParams, {
+    totalRowCount: totalRowCount
+  }));
+};
+BundleAssets.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
+};
+BundleAssets.defaultProps = {
+  filters: undefined,
+  search: undefined,
+  sortBy: undefined,
+  direction: undefined
+};

package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js

@@ -17,78 +17,76 @@ import { getColors } from '../../utils';
 import { Stack } from '../../layout/stack';
 import { SummaryItem } from '../summary-item';
 import css from './bundle-assets-totals-chart-bars.module.css';
-export var BundleAssetsTotalsChartBars = function BundleAssetsTotalsChartBars(_ref) {
-  var className = _ref.className,
-      jobs = _ref.jobs,
-      CustomComponentLink = _ref.customComponentLink;
-  var rootClassName = cx(css.root, className);
-  var items = webpack.compareBySection.sizes(jobs);
-  var dataGraphs = [];
-  items.forEach(function (_ref2) {
-    var runs = _ref2.runs;
-    runs.forEach(function (run, runIndex) {
-      dataGraphs[runIndex] = [].concat(dataGraphs[runIndex] || [], [_get(run, 'value', 0)]);
+
+const getTooltip = (items, jobs, itemIndex, runIndex) => () => /*#__PURE__*/React.createElement(SummaryItem, {
+  className: css.itemTooltip,
+  id: _get(items, [itemIndex, 'key']),
+  data: {
+    current: _get(items, [itemIndex, 'runs', runIndex, 'value'], 0),
+    baseline: _get(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0)
+  },
+  showDelta: runIndex < jobs.length - 1,
+  showBaselineValue: runIndex < jobs.length - 1,
+  size: "large"
+});
+
+export const BundleAssetsTotalsChartBars = _ref => {
+  let {
+    className,
+    jobs,
+    customComponentLink: CustomComponentLink
+  } = _ref;
+  const rootClassName = cx(css.root, className);
+  const items = webpack.compareBySection.sizes(jobs);
+  const dataGraphs = [];
+  items.forEach(_ref2 => {
+    let {
+      runs
+    } = _ref2;
+    runs.forEach((run, runIndex) => {
+      dataGraphs[runIndex] = [...(dataGraphs[runIndex] || []), _get(run, 'value', 0)];
     });
   });
 
-  var maxValues = _max(_map(dataGraphs, function (values) {
-    return _sum(values);
-  }));
+  const maxValues = _max(_map(dataGraphs, values => _sum(values)));
 
-  var maxValue = _max(maxValues);
+  const maxValue = _max(maxValues);
 
-  var labels = items.map(function (_ref3) {
-    var key = _ref3.key,
-        label = _ref3.label;
-    var fileType = ASSETS_SIZES_FILE_TYPE_MAP[key];
-    var componentData = getBundleAssetsFileTypeComponentLink(fileType, label);
+  const labels = items.map(_ref3 => {
+    let {
+      key,
+      label
+    } = _ref3;
+    const fileType = ASSETS_SIZES_FILE_TYPE_MAP[key];
+    const componentData = getBundleAssetsFileTypeComponentLink(fileType, label);
     return /*#__PURE__*/React.createElement(CustomComponentLink, _extends({
       className: css.itemLink
     }, componentData), label);
   });
-  var colors = getColors(_max(_map(dataGraphs, function (values) {
-    return values.length;
-  })));
-
-  var getTooltip = function getTooltip(itemIndex, runIndex) {
-    return function () {
-      return /*#__PURE__*/React.createElement(SummaryItem, {
-        className: css.itemTooltip,
-        id: _get(items, [itemIndex, 'key']),
-        data: {
-          current: _get(items, [itemIndex, 'runs', runIndex, 'value'], 0),
-          baseline: _get(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0)
-        },
-        showDelta: runIndex < jobs.length - 1,
-        showBaselineValue: runIndex < jobs.length - 1,
-        size: "large"
-      });
-    };
-  };
-
+  const colors = getColors(_max(_map(dataGraphs, values => values.length)));
   return /*#__PURE__*/React.createElement(Stack, {
     className: rootClassName,
     space: "medium"
-  }, dataGraphs.map(function (data, runIndex) {
-    var internalBuildNumber = jobs[runIndex].internalBuildNumber;
-    var values = data.map(function (value, valueIndex) {
-      return {
-        value: value,
-        color: colors[valueIndex],
-        label: labels[valueIndex],
-        getItemTooltip: getTooltip(valueIndex, runIndex)
-      };
-    });
+  }, dataGraphs.map((data, runIndex) => {
+    const {
+      internalBuildNumber
+    } = jobs[runIndex];
+    const values = data.map((value, valueIndex) => ({
+      value,
+      color: colors[valueIndex],
+      label: labels[valueIndex],
+      getItemTooltip: getTooltip(items, jobs, valueIndex, runIndex)
+    }));
     return /*#__PURE__*/React.createElement("div", {
       key: internalBuildNumber || runIndex,
       className: css.item
     }, /*#__PURE__*/React.createElement("h3", {
       className: css.itemTitle
-    }, "Job #" + internalBuildNumber), /*#__PURE__*/React.createElement(HorizontalBarChart, {
+    }, `Job #${internalBuildNumber}`), /*#__PURE__*/React.createElement(HorizontalBarChart, {
       className: css.itemChart,
       data: {
-        labels: labels,
-        values: values
+        labels,
+        values
       },
       maxValue: maxValue
     }));

package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.stories.js

@@ -5,25 +5,21 @@ import currentData from '../../../__mocks__/webpack-stats.current.json';
 import baselineData from '../../../__mocks__/webpack-stats.baseline.json';
 import { getWrapperDecorator } from '../../stories';
 import { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
-var JOBS = createJobs([{
+const JOBS = createJobs([{
   webpack: currentData
 }, {
   webpack: baselineData
 }]);
-var EMPTY_BASELINE = createJobs([{
+const EMPTY_BASELINE = createJobs([{
   webpack: currentData
 }, {
   webpack: null
 }]);
-var stories = storiesOf('Components/BundleAssetsTotalsChartBars', module);
+const stories = storiesOf('Components/BundleAssetsTotalsChartBars', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('component', function () {
-  return /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
-    jobs: JOBS
-  });
-});
-stories.add('empty baseline', function () {
-  return /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
-    jobs: EMPTY_BASELINE
-  });
-});
+stories.add('component', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
+  jobs: JOBS
+}));
+stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
+  jobs: EMPTY_BASELINE
+}));

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

@@ -5,20 +5,21 @@ import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
 import { MetricsTable } from '../metrics-table';
 import { ComponentLink } from '../component-link';
-export var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
-  var className = _ref.className,
-      jobs = _ref.jobs,
-      CustomComponentLink = _ref.customComponentLink;
-  var items = webpack.compareBySection.sizes(jobs);
-
-  var renderRowHeader = function renderRowHeader(item) {
-    var fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
-
-    var _getBundleAssetsFileT = getBundleAssetsFileTypeComponentLink(fileType, item.label),
-        section = _getBundleAssetsFileT.section,
-        title = _getBundleAssetsFileT.title,
-        params = _getBundleAssetsFileT.params;
+export const BundleAssetsTotalsTable = _ref => {
+  let {
+    className,
+    jobs,
+    customComponentLink: CustomComponentLink
+  } = _ref;
+  const items = webpack.compareBySection.sizes(jobs);
 
+  const renderRowHeader = item => {
+    const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
+    const {
+      section,
+      title,
+      params
+    } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
     return /*#__PURE__*/React.createElement(CustomComponentLink, {
       section: section,
       title: title,

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

@@ -5,29 +5,23 @@ import baselineStats from '../../../__mocks__/webpack-stats.baseline.json';
 import currentStats from '../../../__mocks__/webpack-stats.current.json';
 import { getWrapperDecorator } from '../../stories';
 import { BundleAssetsTotalsTable } from '.';
-var JOBS = createJobs([{
+const JOBS = createJobs([{
   webpack: currentStats
 }, {
   webpack: baselineStats
 }]);
-var currentJob = JOBS[0];
-var stories = storiesOf('Components/BundleAssetsTotalsTable', module);
+const [currentJob] = JOBS;
+const stories = storiesOf('Components/BundleAssetsTotalsTable', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
-    jobs: [currentJob]
-  });
-});
-stories.add('multiple jobs', function () {
-  return /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
-    jobs: JOBS
-  });
-});
-var JOBS_EMPTY_BASELINE = createJobs([{
+stories.add('default', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
+  jobs: [currentJob]
+}));
+stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
+  jobs: JOBS
+}));
+const JOBS_EMPTY_BASELINE = createJobs([{
   webpack: currentStats
 }, null]);
-stories.add('empty baseline', function () {
-  return /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
-    jobs: JOBS_EMPTY_BASELINE
-  });
-});
+stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
+  jobs: JOBS_EMPTY_BASELINE
+}));

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

@@ -1,15 +1,17 @@
-var _SORT_BY;
-
-export var SORT_BY_NAME = 'name';
-export var SORT_BY_SIZE = 'size';
-export var SORT_BY_DELTA = 'delta';
-export var SORT_BY = (_SORT_BY = {}, _SORT_BY[SORT_BY_NAME] = {
-  label: 'Name',
-  defaultDirection: 'asc'
-}, _SORT_BY[SORT_BY_DELTA] = {
-  label: 'Delta',
-  defaultDirection: 'desc'
-}, _SORT_BY[SORT_BY_SIZE] = {
-  label: 'Size',
-  defaultDirection: 'desc'
-}, _SORT_BY);
+export const SORT_BY_NAME = 'name';
+export const SORT_BY_SIZE = 'size';
+export const SORT_BY_DELTA = 'delta';
+export const SORT_BY = {
+  [SORT_BY_NAME]: {
+    label: 'Name',
+    defaultDirection: 'asc'
+  },
+  [SORT_BY_DELTA]: {
+    label: 'Delta',
+    defaultDirection: 'desc'
+  },
+  [SORT_BY_SIZE]: {
+    label: 'Size',
+    defaultDirection: 'desc'
+  }
+};

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,19 @@ 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 = _ref => {
+  let {
+    row,
+    chunks,
+    labels,
+    CustomComponentLink
+  } = _ref;
 
-  var _useState = useState(false),
-      showPopopver = _useState[0],
-      setPopover = _useState[1];
+  const chunkIds = _map(chunks, 'id');
 
-  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,8 +45,10 @@ var RowHeader = function RowHeader(_ref) {
   }, !showPopopver ? content : /*#__PURE__*/React.createElement(Popover, {
     ariaLabel: "View module info",
     label: content
-  }, function (_ref2) {
-    var popoverToggle = _ref2.popoverToggle;
+  }, _ref2 => {
+    let {
+      popoverToggle
+    } = _ref2;
     return /*#__PURE__*/React.createElement(ModuleInfo, {
       className: css.namePopover,
       item: row,
@@ -85,103 +76,112 @@ 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
-    });
-  };
+const getRenderRowHeader = _ref3 => {
+  let {
+    labels,
+    chunks,
+    CustomComponentLink
+  } = _ref3;
+  return row => /*#__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;
-
-  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 = _ref4 => {
+  let {
+    className,
+    jobs,
+    items,
+    chunks,
+    totalRowCount,
+    updateFilters,
+    resetFilters,
+    resetAllFilters,
+    filters,
+    sortFields,
+    sort,
+    updateSort,
+    search,
+    updateSearch,
+    hasActiveFilters,
+    customComponentLink: CustomComponentLink
+  } = _ref4;
+  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, _ref5) => {
+          let {
+            id,
+            name
+          } = _ref5;
+          return { ...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;
+    renderActions: _ref6 => {
+      let {
+        actionClassName
+      } = _ref6;
       return /*#__PURE__*/React.createElement(FlexStack, {
         space: "xxsmall",
         className: cx(css.dropdown, actionClassName)
       }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
         className: css.tableDropdown,
-        items: sortItems,
+        fields: sortFields,
         onChange: updateSort
       }, sort)), /*#__PURE__*/React.createElement(MetricsTableOptions, {
         handleViewAll: resetAllFilters,
@@ -207,7 +207,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 +254,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