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

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.4-alpha.0](https://github.com/relative-ci/bundle-stats/compare/v3.2.3...v3.2.4-alpha.0) (2022-01-13)
+
+
+### Bug Fixes
+
+* **ui:** Icon - center by default ([889753c](https://github.com/relative-ci/bundle-stats/commit/889753c0feb236130a2707fbc352310ef07c7740))
+* **ui:** Remove popover component ([e07d7a9](https://github.com/relative-ci/bundle-stats/commit/e07d7a91640f67b4f99320e1af92f1092a6e610d))
+
+
+### Features
+
+* **ui:** Add hover card ([e27169e](https://github.com/relative-ci/bundle-stats/commit/e27169e4dd1e313f6903bd70f5ffc1e1cc147f9a))
+
+
+
+
+
 ## [3.2.3](https://github.com/relative-ci/bundle-stats/compare/v3.2.2...v3.2.3) (2022-01-10)
 
 **Note:** Version bump only for package @bundle-stats/ui

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

@@ -29,7 +29,7 @@ var _icon = require("../../ui/icon");
 
 var _fileName = require("../../ui/file-name");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
 
 var _tooltip = require("../../ui/tooltip");
 
@@ -137,11 +137,11 @@ var getRenderRowHeader = function getRenderRowHeader(_ref6) {
         isChunk = item.isChunk,
         isEntry = item.isEntry,
         isInitial = item.isInitial;
-    return /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-      label: /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-        name: label
-      }),
-      icon: /*#__PURE__*/_react["default"].createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+      label: /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+        space: "xxxsmall",
+        className: _bundleAssetsModule["default"].assetName
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: _bundleAssetsModule["default"].assetInfoFlags
       }, isNotPredictive && /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
         className: _bundleAssetsModule["default"].notPredictive,
@@ -160,7 +160,9 @@ var getRenderRowHeader = function getRenderRowHeader(_ref6) {
       }, "e"), isInitial && /*#__PURE__*/_react["default"].createElement("span", {
         title: "Initial",
         className: _bundleAssetsModule["default"].flagInitial
-      }, "i"))
+      }, "i")), /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
+        name: label
+      }))
     }, /*#__PURE__*/_react["default"].createElement(_assetInfo.AssetInfo, {
       className: _bundleAssetsModule["default"].assetInfo,
       item: item,

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

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

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

@@ -35,7 +35,7 @@ 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");
 
@@ -67,18 +67,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
-
 var RowHeader = function RowHeader(_ref) {
   var row = _ref.row,
       chunks = _ref.chunks,
@@ -86,35 +74,18 @@ var RowHeader = function RowHeader(_ref) {
       CustomComponentLink = _ref.CustomComponentLink;
   var chunkIds = (0, _map2["default"])(chunks, 'id');
 
-  var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showPopopver = _useState2[0],
-      setPopover = _useState2[1];
-
-  var handleOnMouseEnter = (0, _react.useCallback)(function () {
-    return setPopover(true);
-  }, [showPopopver]);
-
   var content = /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
     name: row.label
   });
 
-  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, {
+    item: row,
+    chunks: chunks,
+    chunkIds: chunkIds,
+    labels: labels,
+    customComponentLink: CustomComponentLink
   }));
 };
 
@@ -133,10 +104,10 @@ RowHeader.defaultProps = {
   chunks: []
 };
 
-var getRenderRowHeader = function getRenderRowHeader(_ref3) {
-  var labels = _ref3.labels,
-      chunks = _ref3.chunks,
-      CustomComponentLink = _ref3.CustomComponentLink;
+var getRenderRowHeader = function getRenderRowHeader(_ref2) {
+  var labels = _ref2.labels,
+      chunks = _ref2.chunks,
+      CustomComponentLink = _ref2.CustomComponentLink;
   return function (row) {
     return /*#__PURE__*/_react["default"].createElement(RowHeader, {
       row: row,
@@ -147,25 +118,25 @@ var getRenderRowHeader = function getRenderRowHeader(_ref3) {
   };
 };
 
-var BundleModules = function BundleModules(_ref4) {
+var BundleModules = function BundleModules(_ref3) {
   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 = _ref3.className,
+      jobs = _ref3.jobs,
+      items = _ref3.items,
+      chunks = _ref3.chunks,
+      totalRowCount = _ref3.totalRowCount,
+      updateFilters = _ref3.updateFilters,
+      resetFilters = _ref3.resetFilters,
+      resetAllFilters = _ref3.resetAllFilters,
+      filters = _ref3.filters,
+      sortFields = _ref3.sortFields,
+      sort = _ref3.sort,
+      updateSort = _ref3.updateSort,
+      search = _ref3.search,
+      updateSearch = _ref3.updateSearch,
+      hasActiveFilters = _ref3.hasActiveFilters,
+      CustomComponentLink = _ref3.customComponentLink;
   var rootClassName = (0, _classnames["default"])(_bundleModulesModule["default"].root, className);
   var labels = (0, _react.useMemo)(function () {
     return (0, _map2["default"])(jobs, 'label');
@@ -199,9 +170,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, _ref4) {
+    var id = _ref4.id,
+        name = _ref4.name;
     return _objectSpread(_objectSpread({}, chunkFilters), {}, _defineProperty({}, id, {
       label: name,
       defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_CHUNK, ".").concat(id), true)
@@ -219,8 +190,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(_ref6) {
+      var actionClassName = _ref6.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
         space: "xxsmall",
         className: (0, _classnames["default"])(_bundleModulesModule["default"].dropdown, actionClassName)

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

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

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

@@ -27,7 +27,7 @@ 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");
 
@@ -69,7 +69,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var PackagePopoverContent = function PackagePopoverContent(_ref) {
+var PackageCard = function PackageCard(_ref) {
   var name = _ref.name,
       fullName = _ref.fullName,
       path = _ref.path,
@@ -84,46 +84,46 @@ var PackagePopoverContent = function PackagePopoverContent(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxsmall",
-    className: _bundlePackagesModule["default"].packagePopover
+    className: _bundlePackagesModule["default"].packageCard
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("h3", {
-    className: _bundlePackagesModule["default"].packagePopoverTitle
+    className: _bundlePackagesModule["default"].packageCardTitle
   }, normalizedName, packageId && /*#__PURE__*/_react["default"].createElement("span", {
-    className: _bundlePackagesModule["default"].packagePopoverTitleIndex
+    className: _bundlePackagesModule["default"].packageCardTitleIndex
   }, "".concat(_utils.PACKAGE_ID_SEPARATOR).concat(packageId))), /*#__PURE__*/_react["default"].createElement("p", {
-    className: _bundlePackagesModule["default"].packagePopoverPath
+    className: _bundlePackagesModule["default"].packageCardPath
   }, /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-    className: _bundlePackagesModule["default"].packagePopoverPathValue,
+    className: _bundlePackagesModule["default"].packageCardPathValue,
     name: normalizedPackagePath
   }))), /*#__PURE__*/_react["default"].createElement("ul", {
-    className: _bundlePackagesModule["default"].packagePopoverList
+    className: _bundlePackagesModule["default"].packageCardList
   }, /*#__PURE__*/_react["default"].createElement("li", {
-    className: _bundlePackagesModule["default"].packagePopoverItem
+    className: _bundlePackagesModule["default"].packageCardItem
   }, /*#__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"].packageCardItem
   }, /*#__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"].packageCardActions
   }, 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 = {
+PackageCard.propTypes = {
   name: _propTypes["default"].string.isRequired,
   path: _propTypes["default"].string,
   fullName: _propTypes["default"].string.isRequired,
   duplicate: _propTypes["default"].bool.isRequired,
   CustomComponentLink: _propTypes["default"].elementType.isRequired
 };
-PackagePopoverContent.defaultProps = {
+PackageCard.defaultProps = {
   path: ''
 };
 
@@ -135,20 +135,25 @@ var PackageRowHeader = function PackageRowHeader(_ref2) {
   var _ref3 = item.runs[0] || {},
       path = _ref3.path;
 
-  return /*#__PURE__*/_react["default"].createElement("span", {
+  return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxxsmall",
     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,
+    var label = /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+      space: "xxxsmall",
+      className: _bundlePackagesModule["default"].packageNameLabel
+    }, index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundlePackagesModule["default"].packageNameDuplicate,
       title: "Duplicate package"
-    }, "D");
-
-    return /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-      className: _bundlePackagesModule["default"].packageName,
-      icon: duplicateFlag,
-      label: packageName
-    }, /*#__PURE__*/_react["default"].createElement(PackagePopoverContent, {
+    }, "D"), /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundlePackagesModule["default"].packageNameText
+    }, packageName));
+
+    return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+      label: label,
+      key: packageName,
+      className: _bundlePackagesModule["default"].packageName
+    }, /*#__PURE__*/_react["default"].createElement(PackageCard, {
       name: packageName,
       path: path,
       fullName: item.label,

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

@@ -12,20 +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);
+.packageNames {
+  align-items: center;
 }
 
 .packageName {
@@ -38,27 +26,56 @@
 
 .packageName + .packageName::before {
   display: inline-block;
-  margin: 0 var(--space-xxxsmall);
+  margin: 0 var(--space-xxxsmall) 0 0;
   content: '/';
   color: var(--color-text-ultra-light);
 }
 
-.packagePopover {
-  min-width: 320px;
+.packageNameLabel {
+  display: inline-flex;
+  align-items: center;
+}
+
+.packageNameDuplicate {
+  margin-right: var(--space-xxxsmall);
+  display: inline-block;
+  width: var(--space-xsmall);
+  height: var(--space-xsmall);
+  font-size: 8px;
+  font-weight: bold;
+  line-height: var(--space-xsmall);
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+
+  background: var(--color-danger);
+  color: var(--color-light);
+}
+
+.packageName:hover,
+.packageName:active,
+.packageName:focus {
+  text-decoration: none !important;
+}
+
+.packageName:hover .packageNameText,
+.packageName:active .packageNameText,
+.packageName:focus .packageNameText {
+  text-decoration: underline !important;
 }
 
-.packagePopoverTitleIndex {
+.packageCardTitleIndex {
   color: var(--color-text-light);
   font-weight: normal;
 }
 
-.packagePopoverPathValue {
+.packageCardPathValue {
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);
   font-family: var(--font-family-monospace);
 }
 
-.packagePopoverList {
+.packageCardList {
   padding: 0;
   list-style: inside;
 }

package/lib/components/metrics-table-title/metrics-table-title.js

@@ -17,7 +17,9 @@ var _flexStack = require("../../layout/flex-stack");
 
 var _stack = require("../../layout/stack");
 
-var _popover = require("../../ui/popover");
+var _icon = require("../../ui/icon");
+
+var _hoverCard = require("../../ui/hover-card");
 
 var _metricsTableTitleModule = _interopRequireDefault(require("./metrics-table-title.module.css"));
 
@@ -37,8 +39,10 @@ var MetricsTableTitle = function MetricsTableTitle(props) {
     space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("span", null, title), info && /*#__PURE__*/_react["default"].createElement("span", {
     className: _metricsTableTitleModule["default"].info
-  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-    icon: "help"
+  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      glyph: "help"
+    })
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, popoverInfo && /*#__PURE__*/_react["default"].createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {

package/lib/components/summary-item/summary-item.js

@@ -13,7 +13,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _utils = require("@bundle-stats/utils");
 
-var _popover = require("../../ui/popover");
+var _icon = require("../../ui/icon");
+
+var _hoverCard = require("../../ui/hover-card");
 
 var _skeleton = require("../../ui/skeleton");
 
@@ -37,29 +39,23 @@ 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 MetricInfoPopover = function MetricInfoPopover(_ref) {
+var MetricDescriptionCard = function MetricDescriptionCard(_ref) {
   var description = _ref.description,
       url = _ref.url;
-
-  // Workaround cases where the parent is a link
-  var readMoreOnClick = function readMoreOnClick() {
-    window.open(url);
-  };
-
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-    space: "xxxsmall"
-  }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    className: _summaryItemModule["default"].readMoreBtn,
-    onClick: readMoreOnClick
+    space: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {
+    href: url,
+    target: "_blank",
+    rel: "noopener noreferrer"
   }, "Read more")));
 };
 
-MetricInfoPopover.propTypes = {
+MetricDescriptionCard.propTypes = {
   description: _propTypes["default"].string.isRequired,
   url: _propTypes["default"].string
 };
-MetricInfoPopover.defaultProps = {
+MetricDescriptionCard.defaultProps = {
   url: ''
 };
 
@@ -93,10 +89,12 @@ var SummaryItem = function SummaryItem(_ref2) {
     as: "h3",
     space: "xxxsmall",
     className: _summaryItemModule["default"].title
-  }, /*#__PURE__*/_react["default"].createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
+  }, /*#__PURE__*/_react["default"].createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     className: _summaryItemModule["default"].icon,
-    icon: "help"
-  }, /*#__PURE__*/_react["default"].createElement(MetricInfoPopover, metric))), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
+    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      glyph: "help"
+    })
+  }, /*#__PURE__*/_react["default"].createElement(MetricDescriptionCard, metric))), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].currentMetric,
     value: current,
     formatter: metric.formatter,

package/lib/components/total-size-type-title/total-size-type-title.js

@@ -19,7 +19,9 @@ var _flexStack = require("../../layout/flex-stack");
 
 var _stack = require("../../layout/stack");
 
-var _popover = require("../../ui/popover");
+var _icon = require("../../ui/icon");
+
+var _hoverCard = require("../../ui/hover-card");
 
 var _totalSizeTypeTitleModule = _interopRequireDefault(require("./total-size-type-title.module.css"));
 
@@ -30,8 +32,10 @@ var TotalSizeTypeTitle = function TotalSizeTypeTitle(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
     className: (0, _classnames["default"])(_totalSizeTypeTitleModule["default"].title, className)
-  }, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].ASSET_TOTALS), /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-    icon: "help"
+  }, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].ASSET_TOTALS), /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      glyph: "help"
+    })
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("p", null, _i18n["default"].ASSET_TOTALS_INFO), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {

package/lib/ui/dropdown/dropdown.js

@@ -1,5 +1,7 @@
 "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
 });
@@ -11,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Menu = require("reakit/Menu");
+var BaseDropdownMenu = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
 
 var _flexStack = require("../../layout/flex-stack");
 
@@ -19,9 +21,11 @@ var _icon = require("../icon");
 
 var _dropdownModule = _interopRequireDefault(require("./dropdown.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 _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 _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 Dropdown = function Dropdown(props) {
   var className = props.className,
@@ -31,25 +35,20 @@ var Dropdown = function Dropdown(props) {
       activeLabel = props.activeLabel,
       children = props.children;
   var rootClassName = (0, _classnames["default"])(_dropdownModule["default"].root, activeLabel && _dropdownModule["default"].activeLabel, className);
-  var menu = (0, _Menu.useMenuState)({
-    baseId: process.env.NODE_ENV === 'test' && 'id-test',
-    modal: true
-  });
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Menu.MenuButton, _extends({}, menu, {
-    className: rootClassName,
-    tabIndex: null
-  }), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+  return /*#__PURE__*/_react["default"].createElement(BaseDropdownMenu.Root, null, /*#__PURE__*/_react["default"].createElement(BaseDropdownMenu.Trigger, {
+    className: rootClassName
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
     className: _dropdownModule["default"].label
   }, glyph && /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     className: _dropdownModule["default"].labelIcon,
     glyph: glyph
-  }), label)), /*#__PURE__*/_react["default"].createElement(_Menu.Menu, _extends({}, menu, {
+  }), label)), /*#__PURE__*/_react["default"].createElement(BaseDropdownMenu.Content, {
+    className: _dropdownModule["default"].dropdown,
     "aria-label": ariaLabel || label,
-    className: _dropdownModule["default"].dropdown
-  }), typeof children === 'function' ? children({
-    MenuItem: _Menu.MenuItem,
-    menu: menu,
+    align: "start"
+  }, typeof children === 'function' ? children({
+    MenuItem: BaseDropdownMenu.Item,
     menuItemClassName: _dropdownModule["default"].menuItem,
     menuItemActiveClassName: _dropdownModule["default"].menuItemActive
   }) : children));
@@ -76,9 +75,6 @@ Dropdown.propTypes = {
   /** Icon glyph */
   glyph: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
 
-  /** Dropdown open state */
-  open: _propTypes["default"].bool.isRequired,
-
   /** Active label flag */
   activeLabel: _propTypes["default"].bool,