@bundle-stats/ui 4.0.0-rc.6 → 4.0.1

package/lib/ui/filters/filters.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Filters = void 0;
 
-var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -26,12 +24,12 @@ var _filtersModule = _interopRequireDefault(require("./filters.module.css"));
 var _excluded = ["className", "buttonClassName", "label", "name", "getOnOnlyClick"],
     _excluded2 = ["label"];
 
+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 _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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -120,11 +118,11 @@ var FilterGroup = function FilterGroup(props) {
 
     return typeof (item === null || item === void 0 ? void 0 : item.defaultValue) !== 'undefined';
   });
-  var isGroupChecked = groupCheckboxes.map(function (_ref3) {
+  var areAllGroupItemsChecked = groupCheckboxes.map(function (_ref3) {
     var _ref4 = _slicedToArray(_ref3, 1),
         itemKey = _ref4[0];
 
-    return (0, _get2["default"])(values, "".concat(groupKey, ".").concat(itemKey));
+    return values === null || values === void 0 ? void 0 : values["".concat(groupKey, ".").concat(itemKey)];
   }).reduce(function (agg, val) {
     return agg && val;
   }, true);
@@ -184,7 +182,7 @@ var FilterGroup = function FilterGroup(props) {
       }));
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: _filtersModule["default"].filterGroupActions
-    }, isGroupChecked ? /*#__PURE__*/_react["default"].createElement(MenuItem, {
+    }, areAllGroupItemsChecked ? /*#__PURE__*/_react["default"].createElement(MenuItem, {
       id: "clear-all",
       as: "button",
       className: menuItemClassName,

package/lib/ui/filters/filters.utils.js

@@ -3,7 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getGroupFiltersLabelSuffix = exports.LABELS = void 0;
+exports.getInitialValues = exports.getGroupFiltersLabelSuffix = exports.LABELS = void 0;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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 _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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -90,4 +106,26 @@ var getGroupFiltersLabelSuffix = function getGroupFiltersLabelSuffix(filters) {
   return "".concat(suffix).concat(skippedLabels > 0 ? " +".concat(skippedLabels) : '');
 };
 
-exports.getGroupFiltersLabelSuffix = getGroupFiltersLabelSuffix;
+exports.getGroupFiltersLabelSuffix = getGroupFiltersLabelSuffix;
+
+var getInitialValues = function getInitialValues(key, filters) {
+  if (typeof (filters === null || filters === void 0 ? void 0 : filters.defaultValue) !== 'undefined') {
+    return _defineProperty({}, key, filters.defaultValue);
+  }
+
+  if (_typeof(filters) === 'object') {
+    return Object.entries(filters).map(function (_ref6) {
+      var _ref7 = _slicedToArray(_ref6, 2),
+          groupKey = _ref7[0],
+          groupFilters = _ref7[1];
+
+      return getInitialValues([].concat(_toConsumableArray(key ? [key] : []), [groupKey]).join('.'), groupFilters);
+    }).reduce(function (agg, current) {
+      return _objectSpread(_objectSpread({}, agg), current);
+    }, {});
+  }
+
+  return {};
+};
+
+exports.getInitialValues = getInitialValues;

package/lib/ui/filters/index.js

@@ -1,13 +1,106 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Filters = void 0;
 
-var _filters = require("./filters.container");
+var _merge3 = _interopRequireDefault(require("lodash/merge"));
+
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _filters = require("./filters.utils");
 
 var _filters2 = require("./filters");
 
-var Filters = (0, _filters.filtersDropdownContainer)(_filters2.Filters);
-exports.Filters = Filters;
+var _excluded = ["onChange", "filters"];
+
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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; }
+
+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 Filters = function Filters(props) {
+  var onChange = props.onChange,
+      filters = props.filters,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var _useState = (0, _react.useState)((0, _filters.getInitialValues)('', filters)),
+      _useState2 = _slicedToArray(_useState, 2),
+      values = _useState2[0],
+      setValues = _useState2[1]; // Update values when the parent filters are changing (route with query string change)
+
+
+  (0, _react.useEffect)(function () {
+    var parentValues = (0, _filters.getInitialValues)('', filters);
+
+    if ((0, _isEqual2["default"])(parentValues, values)) {
+      return;
+    }
+
+    setValues(parentValues);
+  }, // Do not trigger effect when the values are changing locally
+  [filters, setValues]);
+  var toggleFilter = (0, _react.useCallback)(function (key, value) {
+    var nextValues = (0, _merge3["default"])({}, values, _defineProperty({}, key, value));
+    setValues(nextValues);
+
+    if (onChange) {
+      onChange(nextValues);
+    }
+  }, [onChange, setValues, values]);
+  var toggleFilters = (0, _react.useCallback)(function (newFilters) {
+    var nextValues = (0, _merge3["default"])({}, values, newFilters);
+    setValues(nextValues);
+
+    if (onChange) {
+      onChange(nextValues);
+    }
+  }, [onChange, setValues, values]);
+  return /*#__PURE__*/_react["default"].createElement(_filters2.Filters, _extends({}, restProps, {
+    filters: filters,
+    values: values,
+    toggleFilter: toggleFilter,
+    toggleFilters: toggleFilters
+  }));
+};
+
+exports.Filters = Filters;
+Filters.defaultProps = {
+  onChange: null
+};
+Filters.propTypes = {
+  /** Filter config */
+  filters: _propTypes["default"].object.isRequired,
+  // eslint-disable-line react/forbid-prop-types
+
+  /** OnChange handler */
+  onChange: _propTypes["default"].func
+};

package/lib/ui/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "HorizontalBarChart", {
     return _horizontalBarChart.HorizontalBarChart;
   }
 });
+Object.defineProperty(exports, "HoverCard", {
+  enumerable: true,
+  get: function get() {
+    return _hoverCard.HoverCard;
+  }
+});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function get() {
@@ -126,6 +132,8 @@ var _filters = require("./filters");
 
 var _horizontalBarChart = require("./horizontal-bar-chart");
 
+var _hoverCard = require("./hover-card");
+
 var _icon = require("./icon");
 
 var _input = require("./input");

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

@@ -42,21 +42,58 @@ const getFileTypeFilters = filters => Object.entries(FILE_TYPE_LABELS).map(_ref
   ...current
 }), {});
 
-const TooltipNotPredictive = _ref2 => {
+const getFilters = _ref2 => {
   let {
-    runs
+    compareMode,
+    filters
   } = _ref2;
+  return {
+    [ASSET_FILTERS.CHANGED]: {
+      label: 'Changed',
+      defaultValue: filters[ASSET_FILTERS.CHANGED],
+      disabled: !compareMode
+    },
+    [ASSET_ENTRY_TYPE]: {
+      label: 'Entry type',
+      [ASSET_FILTERS.ENTRY]: {
+        label: 'Entry',
+        defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true)
+      },
+      [ASSET_FILTERS.INITIAL]: {
+        label: 'Initial',
+        defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true)
+      },
+      [ASSET_FILTERS.CHUNK]: {
+        label: 'Chunk',
+        defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true)
+      },
+      [ASSET_FILTERS.OTHER]: {
+        label: 'Other',
+        defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`, true)
+      }
+    },
+    [ASSET_FILE_TYPE]: {
+      label: 'File type',
+      ...getFileTypeFilters(filters)
+    }
+  };
+};
+
+const TooltipNotPredictive = _ref3 => {
+  let {
+    runs
+  } = _ref3;
   return /*#__PURE__*/React.createElement("div", {
     className: css.tooltipNotPredictive
   }, /*#__PURE__*/React.createElement("p", {
     className: css.tooltipNotPredictiveText
   }, "File name is the same, but the size has changed:"), /*#__PURE__*/React.createElement("table", {
     className: css.tooltipTable
-  }, /*#__PURE__*/React.createElement("tr", null, runs.map((_ref3, index) => {
+  }, /*#__PURE__*/React.createElement("tr", null, runs.map((_ref4, index) => {
     let {
       name,
       value
-    } = _ref3;
+    } = _ref4;
     const key = index;
     return /*#__PURE__*/React.createElement("tr", {
       key: key
@@ -72,13 +109,13 @@ TooltipNotPredictive.propTypes = {
 
 };
 
-const RowHeader = _ref4 => {
+const RowHeader = _ref5 => {
   let {
     row,
     labels,
     chunks,
     CustomComponentLink
-  } = _ref4;
+  } = _ref5;
   const {
     label,
     isNotPredictive,
@@ -176,12 +213,16 @@ export const BundleAssets = props => {
     updateSearch,
     customComponentLink: CustomComponentLink
   } = props;
-  const emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
-    resources: "assets",
-    filtered: totalRowCount !== 0,
-    handleResetFilters: resetFilters,
-    handleViewAll: resetAllFilters
-  });
+  const dropdownFilters = useMemo(() => getFilters({
+    compareMode: (jobs == null ? void 0 : jobs.length) > 1,
+    filters
+  }), [jobs, filters]);
+  const metricsTableTitle = useMemo(() => /*#__PURE__*/React.createElement(MetricsTableTitle, {
+    title: I18N.ASSETS,
+    info: `${items.length}/${totalRowCount}`,
+    popoverInfo: I18N.ASSETS_INFO,
+    popoverHref: config.documentation.assets
+  }), [items, totalRowCount]);
   const renderRowHeader = useCallback(row => {
     var _jobs$, _jobs$$meta, _jobs$$meta$webpack;
 
@@ -192,14 +233,20 @@ export const BundleAssets = props => {
       CustomComponentLink: CustomComponentLink
     });
   }, [jobs, CustomComponentLink]);
+  const emptyMessage = useMemo(() => /*#__PURE__*/React.createElement(EmptySet, {
+    resources: "assets",
+    filtered: totalRowCount !== 0,
+    handleResetFilters: resetFilters,
+    handleViewAll: resetAllFilters
+  }), [totalRowCount, resetFilters, resetAllFilters]);
   return /*#__PURE__*/React.createElement("section", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: _ref5 => {
+    renderActions: _ref6 => {
       let {
         actionClassName
-      } = _ref5;
+      } = _ref6;
       return /*#__PURE__*/React.createElement(FlexStack, {
         space: "xxsmall",
         className: cx(css.dropdown, actionClassName)
@@ -221,36 +268,7 @@ export const BundleAssets = props => {
     updateSearch: updateSearch
   }), /*#__PURE__*/React.createElement(Filters, {
     className: css.toolbarFilters,
-    filters: {
-      [ASSET_FILTERS.CHANGED]: {
-        label: 'Changed',
-        defaultValue: filters[ASSET_FILTERS.CHANGED],
-        disabled: jobs.length <= 1
-      },
-      [ASSET_ENTRY_TYPE]: {
-        label: 'Entry type',
-        [ASSET_FILTERS.ENTRY]: {
-          label: 'Entry',
-          defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true)
-        },
-        [ASSET_FILTERS.INITIAL]: {
-          label: 'Initial',
-          defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true)
-        },
-        [ASSET_FILTERS.CHUNK]: {
-          label: 'Chunk',
-          defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true)
-        },
-        [ASSET_FILTERS.ASSET]: {
-          label: 'Asset',
-          defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ASSET}`, true)
-        }
-      },
-      [ASSET_FILE_TYPE]: {
-        label: 'File type',
-        ...getFileTypeFilters(filters)
-      }
-    },
+    filters: dropdownFilters,
     hasActiveFilters: hasActiveFilters,
     onChange: updateFilters
   }))), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(MetricsTable, {
@@ -259,12 +277,7 @@ export const BundleAssets = props => {
     renderRowHeader: renderRowHeader,
     emptyMessage: emptyMessage,
     showHeaderSum: true,
-    title: /*#__PURE__*/React.createElement(MetricsTableTitle, {
-      title: I18N.ASSETS,
-      info: `(${items.length}/${totalRowCount})`,
-      popoverInfo: I18N.ASSETS_INFO,
-      popoverHref: config.documentation.assets
-    })
+    title: metricsTableTitle
   })));
 };
 BundleAssets.defaultProps = {

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

@@ -40,7 +40,7 @@ export const getRowFilter = filters => item => {
     return false;
   }
 
-  if (!(filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`] && item.isEntry || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`] && item.isInitial || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`] && item.isChunk || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ASSET}`] && item.isAsset)) {
+  if (!(filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`] && item.isEntry || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`] && item.isInitial || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`] && item.isChunk || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`] && item.isAsset)) {
     return false;
   }
 

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

@@ -26,13 +26,71 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import { ModuleInfo } from '../module-info';
 import css from './bundle-modules.module.css';
 
-const RowHeader = _ref => {
+const getFilters = _ref => {
+  let {
+    filters,
+    compareMode,
+    chunks
+  } = _ref;
+  return {
+    [MODULE_FILTERS.CHANGED]: {
+      label: 'Changed',
+      defaultValue: filters.changed,
+      disabled: !compareMode
+    },
+    [MODULE_FILTERS.DUPLICATED]: {
+      label: 'Duplicate',
+      defaultValue: filters[MODULE_FILTERS.DUPLICATED]
+    },
+    [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, _ref2) => {
+          let {
+            id,
+            name
+          } = _ref2;
+          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)
+        }
+      }), {})
+    }
+  };
+};
+
+const RowHeader = _ref3 => {
   let {
     row,
     chunks,
     labels,
     CustomComponentLink
-  } = _ref;
+  } = _ref3;
 
   const chunkIds = _map(chunks, 'id');
 
@@ -82,7 +140,7 @@ RowHeader.propTypes = {
 RowHeader.defaultProps = {
   chunks: []
 };
-export const BundleModules = _ref2 => {
+export const BundleModules = _ref4 => {
   let {
     className,
     jobs,
@@ -100,78 +158,39 @@ export const BundleModules = _ref2 => {
     updateSearch,
     hasActiveFilters,
     customComponentLink: CustomComponentLink
-  } = _ref2;
+  } = _ref4;
   const rootClassName = cx(css.root, className);
+  const dropdownFilters = useMemo(() => getFilters({
+    filters,
+    chunks,
+    compareMode: jobs.length > 1
+  }), [jobs, filters, chunks]);
+  const metricsTableTitle = useMemo(() => /*#__PURE__*/React.createElement(MetricsTableTitle, {
+    title: I18N.MODULES,
+    info: `${items.length}/${totalRowCount}`,
+    popoverInfo: I18N.MODULES_INFO,
+    popoverHref: config.documentation.modules
+  }), [items, totalRowCount]);
   const renderRowHeader = useCallback(row => /*#__PURE__*/React.createElement(RowHeader, {
     row: row,
     chunks: chunks,
     labels: _map(jobs, 'label'),
     CustomComponentLink: CustomComponentLink
   }), [jobs, chunks, CustomComponentLink]);
-  const emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
+  const emptyMessage = useMemo(() => /*#__PURE__*/React.createElement(EmptySet, {
     resources: "modules",
     filtered: totalRowCount !== 0,
     handleResetFilters: resetFilters,
     handleViewAll: resetAllFilters
-  });
-  const dropdownFilters = {
-    [MODULE_FILTERS.CHANGED]: {
-      label: 'Changed',
-      defaultValue: filters.changed,
-      disabled: jobs.length <= 1
-    },
-    [MODULE_FILTERS.DUPLICATED]: {
-      label: 'Duplicate',
-      defaultValue: filters[MODULE_FILTERS.DUPLICATED]
-    },
-    [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, _ref3) => {
-          let {
-            id,
-            name
-          } = _ref3;
-          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)
-        }
-      }), {})
-    }
-  };
+  }), [totalRowCount, resetFilters, resetAllFilters]);
   return /*#__PURE__*/React.createElement("div", {
     className: rootClassName
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: _ref4 => {
+    renderActions: _ref5 => {
       let {
         actionClassName
-      } = _ref4;
+      } = _ref5;
       return /*#__PURE__*/React.createElement(FlexStack, {
         space: "xxsmall",
         className: cx(css.dropdown, actionClassName)
@@ -203,12 +222,7 @@ export const BundleModules = _ref2 => {
     renderRowHeader: renderRowHeader,
     emptyMessage: emptyMessage,
     showHeaderSum: true,
-    title: /*#__PURE__*/React.createElement(MetricsTableTitle, {
-      title: I18N.MODULES,
-      info: `(${items.length}/${totalRowCount})`,
-      popoverInfo: I18N.MODULES_INFO,
-      popoverHref: config.documentation.modules
-    })
+    title: metricsTableTitle
   }));
 };
 BundleModules.defaultProps = {