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

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

@@ -2,19 +2,14 @@ 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 { 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';
@@ -76,51 +71,47 @@ 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 (
-      <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>
-    );
-  };
+  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>
+  );
+};
 
 export const BundleAssets = (props) => {
   const {

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } 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 { 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';
@@ -30,18 +30,31 @@ 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 (
-    <HoverCard label={content}>
-      <ModuleInfo
-        item={row}
-        chunks={chunks}
-        chunkIds={chunkIds}
-        labels={labels}
-        customComponentLink={CustomComponentLink}
-      />
-    </HoverCard>
+    <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>
   );
 };
 
@@ -63,17 +76,9 @@ 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,
@@ -235,12 +240,10 @@ 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,3 +11,7 @@
   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 { 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';
@@ -26,29 +26,28 @@ import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-packages.module.css';
 
-const PackageCard = ({ name, fullName, path, duplicate, CustomComponentLink }) => {
-  const normalizedPackagePath =
-    path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
+const PackagePopoverContent = ({ 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.packageCard}>
+    <Stack space="xxsmall" className={css.packagePopover}>
       <Stack space="xxxsmall">
-        <h3 className={css.packageCardTitle}>
+        <h3 className={css.packagePopoverTitle}>
           {normalizedName}
           {packageId && (
-            <span className={css.packageCardTitleIndex}>
+            <span className={css.packagePopoverTitleIndex}>
               {`${PACKAGE_ID_SEPARATOR}${packageId}`}
             </span>
           )}
         </h3>
-        <p className={css.packageCardPath}>
-          <FileName className={css.packageCardPathValue} name={normalizedPackagePath} />
+        <p className={css.packagePopoverPath}>
+          <FileName className={css.packagePopoverPathValue} name={normalizedPackagePath} />
         </p>
       </Stack>
 
-      <ul className={css.packageCardList}>
-        <li className={css.packageCardItem}>
+      <ul className={css.packagePopoverList}>
+        <li className={css.packagePopoverItem}>
           <a
             href={`https://www.npmjs.com/package/${normalizedName}`}
             target="_blank"
@@ -57,7 +56,7 @@ const PackageCard = ({ name, fullName, path, duplicate, CustomComponentLink }) =
             npmjs.com
           </a>
         </li>
-        <li className={css.packageCardItem}>
+        <li className={css.packagePopoverItem}>
           <a
             href={`https://bundlephobia.com/result?p=${normalizedName}`}
             target="_blank"
@@ -68,7 +67,7 @@ const PackageCard = ({ name, fullName, path, duplicate, CustomComponentLink }) =
         </li>
       </ul>
 
-      <Stack space="xxxsmall" className={css.packageCardActions}>
+      <Stack space="xxxsmall" className={css.packagePopover.actions}>
         {duplicate && (
           <div>
             <CustomComponentLink {...getBundlePackagesByNameComponentLink(normalizedName)}>
@@ -85,7 +84,7 @@ const PackageCard = ({ name, fullName, path, duplicate, CustomComponentLink }) =
   );
 };
 
-PackageCard.propTypes = {
+PackagePopoverContent.propTypes = {
   name: PropTypes.string.isRequired,
   path: PropTypes.string,
   fullName: PropTypes.string.isRequired,
@@ -93,7 +92,7 @@ PackageCard.propTypes = {
   CustomComponentLink: PropTypes.elementType.isRequired,
 };
 
-PackageCard.defaultProps = {
+PackagePopoverContent.defaultProps = {
   path: '',
 };
 
@@ -102,33 +101,28 @@ const PackageRowHeader = ({ item, CustomComponentLink }) => {
   const { path } = item.runs[0] || {};
 
   return (
-    <FlexStack space="xxxsmall" className={css.packageNames}>
+    <span className={css.packageNames}>
       {packageNames.map((packageName, index) => {
-        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>
+        // 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>
         );
 
         return (
-          <HoverCard label={label} key={packageName} className={css.packageName}>
-            <PackageCard
+          <Popover className={css.packageName} icon={duplicateFlag} label={packageName}>
+            <PackagePopoverContent
               name={packageName}
               path={path}
               fullName={item.label}
               duplicate={item.duplicate}
               CustomComponentLink={CustomComponentLink}
             />
-          </HoverCard>
+          </Popover>
         );
       })}
-    </FlexStack>
+    </span>
   );
 };
 

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

@@ -12,8 +12,20 @@
   margin-right: -1px; /** collapse border */
 }
 
-.packageNames {
-  align-items: center;
+.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 {
@@ -26,56 +38,27 @@
 
 .packageName + .packageName::before {
   display: inline-block;
-  margin: 0 var(--space-xxxsmall) 0 0;
+  margin: 0 var(--space-xxxsmall);
   content: '/';
   color: var(--color-text-ultra-light);
 }
 
-.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;
+.packagePopover {
+  min-width: 320px;
 }
 
-.packageCardTitleIndex {
+.packagePopoverTitleIndex {
   color: var(--color-text-light);
   font-weight: normal;
 }
 
-.packageCardPathValue {
+.packagePopoverPathValue {
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);
   font-family: var(--font-family-monospace);
 }
 
-.packageCardList {
+.packagePopoverList {
   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,8 +5,7 @@ import cx from 'classnames';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
+import { Popover } from '../../ui/popover';
 import css from './metrics-table-title.module.css';
 
 export const MetricsTableTitle = (props) => {
@@ -19,7 +18,7 @@ export const MetricsTableTitle = (props) => {
         <span>{title}</span>
         {info && <span className={css.info}>{info}</span>}
         {(popoverInfo || popoverHref) && (
-          <HoverCard label={<Icon glyph="help" />}>
+          <Popover icon="help">
             <Stack space="xxxsmall">
               {popoverInfo && <p>{popoverInfo}</p>}
               {popoverHref && (
@@ -30,7 +29,7 @@ export const MetricsTableTitle = (props) => {
                 </p>
               )}
             </Stack>
-          </HoverCard>
+          </Popover>
         )}
       </FlexStack>
     </Stack>

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

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
-import { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
+import { Popover } from '../../ui/popover';
 import { Skeleton } from '../../ui/skeleton';
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
@@ -12,26 +11,32 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
-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 = {
+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 = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string,
 };
 
-MetricDescriptionCard.defaultProps = {
+MetricInfoPopover.defaultProps = {
   url: '',
 };
 
@@ -60,9 +65,9 @@ export const SummaryItem = ({
         <span>{metric.label}</span>
 
         {showMetricDescriptionTooltip && (
-          <HoverCard className={css.icon} label={<Icon glyph="help" />}>
-            <MetricDescriptionCard {...metric} />
-          </HoverCard>
+          <Popover className={css.icon} icon="help">
+            <MetricInfoPopover {...metric} />
+          </Popover>
         )}
       </FlexStack>
 

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

@@ -1,28 +1,31 @@
 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 { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
+import { Popover } from '../../ui/popover';
 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>
-    <HoverCard label={<Icon glyph="help" />}>
+    <Popover icon="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>
-    </HoverCard>
+    </Popover>
   </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 * as BaseDropdownMenu from '@radix-ui/react-dropdown-menu';
+import { Menu, MenuItem, MenuButton, useMenuState } from 'reakit/Menu';
 
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../icon';
@@ -11,28 +11,29 @@ 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 (
-    <BaseDropdownMenu.Root>
-      <BaseDropdownMenu.Trigger className={rootClassName}>
+    <>
+      <MenuButton {...menu} className={rootClassName} tabIndex={null}>
         <FlexStack space="xxxsmall" className={css.label}>
           {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
           {label}
         </FlexStack>
-      </BaseDropdownMenu.Trigger>
-      <BaseDropdownMenu.Content
-        className={css.dropdown}
-        aria-label={ariaLabel || label}
-        align="start"
-      >
+      </MenuButton>
+      <Menu {...menu} aria-label={ariaLabel || label} className={css.dropdown}>
         {typeof children === 'function'
-          ? children({
-              MenuItem: BaseDropdownMenu.Item,
+          ?
+            children({
+              MenuItem,
+              menu,
               menuItemClassName: css.menuItem,
               menuItemActiveClassName: css.menuItemActive,
             })
-          : children}
-      </BaseDropdownMenu.Content>
-    </BaseDropdownMenu.Root>
+          : children
+        }
+      </Menu>
+    </>
   );
 };
 
@@ -57,6 +58,9 @@ Dropdown.propTypes = {
   /** Icon glyph */
   glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
+  /** Dropdown open state */
+  open: PropTypes.bool.isRequired,
+
   /** Active label flag */
   activeLabel: PropTypes.bool,