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

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

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModuleFilterByChunk = exports.getRowFilter = exports.getCustomSort = exports.addRowSourceFlag = void 0;
+
+var _merge2 = _interopRequireDefault(require("lodash/merge"));
+
+var _intersection2 = _interopRequireDefault(require("lodash/intersection"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _react = require("react");
+
+var _webpack = require("@bundle-stats/utils/lib-esm/webpack");
+
+var _utils = require("@bundle-stats/utils");
+
+var _bundleModules = require("./bundle-modules.constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+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."); }
+
+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); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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 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; }
+
+var addRowSourceFlag = function addRowSourceFlag(row) {
+  var key = row.key;
+  var thirdParty = Boolean(key.match(_webpack.MODULE_PATH_PACKAGES));
+  return _objectSpread(_objectSpread({}, row), {}, {
+    thirdParty: thirdParty
+  });
+};
+
+exports.addRowSourceFlag = addRowSourceFlag;
+
+var getCustomSort = function getCustomSort(sortBy) {
+  return function (item) {
+    if (sortBy === _bundleModules.SORT_BY_NAME) {
+      return item.key;
+    }
+
+    if (sortBy === _bundleModules.SORT_BY_SIZE) {
+      return (0, _get2["default"])(item, 'runs[0].value', 0);
+    }
+
+    if (sortBy === _bundleModules.SORT_BY_DELTA) {
+      return (0, _get2["default"])(item, 'runs[0].deltaPercentage', 0);
+    }
+
+    return [!item.changed, item.key];
+  };
+};
+
+exports.getCustomSort = getCustomSort;
+
+var getRowFilter = function getRowFilter(filters) {
+  return function (row) {
+    // Skip not changed rows
+    if (filters[_utils.MODULE_FILTERS.CHANGED] && !row.changed) {
+      return false;
+    } // Skip not matching source type
+
+
+    if (!(filters["".concat(_utils.MODULE_SOURCE_TYPE, ".").concat(_utils.MODULE_FILTERS.FIRST_PARTY)] && row.thirdParty === false || filters["".concat(_utils.MODULE_SOURCE_TYPE, ".").concat(_utils.MODULE_FILTERS.THIRD_PARTY)] && row.thirdParty === true)) {
+      return false;
+    } // Skip not matching source file types
+
+
+    var fileType = (0, _utils.getModuleSourceFileType)(row.key);
+
+    if (!filters["".concat(_utils.MODULE_FILE_TYPE, ".").concat(fileType)]) {
+      return false;
+    }
+
+    return true;
+  };
+};
+
+exports.getRowFilter = getRowFilter;
+
+var useModuleFilterByChunk = function useModuleFilterByChunk(_ref) {
+  var jobs = _ref.jobs,
+      filters = _ref.filters,
+      chunkIds = _ref.chunkIds;
+  var filteredJobs = (0, _react.useMemo)(function () {
+    // List of chunkIds with filter value set to `true`
+    var includedChunkIds = chunkIds.reduce(function (agg, chunkId) {
+      if ((0, _get2["default"])(filters, "".concat(_utils.MODULE_CHUNK, ".").concat(chunkId))) {
+        return [].concat(_toConsumableArray(agg), [chunkId]);
+      }
+
+      return agg;
+    }, []); // If all the filters are included, return jobs as they are
+
+    if (includedChunkIds.length === chunkIds.length) {
+      return jobs;
+    }
+
+    var jobsWithFilteredData = jobs.map(function (job) {
+      var _job$metrics;
+
+      var _ref2 = (job === null || job === void 0 ? void 0 : (_job$metrics = job.metrics) === null || _job$metrics === void 0 ? void 0 : _job$metrics.webpack) || {},
+          modules = _ref2.modules;
+
+      var filteredModules = Object.entries(modules).reduce(function (agg, _ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+            moduleId = _ref4[0],
+            moduleEntry = _ref4[1];
+
+        var match = (0, _intersection2["default"])(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
+
+      var newJob = (0, _merge2["default"])({}, job);
+      newJob.metrics.webpack.modules = filteredModules;
+      return newJob;
+    });
+    return jobsWithFilteredData;
+  }, [jobs, filters, chunkIds]);
+  return filteredJobs;
+};
+
+exports.useModuleFilterByChunk = useModuleFilterByChunk;

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

@@ -1,15 +1,146 @@
 "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.BundleModules = void 0;
 
-var _bundleModules = _interopRequireDefault(require("./bundle-modules.container"));
+var _map2 = _interopRequireDefault(require("lodash/map"));
+
+var _uniqBy2 = _interopRequireDefault(require("lodash/uniqBy"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("@bundle-stats/utils");
+
+var webpack = _interopRequireWildcard(require("@bundle-stats/utils/lib-esm/webpack"));
+
+var _rowsFilter = require("../../hooks/rows-filter");
+
+var _rowsSort = require("../../hooks/rows-sort");
+
+var _searchParams = require("../../hooks/search-params");
+
+var _bundleModules = require("./bundle-modules");
+
+var _bundleModules2 = require("./bundle-modules.utils");
+
+var _bundleModules3 = require("./bundle-modules.constants");
+
+var _excluded = ["jobs", "filters", "search", "setState", "sortBy", "direction"];
+
+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); }
 
-var _bundleModules2 = require("./bundle-modules");
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var BundleModules = (0, _bundleModules["default"])(_bundleModules2.BundleModules);
-exports.BundleModules = BundleModules;
+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 BundleModules = function BundleModules(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 chunks = (0, _uniqBy2["default"])(jobs.map(function (job) {
+    var _job$meta, _job$meta$webpack;
+
+    return (job === null || job === void 0 ? void 0 : (_job$meta = job.meta) === null || _job$meta === void 0 ? void 0 : (_job$meta$webpack = _job$meta.webpack) === null || _job$meta$webpack === void 0 ? void 0 : _job$meta$webpack.chunks) || [];
+  }).flat(), function (_ref) {
+    var id = _ref.id;
+    return id;
+  });
+  var chunkIds = (0, _map2["default"])(chunks, 'id');
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    return {
+      defaultFilters: _objectSpread(_objectSpread(_objectSpread({
+        changed: (jobs === null || jobs === void 0 ? void 0 : jobs.length) > 1
+      }, (0, _utils.getModuleSourceTypeFilters)(true)), (0, _utils.getModuleChunkFilters)(chunkIds, true)), (0, _utils.getModuleFileTypeFilters)(true)),
+      allEntriesFilters: _objectSpread(_objectSpread(_objectSpread({
+        changed: false
+      }, (0, _utils.getModuleSourceTypeFilters)(true)), (0, _utils.getModuleChunkFilters)(chunkIds, true)), (0, _utils.getModuleFileTypeFilters)(true))
+    };
+  }, [jobs]),
+      defaultFilters = _useMemo.defaultFilters,
+      allEntriesFilters = _useMemo.allEntriesFilters;
+
+  var searchParams = (0, _searchParams.useSearchParams)({
+    search: search,
+    filters: filters,
+    defaultFilters: defaultFilters,
+    allEntriesFilters: allEntriesFilters,
+    setState: setState
+  });
+  var filteredJobsByChunkIds = (0, _bundleModules2.useModuleFilterByChunk)({
+    jobs: jobs,
+    filters: searchParams.filters,
+    chunkIds: chunkIds
+  });
+
+  var _useMemo2 = (0, _react.useMemo)(function () {
+    var result = webpack.compareBySection.modules(filteredJobsByChunkIds, [_bundleModules2.addRowSourceFlag]);
+    return {
+      rows: result,
+      totalRowCount: result.length
+    };
+  }, [filteredJobsByChunkIds]),
+      rows = _useMemo2.rows,
+      totalRowCount = _useMemo2.totalRowCount;
+
+  var filteredRows = (0, _rowsFilter.useRowsFilter)({
+    rows: rows,
+    searchPattern: searchParams.searchPattern,
+    filters: searchParams.filters,
+    getRowFilter: _bundleModules2.getRowFilter
+  });
+  var sortParams = (0, _rowsSort.useRowsSort)({
+    rows: filteredRows,
+    sortFields: _bundleModules3.SORT_BY,
+    sortBy: sortBy,
+    sortDirection: direction,
+    getCustomSort: _bundleModules2.getCustomSort
+  });
+  return /*#__PURE__*/_react["default"].createElement(_bundleModules.BundleModules, _extends({
+    jobs: jobs,
+    chunks: chunks
+  }, restProps, searchParams, sortParams, {
+    totalRowCount: totalRowCount
+  }));
+};
+
+exports.BundleModules = BundleModules;
+BundleModules.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
+};
+BundleModules.defaultProps = {
+  filters: undefined,
+  search: undefined,
+  sortBy: undefined,
+  direction: undefined
+};

package/lib/components/bundle-packages/bundle-packages.constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SORT_BY = exports.SORT_BY_DELTA = exports.SORT_BY_SIZE = exports.SORT_BY_NAME = void 0;
+exports.SORT_BY_SIZE = exports.SORT_BY_NAME = exports.SORT_BY_DELTA = exports.SORT_BY = void 0;
 
 var _SORT_BY;
 

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

@@ -57,6 +57,18 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+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); }
+
+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 _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var PackagePopoverContent = function PackagePopoverContent(_ref) {
   var name = _ref.name,
       fullName = _ref.fullName,
@@ -64,6 +76,12 @@ var PackagePopoverContent = function PackagePopoverContent(_ref) {
       duplicate = _ref.duplicate,
       CustomComponentLink = _ref.CustomComponentLink;
   var normalizedPackagePath = path || "node_modules/".concat(fullName.split(_utils.PACKAGES_SEPARATOR).join('/node_modules/'), "/");
+
+  var _name$split = name.split(_utils.PACKAGE_ID_SEPARATOR),
+      _name$split2 = _slicedToArray(_name$split, 2),
+      normalizedName = _name$split2[0],
+      packageId = _name$split2[1];
+
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxsmall",
     className: _bundlePackagesModule["default"].packagePopover
@@ -71,7 +89,9 @@ var PackagePopoverContent = function PackagePopoverContent(_ref) {
     space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("h3", {
     className: _bundlePackagesModule["default"].packagePopoverTitle
-  }, name), /*#__PURE__*/_react["default"].createElement("p", {
+  }, normalizedName, packageId && /*#__PURE__*/_react["default"].createElement("span", {
+    className: _bundlePackagesModule["default"].packagePopoverTitleIndex
+  }, "".concat(_utils.PACKAGE_ID_SEPARATOR).concat(packageId))), /*#__PURE__*/_react["default"].createElement("p", {
     className: _bundlePackagesModule["default"].packagePopoverPath
   }, /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
     className: _bundlePackagesModule["default"].packagePopoverPathValue,
@@ -81,19 +101,19 @@ var PackagePopoverContent = function PackagePopoverContent(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("li", {
     className: _bundlePackagesModule["default"].packagePopoverItem
   }, /*#__PURE__*/_react["default"].createElement("a", {
-    href: "https://www.npmjs.com/package/".concat(name),
+    href: "https://www.npmjs.com/package/".concat(normalizedName),
     target: "_blank",
     rel: "noreferrer"
   }, "npmjs.com")), /*#__PURE__*/_react["default"].createElement("li", {
     className: _bundlePackagesModule["default"].packagePopoverItem
   }, /*#__PURE__*/_react["default"].createElement("a", {
-    href: "https://bundlephobia.com/result?p=".concat(name),
+    href: "https://bundlephobia.com/result?p=".concat(normalizedName),
     target: "_blank",
     rel: "noreferrer"
   }, "bundlephobia.com"))), /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall",
     className: _bundlePackagesModule["default"].packagePopover.actions
-  }, duplicate && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(CustomComponentLink, (0, _utils.getBundlePackagesByNameComponentLink)(name), "View all duplicate instances")), /*#__PURE__*/_react["default"].createElement(CustomComponentLink, (0, _utils.getBundleModulesBySearch)(normalizedPackagePath), "View package modules")));
+  }, duplicate && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(CustomComponentLink, (0, _utils.getBundlePackagesByNameComponentLink)(normalizedName), "View all duplicate instances")), /*#__PURE__*/_react["default"].createElement(CustomComponentLink, (0, _utils.getBundleModulesBySearch)(normalizedPackagePath), "Search modules by package path")));
 };
 
 PackagePopoverContent.propTypes = {
@@ -160,7 +180,7 @@ var BundlePackages = function BundlePackages(props) {
       resetAllFilters = props.resetAllFilters,
       totalRowCount = props.totalRowCount,
       filters = props.filters,
-      sortItems = props.sortItems,
+      sortFields = props.sortFields,
       sort = props.sort,
       updateSort = props.updateSort,
       search = props.search,
@@ -191,7 +211,7 @@ var BundlePackages = function BundlePackages(props) {
         space: "xxsmall",
         className: (0, _classnames["default"])(_bundlePackagesModule["default"].dropdown, actionClassName)
       }, /*#__PURE__*/_react["default"].createElement(_sortDropdown.SortDropdown, _extends({
-        items: sortItems
+        fields: sortFields
       }, sort, {
         onChange: updateSort
       })), /*#__PURE__*/_react["default"].createElement(_metricsTableOptions.MetricsTableOptions, {
@@ -259,7 +279,7 @@ BundlePackages.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-packages/bundle-packages.module.css

@@ -47,6 +47,11 @@
   min-width: 320px;
 }
 
+.packagePopoverTitleIndex {
+  color: var(--color-text-light);
+  font-weight: normal;
+}
+
 .packagePopoverPathValue {
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);

package/lib/components/bundle-packages/{bundle-packages.container.js → bundle-packages.utils.js}

@@ -1,11 +1,9 @@
 "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.enhance = void 0;
+exports.getRowFilter = exports.getDuplicatePackages = exports.getCustomSort = exports.getAddRowDuplicateFlag = void 0;
 
 var _uniq2 = _interopRequireDefault(require("lodash/uniq"));
 
@@ -13,26 +11,10 @@ var _flatten2 = _interopRequireDefault(require("lodash/flatten"));
 
 var _get2 = _interopRequireDefault(require("lodash/get"));
 
-var _react = require("react");
-
-var _recompose = require("recompose");
-
 var _utils = require("@bundle-stats/utils");
 
-var webpack = _interopRequireWildcard(require("@bundle-stats/utils/lib-esm/webpack"));
-
-var _withCustomSort = require("../../hocs/with-custom-sort");
-
-var _withFilteredItems = require("../../hocs/with-filtered-items");
-
-var _withSearch = require("../../hocs/with-search");
-
 var _bundlePackages = require("./bundle-packages.constants");
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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; }
@@ -52,6 +34,8 @@ var getDuplicatePackages = function getDuplicatePackages(jobs) {
   return (0, _uniq2["default"])((0, _flatten2["default"])(jobsDuplicatePackages));
 };
 
+exports.getDuplicatePackages = getDuplicatePackages;
+
 var getRowFilter = function getRowFilter(filters) {
   return function (item) {
     if (filters[_utils.PACKAGE_FILTERS.CHANGED] && !item.changed) {
@@ -66,6 +50,8 @@ var getRowFilter = function getRowFilter(filters) {
   };
 };
 
+exports.getRowFilter = getRowFilter;
+
 var getCustomSort = function getCustomSort(sortId) {
   return function (item) {
     if (sortId === _bundlePackages.SORT_BY_NAME) {
@@ -84,6 +70,8 @@ var getCustomSort = function getCustomSort(sortId) {
   };
 };
 
+exports.getCustomSort = getCustomSort;
+
 var getAddRowDuplicateFlag = function getAddRowDuplicateFlag(duplicateJobs) {
   return function (row) {
     return _objectSpread(_objectSpread({}, row), {}, {
@@ -92,26 +80,4 @@ var getAddRowDuplicateFlag = function getAddRowDuplicateFlag(duplicateJobs) {
   };
 };
 
-var enhance = (0, _recompose.compose)((0, _recompose.withProps)(function (_ref) {
-  var _defaultFilters, _allEntriesFilters;
-
-  var jobs = _ref.jobs;
-  var items = (0, _react.useMemo)(function () {
-    var duplicateJobs = getDuplicatePackages(jobs);
-    return webpack.compareBySection.packages(jobs, [getAddRowDuplicateFlag(duplicateJobs)]);
-  }, [jobs]);
-  var defaultFilters = (_defaultFilters = {}, _defineProperty(_defaultFilters, _utils.PACKAGE_FILTERS.CHANGED, (jobs === null || jobs === void 0 ? void 0 : jobs.length) > 1), _defineProperty(_defaultFilters, _utils.PACKAGE_FILTERS.DUPLICATE, false), _defaultFilters);
-  var allEntriesFilters = (_allEntriesFilters = {}, _defineProperty(_allEntriesFilters, _utils.PACKAGE_FILTERS.CHANGED, false), _defineProperty(_allEntriesFilters, _utils.PACKAGE_FILTERS.DUPLICATE, false), _allEntriesFilters);
-  return {
-    totalRowCount: items.length,
-    items: items,
-    defaultFilters: defaultFilters,
-    allEntriesFilters: allEntriesFilters
-  };
-}), (0, _withSearch.withSearch)(), (0, _withFilteredItems.withFilteredItems)(getRowFilter), (0, _withCustomSort.withCustomSort)({
-  sortItems: _bundlePackages.SORT_BY,
-  getCustomSort: getCustomSort,
-  sortBy: _bundlePackages.SORT_BY_SIZE,
-  direction: _bundlePackages.SORT_BY[_bundlePackages.SORT_BY_SIZE].defaultDirection
-}));
-exports.enhance = enhance;
+exports.getAddRowDuplicateFlag = getAddRowDuplicateFlag;

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

@@ -1,13 +1,121 @@
 "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.BundlePackages = void 0;
 
-var _bundlePackages = require("./bundle-packages.container");
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("@bundle-stats/utils");
+
+var webpack = _interopRequireWildcard(require("@bundle-stats/utils/lib-esm/webpack/compare"));
+
+var _rowsFilter = require("../../hooks/rows-filter");
+
+var _rowsSort = require("../../hooks/rows-sort");
+
+var _searchParams = require("../../hooks/search-params");
+
+var _bundlePackages = require("./bundle-packages.constants");
 
 var _bundlePackages2 = require("./bundle-packages");
 
-var BundlePackages = (0, _bundlePackages.enhance)(_bundlePackages2.BundlePackages);
-exports.BundlePackages = BundlePackages;
+var _bundlePackages3 = require("./bundle-packages.utils");
+
+var _excluded = ["jobs", "search", "filters", "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 _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 BundlePackages = function BundlePackages(props) {
+  var jobs = props.jobs,
+      search = props.search,
+      filters = props.filters,
+      setState = props.setState,
+      sortBy = props.sortBy,
+      direction = props.direction,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    var _defaultFilters, _allEntriesFilters;
+
+    return {
+      defaultFilters: (_defaultFilters = {}, _defineProperty(_defaultFilters, _utils.PACKAGE_FILTERS.CHANGED, (jobs === null || jobs === void 0 ? void 0 : jobs.length) > 1), _defineProperty(_defaultFilters, _utils.PACKAGE_FILTERS.DUPLICATE, false), _defaultFilters),
+      allEntriesFilters: (_allEntriesFilters = {}, _defineProperty(_allEntriesFilters, _utils.PACKAGE_FILTERS.CHANGED, false), _defineProperty(_allEntriesFilters, _utils.PACKAGE_FILTERS.DUPLICATE, false), _allEntriesFilters)
+    };
+  }, [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 duplicateJobs = (0, _bundlePackages3.getDuplicatePackages)(jobs);
+    var result = webpack.compareBySection.packages(jobs, [(0, _bundlePackages3.getAddRowDuplicateFlag)(duplicateJobs)]);
+    return {
+      rows: result,
+      totalRowCount: result.length
+    };
+  }, [jobs]),
+      rows = _useMemo2.rows,
+      totalRowCount = _useMemo2.totalRowCount;
+
+  var filteredRows = (0, _rowsFilter.useRowsFilter)({
+    rows: rows,
+    searchPattern: searchParams.searchPattern,
+    filters: searchParams.filters,
+    getRowFilter: _bundlePackages3.getRowFilter
+  });
+  var sortParams = (0, _rowsSort.useRowsSort)({
+    rows: filteredRows,
+    sortFields: _bundlePackages.SORT_BY,
+    sortBy: sortBy,
+    sortDirection: direction,
+    getCustomSort: _bundlePackages3.getCustomSort
+  });
+  return /*#__PURE__*/_react["default"].createElement(_bundlePackages2.BundlePackages, _extends({
+    jobs: jobs
+  }, restProps, searchParams, sortParams, {
+    totalRowCount: totalRowCount
+  }));
+};
+
+exports.BundlePackages = BundlePackages;
+BundlePackages.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
+};
+BundlePackages.defaultProps = {
+  filters: undefined,
+  search: undefined,
+  sortBy: undefined,
+  direction: undefined
+};