@bundle-stats/ui 3.2.8 → 3.2.9-beta.1

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

@@ -1,6 +1,6 @@
 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, { useCallback } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { PACKAGE_FILTERS, PACKAGES_SEPARATOR, PACKAGE_ID_SEPARATOR, getBundleModulesBySearch, getBundlePackagesByNameComponentLink } from '@bundle-stats/utils';
@@ -33,36 +33,36 @@ const PackagePopoverContent = _ref => {
   const normalizedPackagePath = path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
   const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
   return /*#__PURE__*/React.createElement(Stack, {
-    space: "xxsmall",
-    className: css.packagePopover
+    space: "xsmall",
+    className: css.packageHoverCard
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/React.createElement("h3", {
-    className: css.packagePopoverTitle
+    className: css.packageHoverCardTitle
   }, normalizedName, packageId && /*#__PURE__*/React.createElement("span", {
-    className: css.packagePopoverTitleIndex
+    className: css.packageHoverCardTitleIndex
   }, `${PACKAGE_ID_SEPARATOR}${packageId}`)), /*#__PURE__*/React.createElement("p", {
-    className: css.packagePopoverPath
+    className: css.packageHoverCardPath
   }, /*#__PURE__*/React.createElement(FileName, {
-    className: css.packagePopoverPathValue,
+    className: css.packageHoverCardPathValue,
     name: normalizedPackagePath
   }))), /*#__PURE__*/React.createElement("ul", {
-    className: css.packagePopoverList
+    className: css.packageHoverCardList
   }, /*#__PURE__*/React.createElement("li", {
-    className: css.packagePopoverItem
+    className: css.packageHoverCardItem
   }, /*#__PURE__*/React.createElement("a", {
     href: `https://www.npmjs.com/package/${normalizedName}`,
     target: "_blank",
     rel: "noreferrer"
   }, "npmjs.com")), /*#__PURE__*/React.createElement("li", {
-    className: css.packagePopoverItem
+    className: css.packageHoverCardItem
   }, /*#__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.packagePopover.actions
+    className: css.packageHoverCardActions
   }, 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")));
 };
 
@@ -77,43 +77,83 @@ PackagePopoverContent.defaultProps = {
   path: ''
 };
 
-const PackageRowHeader = _ref2 => {
+const PackageName = _ref2 => {
   let {
-    item,
+    packageName,
+    path,
+    showDuplicateFlag,
+    row,
     CustomComponentLink
   } = _ref2;
-  const packageNames = item.label.split(PACKAGES_SEPARATOR);
+  const [showHoverCard, setHoverCard] = useState(false);
+  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
+  const label = useMemo(() => /*#__PURE__*/React.createElement(React.Fragment, null, showDuplicateFlag && row.duplicate && /*#__PURE__*/React.createElement(Tag, {
+    className: css.packageNameTagDuplicate,
+    title: "Duplicate package",
+    kind: Tag.KINDS.DANGER,
+    size: Tag.SIZES.SMALL
+  }), /*#__PURE__*/React.createElement("span", {
+    className: css.packageNameLabel
+  }, packageName)), [packageName, showDuplicateFlag, row]);
+
+  if (!showHoverCard) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: css.packageName,
+      onMouseEnter: handleOnMouseEnter
+    }, label);
+  }
+
+  return /*#__PURE__*/React.createElement(HoverCard, {
+    className: css.packageName,
+    label: /*#__PURE__*/React.createElement("span", {
+      className: css.packageName
+    }, label)
+  }, /*#__PURE__*/React.createElement(PackagePopoverContent, {
+    name: packageName,
+    path: path,
+    fullName: row.label,
+    duplicate: row.duplicate,
+    CustomComponentLink: CustomComponentLink
+  }));
+};
+
+PackageName.propTypes = {
+  packageName: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  showDuplicateFlag: PropTypes.bool.isRequired,
+  row: PropTypes.shape({
+    label: PropTypes.string,
+    duplicate: PropTypes.bool,
+    runs: PropTypes.arrayOf(PropTypes.shape({
+      path: PropTypes.string
+    })).isRequired
+  }).isRequired,
+  CustomComponentLink: PropTypes.elementType.isRequired
+};
+
+const RowHeader = _ref3 => {
+  let {
+    row,
+    CustomComponentLink
+  } = _ref3;
+  const packageNames = row.label.split(PACKAGES_SEPARATOR);
   const {
     path
-  } = item.runs[0] || {};
+  } = row.runs[0] || {};
   return /*#__PURE__*/React.createElement("span", {
     className: css.packageNames
-  }, packageNames.map((packageName, index) => {
-    // Render duplicate flag only for the last entry
-    const duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/React.createElement(Tag, {
-      title: "Duplicate package",
-      kind: Tag.KINDS.DANGER,
-      size: Tag.SIZES.SMALL,
-      className: css.tagDuplicate
-    });
-    return /*#__PURE__*/React.createElement(HoverCard, {
-      className: css.packageName,
-      label: /*#__PURE__*/React.createElement(FlexStack, {
-        space: "xxxsmall",
-        className: css.packageNameLabel
-      }, duplicateFlag, /*#__PURE__*/React.createElement("span", null, packageName))
-    }, /*#__PURE__*/React.createElement(PackagePopoverContent, {
-      name: packageName,
-      path: path,
-      fullName: item.label,
-      duplicate: item.duplicate,
-      CustomComponentLink: CustomComponentLink
-    }));
-  }));
+  }, packageNames.map((packageName, index) => /*#__PURE__*/React.createElement(PackageName, {
+    packageName: packageName,
+    path: path // Render duplicate flag only for the last entry
+    ,
+    showDuplicateFlag: index === packageNames.length - 1,
+    row: row,
+    CustomComponentLink: CustomComponentLink
+  })));
 };
 
-PackageRowHeader.propTypes = {
-  item: PropTypes.shape({
+RowHeader.propTypes = {
+  row: PropTypes.shape({
     label: PropTypes.string,
     duplicate: PropTypes.bool,
     runs: PropTypes.arrayOf(PropTypes.shape({
@@ -146,18 +186,18 @@ export const BundlePackages = props => {
     handleResetFilters: resetFilters,
     handleViewAll: resetAllFilters
   });
-  const renderRowHeader = useCallback(item => /*#__PURE__*/React.createElement(PackageRowHeader, {
-    item: item,
+  const renderRowHeader = useCallback(row => /*#__PURE__*/React.createElement(RowHeader, {
+    row: row,
     CustomComponentLink: CustomComponentLink
   }), [CustomComponentLink]);
   return /*#__PURE__*/React.createElement("section", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: _ref3 => {
+    renderActions: _ref4 => {
       let {
         actionClassName
-      } = _ref3;
+      } = _ref4;
       return /*#__PURE__*/React.createElement(FlexStack, {
         space: "xxsmall",
         className: cx(css.dropdown, actionClassName)

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

@@ -12,15 +12,8 @@
   margin-right: -1px; /** collapse border */
 }
 
-.tagDuplicate {
-  margin-right: var(--space-xxxsmall);
-}
-
-.tagDuplicate::before {
-  content: 'd';
-}
-
 .packageName {
+  display: inline-block;
   color: var(--color-text-light);
 }
 
@@ -35,26 +28,33 @@
   color: var(--color-text-ultra-light);
 }
 
+.packageNameTagDuplicate {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: middle;
+}
+
 .packageNameLabel {
-  align-items: center;
+  vertical-align: middle;
 }
 
-.packagePopover {
-  min-width: 320px;
+.packageNameTagDuplicate::before {
+  content: 'd';
 }
 
-.packagePopoverTitleIndex {
+
+.packageHoverCardTitleIndex {
   color: var(--color-text-light);
   font-weight: normal;
 }
 
-.packagePopoverPathValue {
+.packageHoverCardPathValue {
+  width: 100%;
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);
   font-family: var(--font-family-monospace);
 }
 
-.packagePopoverList {
+.packageHoverCardList {
   padding: 0;
   list-style: inside;
 }

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

@@ -1,6 +1,9 @@
 import _sum from "lodash/sum";
 import _isEmpty from "lodash/isEmpty";
 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 PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -85,47 +88,60 @@ const getHeaderRows = (runs, items, showHeaderSum, title) => [{
   cells: runs.map(getHeaderTotalCells(items)).flat()
 }] : [])];
 
-const generateRowCells = (item, index, items) => {
-  const isBaseline = index === items.length - 1; // eslint-disable-next-line react/destructuring-assignment
-
-  if (!item || typeof item.value === 'undefined') {
-    return ['-', ...(!isBaseline ? [''] : [])];
-  }
+const MetricsTableRow = _ref => {
+  let {
+    item,
+    renderRowHeader
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Table.Tr, {
+    className: cx(!item.changed && styles.unchanged)
+  }, /*#__PURE__*/React.createElement(Table.Th, {
+    className: styles.metricName
+  }, renderRowHeader(item)), item.runs.map((run, index) => {
+    const isBaseline = index === item.runs.length - 1;
+    const valueClassName = cx(styles.value, !isBaseline && styles.current); // Empty cells if no value
 
-  const {
-    displayValue,
-    deltaPercentage,
-    displayDeltaPercentage,
-    deltaType
-  } = item;
-  const cells = [/*#__PURE__*/React.createElement(Metric, {
-    value: displayValue
-  })];
+    if (!run || typeof run.value === 'undefined') {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Table.Td, {
+        className: valueClassName
+      }, "-"), !isBaseline && /*#__PURE__*/React.createElement(Table.Td, {
+        className: styles.delta
+      }));
+    }
 
-  if (!isBaseline) {
-    cells.push(typeof deltaPercentage === 'number' && /*#__PURE__*/React.createElement(Delta, {
+    const {
+      displayValue,
+      deltaPercentage,
+      displayDeltaPercentage,
+      deltaType
+    } = run;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Table.Td, {
+      className: valueClassName
+    }, /*#__PURE__*/React.createElement(Metric, {
+      value: displayValue
+    })), !isBaseline && typeof deltaPercentage === 'number' && /*#__PURE__*/React.createElement(Table.Td, {
+      className: styles.delta
+    }, /*#__PURE__*/React.createElement(Delta, {
       displayValue: displayDeltaPercentage,
       deltaType: deltaType
-    }));
-  }
-
-  return cells;
+    })));
+  }));
 };
 
-const getRows = (runs, items, renderRowHeader) => items.map((item, index) => {
-  const {
-    changed
-  } = item;
-  return {
-    key: (item == null ? void 0 : item.key) || index,
-    className: changed ? '' : styles.unchanged,
-    cells: [// Metric name
-    renderRowHeader(item), // Metric item values
-    ...item.runs.map(generateRowCells).flat()]
-  };
-});
-
-export const MetricsTable = _ref => {
+MetricsTableRow.propTypes = {
+  item: PropTypes.shape({
+    changed: PropTypes.bool,
+    runs: PropTypes.arrayOf(PropTypes.shape({
+      value: PropTypes.number,
+      displayValue: PropTypes.string,
+      deltaPercentage: PropTypes.number,
+      displayDeltaPercentage: PropTypes.string,
+      deltaType: PropTypes.string
+    }))
+  }).isRequired,
+  renderRowHeader: PropTypes.func.isRequired
+};
+export const MetricsTable = _ref2 => {
   let {
     className,
     renderRowHeader,
@@ -134,8 +150,9 @@ export const MetricsTable = _ref => {
     emptyMessage,
     showHeaderSum,
     headerRows,
-    title
-  } = _ref;
+    title,
+    ...restProps
+  } = _ref2;
   const {
     headers,
     columnClassNames
@@ -147,12 +164,11 @@ export const MetricsTable = _ref => {
       columnClassNames: headerColumns[0].cells.map(headerColumn => headerColumn.className)
     };
   }, [headerRows, runs, items, showHeaderSum, title]);
-  const rows = useMemo(() => getRows(runs, items, renderRowHeader), [runs, items, renderRowHeader]);
   const rootClassName = cx(styles.root, className, runs.length > 1 && styles.multipleRuns, showHeaderSum && styles.showHeaderSum);
-  return /*#__PURE__*/React.createElement(Table, {
+  return /*#__PURE__*/React.createElement(Table, _extends({
     className: rootClassName,
     compact: true
-  }, /*#__PURE__*/React.createElement(Table.THead, null, headers.map(headerRow => {
+  }, restProps), /*#__PURE__*/React.createElement(Table.THead, null, headers.map(headerRow => {
     const {
       cells,
       className: rowClassName
@@ -162,19 +178,11 @@ export const MetricsTable = _ref => {
     return /*#__PURE__*/React.createElement(Table.Tr, {
       className: rowClassName
     }, cells.map(header => /*#__PURE__*/React.createElement(Table.Th, header)));
-  })), /*#__PURE__*/React.createElement(Table.TBody, null, !_isEmpty(rows) ? rows.map(_ref2 => {
-    let {
-      key,
-      className: rowClassName,
-      cells
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(Table.Tr, {
-      key: key,
-      className: rowClassName
-    }, cells.map((cell, index) => /*#__PURE__*/React.createElement(Table.Td, {
-      className: columnClassNames[index]
-    }, cell)));
-  }) : /*#__PURE__*/React.createElement(Table.Tr, null, /*#__PURE__*/React.createElement(Table.Td, {
+  })), /*#__PURE__*/React.createElement(Table.TBody, null, !_isEmpty(items) ? items.map(item => /*#__PURE__*/React.createElement(MetricsTableRow, {
+    key: item.key,
+    item: item,
+    renderRowHeader: renderRowHeader
+  })) : /*#__PURE__*/React.createElement(Table.Tr, null, /*#__PURE__*/React.createElement(Table.Td, {
     className: styles.empty,
     colSpan: (columnClassNames == null ? void 0 : columnClassNames.length) || 1
   }, emptyMessage))));

package/lib-esm/components/metrics-table/metrics-table.module.css

@@ -1,11 +1,11 @@
-.jobName a {
+.root a {
   color: inherit;
   text-decoration: none;
 }
 
-.jobName a:hover,
-.jobName a:active,
-.jobName a:focus {
+.root a:hover,
+.root a:active,
+.root a:focus {
   color: var(--color-primary);
   text-decoration: underline;
 }
@@ -15,21 +15,31 @@
   width: 100%;
 }
 
-.value {
+.root .value {
   padding-left: var(--space-large);
   text-align: right;
+  vertical-align: baseline;
 }
 
-.delta {
+.root .delta {
   padding-left: 0;
   text-align: left;
   font-size: var(--size-xsmall);
+  vertical-align: baseline;
 }
 
-.value.current {
+.root tbody .delta {
+  line-height: 1.6rem; /* baseline alignment with the value */
+}
+
+.root .value.current {
   padding-right: var(--space-xxsmall);
 }
 
+.jobName {
+  white-space: nowrap;
+}
+
 /* columns overrides for showHeaderSum */
 .showHeaderSum .headerRowColumns .value,
 .showHeaderSum .headerRowColumns .delta {
@@ -45,6 +55,7 @@
 }
 
 /** rows */
+.multipleRuns .unchanged th,
 .multipleRuns .unchanged td {
   color: var(--color-text-light);
 }

package/lib-esm/components/module-info/module-info.js

@@ -22,7 +22,7 @@ export const ModuleInfo = props => {
     onClick
   } = props;
   return /*#__PURE__*/React.createElement(Stack, {
-    space: "small",
+    space: "xsmall",
     className: className
   }, item.runs.map((run, index) => {
     const TitleComponent = index !== 0 ? 'h4' : 'h3';
@@ -32,7 +32,7 @@ export const ModuleInfo = props => {
       key: key
     }, /*#__PURE__*/React.createElement(TitleComponent, null, labels[index]), index === 0 && !_isEmpty(run == null ? void 0 : run.chunkIds) && /*#__PURE__*/React.createElement("div", {
       className: css.chunks
-    }, /*#__PURE__*/React.createElement("strong", {
+    }, /*#__PURE__*/React.createElement("span", {
       className: css.chunksTitle
     }, "Chunks:"), run.chunkIds.map(chunkId => {
       const chunk = _find(chunks, {

package/lib-esm/hooks/search-params.js

@@ -6,9 +6,11 @@ const ACTION_SET_SEARCH = 'SET_SEARCH';
 const ACTION_RESET_DEFAULT = 'RESET_DEFAULT';
 const ACTION_RESET_ALL = 'RESET_ALL';
 const ACTION_SET = 'SET';
+const SEARCH_DEFAULT = '';
+const SEARCH_DEFAULT_PATTERN = /.*/;
 
 const getSearchPattern = search => {
-  let searchPattern = /.*/;
+  let searchPattern = SEARCH_DEFAULT_PATTERN;
 
   if (!search || !search.trim()) {
     return searchPattern;
@@ -39,49 +41,46 @@ const getSearchReducer = _ref => {
     switch (type) {
       case ACTION_SET_FILTERS:
         {
-          setParentState({
+          const newState = {
             filters: payload,
             search: state.search
-          });
-          return { ...state,
-            filters: payload
           };
+          setParentState(newState);
+          return newState;
         }
 
       case ACTION_SET_SEARCH:
         {
-          setParentState({
+          const newState = {
             filters: state.filters,
             search: payload
-          });
-          return { ...state,
-            search: payload,
+          };
+          setParentState(newState);
+          return { ...newState,
             searchPattern: getSearchPattern(payload)
           };
         }
 
       case ACTION_RESET_DEFAULT:
         {
-          setParentState({
-            filters: defaultFilters,
-            search: ''
-          });
-          return {
+          const newState = {
             filters: defaultFilters,
-            search: '',
+            search: SEARCH_DEFAULT
+          };
+          setParentState(newState);
+          return { ...newState,
             searchPattern: getSearchPattern()
           };
         }
 
       case ACTION_RESET_ALL:
         {
-          setParentState({
+          const newState = {
             filters: allEntriesFilters,
-            search: ''
-          });
-          return {
-            filters: allEntriesFilters,
-            search: '',
+            search: SEARCH_DEFAULT
+          };
+          setParentState(newState);
+          return { ...newState,
             searchPattern: getSearchPattern()
           };
         }
@@ -104,7 +103,7 @@ export const generateState = (filters, search) => ({
 });
 export const useSearchParams = _ref2 => {
   let {
-    search: parentSearch,
+    search: parentSearch = SEARCH_DEFAULT,
     filters: parentFilters,
     defaultFilters,
     allEntriesFilters,

package/lib-esm/ui/empty-set/empty-set.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Stack } from '../../layout/stack';
 import I18N from '../../i18n';
 import css from './empty-set.module.css';
 export const EmptySet = props => {
@@ -19,11 +20,10 @@ export const EmptySet = props => {
     type: "button",
     onClick: handleViewAll
   }, I18N.VIEW_ALL)] : [])];
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "xxsmall",
     className: css.root
-  }, /*#__PURE__*/React.createElement("p", {
-    className: css.text
-  }, message), filtered && actions.map((action, index) => /*#__PURE__*/React.createElement(React.Fragment, null, index > 0 && ' or ', action)));
+  }, /*#__PURE__*/React.createElement("p", null, message), filtered && actions.map((action, index) => /*#__PURE__*/React.createElement(React.Fragment, null, index > 0 && ' or ', action)));
 };
 EmptySet.propTypes = {
   resources: PropTypes.string.isRequired,

package/lib-esm/ui/empty-set/empty-set.module.css

@@ -1,5 +1,5 @@
-.text {
-  margin-bottom: 0;
+.root {
+  color: var(--color-text-light);
 }
 
 .action {

package/lib-esm/ui/hover-card/hover-card.js

@@ -21,6 +21,7 @@ const resolveComponent = (as, href) => {
 export const HoverCard = props => {
   const {
     className,
+    hoverCardClassName,
     href,
     as,
     label,
@@ -35,10 +36,6 @@ export const HoverCard = props => {
   }); // Fallback to span if no href
 
   const Component = resolveComponent(as, href);
-  const handleOnClose = useCallback(event => {
-    state.hide();
-    event.preventDefault();
-  }, [state]);
   return /*#__PURE__*/React.createElement("div", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(HovercardAnchor, {
@@ -48,7 +45,7 @@ export const HoverCard = props => {
     as: Component
   }, label), /*#__PURE__*/React.createElement(Hovercard, _extends({}, hoverCardProps, {
     state: state,
-    className: css.hoverCard,
+    className: cx(css.hoverCard, hoverCardClassName),
     style: {
       zIndex: 10000
     }
@@ -62,6 +59,9 @@ HoverCard.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string,
 
+  /** Adopted child class name for hover card */
+  hoverCardClassName: PropTypes.string,
+
   /** Anchor label */
   label: PropTypes.node,
 
@@ -76,6 +76,7 @@ HoverCard.propTypes = {
 };
 HoverCard.defaultProps = {
   className: '',
+  hoverCardClassName: '',
   label: '',
   as: '',
   href: ''

package/lib-esm/ui/hover-card/hover-card.module.css

@@ -8,20 +8,19 @@
   text-decoration: none;
 }
 
-a.anchor,
-buton.anchor {
-  cursor: pointer;
+.anchor:hover {
+  color: var(--color-primary);
 }
 
-a.anchor:hover,
-button.anchor:hover {
-  text-decoration: underline;
+.anchor:focus {
+  outline: 0;
 }
 
 .hoverCard {
   padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
-  max-width: 320px;
+  width: calc(100vw - 2 * var(--space-small));
+  max-width: 360px;
   outline: none;
   filter: drop-shadow(0 0 var(--space-xxsmall) var(--color-shadow));
   will-change: filter;