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

package/.babelrc.js

@@ -5,14 +5,14 @@ module.exports = {
       {
         loose: true,
         modules: false,
+        useBuiltIns: 'usage',
+        corejs: 3,
+        targets: 'supports es6-module and last 2 versions',
       },
     ],
     '@babel/preset-react',
   ],
   plugins: [
-    '@babel/plugin-proposal-object-rest-spread',
-    '@babel/plugin-proposal-private-methods',
-    '@babel/plugin-proposal-class-properties',
     'babel-plugin-lodash',
     ['@simplyianm/babel-plugin-inline-react-svg', { noReactAutoImport: true, svgo: false }],
   ],

package/CHANGELOG.md

@@ -3,26 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [3.2.0-beta.1](https://github.com/relative-ci/bundle-stats/compare/v3.1.4-alpha.0...v3.2.0-beta.1) (2021-10-09)
+## [3.2.1-beta.10](https://github.com/relative-ci/bundle-stats/compare/v3.2.0...v3.2.1-beta.10) (2021-11-23)
 
 
 ### Bug Fixes
 
-* **ui:** DuplicatePackageWarning - do not show delta when no baseline ([25e08c2](https://github.com/relative-ci/bundle-stats/commit/25e08c2295b375ad7ec9e723e43ddc813eea2c8c))
-* **ui:** PackagePopover - use normalized name for searches ([d32c690](https://github.com/relative-ci/bundle-stats/commit/d32c690c370612479cf6a5f1f589ffd1c77afbb0))
+* **ui:** Regenerate package-lock.json ([8632b07](https://github.com/relative-ci/bundle-stats/commit/8632b072ffc240a1961056c08c165fbf1d986fc8))
+* **ui:** Remove unused icons ([8c337da](https://github.com/relative-ci/bundle-stats/commit/8c337da68a9628d9ef4c9d27f11747b0bc548f29))
+* **ui:** Stack - past rest props ([fb3bea5](https://github.com/relative-ci/bundle-stats/commit/fb3bea55941aeb7cf3b6aa0dc43c33d40e0cfca2))
 
 
 
 
 
-## [3.1.4-alpha.0](https://github.com/relative-ci/bundle-stats/compare/v3.1.3...v3.1.4-alpha.0) (2021-09-21)
+# [3.2.0](https://github.com/relative-ci/bundle-stats/compare/v3.1.3...v3.2.0) (2021-10-13)
 
 
 ### Bug Fixes
 
+* **ui:** Search - cancel btn background ([b0affb5](https://github.com/relative-ci/bundle-stats/commit/b0affb5ef8bdb9bb719df38e4fd8a9f6fc7ff50f))
+* Consistent dependency versions across packages ([cceebb7](https://github.com/relative-ci/bundle-stats/commit/cceebb7724670a7c40c156c395449fc65d183690))
+* **ui:** Add core-js ([c62f1bd](https://github.com/relative-ci/bundle-stats/commit/c62f1bd9b298506022aaa4f70c8291dda46ddfe6))
 * **ui:** BarChart - use light Tooltip ([64aa6fb](https://github.com/relative-ci/bundle-stats/commit/64aa6fb6ec00593ce43a6b8e55f26de897aef6ea))
 * **ui:** BundlePackages - show package path ([69dcb45](https://github.com/relative-ci/bundle-stats/commit/69dcb450335cce214b769862792c5a403d45dd66))
+* **ui:** DuplicatePackageWarning - do not show delta when no baseline ([25e08c2](https://github.com/relative-ci/bundle-stats/commit/25e08c2295b375ad7ec9e723e43ddc813eea2c8c))
 * **ui:** MetricsTable - increase left spacing ([5b021aa](https://github.com/relative-ci/bundle-stats/commit/5b021aa3c6ae331a4126587e299dbac9c5df7961))
+* **ui:** PackagePopover - use normalized name for searches ([d32c690](https://github.com/relative-ci/bundle-stats/commit/d32c690c370612479cf6a5f1f589ffd1c77afbb0))
+* **ui:** Remove unused webpack.config & dependencies ([313a6de](https://github.com/relative-ci/bundle-stats/commit/313a6de350d3752aa053f027bbba32053ea8a1f3))
 * **ui:** Tabs - use def focus/active ([3bfdfff](https://github.com/relative-ci/bundle-stats/commit/3bfdfff35c9e279c5e139fdb2ed17373d1848bfc))
 * **ui:** Tooltip - add darkMode variation ([b60f619](https://github.com/relative-ci/bundle-stats/commit/b60f61966f1022ab6d0aa4a0e6155ba68e47286d))
 * **ui:** Tooltip - update styles ([438d16a](https://github.com/relative-ci/bundle-stats/commit/438d16a813495808ed026e958217e95de2b65fd9))

package/lib/assets/icons/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>

package/lib/assets/icons/cancel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

package/lib/assets/icons/clock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>

package/lib/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

package/lib/assets/icons/commit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg>

package/lib/assets/icons/filter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart" transform="rotate(-90deg)"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>

package/lib/assets/icons/help.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

package/lib/assets/icons/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>

package/lib/assets/icons/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

package/lib/assets/icons.svg

@@ -0,0 +1 @@
+<svg width="16" height="16"><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="afeather afeather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M19 12l-7 7-7-7"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bfeather bfeather-x-circle" id="cancel" 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="cfeather cfeather-clock" id="clock" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dfeather dfeather-x" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="efeather efeather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="4"/><path d="M1.05 12H7M17.01 12h5.95"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ffeather ffeather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg"><path d="M12 20V10M18 20V4M6 20v-4"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gfeather gfeather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hfeather hfeather-menu" id="menu" xmlns="http://www.w3.org/2000/svg"><path d="M3 12h18M3 6h18M3 18h18"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jfeather jfeather-alert-triangle" 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/lib/components/browsertime-table/browsertime-table.stories.js

@@ -22,6 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+// eslint-disable-next-line import/no-relative-packages
 var browsertimeFixtures = browsertime.filter(_browsertime2["default"]);
 var JOBS = (0, _utils.createJobs)([{
   browsertime: browsertimeFixtures

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

@@ -183,7 +183,7 @@ var BundleAssets = function BundleAssets(props) {
       totalRowCount = props.totalRowCount,
       filters = props.filters,
       hasActiveFilters = props.hasActiveFilters,
-      sortItems = props.sortItems,
+      sortFields = props.sortFields,
       sort = props.sort,
       updateSort = props.updateSort,
       search = props.search,
@@ -215,7 +215,7 @@ var BundleAssets = function BundleAssets(props) {
         space: "xsmall",
         className: (0, _classnames["default"])(_bundleAssetsModule["default"].dropdown, actionClassName)
       }, /*#__PURE__*/_react["default"].createElement(_sortDropdown.SortDropdown, _extends({
-        items: sortItems
+        fields: sortFields
       }, sort, {
         onChange: updateSort
       })), /*#__PURE__*/_react["default"].createElement(_metricsTableOptions.MetricsTableOptions, {
@@ -303,7 +303,7 @@ BundleAssets.propTypes = {
     changed: _propTypes["default"].bool
   }).isRequired,
   hasActiveFilters: _propTypes["default"].bool,
-  sortItems: _propTypes["default"].shape(_defineProperty({}, _propTypes["default"].string, _propTypes["default"].shape({
+  sortFields: _propTypes["default"].shape(_defineProperty({}, _propTypes["default"].string, _propTypes["default"].shape({
     label: _propTypes["default"].string,
     defaultDirection: _propTypes["default"].bool
   }))).isRequired,

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

@@ -44,16 +44,22 @@ var _JOBS = _slicedToArray(JOBS, 2),
     currentJob = _JOBS[0],
     baselineJob = _JOBS[1];
 
+var setState = function setState(params) {
+  return console.info(params);
+};
+
 var stories = (0, _react2.storiesOf)('Components/BundleAssets', module);
 stories.addDecorator((0, _stories.getWrapperDecorator)());
 stories.add('default', function () {
   return /*#__PURE__*/_react["default"].createElement(_.BundleAssets, {
-    jobs: [baselineJob]
+    jobs: [baselineJob],
+    setState: setState
   });
 });
 stories.add('multiple jobs', function () {
   return /*#__PURE__*/_react["default"].createElement(_.BundleAssets, {
-    jobs: JOBS
+    jobs: JOBS,
+    setState: setState
   });
 });
 stories.add('custom filters', function () {
@@ -61,7 +67,8 @@ stories.add('custom filters', function () {
 
   return /*#__PURE__*/_react["default"].createElement(_.BundleAssets, {
     jobs: JOBS,
-    filters: (_ref = {}, _defineProperty(_ref, "".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.ENTRY), true), _defineProperty(_ref, "".concat(_utils.ASSET_FILE_TYPE, ".").concat(_utils.FILE_TYPE_JS), true), _ref)
+    filters: (_ref = {}, _defineProperty(_ref, "".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.ENTRY), true), _defineProperty(_ref, "".concat(_utils.ASSET_FILE_TYPE, ".").concat(_utils.FILE_TYPE_JS), true), _ref),
+    setState: setState
   });
 });
 var JOBS_EMPTY_BASELINE = (0, _utils.createJobs)([{
@@ -69,14 +76,16 @@ var JOBS_EMPTY_BASELINE = (0, _utils.createJobs)([{
 }, null]);
 stories.add('empty baseline', function () {
   return /*#__PURE__*/_react["default"].createElement(_.BundleAssets, {
-    jobs: JOBS_EMPTY_BASELINE
+    jobs: JOBS_EMPTY_BASELINE,
+    setState: setState
   });
 });
 stories.add('no assets', function () {
   return /*#__PURE__*/_react["default"].createElement(_.BundleAssets, {
     jobs: JOBS.map(function (job) {
       return (0, _set2["default"])((0, _merge2["default"])({}, job), 'metrics.webpack.assets', {});
-    })
+    }),
+    setState: setState
   });
 });
 stories.add('empty filtered data', function () {
@@ -89,7 +98,9 @@ stories.add('empty filtered data', function () {
       'main.js': {
         value: 100
       }
-    })]
+    })],
+    search: "vendors",
+    setState: setState
   });
 });
 stories.add('not predictive', function () {
@@ -104,6 +115,7 @@ stories.add('not predictive', function () {
         name: 'static/js/not-predictive.93191a1.js',
         value: 2988
       }
-    })]
+    })],
+    setState: setState
   });
 });

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

@@ -3,41 +3,108 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getAllChunkIds = void 0;
+exports.getRowFilter = exports.getIsNotPredictive = exports.getCustomSort = exports.addRowIsNotPredictive = exports.addRowAssetFlags = void 0;
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+var _get2 = _interopRequireDefault(require("lodash/get"));
 
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+var _utils = require("@bundle-stats/utils");
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+var _bundleAssets = require("./bundle-assets.constants");
 
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+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; }
 
-/**
- * Get a list of all chunkIds across assets and runs
- *
- * @param {Array<Object>} items
- * @return {Array<string|number>}
- */
-var getAllChunkIds = function getAllChunkIds(items) {
-  return items.reduce(function (agg, item) {
-    var itemChunkIds = item.runs.map(function (run) {
-      return run === null || run === void 0 ? void 0 : run.chunkId;
-    }).filter(function (chunkId) {
-      return typeof chunkId !== 'undefined';
-    });
-    return itemChunkIds.reduce(function (itemAgg, chunkId) {
-      if (itemAgg.includes(chunkId)) {
-        return itemAgg;
-      }
+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; }
 
-      return [].concat(_toConsumableArray(itemAgg), [chunkId]);
-    }, agg);
-  }, []);
+var addRowAssetFlags = function addRowAssetFlags(row) {
+  var runs = row.runs;
+  var isEntry = runs.map(function (run) {
+    return run === null || run === void 0 ? void 0 : run.isEntry;
+  }).includes(true);
+  var isInitial = runs.map(function (run) {
+    return run === null || run === void 0 ? void 0 : run.isInitial;
+  }).includes(true);
+  var isChunk = runs.map(function (run) {
+    return run === null || run === void 0 ? void 0 : run.isChunk;
+  }).includes(true);
+  var isAsset = !(isEntry || isInitial || isChunk);
+  return _objectSpread(_objectSpread({}, row), {}, {
+    isEntry: isEntry,
+    isInitial: isInitial,
+    isChunk: isChunk,
+    isAsset: isAsset
+  });
 };
 
-exports.getAllChunkIds = getAllChunkIds;
+exports.addRowAssetFlags = addRowAssetFlags;
+
+var getIsNotPredictive = function getIsNotPredictive(key, runs) {
+  return runs.reduce(function (agg, current, index) {
+    if (agg) {
+      return agg;
+    }
+
+    if (index + 1 === runs.length) {
+      return agg;
+    }
+
+    if (current && runs[index + 1] && current.delta !== 0 && key !== current.name && current.name === runs[index + 1].name) {
+      return true;
+    }
+
+    return agg;
+  }, false);
+};
+
+exports.getIsNotPredictive = getIsNotPredictive;
+
+var addRowIsNotPredictive = function addRowIsNotPredictive(row) {
+  return _objectSpread(_objectSpread({}, row), {}, {
+    isNotPredictive: getIsNotPredictive(row.key, row.runs)
+  });
+};
+
+exports.addRowIsNotPredictive = addRowIsNotPredictive;
+
+var getRowFilter = function getRowFilter(filters) {
+  return function (item) {
+    if (filters[_utils.ASSET_FILTERS.CHANGED] && !item.changed) {
+      return false;
+    }
+
+    if (!(filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.ENTRY)] && item.isEntry || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.INITIAL)] && item.isInitial || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.CHUNK)] && item.isChunk || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.ASSET)] && item.isAsset)) {
+      return false;
+    }
+
+    if (!filters["".concat(_utils.ASSET_FILE_TYPE, ".").concat((0, _utils.getFileType)(item.key))]) {
+      return false;
+    }
+
+    return true;
+  };
+};
+
+exports.getRowFilter = getRowFilter;
+
+var getCustomSort = function getCustomSort(sortId) {
+  return function (item) {
+    if (sortId === _bundleAssets.SORT_BY_NAME) {
+      return item.key;
+    }
+
+    if (sortId === _bundleAssets.SORT_BY_DELTA) {
+      return (0, _get2["default"])(item, 'runs[0].deltaPercentage', 0);
+    }
+
+    if (sortId === _bundleAssets.SORT_BY_SIZE) {
+      return (0, _get2["default"])(item, 'runs[0].value', 0);
+    }
+
+    return [!item.isNotPredictive, !item.changed, !item.isInitial, !item.isEntry, !item.isChunk, item.key];
+  };
+};
+
+exports.getCustomSort = getCustomSort;

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

@@ -1,13 +1,124 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BundleAssets = void 0;
 
-var _bundleAssets = require("./bundle-assets.container");
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var webpack = _interopRequireWildcard(require("@bundle-stats/utils/lib-esm/webpack"));
+
+var _utils = require("@bundle-stats/utils");
+
+var _componentLinks = require("@bundle-stats/utils/lib-esm/utils/component-links");
+
+var _rowsFilter = require("../../hooks/rows-filter");
+
+var _rowsSort = require("../../hooks/rows-sort");
+
+var _searchParams = require("../../hooks/search-params");
+
+var _bundleAssets = require("./bundle-assets");
+
+var _bundleAssets2 = require("./bundle-assets.utils");
+
+var _bundleAssets3 = require("./bundle-assets.constants");
+
+var _excluded = ["jobs", "filters", "search", "setState", "sortBy", "direction"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var BundleAssets = function BundleAssets(props) {
+  var jobs = props.jobs,
+      filters = props.filters,
+      search = props.search,
+      setState = props.setState,
+      sortBy = props.sortBy,
+      direction = props.direction,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    return {
+      defaultFilters: _objectSpread(_objectSpread(_defineProperty({}, _utils.ASSET_FILTERS.CHANGED, (jobs === null || jobs === void 0 ? void 0 : jobs.length) > 1), (0, _componentLinks.getAssetEntryTypeFilters)(true)), (0, _componentLinks.getAssetFileTypeFilters)(true)),
+      allEntriesFilters: _objectSpread(_objectSpread(_defineProperty({}, _utils.ASSET_FILTERS.CHANGED, false), (0, _componentLinks.getAssetEntryTypeFilters)(true)), (0, _componentLinks.getAssetFileTypeFilters)(true))
+    };
+  }, [jobs]),
+      defaultFilters = _useMemo.defaultFilters,
+      allEntriesFilters = _useMemo.allEntriesFilters;
+
+  var searchParams = (0, _searchParams.useSearchParams)({
+    search: search,
+    filters: filters,
+    defaultFilters: defaultFilters,
+    allEntriesFilters: allEntriesFilters,
+    setState: setState
+  });
+
+  var _useMemo2 = (0, _react.useMemo)(function () {
+    var result = webpack.compareBySection.assets(jobs, [_bundleAssets2.addRowAssetFlags, _bundleAssets2.addRowIsNotPredictive]);
+    return {
+      rows: result,
+      totalRowCount: result.length
+    };
+  }, [jobs]),
+      rows = _useMemo2.rows,
+      totalRowCount = _useMemo2.totalRowCount;
 
-var _bundleAssets2 = require("./bundle-assets");
+  var filteredRows = (0, _rowsFilter.useRowsFilter)({
+    rows: rows,
+    searchPattern: searchParams.searchPattern,
+    filters: searchParams.filters,
+    getRowFilter: _bundleAssets2.getRowFilter
+  });
+  var sortParams = (0, _rowsSort.useRowsSort)({
+    rows: filteredRows,
+    sortFields: _bundleAssets3.SORT_BY,
+    sortBy: sortBy,
+    sortDirection: direction,
+    getCustomSort: _bundleAssets2.getCustomSort
+  });
+  return /*#__PURE__*/_react["default"].createElement(_bundleAssets.BundleAssets, _extends({
+    jobs: jobs
+  }, restProps, searchParams, sortParams, {
+    totalRowCount: totalRowCount
+  }));
+};
 
-var BundleAssets = (0, _bundleAssets.enhance)(_bundleAssets2.BundleAssets);
-exports.BundleAssets = BundleAssets;
+exports.BundleAssets = BundleAssets;
+BundleAssets.propTypes = {
+  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired,
+  // eslint-disable-line react/forbid-prop-types
+  filters: _propTypes["default"].object,
+  // eslint-disable-line react/forbid-prop-types
+  search: _propTypes["default"].string,
+  sortBy: _propTypes["default"].string,
+  direction: _propTypes["default"].string,
+  setState: _propTypes["default"].func.isRequired
+};
+BundleAssets.defaultProps = {
+  filters: undefined,
+  search: undefined,
+  sortBy: undefined,
+  direction: undefined
+};

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

@@ -59,6 +59,22 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
+var getTooltip = function getTooltip(items, jobs, itemIndex, runIndex) {
+  return function () {
+    return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+      className: _bundleAssetsTotalsChartBarsModule["default"].itemTooltip,
+      id: (0, _get2["default"])(items, [itemIndex, 'key']),
+      data: {
+        current: (0, _get2["default"])(items, [itemIndex, 'runs', runIndex, 'value'], 0),
+        baseline: (0, _get2["default"])(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0)
+      },
+      showDelta: runIndex < jobs.length - 1,
+      showBaselineValue: runIndex < jobs.length - 1,
+      size: "large"
+    });
+  };
+};
+
 var BundleAssetsTotalsChartBars = function BundleAssetsTotalsChartBars(_ref) {
   var className = _ref.className,
       jobs = _ref.jobs,
@@ -88,23 +104,6 @@ var BundleAssetsTotalsChartBars = function BundleAssetsTotalsChartBars(_ref) {
   var colors = (0, _utils2.getColors)((0, _max2["default"])((0, _map2["default"])(dataGraphs, function (values) {
     return values.length;
   })));
-
-  var getTooltip = function getTooltip(itemIndex, runIndex) {
-    return function () {
-      return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
-        className: _bundleAssetsTotalsChartBarsModule["default"].itemTooltip,
-        id: (0, _get2["default"])(items, [itemIndex, 'key']),
-        data: {
-          current: (0, _get2["default"])(items, [itemIndex, 'runs', runIndex, 'value'], 0),
-          baseline: (0, _get2["default"])(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0)
-        },
-        showDelta: runIndex < jobs.length - 1,
-        showBaselineValue: runIndex < jobs.length - 1,
-        size: "large"
-      });
-    };
-  };
-
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     className: rootClassName,
     space: "medium"
@@ -115,7 +114,7 @@ var BundleAssetsTotalsChartBars = function BundleAssetsTotalsChartBars(_ref) {
         value: value,
         color: colors[valueIndex],
         label: labels[valueIndex],
-        getItemTooltip: getTooltip(valueIndex, runIndex)
+        getItemTooltip: getTooltip(items, jobs, valueIndex, runIndex)
       };
     });
     return /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -159,7 +159,7 @@ var BundleModules = function BundleModules(_ref4) {
       resetFilters = _ref4.resetFilters,
       resetAllFilters = _ref4.resetAllFilters,
       filters = _ref4.filters,
-      sortItems = _ref4.sortItems,
+      sortFields = _ref4.sortFields,
       sort = _ref4.sort,
       updateSort = _ref4.updateSort,
       search = _ref4.search,
@@ -226,7 +226,7 @@ var BundleModules = function BundleModules(_ref4) {
         className: (0, _classnames["default"])(_bundleModulesModule["default"].dropdown, actionClassName)
       }, /*#__PURE__*/_react["default"].createElement(_sortDropdown.SortDropdown, _extends({
         className: _bundleModulesModule["default"].tableDropdown,
-        items: sortItems,
+        fields: sortFields,
         onChange: updateSort
       }, sort)), /*#__PURE__*/_react["default"].createElement(_metricsTableOptions.MetricsTableOptions, {
         handleViewAll: resetAllFilters,
@@ -301,7 +301,7 @@ BundleModules.propTypes = {
     changed: _propTypes["default"].bool
   }).isRequired,
   hasActiveFilters: _propTypes["default"].bool,
-  sortItems: _propTypes["default"].shape(_defineProperty({}, _propTypes["default"].string, _propTypes["default"].shape({
+  sortFields: _propTypes["default"].shape(_defineProperty({}, _propTypes["default"].string, _propTypes["default"].shape({
     label: _propTypes["default"].string,
     defaultDirection: _propTypes["default"].bool
   }))).isRequired,