@bundle-stats/ui 3.2.4-alpha.0 → 3.2.4

package/lib/ui/index.js

@@ -45,12 +45,6 @@ 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() {
@@ -81,6 +75,12 @@ Object.defineProperty(exports, "Panels", {
     return _panels.Panels;
   }
 });
+Object.defineProperty(exports, "Popover", {
+  enumerable: true,
+  get: function get() {
+    return _popover.Popover;
+  }
+});
 Object.defineProperty(exports, "Skeleton", {
   enumerable: true,
   get: function get() {
@@ -130,14 +130,14 @@ var _icon = require("./icon");
 
 var _input = require("./input");
 
-var _hoverCard = require("./hover-card");
-
 var _loader = require("./loader");
 
 var _logo = require("./logo");
 
 var _panels = require("./panels");
 
+var _popover = require("./popover");
+
 var _skeleton = require("./skeleton");
 
 var _sortDropdown = require("./sort-dropdown");

package/lib/ui/{hover-card → popover}/index.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _hoverCard = require("./hover-card");
+var _popover = require("./popover");
 
-Object.keys(_hoverCard).forEach(function (key) {
+Object.keys(_popover).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _hoverCard[key]) return;
+  if (key in exports && exports[key] === _popover[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _hoverCard[key];
+      return _popover[key];
     }
   });
 });

package/lib/ui/popover/popover.js

@@ -0,0 +1,92 @@
+"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.Popover = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Popover = require("reakit/Popover");
+
+var _icon = require("../icon");
+
+var _popoverModule = _interopRequireDefault(require("./popover.module.css"));
+
+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); }
+
+var Popover = function Popover(_ref) {
+  var className = _ref.className,
+      icon = _ref.icon,
+      label = _ref.label,
+      ariaLabel = _ref.ariaLabel,
+      children = _ref.children;
+  var popover = (0, _Popover.usePopoverState)({
+    baseId: process.env.NODE_ENV === 'test' && 'id-test',
+    gutter: 12,
+    modal: true,
+    placement: 'top'
+  });
+  var onCloseButtonClick = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    popover.toggle();
+  }, [popover]);
+  var onButtonClick = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    popover.toggle();
+  }, [popover]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Popover.PopoverDisclosure, _extends({
+    className: (0, _classnames["default"])(_popoverModule["default"].button, className)
+  }, popover, {
+    onClick: onButtonClick,
+    "aria-label": ariaLabel
+  }), icon && (typeof icon === 'string' ? /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+    className: _popoverModule["default"].icon,
+    glyph: icon
+  }) : icon), label && /*#__PURE__*/_react["default"].createElement("span", {
+    className: _popoverModule["default"].label
+  }, label)), /*#__PURE__*/_react["default"].createElement(_Popover.Popover, _extends({
+    className: _popoverModule["default"].popover
+  }, popover, {
+    tabIndex: 0
+  }), /*#__PURE__*/_react["default"].createElement(_Popover.PopoverArrow, _extends({
+    className: _popoverModule["default"].arrow
+  }, popover, {
+    size: 16
+  })), typeof children === 'function' ? children({
+    popoverToggle: popover.toggle
+  }) : children, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+    glyph: "close",
+    as: "button",
+    type: "button",
+    className: _popoverModule["default"].closeBtn,
+    onClick: onCloseButtonClick
+  })));
+};
+
+exports.Popover = Popover;
+Popover.propTypes = {
+  className: _propTypes["default"].string,
+  label: _propTypes["default"].element,
+  icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]),
+  children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element, _propTypes["default"].func]).isRequired,
+  ariaLabel: _propTypes["default"].string
+};
+Popover.defaultProps = {
+  className: '',
+  icon: '',
+  label: '',
+  ariaLabel: 'View more info'
+};

package/lib/ui/popover/popover.module.css

@@ -0,0 +1,66 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  border: none;
+  outline: none;
+  padding: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  line-height: inherit;
+  text-align: inherit;
+}
+
+.button:hover,
+.button:active,
+.button:focus {
+  color: var(--color-primary);
+}
+
+.button:hover .label {
+  text-decoration: underline;
+}
+
+.popover {
+  padding: var(--space-small) var(--space-large) var(--space-small) var(--space-small);
+  border-radius: var(--radius-small);
+  max-width: 360px;
+  outline: none;
+  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
+  background: var(--color-light);
+  font-size: var(--size-small);
+}
+
+.arrow svg {
+  display: block;
+}
+
+.arrow :global .fill {
+  fill: var(--color-light);
+}
+
+.arrow :global .stroke {
+  fill: var(--color-light);
+}
+
+.closeBtn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: var(--space-large);
+  height: var(--space-large);
+  padding: var(--space-xxsmall);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
+}
+
+.closeBtn:hover,
+.closeBtn:active,
+.closeBtn:focus {
+  color: var(--color-text-light);
+  transition: var(--transition-in);
+}

package/lib/ui/popover/popover.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _stories = require("../../stories");
+
+var _ = require(".");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var stories = (0, _react2.storiesOf)('UI/Popover', module);
+stories.addDecorator((0, _stories.getWrapperDecorator)({
+  padding: '64px'
+}));
+stories.add('default', function () {
+  return /*#__PURE__*/_react["default"].createElement(_.Popover, {
+    label: "Job #100"
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");
+});
+stories.add('with icon', function () {
+  return /*#__PURE__*/_react["default"].createElement(_.Popover, {
+    icon: "help"
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");
+});

package/lib/ui/sort-dropdown/sort-dropdown.js

@@ -47,9 +47,11 @@ var SortDropdown = function SortDropdown(props) {
   return /*#__PURE__*/_react["default"].createElement(_dropdown.Dropdown, {
     className: rootClassName,
     label: customLabel,
-    glyph: "sort"
+    glyph: "sort",
+    align: "right"
   }, function (_ref) {
     var MenuItem = _ref.MenuItem,
+        menu = _ref.menu,
         menuItemClassName = _ref.menuItemClassName,
         menuItemActiveClassName = _ref.menuItemActiveClassName;
 
@@ -59,6 +61,7 @@ var SortDropdown = function SortDropdown(props) {
           field: newField,
           direction: newDirection
         });
+        menu.toggle();
       };
     };
 
@@ -80,7 +83,7 @@ var SortDropdown = function SortDropdown(props) {
       var isActive = field === key;
       return /*#__PURE__*/_react["default"].createElement(MenuItem, _extends({
         key: key
-      }, buttonProps, {
+      }, menu, buttonProps, {
         className: (0, _classnames["default"])(buttonProps.className, menuItemClassName, _sortDropdownModule["default"].item, isActive && menuItemActiveClassName, isActive && _sortDropdownModule["default"].active)
       }), /*#__PURE__*/_react["default"].createElement("span", {
         className: _sortDropdownModule["default"].itemLabel

package/lib/ui/tooltip/tooltip.js

@@ -1,7 +1,5 @@
 "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
 });
@@ -13,16 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var BaseTooltip = _interopRequireWildcard(require("@radix-ui/react-tooltip"));
+var _Tooltip = require("reakit/Tooltip");
 
 var _tooltipModule = _interopRequireDefault(require("./tooltip.module.css"));
 
 var _excluded = ["className", "title", "children", "as", "containerRef", "darkMode"];
 
-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); }
@@ -31,9 +25,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 OFFSET = 9;
-var DELAY = 200;
-
 var Tooltip = function Tooltip(props) {
   var className = props.className,
       title = props.title,
@@ -44,20 +35,21 @@ var Tooltip = function Tooltip(props) {
       restProps = _objectWithoutProperties(props, _excluded);
 
   var rootClassName = (0, _classnames["default"])(_tooltipModule["default"].root, className);
-  var tooltipClassName = (0, _classnames["default"])(_tooltipModule["default"].tooltip, darkMode && _tooltipModule["default"].tooltipDarkMode);
-  return /*#__PURE__*/_react["default"].createElement(BaseTooltip.Provider, null, /*#__PURE__*/_react["default"].createElement(BaseTooltip.Root, {
-    delayDuration: DELAY
-  }, /*#__PURE__*/_react["default"].createElement(BaseTooltip.Trigger, {
-    asChild: true
-  }, /*#__PURE__*/_react["default"].createElement(Component, _extends({
+  var tooltipProps = (0, _Tooltip.useTooltipState)({
+    baseId: process.env.NODE_ENV === 'test' && 'id-test',
+    placement: 'top'
+  });
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tooltip.TooltipReference, _extends({
+    as: Component,
     className: rootClassName
-  }, restProps), children)), title && /*#__PURE__*/_react["default"].createElement(BaseTooltip.Content, {
-    className: tooltipClassName
-  }, /*#__PURE__*/_react["default"].createElement(BaseTooltip.Arrow, {
+  }, ref ? {
+    ref: ref
+  } : {}, restProps, tooltipProps), children), title && /*#__PURE__*/_react["default"].createElement(_Tooltip.Tooltip, _extends({}, tooltipProps, {
+    className: (0, _classnames["default"])(_tooltipModule["default"].tooltip, darkMode && _tooltipModule["default"].tooltipDarkMode)
+  }), /*#__PURE__*/_react["default"].createElement(_Tooltip.TooltipArrow, _extends({}, tooltipProps, {
     className: _tooltipModule["default"].arrow,
-    startOffset: OFFSET,
-    offset: OFFSET
-  }), title)));
+    size: 12
+  })), title));
 };
 
 exports.Tooltip = Tooltip;

package/lib/ui/tooltip/tooltip.module.css

@@ -1,7 +1,4 @@
 .root {
-  appearance: none;
-  border: none;
-  background: none;
   position: relative;
   color: inherit;
   line-height: inherit;
@@ -23,7 +20,8 @@
   line-height: var(--space-small);
 }
 
-.arrow {
+.arrow svg {
+  display: block;
   fill: var(--color-light);
 }
 
@@ -32,6 +30,6 @@
   color: var(--color-light);
 }
 
-.tooltipDarkMode .arrow {
+.tooltipDarkMode .arrow svg {
   fill: var(--color-text);
 }

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

@@ -12,7 +12,7 @@ import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../../ui/icon';
 import { FileName } from '../../ui/file-name';
-import { HoverCard } from '../../ui/hover-card';
+import { Popover } from '../../ui/popover';
 import { Tooltip } from '../../ui/tooltip';
 import { Filters } from '../../ui/filters';
 import { SortDropdown } from '../../ui/sort-dropdown';
@@ -86,11 +86,11 @@ const getRenderRowHeader = _ref4 => {
       isEntry,
       isInitial
     } = item;
-    return /*#__PURE__*/React.createElement(HoverCard, {
-      label: /*#__PURE__*/React.createElement(FlexStack, {
-        space: "xxxsmall",
-        className: css.assetName
-      }, /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(Popover, {
+      label: /*#__PURE__*/React.createElement(FileName, {
+        name: label
+      }),
+      icon: /*#__PURE__*/React.createElement("div", {
         className: css.assetInfoFlags
       }, isNotPredictive && /*#__PURE__*/React.createElement(Tooltip, {
         className: css.notPredictive,
@@ -109,9 +109,7 @@ const getRenderRowHeader = _ref4 => {
       }, "e"), isInitial && /*#__PURE__*/React.createElement("span", {
         title: "Initial",
         className: css.flagInitial
-      }, "i")), /*#__PURE__*/React.createElement(FileName, {
-        name: label
-      }))
+      }, "i"))
     }, /*#__PURE__*/React.createElement(AssetInfo, {
       className: css.assetInfo,
       item: item,

package/lib-esm/components/bundle-assets/bundle-assets.module.css

@@ -8,11 +8,6 @@
   margin-right: -1px; /** collapse border */
 }
 
-.assetName {
-  display: inline-flex;
-  align-items: center;
-}
-
 .notPredictive {
   margin-right: var(--space-xxsmall);
   display: inline-block;

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

@@ -4,7 +4,7 @@ import _get from "lodash/get";
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { FILE_TYPE_LABELS, MODULE_SOURCE_FILE_TYPES, MODULE_SOURCE_TYPE, MODULE_CHUNK, MODULE_FILTERS, MODULE_FILE_TYPE } from '@bundle-stats/utils';
@@ -15,7 +15,7 @@ import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
-import { HoverCard } from '../../ui/hover-card';
+import { Popover } from '../../ui/popover';
 import { SortDropdown } from '../../ui/sort-dropdown';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
@@ -35,17 +35,29 @@ const RowHeader = _ref => {
 
   const chunkIds = _map(chunks, 'id');
 
+  const [showPopopver, setPopover] = useState(false);
+  const handleOnMouseEnter = useCallback(() => setPopover(true), [showPopopver]);
   const content = /*#__PURE__*/React.createElement(FileName, {
     name: row.label
   });
-  return /*#__PURE__*/React.createElement(HoverCard, {
+  return /*#__PURE__*/React.createElement("div", {
+    onMouseEnter: handleOnMouseEnter
+  }, !showPopopver ? content : /*#__PURE__*/React.createElement(Popover, {
+    ariaLabel: "View module info",
     label: content
-  }, /*#__PURE__*/React.createElement(ModuleInfo, {
-    item: row,
-    chunks: chunks,
-    chunkIds: chunkIds,
-    labels: labels,
-    customComponentLink: CustomComponentLink
+  }, _ref2 => {
+    let {
+      popoverToggle
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(ModuleInfo, {
+      className: css.namePopover,
+      item: row,
+      chunks: chunks,
+      chunkIds: chunkIds,
+      labels: labels,
+      customComponentLink: CustomComponentLink,
+      onClick: popoverToggle
+    });
   }));
 };
 
@@ -64,12 +76,12 @@ RowHeader.defaultProps = {
   chunks: []
 };
 
-const getRenderRowHeader = _ref2 => {
+const getRenderRowHeader = _ref3 => {
   let {
     labels,
     chunks,
     CustomComponentLink
-  } = _ref2;
+  } = _ref3;
   return row => /*#__PURE__*/React.createElement(RowHeader, {
     row: row,
     chunks: chunks,
@@ -78,7 +90,7 @@ const getRenderRowHeader = _ref2 => {
   });
 };
 
-export const BundleModules = _ref3 => {
+export const BundleModules = _ref4 => {
   let {
     className,
     jobs,
@@ -96,7 +108,7 @@ export const BundleModules = _ref3 => {
     updateSearch,
     hasActiveFilters,
     customComponentLink: CustomComponentLink
-  } = _ref3;
+  } = _ref4;
   const rootClassName = cx(css.root, className);
   const labels = useMemo(() => _map(jobs, 'label'), [jobs]);
   const renderRowHeader = useMemo(() => getRenderRowHeader({
@@ -131,11 +143,11 @@ export const BundleModules = _ref3 => {
     ...(!_isEmpty(chunks) && {
       [MODULE_CHUNK]: {
         label: 'Chunk',
-        ...chunks.reduce((chunkFilters, _ref4) => {
+        ...chunks.reduce((chunkFilters, _ref5) => {
           let {
             id,
             name
-          } = _ref4;
+          } = _ref5;
           return { ...chunkFilters,
             [id]: {
               label: name,
@@ -160,10 +172,10 @@ export const BundleModules = _ref3 => {
     className: rootClassName
   }, /*#__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)

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

@@ -11,3 +11,7 @@
   max-width: 240px;
   margin-right: -1px; /** collapse border */
 }
+
+.namePopover {
+  min-width: 280px;
+}

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

@@ -10,7 +10,7 @@ import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
-import { HoverCard } from '../../ui/hover-card';
+import { Popover } from '../../ui/popover';
 import { SortDropdown } from '../../ui/sort-dropdown';
 import { Toolbar } from '../../ui/toolbar';
 import { FileName } from '../../ui/file-name';
@@ -21,7 +21,7 @@ import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-packages.module.css';
 
-const PackageCard = _ref => {
+const PackagePopoverContent = _ref => {
   let {
     name,
     fullName,
@@ -33,46 +33,46 @@ const PackageCard = _ref => {
   const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
   return /*#__PURE__*/React.createElement(Stack, {
     space: "xxsmall",
-    className: css.packageCard
+    className: css.packagePopover
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/React.createElement("h3", {
-    className: css.packageCardTitle
+    className: css.packagePopoverTitle
   }, normalizedName, packageId && /*#__PURE__*/React.createElement("span", {
-    className: css.packageCardTitleIndex
+    className: css.packagePopoverTitleIndex
   }, `${PACKAGE_ID_SEPARATOR}${packageId}`)), /*#__PURE__*/React.createElement("p", {
-    className: css.packageCardPath
+    className: css.packagePopoverPath
   }, /*#__PURE__*/React.createElement(FileName, {
-    className: css.packageCardPathValue,
+    className: css.packagePopoverPathValue,
     name: normalizedPackagePath
   }))), /*#__PURE__*/React.createElement("ul", {
-    className: css.packageCardList
+    className: css.packagePopoverList
   }, /*#__PURE__*/React.createElement("li", {
-    className: css.packageCardItem
+    className: css.packagePopoverItem
   }, /*#__PURE__*/React.createElement("a", {
     href: `https://www.npmjs.com/package/${normalizedName}`,
     target: "_blank",
     rel: "noreferrer"
   }, "npmjs.com")), /*#__PURE__*/React.createElement("li", {
-    className: css.packageCardItem
+    className: css.packagePopoverItem
   }, /*#__PURE__*/React.createElement("a", {
     href: `https://bundlephobia.com/result?p=${normalizedName}`,
     target: "_blank",
     rel: "noreferrer"
   }, "bundlephobia.com"))), /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall",
-    className: css.packageCardActions
+    className: css.packagePopover.actions
   }, duplicate && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CustomComponentLink, getBundlePackagesByNameComponentLink(normalizedName), "View all duplicate instances")), /*#__PURE__*/React.createElement(CustomComponentLink, getBundleModulesBySearch(normalizedPackagePath), "Search modules by package path")));
 };
 
-PackageCard.propTypes = {
+PackagePopoverContent.propTypes = {
   name: PropTypes.string.isRequired,
   path: PropTypes.string,
   fullName: PropTypes.string.isRequired,
   duplicate: PropTypes.bool.isRequired,
   CustomComponentLink: PropTypes.elementType.isRequired
 };
-PackageCard.defaultProps = {
+PackagePopoverContent.defaultProps = {
   path: ''
 };
 
@@ -85,24 +85,19 @@ const PackageRowHeader = _ref2 => {
   const {
     path
   } = item.runs[0] || {};
-  return /*#__PURE__*/React.createElement(FlexStack, {
-    space: "xxxsmall",
+  return /*#__PURE__*/React.createElement("span", {
     className: css.packageNames
   }, packageNames.map((packageName, index) => {
-    const label = /*#__PURE__*/React.createElement(FlexStack, {
-      space: "xxxsmall",
-      className: css.packageNameLabel
-    }, index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/React.createElement("span", {
-      className: css.packageNameDuplicate,
+    // Render duplicate flag only for the last entry
+    const duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/React.createElement("span", {
+      className: css.duplicate,
       title: "Duplicate package"
-    }, "D"), /*#__PURE__*/React.createElement("span", {
-      className: css.packageNameText
-    }, packageName));
-    return /*#__PURE__*/React.createElement(HoverCard, {
-      label: label,
-      key: packageName,
-      className: css.packageName
-    }, /*#__PURE__*/React.createElement(PackageCard, {
+    }, "D");
+    return /*#__PURE__*/React.createElement(Popover, {
+      className: css.packageName,
+      icon: duplicateFlag,
+      label: packageName
+    }, /*#__PURE__*/React.createElement(PackagePopoverContent, {
       name: packageName,
       path: path,
       fullName: item.label,