@bundle-stats/ui 3.3.0-alpha.1 → 3.3.1-beta.8

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

@@ -29,12 +29,16 @@ var _budgetInfo = require("../budget-info");
 
 var _bundleAssetsTotalsTableModule = _interopRequireDefault(require("./bundle-assets-totals-table.module.css"));
 
+var _excluded = ["className", "jobs", "customComponentLink"];
+
 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 || 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 _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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."); }
@@ -47,12 +51,18 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 
 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 BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
   var _jobs$0$insights, _jobs$0$insights$webp;
 
   var className = _ref.className,
       jobs = _ref.jobs,
-      CustomComponentLink = _ref.customComponentLink;
+      CustomComponentLink = _ref.customComponentLink,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
   var items = (0, _react.useMemo)(function () {
     return webpack.compareBySection.sizes(jobs);
   }, [jobs]);
@@ -84,13 +94,13 @@ var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
       budgetInsight: budget
     })));
   }, [CustomComponentLink]);
-  return /*#__PURE__*/_react["default"].createElement(_metricsTable.MetricsTable, {
+  return /*#__PURE__*/_react["default"].createElement(_metricsTable.MetricsTable, _extends({
     className: className,
     runs: jobs,
     items: items,
     renderRowHeader: renderRowHeader,
     showHeaderSum: true
-  });
+  }, restProps));
 };
 
 exports.BundleAssetsTotalsTable = BundleAssetsTotalsTable;

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

@@ -35,10 +35,12 @@ var _fileName = require("../../ui/file-name");
 
 var _filters = require("../../ui/filters");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
 
+var _tag = require("../../ui/tag");
+
 var _toolbar = require("../../ui/toolbar");
 
 var _metricsTable = require("../metrics-table");
@@ -88,39 +90,47 @@ var RowHeader = function RowHeader(_ref) {
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
-      showPopopver = _useState2[0],
-      setPopover = _useState2[1];
+      showHoverCard = _useState2[0],
+      setHoverCard = _useState2[1];
 
   var handleOnMouseEnter = (0, _react.useCallback)(function () {
-    return setPopover(true);
-  }, [showPopopver]);
+    return setHoverCard(true);
+  }, [showHoverCard]);
+  var content = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundleModulesModule["default"].name
+    }, row.duplicated && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: _bundleModulesModule["default"].nameTagDuplicated,
+      size: "small",
+      kind: _tag.Tag.KINDS.DANGER
+    }), /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
+      className: _bundleModulesModule["default"].nameText,
+      name: row.label
+    }));
+  }, [row]);
 
-  var content = /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-    name: row.label
-  });
+  if (!showHoverCard) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      onMouseEnter: handleOnMouseEnter
+    }, content);
+  }
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    onMouseEnter: handleOnMouseEnter
-  }, !showPopopver ? content : /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-    ariaLabel: "View module info",
+  return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     label: content
-  }, function (_ref2) {
-    var popoverToggle = _ref2.popoverToggle;
-    return /*#__PURE__*/_react["default"].createElement(_moduleInfo.ModuleInfo, {
-      className: _bundleModulesModule["default"].namePopover,
-      item: row,
-      chunks: chunks,
-      chunkIds: chunkIds,
-      labels: labels,
-      customComponentLink: CustomComponentLink,
-      onClick: popoverToggle
-    });
+  }, /*#__PURE__*/_react["default"].createElement(_moduleInfo.ModuleInfo, {
+    className: _bundleModulesModule["default"].namePopover,
+    item: row,
+    chunks: chunks,
+    chunkIds: chunkIds,
+    labels: labels,
+    customComponentLink: CustomComponentLink
   }));
 };
 
 RowHeader.propTypes = {
   row: _propTypes["default"].shape({
-    label: _propTypes["default"].string
+    label: _propTypes["default"].string,
+    duplicated: _propTypes["default"].bool
   }).isRequired,
   chunks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     id: _propTypes["default"].string,
@@ -133,50 +143,34 @@ RowHeader.defaultProps = {
   chunks: []
 };
 
-var getRenderRowHeader = function getRenderRowHeader(_ref3) {
-  var labels = _ref3.labels,
-      chunks = _ref3.chunks,
-      CustomComponentLink = _ref3.CustomComponentLink;
-  return function (row) {
-    return /*#__PURE__*/_react["default"].createElement(RowHeader, {
-      row: row,
-      chunks: chunks,
-      labels: labels,
-      CustomComponentLink: CustomComponentLink
-    });
-  };
-};
-
-var BundleModules = function BundleModules(_ref4) {
+var BundleModules = function BundleModules(_ref2) {
   var _MODULE_SOURCE_TYPE, _objectSpread2;
 
-  var className = _ref4.className,
-      jobs = _ref4.jobs,
-      items = _ref4.items,
-      chunks = _ref4.chunks,
-      totalRowCount = _ref4.totalRowCount,
-      updateFilters = _ref4.updateFilters,
-      resetFilters = _ref4.resetFilters,
-      resetAllFilters = _ref4.resetAllFilters,
-      filters = _ref4.filters,
-      sortFields = _ref4.sortFields,
-      sort = _ref4.sort,
-      updateSort = _ref4.updateSort,
-      search = _ref4.search,
-      updateSearch = _ref4.updateSearch,
-      hasActiveFilters = _ref4.hasActiveFilters,
-      CustomComponentLink = _ref4.customComponentLink;
+  var className = _ref2.className,
+      jobs = _ref2.jobs,
+      items = _ref2.items,
+      chunks = _ref2.chunks,
+      totalRowCount = _ref2.totalRowCount,
+      updateFilters = _ref2.updateFilters,
+      resetFilters = _ref2.resetFilters,
+      resetAllFilters = _ref2.resetAllFilters,
+      filters = _ref2.filters,
+      sortFields = _ref2.sortFields,
+      sort = _ref2.sort,
+      updateSort = _ref2.updateSort,
+      search = _ref2.search,
+      updateSearch = _ref2.updateSearch,
+      hasActiveFilters = _ref2.hasActiveFilters,
+      CustomComponentLink = _ref2.customComponentLink;
   var rootClassName = (0, _classnames["default"])(_bundleModulesModule["default"].root, className);
-  var labels = (0, _react.useMemo)(function () {
-    return (0, _map2["default"])(jobs, 'label');
-  }, [jobs]);
-  var renderRowHeader = (0, _react.useMemo)(function () {
-    return getRenderRowHeader({
-      labels: labels,
+  var renderRowHeader = (0, _react.useCallback)(function (row) {
+    return /*#__PURE__*/_react["default"].createElement(RowHeader, {
+      row: row,
       chunks: chunks,
+      labels: (0, _map2["default"])(jobs, 'label'),
       CustomComponentLink: CustomComponentLink
     });
-  }, [labels, chunks]);
+  }, [jobs, chunks, CustomComponentLink]);
 
   var emptyMessage = /*#__PURE__*/_react["default"].createElement(_emptySet.EmptySet, {
     resources: "modules",
@@ -189,6 +183,10 @@ var BundleModules = function BundleModules(_ref4) {
     label: 'Changed',
     defaultValue: filters.changed,
     disabled: jobs.length <= 1
+  }), _defineProperty(_objectSpread2, _utils.MODULE_FILTERS.DUPLICATED, {
+    label: 'Duplicated',
+    defaultValue: filters[_utils.MODULE_FILTERS.DUPLICATED],
+    disabled: jobs.length <= 1
   }), _defineProperty(_objectSpread2, _utils.MODULE_SOURCE_TYPE, (_MODULE_SOURCE_TYPE = {
     label: 'Source'
   }, _defineProperty(_MODULE_SOURCE_TYPE, _utils.MODULE_FILTERS.FIRST_PARTY, {
@@ -199,9 +197,9 @@ var BundleModules = function BundleModules(_ref4) {
     defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_SOURCE_TYPE, ".").concat(_utils.MODULE_FILTERS.THIRD_PARTY), true)
   }), _MODULE_SOURCE_TYPE)), _objectSpread2), !(0, _isEmpty2["default"])(chunks) && _defineProperty({}, _utils.MODULE_CHUNK, _objectSpread({
     label: 'Chunk'
-  }, chunks.reduce(function (chunkFilters, _ref5) {
-    var id = _ref5.id,
-        name = _ref5.name;
+  }, chunks.reduce(function (chunkFilters, _ref3) {
+    var id = _ref3.id,
+        name = _ref3.name;
     return _objectSpread(_objectSpread({}, chunkFilters), {}, _defineProperty({}, id, {
       label: name,
       defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_CHUNK, ".").concat(id), true)
@@ -219,8 +217,8 @@ var BundleModules = function BundleModules(_ref4) {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement(_toolbar.Toolbar, {
     className: _bundleModulesModule["default"].toolbar,
-    renderActions: function renderActions(_ref7) {
-      var actionClassName = _ref7.actionClassName;
+    renderActions: function renderActions(_ref5) {
+      var actionClassName = _ref5.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
         space: "xxsmall",
         className: (0, _classnames["default"])(_bundleModulesModule["default"].dropdown, actionClassName)
@@ -233,7 +231,9 @@ var BundleModules = function BundleModules(_ref4) {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
     className: _bundleModulesModule["default"].toolbarSearch,
     search: search,
     updateSearch: updateSearch,

package/lib/components/bundle-modules/bundle-modules.module.css

@@ -12,6 +12,15 @@
   margin-right: -1px; /** collapse border */
 }
 
-.namePopover {
-  min-width: 280px;
+.nameTagDuplicated {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: baseline;
+}
+
+.nameTagDuplicated::before {
+  content: 'D';
+}
+
+.nameText {
+  vertical-align: middle;
 }

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

@@ -41,18 +41,17 @@ 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; }
 
-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; }
+var addRowSourceFlag = function addRowSourceFlag(row) {
+  var key = row.key,
+      runs = row.runs; // @NOTE Assign instead destructuring for perf reasons
+  // eslint-disable-next-line no-param-reassign
 
-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; }
+  row.thirdParty = Boolean(key.match(_webpack.MODULE_PATH_PACKAGES)); // eslint-disable-next-line no-param-reassign
 
-var addRowSourceFlag = function addRowSourceFlag(row) {
-  var key = row.key;
-  var thirdParty = Boolean(key.match(_webpack.MODULE_PATH_PACKAGES));
-  return _objectSpread(_objectSpread({}, row), {}, {
-    thirdParty: thirdParty
-  });
+  row.duplicated = Boolean(runs.find(function (run) {
+    return (run === null || run === void 0 ? void 0 : run.duplicated) === true;
+  }));
+  return row;
 };
 
 exports.addRowSourceFlag = addRowSourceFlag;
@@ -82,6 +81,11 @@ var getRowFilter = function getRowFilter(filters) {
     // Skip not changed rows
     if (filters[_utils.MODULE_FILTERS.CHANGED] && !row.changed) {
       return false;
+    } // Skip not duplicated rows
+
+
+    if (filters[_utils.MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
+      return false;
     } // Skip not matching source type
 
 

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

@@ -72,12 +72,12 @@ var BundleModules = function BundleModules(props) {
 
   var _useMemo = (0, _react.useMemo)(function () {
     return {
-      defaultFilters: _objectSpread(_objectSpread(_objectSpread({
+      defaultFilters: _objectSpread(_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({
+      }, (0, _utils.getModuleSourceTypeFilters)(true)), (0, _utils.getModuleChunkFilters)(chunkIds, true)), (0, _utils.getModuleFileTypeFilters)(true)), {}, _defineProperty({}, _utils.MODULE_FILTERS.DUPLICATED, false)),
+      allEntriesFilters: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
         changed: false
-      }, (0, _utils.getModuleSourceTypeFilters)(true)), (0, _utils.getModuleChunkFilters)(chunkIds, true)), (0, _utils.getModuleFileTypeFilters)(true))
+      }, (0, _utils.getModuleSourceTypeFilters)(true)), (0, _utils.getModuleChunkFilters)(chunkIds, true)), (0, _utils.getModuleFileTypeFilters)(true)), {}, _defineProperty({}, _utils.MODULE_FILTERS.DUPLICATED, false))
     };
   }, [jobs]),
       defaultFilters = _useMemo.defaultFilters,

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

@@ -27,10 +27,12 @@ var _emptySet = require("../../ui/empty-set");
 
 var _filters = require("../../ui/filters");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
 
+var _tag = require("../../ui/tag");
+
 var _toolbar = require("../../ui/toolbar");
 
 var _fileName = require("../../ui/file-name");
@@ -83,36 +85,36 @@ var PackagePopoverContent = function PackagePopoverContent(_ref) {
       packageId = _name$split2[1];
 
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-    space: "xxsmall",
-    className: _bundlePackagesModule["default"].packagePopover
+    space: "xsmall",
+    className: _bundlePackagesModule["default"].packageHoverCard
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("h3", {
-    className: _bundlePackagesModule["default"].packagePopoverTitle
+    className: _bundlePackagesModule["default"].packageHoverCardTitle
   }, normalizedName, packageId && /*#__PURE__*/_react["default"].createElement("span", {
-    className: _bundlePackagesModule["default"].packagePopoverTitleIndex
+    className: _bundlePackagesModule["default"].packageHoverCardTitleIndex
   }, "".concat(_utils.PACKAGE_ID_SEPARATOR).concat(packageId))), /*#__PURE__*/_react["default"].createElement("p", {
-    className: _bundlePackagesModule["default"].packagePopoverPath
+    className: _bundlePackagesModule["default"].packageHoverCardPath
   }, /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-    className: _bundlePackagesModule["default"].packagePopoverPathValue,
+    className: _bundlePackagesModule["default"].packageHoverCardPathValue,
     name: normalizedPackagePath
   }))), /*#__PURE__*/_react["default"].createElement("ul", {
-    className: _bundlePackagesModule["default"].packagePopoverList
+    className: _bundlePackagesModule["default"].packageHoverCardList
   }, /*#__PURE__*/_react["default"].createElement("li", {
-    className: _bundlePackagesModule["default"].packagePopoverItem
+    className: _bundlePackagesModule["default"].packageHoverCardItem
   }, /*#__PURE__*/_react["default"].createElement("a", {
     href: "https://www.npmjs.com/package/".concat(normalizedName),
     target: "_blank",
     rel: "noreferrer"
   }, "npmjs.com")), /*#__PURE__*/_react["default"].createElement("li", {
-    className: _bundlePackagesModule["default"].packagePopoverItem
+    className: _bundlePackagesModule["default"].packageHoverCardItem
   }, /*#__PURE__*/_react["default"].createElement("a", {
     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
+    className: _bundlePackagesModule["default"].packageHoverCardActions
   }, 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")));
 };
 
@@ -127,39 +129,91 @@ PackagePopoverContent.defaultProps = {
   path: ''
 };
 
-var PackageRowHeader = function PackageRowHeader(_ref2) {
-  var item = _ref2.item,
+var PackageName = function PackageName(_ref2) {
+  var packageName = _ref2.packageName,
+      path = _ref2.path,
+      showDuplicateFlag = _ref2.showDuplicateFlag,
+      row = _ref2.row,
       CustomComponentLink = _ref2.CustomComponentLink;
-  var packageNames = item.label.split(_utils.PACKAGES_SEPARATOR);
 
-  var _ref3 = item.runs[0] || {},
-      path = _ref3.path;
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showHoverCard = _useState2[0],
+      setHoverCard = _useState2[1];
+
+  var handleOnMouseEnter = (0, _react.useCallback)(function () {
+    return setHoverCard(true);
+  }, [showHoverCard]);
+  var label = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showDuplicateFlag && row.duplicate && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: _bundlePackagesModule["default"].packageNameTagDuplicate,
+      title: "Duplicate package",
+      kind: _tag.Tag.KINDS.DANGER,
+      size: _tag.Tag.SIZES.SMALL
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundlePackagesModule["default"].packageNameLabel
+    }, packageName));
+  }, [packageName, showDuplicateFlag, row]);
+
+  if (!showHoverCard) {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundlePackagesModule["default"].packageName,
+      onMouseEnter: handleOnMouseEnter
+    }, label);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    className: _bundlePackagesModule["default"].packageName,
+    label: /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundlePackagesModule["default"].packageName
+    }, label)
+  }, /*#__PURE__*/_react["default"].createElement(PackagePopoverContent, {
+    name: packageName,
+    path: path,
+    fullName: row.label,
+    duplicate: row.duplicate,
+    CustomComponentLink: CustomComponentLink
+  }));
+};
+
+PackageName.propTypes = {
+  packageName: _propTypes["default"].string.isRequired,
+  path: _propTypes["default"].string.isRequired,
+  showDuplicateFlag: _propTypes["default"].bool.isRequired,
+  row: _propTypes["default"].shape({
+    label: _propTypes["default"].string,
+    duplicate: _propTypes["default"].bool,
+    runs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      path: _propTypes["default"].string
+    })).isRequired
+  }).isRequired,
+  CustomComponentLink: _propTypes["default"].elementType.isRequired
+};
+
+var RowHeader = function RowHeader(_ref3) {
+  var row = _ref3.row,
+      CustomComponentLink = _ref3.CustomComponentLink;
+  var packageNames = row.label.split(_utils.PACKAGES_SEPARATOR);
+
+  var _ref4 = row.runs[0] || {},
+      path = _ref4.path;
 
   return /*#__PURE__*/_react["default"].createElement("span", {
     className: _bundlePackagesModule["default"].packageNames
   }, packageNames.map(function (packageName, index) {
-    // Render duplicate flag only for the last entry
-    var duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/_react["default"].createElement("span", {
-      className: _bundlePackagesModule["default"].duplicate,
-      title: "Duplicate package"
-    }, "D");
-
-    return /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-      className: _bundlePackagesModule["default"].packageName,
-      icon: duplicateFlag,
-      label: packageName
-    }, /*#__PURE__*/_react["default"].createElement(PackagePopoverContent, {
-      name: packageName,
-      path: path,
-      fullName: item.label,
-      duplicate: item.duplicate,
+    return /*#__PURE__*/_react["default"].createElement(PackageName, {
+      packageName: packageName,
+      path: path // Render duplicate flag only for the last entry
+      ,
+      showDuplicateFlag: index === packageNames.length - 1,
+      row: row,
       CustomComponentLink: CustomComponentLink
-    }));
+    });
   }));
 };
 
-PackageRowHeader.propTypes = {
-  item: _propTypes["default"].shape({
+RowHeader.propTypes = {
+  row: _propTypes["default"].shape({
     label: _propTypes["default"].string,
     duplicate: _propTypes["default"].bool,
     runs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
@@ -170,7 +224,7 @@ PackageRowHeader.propTypes = {
 };
 
 var BundlePackages = function BundlePackages(props) {
-  var _ref5;
+  var _ref6;
 
   var className = props.className,
       jobs = props.jobs,
@@ -195,9 +249,9 @@ var BundlePackages = function BundlePackages(props) {
     handleViewAll: resetAllFilters
   });
 
-  var renderRowHeader = (0, _react.useCallback)(function (item) {
-    return /*#__PURE__*/_react["default"].createElement(PackageRowHeader, {
-      item: item,
+  var renderRowHeader = (0, _react.useCallback)(function (row) {
+    return /*#__PURE__*/_react["default"].createElement(RowHeader, {
+      row: row,
       CustomComponentLink: CustomComponentLink
     });
   }, [CustomComponentLink]);
@@ -205,8 +259,8 @@ var BundlePackages = function BundlePackages(props) {
     className: (0, _classnames["default"])(_bundlePackagesModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_toolbar.Toolbar, {
     className: _bundlePackagesModule["default"].toolbar,
-    renderActions: function renderActions(_ref4) {
-      var actionClassName = _ref4.actionClassName;
+    renderActions: function renderActions(_ref5) {
+      var actionClassName = _ref5.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
         space: "xxsmall",
         className: (0, _classnames["default"])(_bundlePackagesModule["default"].dropdown, actionClassName)
@@ -219,20 +273,22 @@ var BundlePackages = function BundlePackages(props) {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
     className: _bundlePackagesModule["default"].toolbarSearch,
     placeholder: "Search by name",
     search: search,
     updateSearch: updateSearch
   }), /*#__PURE__*/_react["default"].createElement(_filters.Filters, {
-    filters: (_ref5 = {}, _defineProperty(_ref5, _utils.PACKAGE_FILTERS.CHANGED, {
+    filters: (_ref6 = {}, _defineProperty(_ref6, _utils.PACKAGE_FILTERS.CHANGED, {
       label: 'Changed',
       defaultValue: filters[_utils.PACKAGE_FILTERS.CHANGED],
       disabled: jobs.length <= 1
-    }), _defineProperty(_ref5, _utils.PACKAGE_FILTERS.DUPLICATE, {
+    }), _defineProperty(_ref6, _utils.PACKAGE_FILTERS.DUPLICATE, {
       label: 'Duplicate',
       defaultValue: filters[_utils.PACKAGE_FILTERS.DUPLICATE]
-    }), _ref5),
+    }), _ref6),
     label: "Filters (".concat(items.length, "/").concat(totalRowCount, ")"),
     onChange: updateFilters,
     hasActiveFilters: hasActiveFilters

package/lib/components/bundle-packages/bundle-packages.module.css

@@ -12,23 +12,8 @@
   margin-right: -1px; /** collapse border */
 }
 
-.duplicate {
-  margin-right: var(--space-xxxsmall);
-  display: inline-block;
-  width: var(--space-small);
-  height: var(--space-small);
-  font-size: 10px;
-  font-weight: bold;
-  line-height: var(--space-small);
-  text-align: center;
-  text-transform: uppercase;
-  vertical-align: middle;
-
-  background: var(--color-danger);
-  color: var(--color-light);
-}
-
 .packageName {
+  display: inline-block;
   color: var(--color-text-light);
 }
 
@@ -43,22 +28,33 @@
   color: var(--color-text-ultra-light);
 }
 
-.packagePopover {
-  min-width: 320px;
+.packageNameTagDuplicate {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: middle;
+}
+
+.packageNameLabel {
+  vertical-align: middle;
+}
+
+.packageNameTagDuplicate::before {
+  content: 'd';
 }
 
-.packagePopoverTitleIndex {
+
+.packageHoverCardTitleIndex {
   color: var(--color-text-light);
   font-weight: normal;
 }
 
-.packagePopoverPathValue {
+.packageHoverCardPathValue {
+  width: 100%;
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);
   font-family: var(--font-family-monospace);
 }
 
-.packagePopoverList {
+.packageHoverCardList {
   padding: 0;
   list-style: inside;
 }

package/lib/components/delta/delta.module.css

@@ -28,6 +28,7 @@
 }
 
 .inverted {
+  border-radius: var(--radius-small);
   background-color: var(--color-gray-ultra-light);
   color: var(--color-light);
 }