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

package/src/components/bundle-assets/bundle-assets.jsx

@@ -2,14 +2,19 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { get, map } from 'lodash';
-import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, FILE_TYPE_LABELS } from '@bundle-stats/utils';
+import {
+  ASSET_ENTRY_TYPE,
+  ASSET_FILE_TYPE,
+  ASSET_FILTERS,
+  FILE_TYPE_LABELS,
+} from '@bundle-stats/utils';
 
 import config from '../../config.json';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../../ui/icon';
 import { FileName } from '../../ui/file-name';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { Tooltip } from '../../ui/tooltip';
 import { Filters } from '../../ui/filters';
 import { SortDropdown } from '../../ui/sort-dropdown';
@@ -71,47 +76,51 @@ TooltipNotPredictive.propTypes = {
   runs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
 };
 
-const getRenderRowHeader = ({ labels, CustomComponentLink, chunks }) => (item) => {
-  const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = item;
+const getRenderRowHeader =
+  ({ labels, CustomComponentLink, chunks }) =>
+  (item) => {
+    const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = item;
 
-  return (
-    <Popover
-      label={<FileName name={label} />}
-      icon={
-        <div className={css.assetInfoFlags}>
-          {isNotPredictive && (
-            <Tooltip className={css.notPredictive} title={<TooltipNotPredictive runs={runs} />}>
-              <Icon className={css.notPredictiveIcon} glyph="warning" />
-            </Tooltip>
-          )}
-          {isChunk && (
-            <span title="Chunk" className={css.flagChunk}>
-              c
-            </span>
-          )}
-          {isEntry && (
-            <span title="Entrypoint" className={css.flagEntry}>
-              e
-            </span>
-          )}
-          {isInitial && (
-            <span title="Initial" className={css.flagInitial}>
-              i
-            </span>
-          )}
-        </div>
-      }
-    >
-      <AssetInfo
-        className={css.assetInfo}
-        item={item}
-        labels={labels}
-        chunks={chunks}
-        CustomComponentLink={CustomComponentLink}
-      />
-    </Popover>
-  );
-};
+    return (
+      <HoverCard
+        label={
+          <FlexStack space="xxxsmall" className={css.assetName}>
+            <div className={css.assetInfoFlags}>
+              {isNotPredictive && (
+                <Tooltip className={css.notPredictive} title={<TooltipNotPredictive runs={runs} />}>
+                  <Icon className={css.notPredictiveIcon} glyph="warning" />
+                </Tooltip>
+              )}
+              {isChunk && (
+                <span title="Chunk" className={css.flagChunk}>
+                  c
+                </span>
+              )}
+              {isEntry && (
+                <span title="Entrypoint" className={css.flagEntry}>
+                  e
+                </span>
+              )}
+              {isInitial && (
+                <span title="Initial" className={css.flagInitial}>
+                  i
+                </span>
+              )}
+            </div>
+            <FileName name={label} />
+          </FlexStack>
+        }
+      >
+        <AssetInfo
+          className={css.assetInfo}
+          item={item}
+          labels={labels}
+          chunks={chunks}
+          CustomComponentLink={CustomComponentLink}
+        />
+      </HoverCard>
+    );
+  };
 
 export const BundleAssets = (props) => {
   const {

package/src/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/src/components/bundle-modules/bundle-modules.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { get, isEmpty, map } from 'lodash';
@@ -18,7 +18,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 { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
@@ -30,31 +30,18 @@ import css from './bundle-modules.module.css';
 
 const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
   const chunkIds = map(chunks, 'id');
-
-  const [showPopopver, setPopover] = useState(false);
-  const handleOnMouseEnter = useCallback(() => setPopover(true), [showPopopver]);
   const content = <FileName name={row.label} />;
 
   return (
-    <div onMouseEnter={handleOnMouseEnter}>
-      {!showPopopver ?
-        content
-        : (
-        <Popover ariaLabel="View module info" label={content}>
-          {({ popoverToggle }) => (
-            <ModuleInfo
-              className={css.namePopover}
-              item={row}
-              chunks={chunks}
-              chunkIds={chunkIds}
-              labels={labels}
-              customComponentLink={CustomComponentLink}
-              onClick={popoverToggle}
-            />
-          )}
-        </Popover>
-      )}
-    </div>
+    <HoverCard label={content}>
+      <ModuleInfo
+        item={row}
+        chunks={chunks}
+        chunkIds={chunkIds}
+        labels={labels}
+        customComponentLink={CustomComponentLink}
+      />
+    </HoverCard>
   );
 };
 
@@ -76,9 +63,17 @@ RowHeader.defaultProps = {
   chunks: [],
 };
 
-const getRenderRowHeader = ({ labels, chunks, CustomComponentLink }) => (row) => (
-  <RowHeader row={row} chunks={chunks} labels={labels} CustomComponentLink={CustomComponentLink} />
-);
+const getRenderRowHeader =
+  ({ labels, chunks, CustomComponentLink }) =>
+  (row) =>
+    (
+      <RowHeader
+        row={row}
+        chunks={chunks}
+        labels={labels}
+        CustomComponentLink={CustomComponentLink}
+      />
+    );
 
 export const BundleModules = ({
   className,
@@ -240,10 +235,12 @@ BundleModules.propTypes = {
   jobs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
 
   /** Chunks data */
-  chunks: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-  })).isRequired,
+  chunks: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string,
+    }),
+  ).isRequired,
 
   /** total row count */
   totalRowCount: PropTypes.number,

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

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

package/src/components/bundle-packages/bundle-packages.jsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
@@ -15,7 +15,7 @@ import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
 import { Toolbar } from '../../ui/toolbar';
 import { FileName } from '../../ui/file-name';
@@ -26,28 +26,29 @@ import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-packages.module.css';
 
-const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponentLink }) => {
-  const normalizedPackagePath = path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
+const PackageCard = ({ name, fullName, path, duplicate, CustomComponentLink }) => {
+  const normalizedPackagePath =
+    path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
   const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
 
   return (
-    <Stack space="xxsmall" className={css.packagePopover}>
+    <Stack space="xxsmall" className={css.packageCard}>
       <Stack space="xxxsmall">
-        <h3 className={css.packagePopoverTitle}>
+        <h3 className={css.packageCardTitle}>
           {normalizedName}
           {packageId && (
-            <span className={css.packagePopoverTitleIndex}>
+            <span className={css.packageCardTitleIndex}>
               {`${PACKAGE_ID_SEPARATOR}${packageId}`}
             </span>
           )}
         </h3>
-        <p className={css.packagePopoverPath}>
-          <FileName className={css.packagePopoverPathValue} name={normalizedPackagePath} />
+        <p className={css.packageCardPath}>
+          <FileName className={css.packageCardPathValue} name={normalizedPackagePath} />
         </p>
       </Stack>
 
-      <ul className={css.packagePopoverList}>
-        <li className={css.packagePopoverItem}>
+      <ul className={css.packageCardList}>
+        <li className={css.packageCardItem}>
           <a
             href={`https://www.npmjs.com/package/${normalizedName}`}
             target="_blank"
@@ -56,7 +57,7 @@ const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponen
             npmjs.com
           </a>
         </li>
-        <li className={css.packagePopoverItem}>
+        <li className={css.packageCardItem}>
           <a
             href={`https://bundlephobia.com/result?p=${normalizedName}`}
             target="_blank"
@@ -67,7 +68,7 @@ const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponen
         </li>
       </ul>
 
-      <Stack space="xxxsmall" className={css.packagePopover.actions}>
+      <Stack space="xxxsmall" className={css.packageCardActions}>
         {duplicate && (
           <div>
             <CustomComponentLink {...getBundlePackagesByNameComponentLink(normalizedName)}>
@@ -84,7 +85,7 @@ const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponen
   );
 };
 
-PackagePopoverContent.propTypes = {
+PackageCard.propTypes = {
   name: PropTypes.string.isRequired,
   path: PropTypes.string,
   fullName: PropTypes.string.isRequired,
@@ -92,7 +93,7 @@ PackagePopoverContent.propTypes = {
   CustomComponentLink: PropTypes.elementType.isRequired,
 };
 
-PackagePopoverContent.defaultProps = {
+PackageCard.defaultProps = {
   path: '',
 };
 
@@ -101,28 +102,33 @@ const PackageRowHeader = ({ item, CustomComponentLink }) => {
   const { path } = item.runs[0] || {};
 
   return (
-    <span className={css.packageNames}>
+    <FlexStack space="xxxsmall" className={css.packageNames}>
       {packageNames.map((packageName, index) => {
-        // Render duplicate flag only for the last entry
-        const duplicateFlag = index === packageNames.length - 1 && item.duplicate && (
-          <span className={css.duplicate} title="Duplicate package">
-            D
-          </span>
+        const label = (
+          <FlexStack space="xxxsmall" className={css.packageNameLabel}>
+            {/* Render duplicate flag only for the last entry */}
+            {index === packageNames.length - 1 && item.duplicate && (
+              <span className={css.packageNameDuplicate} title="Duplicate package">
+                D
+              </span>
+            )}
+            <span className={css.packageNameText}>{packageName}</span>
+          </FlexStack>
         );
 
         return (
-          <Popover className={css.packageName} icon={duplicateFlag} label={packageName}>
-            <PackagePopoverContent
+          <HoverCard label={label} key={packageName} className={css.packageName}>
+            <PackageCard
               name={packageName}
               path={path}
               fullName={item.label}
               duplicate={item.duplicate}
               CustomComponentLink={CustomComponentLink}
             />
-          </Popover>
+          </HoverCard>
         );
       })}
-    </span>
+    </FlexStack>
   );
 };
 

package/src/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/src/components/metrics-table-options/metrics-table-options.jsx

@@ -5,7 +5,7 @@ import I18N from '../../i18n';
 import { Dropdown } from '../../ui/dropdown';
 
 export const MetricsTableOptions = (props) => {
-  const { className,  handleViewAll, handleResetFilters, ...restProps } = props;
+  const { className, handleViewAll, handleResetFilters, ...restProps } = props;
 
   return (
     <Dropdown className={className} glyph="menu" {...restProps}>

package/src/components/metrics-table-title/metrics-table-title.jsx

@@ -5,7 +5,8 @@ import cx from 'classnames';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Popover } from '../../ui/popover';
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
 import css from './metrics-table-title.module.css';
 
 export const MetricsTableTitle = (props) => {
@@ -18,7 +19,7 @@ export const MetricsTableTitle = (props) => {
         <span>{title}</span>
         {info && <span className={css.info}>{info}</span>}
         {(popoverInfo || popoverHref) && (
-          <Popover icon="help">
+          <HoverCard label={<Icon glyph="help" />}>
             <Stack space="xxxsmall">
               {popoverInfo && <p>{popoverInfo}</p>}
               {popoverHref && (
@@ -29,7 +30,7 @@ export const MetricsTableTitle = (props) => {
                 </p>
               )}
             </Stack>
-          </Popover>
+          </HoverCard>
         )}
       </FlexStack>
     </Stack>

package/src/components/summary-item/summary-item.jsx

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
-import { Popover } from '../../ui/popover';
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
 import { Skeleton } from '../../ui/skeleton';
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
@@ -11,32 +12,26 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
-const MetricInfoPopover = ({ description, url }) => {
-  // Workaround cases where the parent is a link
-  const readMoreOnClick = () => {
-    window.open(url);
-  };
-
-  return (
-    <Stack space="xxxsmall">
-      <p>{description}</p>
-      {url && (
-        <p>
-          <button type="button" className={css.readMoreBtn} onClick={readMoreOnClick}>
-            Read more
-          </button>
-        </p>
-      )}
-    </Stack>
-  );
-};
-
-MetricInfoPopover.propTypes = {
+const MetricDescriptionCard = ({ description, url }) => (
+  <Stack space="xxsmall">
+    <p>{description}</p>
+
+    {url && (
+      <p>
+        <a href={url} target="_blank" rel="noopener noreferrer">
+          Read more
+        </a>
+      </p>
+    )}
+  </Stack>
+);
+
+MetricDescriptionCard.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string,
 };
 
-MetricInfoPopover.defaultProps = {
+MetricDescriptionCard.defaultProps = {
   url: '',
 };
 
@@ -65,9 +60,9 @@ export const SummaryItem = ({
         <span>{metric.label}</span>
 
         {showMetricDescriptionTooltip && (
-          <Popover className={css.icon} icon="help">
-            <MetricInfoPopover {...metric} />
-          </Popover>
+          <HoverCard className={css.icon} label={<Icon glyph="help" />}>
+            <MetricDescriptionCard {...metric} />
+          </HoverCard>
         )}
       </FlexStack>
 

package/src/components/total-size-type-title/total-size-type-title.jsx

@@ -1,31 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames'
+import cx from 'classnames';
 
 import config from '../../config.json';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Popover } from '../../ui/popover';
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
 import css from './total-size-type-title.module.css';
 
 export const TotalSizeTypeTitle = ({ className }) => (
   <FlexStack space="xxxsmall" className={cx(css.title, className)}>
     <span>{I18N.ASSET_TOTALS}</span>
-    <Popover icon="help">
+    <HoverCard label={<Icon glyph="help" />}>
       <Stack space="xxxsmall">
         <p>{I18N.ASSET_TOTALS_INFO}</p>
         <p>
-          <a
-            href={config.documentation.assets}
-            target="_blank"
-            rel="noreferrer"
-          >
+          <a href={config.documentation.assets} target="_blank" rel="noreferrer">
             {I18N.READ_MORE}
           </a>
         </p>
       </Stack>
-    </Popover>
+    </HoverCard>
   </FlexStack>
 );
 

package/src/ui/dropdown/dropdown.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Menu, MenuItem, MenuButton, useMenuState } from 'reakit/Menu';
+import * as BaseDropdownMenu from '@radix-ui/react-dropdown-menu';
 
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../icon';
@@ -11,29 +11,28 @@ export const Dropdown = (props) => {
   const { className, label, ariaLabel, glyph, activeLabel, children } = props;
   const rootClassName = cx(css.root, activeLabel && css.activeLabel, className);
 
-  const menu = useMenuState({baseId: process.env.NODE_ENV === 'test' && 'id-test', modal: true });
-
   return (
-    <>
-      <MenuButton {...menu} className={rootClassName} tabIndex={null}>
+    <BaseDropdownMenu.Root>
+      <BaseDropdownMenu.Trigger className={rootClassName}>
         <FlexStack space="xxxsmall" className={css.label}>
           {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
           {label}
         </FlexStack>
-      </MenuButton>
-      <Menu {...menu} aria-label={ariaLabel || label} className={css.dropdown}>
+      </BaseDropdownMenu.Trigger>
+      <BaseDropdownMenu.Content
+        className={css.dropdown}
+        aria-label={ariaLabel || label}
+        align="start"
+      >
         {typeof children === 'function'
-          ?
-            children({
-              MenuItem,
-              menu,
+          ? children({
+              MenuItem: BaseDropdownMenu.Item,
               menuItemClassName: css.menuItem,
               menuItemActiveClassName: css.menuItemActive,
             })
-          : children
-        }
-      </Menu>
-    </>
+          : children}
+      </BaseDropdownMenu.Content>
+    </BaseDropdownMenu.Root>
   );
 };
 
@@ -58,9 +57,6 @@ Dropdown.propTypes = {
   /** Icon glyph */
   glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** Dropdown open state */
-  open: PropTypes.bool.isRequired,
-
   /** Active label flag */
   activeLabel: PropTypes.bool,